<template>
  <div v-loading="delLoading" class="app-container">
    <addModal
      ref="addModel"
      :user-list="user_list"
      :area-list="areaList"
      @success="modalSuccess"
    />
    <uploadModal
      ref="uploadModal"
      :user-list="user_list"
      :area-list="areaList"
      @finish="modalSuccess(false)"
    />
    <!--搜索区-->
    <el-select
      v-if="checkRole([1])"
      v-model="form.adminId"
      filterable
      clearable
      placeholder="请选择账号"
    >
      <el-option
        v-for="item in user_list"
        :key="item.adminId"
        :label="item.username"
        :value="item.adminId"
      />
    </el-select>
    <el-input
      v-model="form.company"
      placeholder="请输入单位名称"
      class="margin-left input"
    />
    <el-input
      v-model="form.floor"
      placeholder="请输入楼层"
      class="margin-left input"
    />
    <el-input
      v-model="form.name"
      placeholder="请输入姓名"
      class="margin-left input"
    />
    <el-input
      v-model="form.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    />
    <el-input
      v-model="form.idNumber"
      placeholder="请输入身份证号"
      class="margin-left input"
    />
    <el-input
      v-model="form.showTitle"
      placeholder="请输入显示标题"
      class="margin-left input"
    />
    <el-input
      v-model="form.unitName"
      placeholder="请输入部门"
      class="margin-left input"
    />
    <el-select
      v-if="!checkRole([99])"
      v-model="form.zoneId"
      filterable
      clearable
      placeholder="请选择区域"
      class="margin-left input"
      no-data-text="“选择区域”为空"
    >
      <el-option
        v-for="(item, index) in areaList"
        :key="index"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <br>
    <el-button
      type="primary"
      icon="el-icon-search"
      style="margin-top: 10px"
      @click="query"
    >搜索</el-button>
    <el-button
      class="filter-item"
      style="margin-left: 10px"
      type="primary"
      icon="el-icon-plus"
      @click="handleCreate"
    >
      添加
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-download"
      style="margin-left: 10px"
      @click="download"
    >下载模板</el-button>
    <el-button
      type="primary"
      style="margin-left: 10px"
      plain
      @click="addOrUpdate"
    >批量导入</el-button>
    <el-button
      type="danger"
      style="margin-left: 10px"
      plain
      @click="deletes"
    >批量删除</el-button>
    <!--主表格-->
    <el-table
      v-loading="tableLoading"
      style="margin-top: 20px"
      :data="tableData"
      stripe
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{
            (pagination.current - 1) * pagination.pageSize + (scope.$index + 1)
          }}
        </template>
      </el-table-column>
      <el-table-column v-if="checkRole([1])" 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">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.idNumber | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.company | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center">
        <template slot-scope="scope">
          {{ scope.row.unitName | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="楼层" align="center">
        <template slot-scope="scope">
          {{ scope.row.floor | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="房间号" align="center">
        <template slot-scope="scope">
          {{ scope.row.room | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="显示标题" align="center">
        <template slot-scope="scope">
          {{ scope.row.showTitle | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="!checkRole([99])"
        label="区域"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.zoneNames || "全部" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" :width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" :width="180">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :page-sizes="pagination.pageSizeOptions"
      :layout="pagination.layout"
      @pagination="handleSizeChange"
    />
  </div>
</template>

<script>
import { getAdminListNew } from '@/api/user_manage'
import { checkRole } from '@/utils/checkRole'
import { getVisiteePageList, deleteByIds, deletes } from '@/api/visitee'
import { getAreaList } from '@/api/area'
import tableMixins from '@/mixins/tableMixins'
import Pagination from '@/components/Pagination'
import AddModal from './modal/AddModal.vue'
import UploadModal from './modal/UploadModal.vue'

export default {
  components: { Pagination, AddModal, UploadModal },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  mixins: [tableMixins],
  data() {
    return {
      delLoading: false,
      user_list: null,
      areaList: null,
      form: {
        adminId: null,
        company: null,
        floor: null,
        name: null,
        phone: null,
        idNumber: null,
        room: null,
        showTitle: null,
        unitName: null,
        zoneId: null
      }
    }
  },
  methods: {
    // 查询权限
    checkRole,
    // 下载模板
    download() {
      window.location.href =
        process.env.VUE_APP_BASE_API + '/excel/visiteeListExcel.xlsx'
    },
    addOrUpdate() {
      this.$refs.uploadModal.open()
    },
    initData() {
      this.getTableList()
      this.getAdminListNew(1, 1, 1)
      this.getAreaList()
    },
    // 返回所有的区域列表概览
    async getAreaList() {
      try {
        const result = await getAreaList({
          adminId: this.$store.getters.adminId
        })
        this.areaList = result.data
      } catch (e) {
        console.log(e)
        this.areaList = []
      }
      this.areaList.unshift({
        id: 0,
        name: '全部'
      })
    },
    // 获取账号列表数据
    getAdminListNew(isNeedDistrict, isNeedEnterprise, isNeedPrivateArea) {
      const data = {
        isNeedDistrict, //	是否需要区级账号 1-需要(默认) 2-不需要
        isNeedEnterprise, // 是否需要企业账号 1-需要(默认) 2-不需要
        isNeedPrivateArea // 查询区域类型 1-通用(默认) 2-公有 3-私有
      }
      getAdminListNew(data).then((res) => {
        this.user_list = res.data
      })
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true
      try {
        const result = await getVisiteePageList(this.getFilterParams())
        this.setDataList(result.data)
      } catch (e) {
        console.log(e)
      } finally {
        this.tableLoading = false
      }
    },
    // 获取筛选信息
    query() {
      this.clearPageParams()
      this.getTableList()
    },
    // 增加筛选条件
    transformFilterForm() {
      let zoneId = this.form.zoneId
      if (!this.form.zoneId) {
        zoneId = null
      }
      return { ...this.form, zoneId }
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams()
      }
      this.getTableList()
    },
    handleCreate() {
      this.$refs.addModel.open()
    },
    handleUpdate(row) {
      this.$refs.addModel.open(Object.assign({}, row))
    },
    handleDelete(row) {
      const that = this
      this.$confirm('确定要删除此记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            instance.confirmButtonText = '提交中...'
            try {
              await deleteByIds([row.id])
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              that.getTableList()
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
                instance.cancelButtonLoading = false
              }, 300)
            }
          } else {
            done()
          }
        }
      })
        .then(() => {})
        .catch(() => {})
    },
    deletes() {
      this.$prompt('请输入删除密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(({ value }) => {
          if (value == 'Nqj##361') {
            this.$message({
              type: 'success',
              message: '密码正确,正在删除全部人员...'
            })
            this.delLoading = true
            deletes(this.form).then((res) => {
              this.getTableList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.delLoading = false
            })
          } else {
            this.$message({
              type: 'error',
              message: '您输入的密码不正确'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
      // this.$confirm('确定要删除筛选的记录吗？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   showClose: false,
      //   type: 'warning',
      //   beforeClose: async(action, instance, done) => {
      //     if (action === 'confirm') {
      //       instance.confirmButtonLoading = true
      //       instance.cancelButtonLoading = true
      //       instance.confirmButtonText = '提交中...'
      //       try {
      //         await deletes(this.form)
      //         this.$message({
      //           type: 'success',
      //           message: '删除成功!'
      //         })
      //         that.getTableList()
      //       } catch (e) {
      //         // this.$message({
      //         //   type: 'error',
      //         //   message: '删除失败!'
      //         // })
      //       } finally {
      //         done()
      //         setTimeout(() => {
      //           instance.confirmButtonLoading = false
      //           instance.cancelButtonLoading = false
      //         }, 300)
      //       }
      //     } else {
      //       done()
      //     }
      //   }
      // }).then(() => {}).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f1f2f5;
}

::-webkit-scrollbar-thumb {
  background-color: #bfc6d4;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
