<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="姓名" prop="Name">
        <el-input v-model="queryParams.Name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="身份证号" prop="ShenFenZheng">
        <el-input v-model="queryParams.ShenFenZheng" placeholder="请输入身份证" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="证书类别" prop="zhengshuType" v-if="type != 2">
        <el-select v-model="queryParams.zhengshuType" placeholder="请选择证书类别">
          <el-option v-for="dict in dict.type.zhengshu_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="不良记录" prop="BljlFlg" v-if="type != 2">
        <el-select v-model="queryParams.BljlFlg" placeholder="请选择是否有不良记录" clearable>
          <el-option v-for="dict in dict.type.jxjy_bljl" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="处罚类别" prop="ChuFa" v-if="type != 2">
        <el-select v-model="queryParams.ChuFa" placeholder="请选择处罚类别" clearable>
          <el-option v-for="dict in dict.type.chufa_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="证书状态" prop="zhengshuStatus" v-if="type != 2">
        <el-select v-model="queryParams.zhengshuStatus" placeholder="请选择证书状态">
          <el-option v-for="dict in dict.type.zhengshu_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="RenCaiList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" />
      <el-table-column label="姓名" align="center" width="100" prop="Name">
        <template slot-scope="scope">
          <el-button type="text" @click="handleInfo(scope.row)">{{ scope.row.Name }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="Sex" width="100" />
      <el-table-column label="身份证号" align="center" width="170" prop="ShenFenZheng" />
      <el-table-column label="职称" align="center" prop="ZhiCheng" >
		<template slot-scope="scope">
			<dict-tag :options="dict.type.job_title" :value="scope.row.ZhiCheng" />
		</template>
	  </el-table-column>
      <el-table-column label="学历" align="center" prop="XueLi" />
      <el-table-column label="证书" align="center" prop="XueLi">
        <template slot-scope="scope">
          <el-popover placement="left" width="200" trigger="hover"
            v-if="scope.row.JLYZhengHaoNum != '' && scope.row.JLYZhengHaoNum != null">
            <div>
              <div>
                证书编号：{{ scope.row.JLYZhengHaoNum }}
              </div>
              <div>
                发证日期：{{ scope.row.JLYfzrq }}
              </div>
            </div>
            <el-button type="text" slot="reference">监理员</el-button>
          </el-popover>
          <el-divider direction="vertical"
            v-if="scope.row.JLYZhengHaoNum != '' && scope.row.JLYZhengHaoNum != null && (scope.row.JLZhengHaoNum != '' && scope.row.JLZhengHaoNum != null || scope.row.ZJZhengHao != '' && scope.row.ZJZhengHao != null)"></el-divider>
          <el-popover placement="left" width="200" trigger="hover"
            v-if="scope.row.JLZhengHaoNum != '' && scope.row.JLZhengHaoNum != null">
            <div>
              <div>
                证书编号：{{ scope.row.JLZhengHaoNum }}
              </div>
              <div>
                证书有效期至：{{ scope.row.JLYxqz }}
              </div>
            </div>
            <el-button type="text" slot="reference">监理工程师</el-button>
          </el-popover>
          <el-divider direction="vertical"
            v-if="scope.row.JLZhengHaoNum != '' && scope.row.JLZhengHaoNum != null && scope.row.ZJZhengHao != '' && scope.row.ZJZhengHao != null"></el-divider>
          <el-popover placement="left" width="240" trigger="hover"
            v-if="scope.row.ZJZhengHao != '' && scope.row.ZJZhengHao != null">
            <div>
              <div>
                证书编号：{{ scope.row.ZJZhengHao }}
              </div>
              <div>
                发证日期：{{ scope.row.ZJfzrq }}
              </div>
            </div>
            <el-button type="text" slot="reference">总监理工程师</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="不良记录" align="center" prop="BljlFlg">
        <template slot-scope="scope">
          <el-popover placement="left" width="300" trigger="hover" v-if="scope.row.BljlFlg == 1">
            <div>
              <div>
                编号：{{ scope.row.BljlBianhao }}
              </div>
              <div>
                内容：{{ scope.row.BljlContent }}
              </div>
              <div>
                定性：{{ scope.row.BljlDingxing }}
              </div>
              <div>
                依据：{{ scope.row.BljlClyj }}
              </div>
              <div>
                开始：{{ scope.row.BljlGbStart }}
              </div>
              <div>
                结束：{{ scope.row.BljlGbEnd }}
              </div>
            </div>
            <el-button type="text" slot="reference">有</el-button>
          </el-popover>

          <!-- <el-button type="text" slot="reference" v-if="scope.row.BljlFlg != 1 || ">无</el-button> -->
        </template>
      </el-table-column>
      <el-table-column label="处罚" align="center" prop="XueLi">
        <template slot-scope="scope">
          <el-popover placement="left" width="300" trigger="hover"
            v-if="scope.row.ChuFa != null && scope.row.ChuFa.length > 0 && scope.row.ChuFa !== '暂无'">
            <div>
              <div>
                内容：{{ scope.row.ChuFa }}
              </div>
              <div>
                时间：{{ scope.row.ChuFaTime }}
              </div>
            </div>
            <el-button type="text" slot="reference">有</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加或修改资格考试报名对话框 -->
    <el-dialog title="监理人员详细信息" top="3vh" :visible.sync="open" width="70%" :close-on-click-modal="false" destroy-on-close>
      <div style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10" v-if="open">
        <jlxiangxi :IdInfo="IdInfo" :cardNum="cardNum"></jlxiangxi>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelXiugai">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog append-to-body title="监理人员信息" height="75vh" :visible.sync="dialogVisibleInfo" top="3vh" width="1250px">
      <div style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10">
        <jianliInfo :IdInfo="IdInfo" :sfz="sfz"></jianliInfo>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleInfo = false">关闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRenCai,
  getRenCai,
  delRenCai,
  addRenCai,
  updateRenCai
} from "@/api/xiehui/jlry/RenCai";
import {
  getPeoList,
} from "@/api/qiye/jxjy"
import jianliInfo from "./../../../xiehui/jianliInfo.vue"
import jlxiangxi from "./jlxiangxi.vue";
export default {
  name: "RenCai",
  components: { jlxiangxi, jianliInfo },
  dicts: ['jxjy_sfkyjxjy', 'jxjy_jlgcszfbz', 'jxjy_bljl', 'jxjy_jlyzfbz', 'zhengshu_type', 'chufa_type','job_title','zhengshu_status'],
  data() {
    return {
      cardNum: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 监理人才管理表格数据
      RenCaiList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        DeptID: null,
        Dept: null,
        Name: null,
        ShenFenZheng: null,
        JLYZhengHao: null,
        JLYZhengHaoNum: null,
        JLYfzrq: null,
        JLZhengHao: null,
        JLZhengHaoNum: null,
        JLfzrq: null,
        JLYxqz: null,
        ZJZhengHao: null,
        ZJfzrq: null,
        JSBZhengHao: null,
        JSBfzrq: null,
        Sex: null,
        Birthday: null,
        XueLi: null,
        ZhuanYe: null,
        ZhiCheng: null,
        NianXian: null,
        LianXiRen: null,
        Tel: null,
        Phone: null,
        Fax: null,
        PostCode: null,
        Address: null,
        Email: null,
        wangzhi: null,
        ChuFa: null,
        ChuFaTime: null,
        BljlFlg: null,
        BljlBianhao: null,
        BljlContent: null,
        BljlDingxing: null,
        BljlClyj: null,
        BljlGbStart: null,
        BljlGbEnd: null,
        BeiZhu: null,
        ShenHe: null,
        SendTime: null,
        DisplayOrder: null,
        DelFlg: null,
        DelTime: null,
        JLYzfFlg: null,
        UpdateTime: null,
        isJxjyShenheFlg: null,
        ZJzfFlg: null,
        ZfResult: null,
        isRetire: null,//是否退休
        ChuFa: null,//黑名单
        zhengshuType: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      IdInfo: null,
      type: null,
      dialogVisibleInfo: false,
      sfz: '',
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    }
  },
  created() {
    this.type = this.$route.query.type
    if (this.$route.query.type != 2) {
      this.queryParams.DeptID = this.userInfo.deptId || this.userInfo.id
      this.queryParams.isRetire = this.$route.query.type
    } else {
      this.queryParams.ChuFa = '黑名单'
    }
    this.getList();
  },
  methods: {
    handleInfo(row) {
      console.log("🚀 ~ handleInfo ~ row:", row.ID)
      this.IdInfo = row.ID
      this.sfz = row.ShenFenZheng
      this.dialogVisibleInfo = true
    },
    /** 查询监理人才管理列表 */
    getList() {
      this.loading = true;
      listRenCai(this.queryParams).then(response => {
        this.RenCaiList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        DeptID: this.userInfo.deptId || this.userInfo.id,
        isRetire: this.$route.query.type == 2 ? null : this.$route.query.type,
        ChuFa: this.$route.query.type == 2 ? '黑名单' : null,
        Dept: null,
        Name: null,
        ShenFenZheng: null,
        JLYZhengHao: null,
        JLYZhengHaoNum: null,
        JLYfzrq: null,
        JLZhengHao: null,
        JLZhengHaoNum: null,
        JLfzrq: null,
        JLYxqz: null,
        ZJZhengHao: null,
        ZJfzrq: null,
        JSBZhengHao: null,
        JSBfzrq: null,
        Sex: null,
        Birthday: null,
        XueLi: null,
        ZhuanYe: null,
        ZhiCheng: null,
        NianXian: null,
        LianXiRen: null,
        Tel: null,
        Phone: null,
        Fax: null,
        PostCode: null,
        Address: null,
        Email: null,
        wangzhi: null,
        ChuFa: null,
        ChuFaTime: null,
        BljlFlg: null,
        BljlBianhao: null,
        BljlContent: null,
        BljlDingxing: null,
        BljlClyj: null,
        BljlGbStart: null,
        BljlGbEnd: null,
        BeiZhu: null,
        ShenHe: null,
        SendTime: null,
        DisplayOrder: null,
        DelFlg: null,
        DelTime: null,
        JLYzfFlg: null,
        UpdateTime: null,
        isJxjyShenheFlg: null,
        ZJzfFlg: null,
        ZfResult: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    cancelXiugai() {
      this.open = false
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加监理人才管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ID = row.ID || this.ids
      getRenCai(ID).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改监理人才管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ID != null) {
            updateRenCai(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRenCai(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const IDs = row.ID || this.ids;
      this.$modal.confirm('是否确认删除监理人才管理编号为"' + IDs + '"的数据项？').then(function () {
        return delRenCai(IDs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('jlry/RenCai/export', {
        ...this.queryParams
      }, `RenCai_${new Date().getTime()}.xlsx`)
    },
    //报名审核 1可以报名 0不可报名
    baoming(row) {
      this.reset();
      const ID = row.ID || this.ids
      getRenCai(ID).then(response => {
        this.form = response.data;
        this.$confirm('通过审核后，可报名参加网络继续教育，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          this.form.isJxjyShenheFlg = 1
          updateRenCai(this.form).then(response => {
            this.$modal.msgSuccess("审核成功");
            this.getList();
          });
        }).catch(() => {

        });
      });

    },
    //取消报名审核
    qvxiaoBm(row) {
      this.reset();
      const ID = row.ID || this.ids
      getRenCai(ID).then(response => {
        this.form = response.data;
        this.$confirm('取消审核后，不能报名参加网络继续教育，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          this.form.isJxjyShenheFlg = 0
          updateRenCai(this.form).then(response => {
            this.$modal.msgSuccess("取消成功");
            this.getList();
          });
        }).catch(() => {

        });
      });
    },
    indexMethod(index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + 1 + index
    },
    //查看详情
    seeInfo(row) {
      console.log("🚀 ~ seeInfo ~ row:", row)
      this.reset();
      this.IdInfo = row.ID
      this.cardNum = row.ShenFenZheng
      // getRenCai(row.ID).then(response => {
      //   this.form = response.data;
      this.open = true;
      //   this.title = "查看详情";
      // });
    }
  }
};
</script>
