<template>
  <div class="usermana-page">
    <t-card class="page-card">
      <div class="select-confidtion-box row">
        <div class="col-3">公司：
          <t-select v-model="companyTypeId" width="200px">
            <t-option v-for="item in companyTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select>
        </div>
        <div class="col-3">部门：
          <!-- <t-select v-model="departmentTypeId" width="200px">
            <t-option v-for="item in departmentTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select> -->
          <template>
            <t-select-tree v-model="departmentTypeId" :node-data="departmentTypesList" width="200px" node-key="id"></t-select-tree>
          </template>
        </div>
        <div class="col-3">姓名：
          <t-select v-model="staffTypeId" width="200px">
            <t-option v-for="item in staffTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select>
        </div>
        <div class="col-2 offset-1 select-button-box" align="end">
          <t-button color="primary" @click="selectHandle">查询</t-button>
          <t-button @click="resetData">重置</t-button>
        </div>
      </div>
      <div class="function-button-box">
        <t-button color="primary" @click="showAddDeviceModal">
          <t-icon icon="plus-circle-outline" size="16"></t-icon>新增
        </t-button>
        <t-button @click="multDeleteUserData">
          <t-icon icon="trash" size="16"></t-icon>删除
        </t-button>
      </div>
      <div class="table-box">
        <t-table :data="userDataList" line @selection-change="selectChange">
          <t-table-column type="selection" width="70"></t-table-column>
          <t-table-column prop="name" label="姓名" width="100"></t-table-column>
          <t-table-column prop="userId" label="员工编号" width="120"></t-table-column>
          <t-table-column prop="companyName" label="公司" width="150"></t-table-column>
          <t-table-column prop="departmentName" label="部门" width="150"></t-table-column>
          <t-table-column prop="post" label="职务" width="100"></t-table-column>
          <t-table-column prop="age" label="年龄" width="80"></t-table-column>
          <t-table-column prop="telephone" label="手机" width="150"></t-table-column>
          <t-table-column prop="status" label="人脸状态" width="120">
            <template v-slot="{row}">
              <t-tag v-if="row.field2==='5'" state="success">{{ row.status }}</t-tag>
              <t-tag v-else-if="row.field2==='3'" state="danger">{{ row.status }}</t-tag>
              <t-tag v-else state="info">{{ row.status }}</t-tag>
            </template>
          </t-table-column>
          <t-table-column label="操作">
            <template v-slot="{row}">
              <a href="javascript:;" style="color:#0089D4;" @click="editDeviceData(row.resourceToolId)">编辑</a>
              <a href="javascript:;" style="color:#0089D4;" @click="deleteUserData(row)">删除</a>
              <a v-if="row.field2!='5'" href="javascript:;" style="color:#0089D4;" @click="auditdata(row.id,row.companyName)">人脸审核</a>
            </template>
          </t-table-column>
        </t-table>
      </div>
      <div class="table-pager">
        <t-pager :current.sync="page" :total="total" :page-size="limit" :sizer-range="[10,20,50,100]" show-elevator show-sizer @on-size-change="onSizeChange" @on-change="onChange">>
        </t-pager>
      </div>
    </t-card>
    <add-user-modal :company-list="companyTypesList" :visible.sync="addDeviceModal"></add-user-modal>
    <auditModal :auditshow.sync="auditshow" :auditid="auditid" :company-name="companyName" @refeshUserList="getUserList"></auditModal>
  </div>
</template>

<script>
import sysapi from '@/api/usermana'
import addUserModal from './components/modal/addUser'
import auditModal from './components/modal/audit'
export default {
  components: {
    addUserModal,
    auditModal
  },
  data () {
    return {
      // 公司类型id
      companyTypeId: '',
      // 公司类型列表
      companyTypesList: [],
      // 部门类型id
      departmentTypeId: '',
      // 部门类型列表
      departmentTypesList: [],
      // 员工类型id
      staffTypeId: '',
      // 员工类型列表
      staffTypesList: [],
      // 用户数据列表
      userDataList: [],
      // 当前页
      page: 1,
      // 当前页的数据个数
      limit: 10,
      // 数据总数
      total: 0,
      // 批量删除的用户id
      deleteUserId: [],
      // 当前设备数据
      currentDeviceData: {},
      // 显示/隐藏新增设备对话框
      addDeviceModal: false,
      currentEditDevice: {},
      // 人脸审核模态框显示
      auditshow: false,
      // 人脸审核选择id
      auditid: 0,
      // 人脸审核的公司名称
      companyName: ''

    }
  },
  watch: {
    companyTypeId (val) {
      // 重置部门回显
      this.departmentTypeId = ''
      // 查询部门列表
      this.queryCycleChildOrg(val)
    },
    departmentTypeId (val) {
      // 重置人员回显
      this.staffTypeId = ''
      // 重置人员列表
      this.staffTypesList = []
      // 减少查询请求
      if (val !== '') {
        this.getStaffTypesList(val)
      }
    }
  },
  created () {
    // this.getDeviceData()
    this.getCompanyTypesList()
  },
  methods: {
    // 获取用户列表数据
    async getUserList () {
      const res = await sysapi.getUserList({ params: { pageNumber: this.page, pageSize: this.limit, id: this.staffTypeId, orgId: this.departmentTypeId || this.companyTypeId } })
      if (res.status === 200) {
        // 获取当前公司id的公司名称
        const companyName = this.companyTypesList.filter(item => item.id === this.companyTypeId)[0].name
        // eslint-disable-next-line no-return-assign
        res.data.data.forEach(item => item.companyName = companyName)
        this.userDataList = res.data.data
        this.total = res.data.total
      } else {
        this.$Message.danger('用户列表数据获取失败！')
      }
    },
    // 向服务器发送请求获取公司类型列表数据
    async getCompanyTypesList () {
      const res = await sysapi.getCompanyTypesList()
      if (res.status === 200) {
        this.companyTypesList = res.data.data
      } else {
        this.$Message.danger('公司类型列表数据获取失败！')
      }
    },
    // 向服务器发送请求获取部门类型列表数据
    // async getDepartmentTypesList (id) {
    //   const res = await sysapi.getDepartmentTypesList(id)
    //   if (res.status === 200) {
    //     this.departmentTypesList = res.data.data
    //   } else {
    //     this.$Message.danger('部门类型列表数据获取失败！')
    //   }
    // },
    // 如果部门还有下级 递归
    nextDepartment (data, arr) {
      if (data.length > 0) {
        data.forEach(item => {
          arr.push({
            orgId: item.id + '',
            id: item.code,
            label: item.name,
            pid: item.parentCode
          })
          this.nextDepartment(item.departments, arr)
        })
      }
    },
    // 获取部门列表
    async queryCycleChildOrg (id) {
      const res = await sysapi.queryCycleChildOrg(id)
      if (res.status === 200) {
        const data = []
        // 递归 实现tree组件所需部门数据结构
        this.nextDepartment(res.data, data)
        // 深拷贝data
        const data1 = JSON.parse(JSON.stringify(data))
        // 用部门id映射关系代替code与parentCode父子映射关系
        data.forEach(item => {
          // 删除pid为"-1"的的pid属性，否则tree渲染的时候没有根节点渲染不出来
          if (item.pid === '-1') {
            delete item.pid
          }
          item.id = item.orgId
          data1.some((item1) => {
            if (item.pid === item1.id) {
              item.pid = item1.orgId
            } else {
              return false
            }
          })
        })
        // eslint-disable-next-line no-return-assign
        this.departmentTypesList = data.filter(item => item.data = item.id)
      } else {
        this.$Message.danger('部门类型列表数据获取失败！')
      }
    },
    // 向服务器发送请求获取用户类型列表数据
    async getStaffTypesList (id) {
      const res = await sysapi.getStaffTypesList(id)
      if (res.status === 200) {
        this.staffTypesList = res.data.data
      } else {
        this.$Message.danger('用户类型列表数据获取失败！')
      }
    },
    // 查询数据
    selectHandle () {
      this.page = 1
      this.getUserList()
    },
    // 重置查询数据
    resetData () {
      this.page = 1
      this.companyTypeId = ''
      this.staffTypeId = ''
      this.departmentTypeId = ''
      this.userDataList = []
    },
    // 当前页改变 触发事件
    onChange (page) {
      this.page = page
      this.getUserList()
    },
    // 当前页数据总数改变 触发事件
    onSizeChange (pageSize) {
      this.limit = pageSize
      this.getUserList()
    },
    // 删除数据
    deleteUserData (row) {
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteUserData({ employeeId: row.id })
          if (res.status === 200) {
            this.getUserList()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
          }
        },
        cancel: () => {
          this.$Message.info('已取消删除！')
        }
      })
    },
    // 当复选框发生改变时 触发事件
    selectChange (data) {
      const arr = []
      data.forEach(item => arr.push(item.id))
      this.deleteUserId = arr
    },
    // 批量删除数据
    multDeleteUserData () {
      if (this.deleteUserId.length === 0) {
        return this.$Message.warning('请选择要删除的数据！')
      }
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteUserData({ employeeId: this.deleteUserId })
          if (res.status === 200) {
            this.getUserList()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
          }
        },
        cancel: () => {
          this.$Message.info('已取消删除！')
        }
      })
    },
    // 获取设备详情数据
    async getDeviceInfo (id) {
      const res = await sysapi.getDeviceInfo(id)
      if (res.status === 200) {
        this.currentDeviceData = res.data
      } else {
        this.$Message.danger('设备详情数据获取失败！')
      }
    },
    // 显示新增设备对话框
    showAddDeviceModal () {
      this.addDeviceModal = true
    },
    async editDeviceData (id) {
      const res = await sysapi.getDeviceInfo(id)
      if (res.status === 200) {
        this.currentEditDevice = res.data
      } else {
        this.$Message.danger('设备数据获取失败！')
      }
      this.addDeviceModal = true
    },
    // 人脸审核
    auditdata (id, companyName) {
      this.companyName = companyName
      this.auditid = id
      this.auditshow = true
    }
  }
}
</script>

<style lang="scss">
.usermana-page {
  .card-block {
    padding: 0px 24px !important;
  }
  .tabs {
    overflow: inherit;
  }
  .tabs-list {
    .tabs-list__content {
      display: flex;
      justify-content: flex-end;
      margin-top: -10px;
      .tabs-list__nav {
        height: 32px;
        line-height: 16px;
      }
    }
    .tabs-tab {
      margin: 0;
      padding: 0 25px;
      font-size: 14px;
    }
    .tabs-tab.checked {
      border-bottom: 3px solid #2d98ff;
    }
  }
  .select-button-box {
    padding: 0;
    button {
      margin-left: 5px;
    }
  }
  .select-confidtion-box {
    margin: 24px 0;
    .col-3 {
      padding: 0;
    }
  }
  .function-button-box {
    line-height: 32px;
    button {
      margin-right: 12px;
      i {
        line-height: 32px;
        margin-right: 8px;
      }
    }
    a {
      color: #0089d4;
      i {
        line-height: 32px !important;
        margin-left: 4px;
      }
    }
  }
  .table-box {
    margin: 20px 0;
  }
  .table-pager {
    display: flex;
    justify-content: flex-end;
  }
}
</style>