<template>
  <div class="timedTask from-clues">
    <div class="from-clues-header">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-row class="mb-5">
          <el-col :span="3">
            <el-select v-model="selectType" placeholder="请选择" class="select">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-input v-model="queryName" class="selectName" clearable placeholder="请输入">
              <el-button slot="append" icon="el-icon-search" @click="searchQuery()" />
            </el-input>
          </el-col>
          <!-- 按钮操作 -->
          <el-col :span="6" class="btnColRight">
            <el-form-item>
              <btn nativeType="cz" @click="handleAdd">添加人员</btn>
              <btn nativeType="cx" @click="resetPassword(selectionRows)">重置密码</btn>
              <btn nativeType="sb" @click="resetSearch()">重置</btn>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <vxe-table ref="xTree" v-loading="loading" class="header-bg-type1" :data="tableData" show-overflow border
        :checkbox-config="{ highlight: true }" :empty-render="{ name: 'NotData' }" highlight-hover-row max-height="90%"
        @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
        <template #empty>
          <table-empty />
        </template>
        <vxe-table-column type="checkbox" width="36" align="center" fixed="left" />
        <vxe-table-column field="code" title="工号" width="80" align="left" show-header-overflow="tooltip"
          show-overflow="tooltip" fixed="left" />
        <vxe-table-column title="姓名" width="140" align="left" show-header-overflow="tooltip" show-overflow="tooltip"
          fixed="left">
          <template slot-scope="scope">
            <svg-icon :icon-class="
              scope.row.sex === '0'
                ? 'male'
                : scope.row.sex === '1'
                  ? 'female'
                  : 'secrecy'
            " />
            {{ scope.row.name }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="loginName" title="用户名" width="110" align="left" show-header-overflow="tooltip"
          show-overflow="tooltip" fixed="left" />
        <vxe-table-column title="负责人" align="left" show-header-overflow="tooltip" show-overflow="tooltip">
          <template slot-scope="scope">
            <i v-if="scope.row.isDuty" class="el-icon-check" />
          </template>
        </vxe-table-column>
        <vxe-table-column field="departmentName" title="所属部门" align="left" width="140" min-width="140"
          show-header-overflow="tooltip" show-overflow="tooltip" />
        <vxe-table-column field="jobLevel" :formatter="formatterjobLevel" title="职位" align="left" width="140"
          min-width="140" show-header-overflow="tooltip" show-overflow="tooltip" />
        <vxe-table-column field="mobilePhone" title="电话" width="140" show-header-overflow="tooltip"
          show-overflow="tooltip" align="left" />
        <vxe-table-column title="状态" width="50">
          <template scope="scope">
            <el-switch v-model="scope.row.switch" class="switch" active-color="#32BAD4" inactive-color="#B1B9C5"
              active-text="启" inactive-text="禁" @change="changeStatus(scope.row)" />
          </template>
        </vxe-table-column>
        <vxe-table-column title="排序" width="148" min-width="148" align="left" fixed="right">
          <template #header>
            <p class="ml8">排序</p>
          </template>
          <template slot-scope="scope">
            <sort-table :scope-data="scope" :sort-url="tableUrl" @sortOk="getTableList" />
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" width="148" min-width="148" align="left" fixed="right">
          <template #header>
            <p class="ml8">操作</p>
          </template>
          <template slot-scope="scope">
            <el-button type="text" size="small">
              <el-tooltip class="item" effect="dark" content="解锁" placement="top">
                <i class="icon-platform-unlock iconfont" @click="updateLock(scope.row.id, scope.row.name)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="重置" placement="top">
                <i class="icon-platform-reset iconfont" @click="resetPassword(scope.row.id)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="修改" placement="top">
                <i class="icon-platform-edit iconfont" @click="handleEdit(scope.row)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="icon-platform-delete iconfont" @click="handleDelete(scope.row.id, scope.row.name)" />
              </el-tooltip>
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>
<script>
// 定时任务
export default {
  name: "users",
  components: {},
  data () {
    return {
      title: '',
      queryParam: {},
      selectType: '0',
      queryName: '',
      organizationId: '', // 组织机构ID
      departmentId: '', // 部门ID
      departmentList: [], // 部门列表
      levelList: [], // 职务级别
      tableData: [],
      sexList: [],
      typeOptions: [
        {
          value: '0',
          label: '姓名'
        },
        {
          value: '1',
          label: '工号'
        },
        {
          value: '2',
          label: '部门'
        },
        {
          value: '3',
          label: '机构'
        }
      ],
      // tableUrl: api.users, // 接口地址，

      pageData: {
        total: 0,
        pageSize: 15,
        current: 1,
      },
    };
  },
  created () {
    // 获取区域和组织机构id
    eventBus.$on('getSelectedId', (res) => {
      if (!res.organizationId) {
        this.tableData = []
        this.organizationId = ''
        this.departmentId = ''
      } else {
        this.organizationId = res.organizationId
        this.departmentId = res.departmentId
        this.getTableList()
        this.getDepartData()
      }
      this.initDictConfig()
    })
  },
  updated () {
    this.tableData.forEach((element) => {
      element.switch = element.status === 'ACTIVE'
    })
  },
  methods: {
    initDictConfig () {
      getDictItems('XB').then((res) => {
        if (res.status === 1) {
          this.sexList = res.content
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
      getDictItems('ZWJB').then((res) => {
        if (res.status === 1) {
          this.levelList = res.content
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
    },
    getDepartData () {
      getDeptsByIdAction(this.organizationId).then((res) => {
        if (res.status === 1) {
          this.departmentList = res.content
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
    },
    getTableList () {
      this.loading = true
      this.queryParam = {
        organizationId: this.organizationId,
        departmentId: this.departmentId
      }
      getUserList(this.queryParam).then((res) => {
        if (res.status === 1) {
          this.loading = false
          this.tableData = res.content
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
    },
    // 查询
    searchQuery () {
      switch (this.selectType) {
        case '0':
          this.queryParam.type = 'NAME'
          break
        case '1':
          this.queryParam.type = 'CODE'
          break
        case '2':
          this.queryParam.type = 'DEPARTMENT'
          break
        case '3':
          this.queryParam.type = 'ORGANIZATION'
          break
        default:
          break
      }
      this.queryParam.typeValue = this.queryName
      getUserList(this.queryParam).then((res) => {
        if (res.status === 1) {
          this.tableData = res.content
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
    },
    // 重置搜索
    resetSearch () {
      this.selectType = '0'
      this.queryName = ''
      this.queryParam = {
        organizationId: this.organizationId,
        departmentId: this.departmentId
      }
      this.getTableList()
    },
    // 性别
    formatterSex ({ cellValue }) {
      if (this.sexList.length !== 0) {
        if (cellValue !== null) {
          const sex = this.sexList.find((item) => item.value === cellValue).name
          return sex
        } else {
          return cellValue
        }
      }
    },
    // 职务级别
    formatterjobLevel ({ cellValue }) {
      if (this.levelList.length !== 0) {
        if (cellValue) {
          const jobLevel = this.levelList.find(
            (item) => item.value === cellValue
          ).name
          return jobLevel
        } else {
          return cellValue
        }
      }
    },
    // 删除
    handleDelete (id, content) {
      this.$confirm(deleteDomStr(content), '执行确认', {
        dangerouslyUseHTMLString: true,
        customClass: 'customer-delete',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAction(`${api.users}/${id}`).then((res) => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
            this.getTableList()
          })
        })
        .catch(() => { })
    },
    // 修改状态
    changeStatus (row) {
      this.$confirm('确定要修改状态吗?', '提示', {
        customClass: 'customer-update',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const status = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
          const id = row.id
          updateStatus(id, status).then((res) => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.getTableList()
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch((err) => {
          console.log({ err })
        })
    },
    // 更新用户解锁状态
    updateLock (id, name) {
      this.$confirm(
        `<div  class="customer-message-wrapper">
              <h5 class="title">确定要更新用户解锁状态吗</h5>
               <p class="result">执行后，数据将
                 <span >无法恢复</span>
                </p>
        </div>`,
        '执行确认',
        {
          dangerouslyUseHTMLString: true,
          customClass: 'customer-delete',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          updateLock(id).then((res) => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.getTableList()
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch(() => { })
    },
    // 重置用户密码
    resetPassword (data) {
      const ids = []
      if (data instanceof Array) {
        data.forEach((item) => {
          ids.push(item.id)
        })
      } else {
        ids.push(data)
      }
      console.log(ids, 'ids')
      if (ids.length === 0) {
        this.$message({
          message: '请选择需要重置密码的用户!',
          showClose: true
        })
        return
      }
      this.$confirm(
        `<div  class="customer-message-wrapper">
              <h5 class="title">确定要重置密码吗</h5>
               <p class="result">执行后，数据将
                 <span >无法恢复</span>
                </p>
        </div>`,
        '执行确认',
        {
          dangerouslyUseHTMLString: true,
          customClass: 'customer-delete',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          resetPassword(ids).then((res) => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.getTableList()
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch(() => { })
    },
    // 新增回显
    reloadTableData () {
      this.getTableList()
    },
    showimport () {
      this.$refs.leadingIn.import(this.tableUrl, '人员')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  .top-wrapper {
    .el-button + .el-button {
      margin-left: 16px;
    }
    .top-wrapper-search {
      display: inline-block;
      margin-left: 16px;
      ::v-deep .el-input,
      ::v-deep .el-input__inner {
        height: 32px;
      }
      .select {
        width: 120px;
        vertical-align: middle;
      }
      .selectName {
        width: 178px;
        margin: 0 16px;
        vertical-align: middle;
        ::v-deep .el-input-group__append {
          background: #e0eeff;
          color: #3aa3f8 !important;
          padding-right: 12px;
          border-radius: 0;
          .el-button {
            padding: 8px 8px;
          }
        }
      }
    }
  }
  .vxe-table {
    ::v-deep .vxe-body--row {
      .vxe-body--column:nth-child(3) {
        text-align: left;
      }
      .svg-icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        margin-left: 5px;
      }
    }
  }

}