<template>
    <div>
        <!--选择人员-->
        <el-dialog :close-on-click-modal="false" title="请选择人员" v-model:visible="dialogXzPersVisible" width="60%"
                   :modal-append-to-body="true" :append-to-body="true" @close="closeXzRyDialog">
            <el-row>
                <el-col :span="24" style="text-align: right;margin-bottom: 15px;">
                    <el-input v-model="name" clearable placeholder="请输入姓名" style="width: 20vw;"></el-input>
                </el-col>
            </el-row>
            <el-table
                    v-loading="loading"
                    border
                    ref="multipleTable"
                    :height="tableHeight"
                    :data="jichuData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="100"
                        prop="roleTypeList"
                        label="角色"
                        show-overflow-tooltip
                >
                    <template #default="scope" v-if="scope.row.roleTypeList">
                    <span v-for="(item,index) in scope.row.roleTypeList" :key="index">
                      {{roleType(item.value) + '  '}}
                    </span>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="100"
                        prop="name"
                        label="姓名"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="120"
                        prop="sex"
                        label="性别"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        show-overflow-tooltip
                        prop="age"
                        label="年龄"
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="200"
                        label="工作单位"
                        show-overflow-tooltip
                        prop="workDpNm"
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="100"
                        label="职务"
                        show-overflow-tooltip
                        prop="duty"
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="100"
                        prop="titles"
                        label="职称"
                        show-overflow-tooltip
                >
                    <template #default="scope">
                        <span v-if="scope.row.titles == '1'">正高</span>
                        <span v-if="scope.row.titles == '2'">副高</span>
                        <span v-if="scope.row.titles == '3'">中级</span>
                        <span v-if="scope.row.titles == '4'">初级</span>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="150"
                        prop="telnumb"
                        label="电话"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="100"
                        prop="isOffice"
                        label="在职情况"
                >
                    <template #default="scope">
                        <span v-if="scope.row.isOffice == '1'">是</span>
                        <span v-if="scope.row.isOffice == '2'">否</span>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="120"
                        prop="education"
                        label="学历"
                        show-overflow-tooltip
                >
                    <template #default="scope">
                        <span v-if="scope.row.education == '1'">专科及以下</span>
                        <span v-if="scope.row.education == '2'">本科</span>
                        <span v-if="scope.row.education == '3'">研究生</span>
                        <span v-if="scope.row.education == '4'">博士</span>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="workAdNm"
                        label="原工作地"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="professional"
                        label="从事专业"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="recommendedUnits"
                        label="推荐单位"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="unitRanks"
                        label="单位职级"
                        show-overflow-tooltip
                >
                    <template #default="scope">
                        <span v-if="scope.row.unitRanks == '1'">省部级</span>
                        <span v-if="scope.row.unitRanks == '2'">地市级</span>
                        <span v-if="scope.row.unitRanks == '3'">县市级</span>
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        label="库别"
                        show-overflow-tooltip
                >
                    <template #default="scope">
                        {{groupType(scope.row.groupType)}}
                    </template>
                </el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="120"
                        prop="inTm"
                        label="入库时间"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="orgNm"
                        label="流域机构"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="oe"
                        label="体检结果"
                        show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                        header-align="center"
                        align="center"
                        min-width="80"
                        prop="isTraining"
                        label="培训情况"
                        show-overflow-tooltip
                >
                    <template #default="scope">
                        <span v-if="scope.row.isTraining == '1'">是</span>
                        <span v-if="scope.row.isTraining == '2'">否</span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer" style="text-align: right;">
                <el-button type="primary" @click="savePersInfo" size="medium">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/gw_ajax_request';
import { jcState } from './jcStore';

export default {
  name: 'NewPersInfo',
  props: [
    'roleTypes',
    'yearBatchId',
    'editAdd',
    'rowData',
    'changeEdit',
    'changeDataList',
  ],
  data() {
    return {
      loading: false,
      jichuData: [],
      tableHeight: window.innerHeight * 0.4,
      pageNum: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      name: '',
      dialogXzPersVisible: true,
    };
  },
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
    groupTypeData() {
      return jcState.groupTypeData;
    },
    roleTypeData() {
      return jcState.roleTypeData;
    },
  },
  mounted() {
    this.getRyXxData();
  },
  methods: {
    getRyXxData() {
      this.loading = true;

      if (this.editAdd) {
        const obj = {
          name: this.name,
          roleType: this.roleTypes,
          yearBatchId: this.yearBatchId,
          groupId: this.rowData.id,
        };
        request.post(`/tac/worker/b/getNotDisPersList`, obj).then((res) => {
          if (res.success) {
            this.loading = false;
            this.jichuData = res.data;
          } else {
            this.$message.warning(res.message);
          }
        });
      } else {
        const obj = {
          name: this.name,
          roleType: this.roleTypes,
          yearBatchId: this.yearBatchId,
        };
        request.post(`/tac/worker/b/getWorkerList`, obj).then((res) => {
          if (res.success) {
            this.loading = false;
            this.jichuData = res.data;
          } else {
            this.$message.warning(res.message);
          }
        });
      }
    },
    roleType(row) {
      if (row) {
        jcState.roleTypeData.forEach((ele) => {
          if (ele.value == row) {
            row = ele.label;
          }
        });
        return row;
      } else {
        return '';
      }
    },
    groupType(row) {
      if (row) {
        jcState.groupTypeData.forEach((ele) => {
          if (ele.value == row) {
            row = ele.label;
          }
        });
        return row;
      } else {
        return '';
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    savePersInfo() {
      if (!this.multipleSelection.length) {
        this.$message.warning('请至少选择一位人员');
        return;
      }
      if (this.editAdd) {
        const obj = {
          bs: this.multipleSelection,
          batchId: this.yearBatchId,
          groupNm: this.rowData.groupNm,
          groupId: this.rowData.id,
        };
        if (this.changeEdit == 'change') {
          obj['updateBs'] = this.changeDataList;
        }
        request
          .post(
            `/tac/insp/year/batch/group/pers/updateGroupPers
`,
            obj,
          )
          .then((res) => {
            if (res.success) {
              this.$message.success('操作成功');
              this.dialogXzPersVisible = false;
              this.$emit('closeXzPers');
            } else {
              this.$message.warning(res.message);
            }
          });
      } else {
        const obj = {
          persId: this.userId,
          workerBList: this.multipleSelection,
          yearBatchId: this.yearBatchId,
        };
        request.post(`/tac/worker/b/insertTacWorkerB`, obj).then((res) => {
          if (res.success) {
            this.$message.success('操作成功');
            this.dialogXzPersVisible = false;
            this.$emit('closeXzPers');
          } else {
            this.$message.warning(res.message);
          }
        });
      }
    },
    closeXzRyDialog() {
      this.$emit('closeXzPers');
    },
  },
  watch: {
    name() {
      this.getRyXxData();
    },
  },
};
</script>

<style scoped>

</style>
