<template>
  <div v-loading="downloadLoading" class="app-container">
    <el-button
      v-if="placeType != 2 && !checkRole([99])"
      type="primary"
      class="margin-left"
      @click="regularAll"
    >全部转为员工</el-button>
    <!--操作区-->
    <el-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.idNumber"
      placeholder="请输入身份证号"
      class="margin-left input"
    />
    <el-select
      v-if="checkRole([1, 2, 3, 4])"
      v-model="page.data.username"
      clearable
      filterable
      placeholder="请选择所属账号"
      class="margin-left input"
    >
      <el-option
        v-for="item in user_list"
        :key="item.id"
        :label="item.username"
        :value="item.username"
      />
    </el-select>
    <el-date-picker
      v-model="page.data.startTime"
      type="datetime"
      placeholder="有效期开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    />
    <el-date-picker
      v-model="page.data.endTime"
      type="datetime"
      placeholder="有效期结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    />
    <el-select
      v-if="checkRole([2, 3, 4])"
      v-model="page.data.provinceId"
      filterable
      clearable
      placeholder="请选择省份"
      class="margin-left input"
      @change="chooseProvinceSearch"
    >
      <el-option
        v-for="item in province_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      />
    </el-select>
    <el-select
      v-if="checkRole([2, 3, 4])"
      v-model="page.data.cityId"
      filterable
      clearable
      placeholder="请选择城市"
      class="margin-left input"
      @change="chooseCitySearch"
    >
      <el-option
        v-for="item in city_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      />
    </el-select>
    <el-select
      v-if="checkRole([2, 3, 4])"
      v-model="page.data.areaId"
      filterable
      clearable
      placeholder="请选择区域"
      class="margin-left input"
    >
      <el-option
        v-for="item in area_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      />
    </el-select>
    <span v-for="(item, index) in page.data.contents" :key="index">
      <el-date-picker
        v-if="item.customType === '日期'"
        v-model="item.customNameVal"
        type="datetime"
        class="margin-left input"
        :placeholder="item.prompt"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      />
      <el-time-picker
        v-if="item.customType === '时间'"
        v-model="item.customNameVal"
        class="margin-left input"
        :picker-options="{
          selectableRange: '00:00:00 - 23:59:59',
        }"
        :placeholder="item.prompt"
        value-format="HH:mm"
        format="HH:mm"
      />
      <el-select
        v-if="item.customType === '下拉选择'"
        v-model="item.customNameVal"
        class="margin-left input"
        filterable
        clearable
        :placeholder="item.prompt"
      >
        <el-option
          v-for="item in item.configurationOption"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-input
        v-if="item.customType === '文本'"
        v-model="item.customNameVal"
        class="margin-left input"
        :placeholder="item.prompt"
      />
    </span>

    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
    >搜索</el-button>
    <el-tooltip
      class="item"
      effect="dark"
      content="最大支持导出五万条数据！"
      placement="top-start"
    >
      <el-button
        v-if="isOut === 1"
        type="primary"
        icon="el-icon-download"
        class="margin-left"
        @click="download"
      >导出记录</el-button>
    </el-tooltip>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="操作中，请耐心等待！"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="实名照片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            fit="cover"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          >
            <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="$store.getters.placeType == 2 && !checkRole([99])"
        label="公司名称"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.enterpriseFullName | matchNull }}
        </template>
      </el-table-column>

      <el-table-column
        v-if="checkRole([1, 2, 3, 4])"
        label="省-市-区-街道"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.provinceName | matchNull }}-{{
            scope.row.cityName | matchNull
          }}-{{ scope.row.areaName | matchNull }}-{{
            scope.row.streetName | matchNull
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([1, 2, 3, 4])"
        label="详细地址"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.address | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkRole([1, 2, 3, 4])"
        label="所属组织名称"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.policeStationName | matchNull }}
        </template>
      </el-table-column>

      <el-table-column
        v-if="checkRole([1, 2, 3, 4])"
        label="所属账号"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.username | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="认证类型" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.pushType === 0"
            effect="plain"
            type="success"
          >小程序</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 1"
            effect="plain"
          >初次添加</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 2"
            effect="plain"
            type="primary"
          >人工录入</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 3"
            effect="plain"
            type="warning"
          >访客机</el-tag>
          <el-tag v-else effect="plain" type="info">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="有效期开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="有效期结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime | matchNull }}
        </template>
      </el-table-column>
      <template v-if="checkRole([5])">
        <el-table-column
          v-for="(item, index) in addCustomList"
          :key="index"
          align="center"
          :label="item.customName"
        >
          <template slot-scope="scope">
            <el-image
              v-if="item.customType === '图片'"
              style="width: 70px; height: 70px"
              :src="scope.row.contents[index].customNameVal"
              :preview-src-list="[scope.row.contents[index].customNameVal]"
            >
              <div slot="error" class="image-slot">暂无照片</div>
            </el-image>
            <p v-else>{{ scope.row.contents[index].customNameVal }}</p>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="操作区"
        :width="!checkRole([1, 2, 5,99]) ? '120' : '450'"
      >
        <template slot-scope="scope">
          <el-button
            v-if="checkRole([1, 2, 5,99])"
            type="danger"
            size="small"
            @click="deleteUser(scope.row.id)"
          >删除</el-button>
          <el-button
            v-if="checkRole([1, 2, 5,99])"
            type="primary"
            plain
            size="small"
            @click="reIssue(scope.row.id)"
          >重新下发</el-button>
          <el-button
            type="primary"
            size="small"
            @click="searchContent(scope.row)"
          >详情</el-button>
          <el-button
            v-if="checkRole([1, 2, 5,99])"
            type="success"
            size="small"
            @click="addWhiteList(scope.row.id)"
          >转为员工</el-button>
          <el-button
            v-if="checkRole([1, 2, 5,99])"
            type="danger"
            size="small"
            @click="addBlackList(scope.row.id)"
          >拉黑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 详情对话框 -->
    <detailsDialog
      :dialog-table-visible="dialogTableVisible"
      :visit-to-jet-list="visitToJetList"
      :row="row"
      @dialog="dialogTableVisible = false"
    />
  </div>
</template>

<script>
import detailsDialog from '@/components/DialogDetails/index.vue'

import {
  getPageListVisitor,
  addWhiteList,
  addBlackList,
  addWhiteAll
} from '@/api/ordinary_user'
import { checkRole } from '@/utils/checkRole'
import Pagination from '@/components/Pagination'
import {
  getArea,
  getCity,
  getProvince,
  getUserListSearch,
  getContext,
  getVisitorListFrom,
  getContextById,
  deleteVisitor,
  addSingle,
  userVisitorlistExcelOut
} from '@/api/user_manage'

export default {
  components: { Pagination, detailsDialog },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      downloadLoading: false, // 导出加载
      isOut: this.$store.getters.isOut, // 是否可以导出
      placeType: this.$store.getters.placeType, // 0普通1预约2楼宇
      // 分页参数
      page: {
        data: {
          username: null,
          name: '',
          phone: '',
          idNumber: '',
          provinceId: null,
          cityId: null,
          areaId: null,
          contents: null,
          startTime: null,
          endTime: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 账号列表_搜索
      user_list: [],
      // 省市县列表_搜索
      province_list_search: [],
      city_list_search: [],
      area_list_search: [],
      // 是否认证_搜索
      status_list: [
        { id: 1, name: '已认证' },
        { id: 2, name: '未认证' }
      ],
      dialogTableVisible: false,
      // detailsList: [], //自定义字段详情
      visitToJetList: {}, // 访客机详情
      addCustomList: [], // 自定义字段模板
      row: null
    }
  },
  created() {
    this.fetchData()
    this.getUserListSearch()
    this.getAddressListSearch(1)
    if (checkRole([2, 3])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.page.data.provinceId = this.$store.getters.provinceId
    } else if (checkRole([4])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.page.data.provinceId = this.$store.getters.provinceId
      this.getAddressListSearch(3, this.$store.getters.cityId)
      this.page.data.cityId = this.$store.getters.cityId
    } else if (checkRole([5])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.page.data.provinceId = this.$store.getters.provinceId
      this.getAddressListSearch(3, this.$store.getters.cityId)
      this.page.data.cityId = this.$store.getters.cityId
      this.page.data.areaId = this.$store.getters.areaId
      this.getContextById(this.$store.getters.adminId)
    }
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      getPageListVisitor(this.page).then((res) => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    // 查询详细信息
    searchContent(row) {
      this.row = row
      getVisitorListFrom(row.id).then((res) => {
        this.visitToJetList = res.data
        this.dialogTableVisible = true
      })
    },
    // 获取自定义字段模板
    getContextById(adminId) {
      getContextById(adminId).then((res) => {
        this.addCustomList = res.data
        this.page.data.contents = res.data
      })
    },
    // 获取账号列表数据_搜索
    getUserListSearch() {
      getUserListSearch().then((res) => {
        this.user_list = res.data
      })
    },
    // 获得省市县列表_搜索
    getAddressListSearch(type, code) {
      switch (type) {
        case 1:
          getProvince().then((res) => {
            this.province_list_search = res.data
          })
          break
        case 2:
          getCity(code).then((res) => {
            this.city_list_search = res.data
          })
          break
        case 3:
          getArea(code).then((res) => {
            this.area_list_search = res.data
          })
          break
        default:
          break
      }
    },
    // 选择省份_搜索
    chooseProvinceSearch(e) {
      this.city_list_search = []
      this.page.data.cityId = ''
      this.page.data.cityName = ''
      this.area_list_search = []
      this.page.data.areaId = ''
      this.page.data.areaName = ''
      this.getAddressListSearch(2, e)
      this.getTagList(e)
    },
    // 选择市_搜索
    chooseCitySearch(e) {
      this.area_list = []
      this.page.data.areaId = ''
      this.page.data.areaName = ''
      this.getAddressListSearch(3, e)
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    },
    // 导出记录
    download() {
      this.$prompt('请输入导出密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      })
        .then(({ value }) => {
          if (value == 'Nqj##361') {
            this.$message({
              type: 'success',
              message: '密码正确,正在下载...'
            })
            this.downloadLoading = true
            userVisitorlistExcelOut(this.page.data).then((res) => {
              window.location.href = res.data
              this.downloadLoading = false
            })
          } else {
            this.$message({
              type: 'error',
              message: '您输入的密码不正确'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消导出'
          })
        })
    },
    // 添加到员工
    addWhiteList(id) {
      this.$confirm('确定要将此用户添加到员工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        addWhiteList(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
      })
    },
    // 添加到黑名单
    addBlackList(id) {
      this.$confirm('确定要将此用户添加到黑名单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        addBlackList(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
      })
    },
    // 全部转为员工
    regularAll() {
      this.$confirm('此操作会全部转为员工,您确定要全部转为吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.listLoading = true
        addWhiteAll().then((res) => {
          this.fetchData()
          this.listLoading = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      })
    },
    // 删除
    deleteUser(id) {
      this.$confirm('确定要删除此人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteVisitor(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 重新下发
    reIssue(id) {
      this.$confirm('确定要重新下发此人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        addSingle(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '下发成功!'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.margin-left-s {
  margin-left: 15px;
}
.input {
  width: 200px;
}
/*批量导入按钮*/
.file {
  margin: 10px 0 0 10px;
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>

