<template>
  <div style="height:100%;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;">
    <div class="box-card" style="background-color: #ECF8FF; height: 40px; font-size: small; line-height: 30px; display: flex; justify-content: space-between; align-items: center;">
      <!-- <p style="font-weight:bolder;color:#409EFF;float:right;margin-right:10px;"><i class="el-icon-info" style="margin-right:10px;"></i>
        当前督查水库10座,总体占比10%,完成此次督查计划要求50%
        </p> -->
      <div style="display:flex;" class="checkbox_left">
        <a-checkbox :checked="checked" @change="onChecked">本级</a-checkbox>
        <a-input-search
          v-model="input5"
          placeholder="请输入人员名称"
          enter-button
          @search="searchDcryResult"
          allow-clear
          style="width: 200px; margin-left: 30px;"/>
      </div>
      <a-button
        v-show="showEdit"
        @click="editHandler"
        :disabled="!objType"
        type="primary"
        icon="edit"
        size="small"
        ghost
        style="float: right; margin-right: 10px; height: 30px;">添加人员</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="tableData"
      @change="handleCurrentChange"
      :loading="loading"
      rowKey="index"
      :pagination="{total, defaultPageSize: pageSize, showTotal: total => `共${total}条`}"
      style="width: 100%;"
      :style="{height: tableHeight + 'px'}"
      ref="dcryTable">
      <template #bodyCell="{ column, record, text, index }">
        <template v-if="column.dataIndex === 'personType_jc'">
          <span v-if="objType == '1'">{{ record.personType_sk }}</span>
          <span v-else-if="objType == '8'">{{ record.personType_jc }}</span>
          <span v-else>{{ record.personType }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <span>
            <template v-if="(objType == '1' || objType == '50' || objType == '51' || objType == '52' || objType == '58' || objType == '59' || objType == '60' || objType == '64' || objType == '61' || objType == '63' || objType == '18' || objType == '65' || objType == '66' || objType == '85' || objType == '86' || objType == '87' || objType == '88' || objType == '90' || objType == '92' || objType == '107' || objType == '109' || objType == '111' || objType == '114' || objType == '117' || objType == '1110') && ownPriv('manage')">
              <a-select v-model:value="record.pertype" @change="(val) => {swzzHandler(record, val)}" placeholder="请选择" size="small" style="width: 100px">
                <a-select-option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
              <img src="../../assets/img/delete.png" @click="deleteHandler(record)" title="删除" style="cursor:pointer;width: 20px;"></img>
            </template>
            <template v-if="objType=='8' && ownPriv('manage')">
              <a-select v-model:value="record.pertype" @change="(val) => {swzzHandler(record, val)}" placeholder="请选择" size="small" style="width: 100px">
                <a-select-option v-for="item in options8" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
              <img src="../../assets/img/delete.png" @click="deleteHandler(record)" title="删除" style="cursor:pointer;width: 20px;"></img>
            </template>
            <template v-else-if="ownPriv('manage') && objType != '1' && objType != '8' && objType != '50' && objType != '51' && objType != '52' && objType != '58' && objType != '59' && objType != '60' && objType != '64' && objType != '61' && objType != '63' && objType != '65' && objType != '66' && objType != '18' && objType != '107' && objType != '109' && objType != '111' && objType != '114' && objType != '117' && objType != '1110'">
              <span v-if="objType != '1' && objType != '8' && objType != '50' && objType != '51' && objType != '52' && objType != '66' && objType != '85' && objType != '86' && objType != '87' && objType != '88' && objType != '90' && objType != '92' && objType != '107' && objType != '109' && objType != '111' && objType != '114' && objType != '117' && objType != '1110'">
                <img src="../../assets/img/zuzhang.png" v-if="record.pertype != '1'" @change="(val) => {swzzHandler(record, '1')}" title="设为组长" style="cursor:pointer;width: 20px;">
                <img src="../../assets/img/qxzuzhang.png" v-else @click="qxzzHandler(record)" title="取消组长" style="cursor:pointer;width: 20px;">
                <img src="../../assets/img/delete.png" @click="deleteHandler(record)" title="删除" style="cursor:pointer;width: 20px;">
              </span>
            </template>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue';
import { deleteMember, getDcryList, setHeadMan } from '../../api/duChaPlan';
export default {
  props: ['objType', 'dczId', 'dczName'],
  data() {
    return {
      checked: false,
      input5: '',
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      showResultCount: 0,
      showEdit: true,
      tableData: [],
      currentShowList: [],
      tableHeight: window.innerHeight - 280,
      isAll: '1',
      options: [
        {
          value: '1',
          label: '组长',
        },
        {
          value: '5',
          label: '副组长',
        },
        {
          value: '2',
          label: '组员',
        },
        {
          value: '3',
          label: '联络员',
        },
        {
          value: '4',
          label: '专家',
        },
      ],
      options8: [
        {
          value: '1',
          label: '组长',
        },
        {
          value: '2',
          label: '组员',
        },
        {
          value: '3',
          label: '联络员',
        },
        {
          value: '11',
          label: '前期专家',
        },
        {
          value: '12',
          label: '建管专家',
        },
        {
          value: '13',
          label: '计划专家',
        },
        {
          value: '14',
          label: '财务专家',
        },
        {
          value: '15',
          label: '质量专家',
        },
        {
          value: '16',
          label: '安全专家',
        },
        {
          value: '19',
          label: '助理',
        },
        {
          value: '20',
          label: '特派员',
        },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '50px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '50px',
              },
            };
          },
        },
        {
          title: '姓名',
          dataIndex: 'persName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '70px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '70px',
              },
            };
          },
        },
        {
          title: '性别',
          dataIndex: 'sex1',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '50px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '50px',
              },
            };
          },
        },
        {
          title: '手机号码',
          dataIndex: 'mobilenumb',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '90px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '90px',
              },
            };
          },
        },
        {
          title: '机构名称',
          dataIndex: 'orgName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '人员类型',
          dataIndex: 'personType_jc',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '职务级别',
          dataIndex: 'admDuty',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '职称',
          dataIndex: 'dppost',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '专业',
          dataIndex: 'specialty',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '所在分组',
          dataIndex: 'pnm',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          customCell: () => {
            return {
              style: {
                'min-width': '140px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '140px',
              },
            };
          },
        },
      ],
    };
  },
  computed: {
    userInAllNode: () =>
      JSON.parse(localStorage.getItem('allNode'))
        ? JSON.parse(localStorage.getItem('allNode'))
        : [],
    isAdmin: () =>
      localStorage.getItem('isAdmin') ? localStorage.getItem('isAdmin') : '',
  },
  mounted() {
    if (this.objType !== '8') {
      this.columns = this.columns
        .filter((item) => item.dataIndex !== 'dppost')
        .filter((item) => item.dataIndex !== 'specialty');
    }
  },
  methods: {
    // 判断当前用户 是否在该节点下   在 则没有删除权限
    userInThisGroup() {
      if (this.userInAllNode && this.userInAllNode.length > 0) {
        for (var i = 0; i < this.userInAllNode.length; i++) {
          if (this.userInAllNode[i].id.substring(0, 3) == '001') {
            if (this.dczId.length > this.userInAllNode[i].id.length) {
              return true;
            } else {
              return false;
            }
          } else {
            return true;
          }
        }
      } else {
        return true;
      }
    },
    onChecked(e) {
      this.checked = e.target.checked;
    },
    searchDcryResult(val) {
      this.input5 = val;
      this.pageIndex = 1;
      this.getDcryResult();
    },
    getDcryResult() {
      if (!this.dczId) {
        this.loading = false;
        return;
      }
      this.loading = true;
      getDcryList(
        this.dczId,
        this.pageSize,
        this.pageIndex,
        this.isAll,
        this.input5,
      ).then((response) => {
        this.tableData = response.data.list;
        this.total = response.data.total;
        this.loading = false;
        this.tableData.forEach((element, index) => {
          element['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
          element['personType_sk'] =
            element.pertype == '1'
              ? '组长'
              : element.pertype == '2'
                ? '组员'
                : element.pertype == '3'
                  ? '联络员'
                  : element.pertype == '4'
                    ? '专家'
                    : element.pertype == '5'
                      ? '副组长'
                      : '';
          element['personType_jc'] =
            element.pertype == '1'
              ? '组长'
              : element.pertype == '2'
                ? '组员'
                : element.pertype == '3'
                  ? '联络员'
                  : element.pertype == '11'
                    ? '前期专家'
                    : element.pertype == '12'
                      ? '监管专家'
                      : element.pertype == '13'
                        ? '计划专家'
                        : element.pertype == '14'
                          ? '财务专家'
                          : element.pertype == '15'
                            ? '质量专家'
                            : element.pertype == '16'
                              ? '安全专家'
                              : element.pertype == '19'
                                ? '助理'
                                : element.pertype == '20'
                                  ? '特派员'
                                  : '';
          element['personType'] = element.pertype == '1' ? '组长' : '组员';
          element['sex1'] =
            element.sex == '1' ? '男' : element.sex == '2' ? '女' : '';
        });
      });
    },
    editHandler(item) {
      this.$emit('showEditDialog', item);
    },
    // 设为组长
    swzzHandler(item, type) {
      console.log(item, type);
      setHeadMan(item.id, item.guid, type, item.orgId).then((res) => {
        this.getDcryResult(); // 设置组长成功之后  刷新表格数据
      });
    },
    deleteHandler(item) {
      Modal.confirm({
        title: '提示',
        content: '是否确认删除?',
        okType: 'info',
        onOk: () => {
          deleteMember(item.id, item.guid).then((res) => {
            if (res.success) {
              this.getDcryResult();
              this.$message.success('删除成功');
            } else {
              if (res.message == '请先删除登记表') {
                this.$message.warning('请联系管理员，删除登记表！');
              } else {
                this.$message.error('删除失败');
              }
            }
          });
          return Promise.resolve();
        },
        onCancel: () => {
          this.$message.info('已取消删除');
        },
      });
    },
    // 取消组长
    qxzzHandler(item) {
      setHeadMan(item.id, item.guid, '2', item.orgId).then((res) => {
        this.getDcryResult(); // 取消组长成功之后  刷新表格数据
      });
    },
    handleCurrentChange(item) {
      this.pageIndex = item.current;
      this.getDcryResult();
    },
  },
  watch: {
    dczId: {
      immediate: true,
      handler(n, o) {
        console.log('[renYuanList] dczId变化:', n, '旧值:', o);
        this.getDcryResult(n);
      },
    },
    checked(n, o) {
      if (n == true) {
        this.isAll = '0';
      } else {
        this.isAll = '1';
      }
      this.pageIndex = 1;
      this.getDcryResult();
    },
  },
};
</script>

<style lang='less' scoped>
.checkbox_left{
  margin-left: 20px;
}
:deep(.ant-checkbox-wrapper) {
  white-space: nowrap;
}
:deep(.ant-table-pagination) {
  float: left;
}
:deep(.ant-table-thead > tr > th), :deep(.ant-table-tbody > tr > td) {
  padding: 0;
  height: 50px;
}
</style>
