<template>
  <div>
    <el-form ref="classForm" label-position="right" inline label-width="160px" :model="form">

      <el-row :gutter="40">
        <div style="background-color: #eee;font-weight: bold;text-align: center;font-size: 16px;position: relative;"
          class="pd-10 m-b-10">
          监理人员详细信息
        </div>
        <el-col :span="24">
          <div class="formTitle m-b-20">个人信息</div>
        </el-col>
        <!-- <el-col :span="8"> -->
        <el-form-item label="姓名">
          <el-input style="width: 230px;" v-model="form.Name" readonly type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="性别">
          <el-select style="width: 230px;" readonly v-model="form.Sex" disabled clearable placeholder="">
            <el-option label="男" value="男"> 男 </el-option>
            <el-option label="女" value="女"> 女 </el-option>
          </el-select>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="身份证号">
          <el-input style="width: 230px;" readonly v-model="form.ShenFenZheng" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="出生年月">
          <el-input style="width: 230px;" readonly v-model="form.Birthday" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="学历">
          <el-input style="width: 230px;" readonly v-model="form.XueLi" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="专业">
          <el-input style="width: 230px;" readonly v-model="form.ZhuanYe" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="职称">
          <!-- <el-input style="width: 230px;" v-model="form.ZhiCheng" type="text" auto-complete="off"
            placeholder=""></el-input> -->
			<el-select v-model="form.ZhiCheng" placeholder="请选择职称" clearable >
			  <el-option v-for="dict in dict.type.job_title" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item style="display: inline-block;" label="监理年限">
          <el-input style="width: 230px;" readonly v-model="form.NianXian" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col> -->
        <el-col :span="24">
          <div class="formTitle m-b-20">证书信息</div>
        </el-col>
        <br>
        <!-- <el-col :span="8"> -->
        <el-form-item label="监理员证书号">
          <el-input style="width: 230px;" readonly v-model="form.JLYZhengHao" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="发证日期">
          <el-date-picker readonly v-model="form.JLYfzrq" value-format="yyyy-MM-dd" type="date" placeholder=""
            style="width: 250px;display: inline-block;">
          </el-date-picker>
        </el-form-item>
        <br>
        <!-- </el-col>
        <el-col style="width: 50%;" :span="8"> </el-col>
        <el-col :span="8"> -->
        <el-form-item label="监理工程师证书号">
          <el-input style="width: 230px;" readonly v-model="form.JLZhengHao" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="发证日期">
          <el-date-picker readonly v-model="form.JLfzrq" value-format="yyyy-MM-dd" type="date" placeholder=""
            style="width: 250px;display: inline-block;">
          </el-date-picker>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="有效期至">
          <el-date-picker readonly v-model="form.JLYxqz" value-format="yyyy-MM-dd" type="date" placeholder=""
            style="width: 230px;display: inline-block;">
          </el-date-picker>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="监理工程师证书编号">
          <el-input style="width: 230px;" readonly v-model="form.JlZhengHaoNum" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <br>
        <!-- </el-col>
        <el-col style="width: 80%;" :span="8"> </el-col>
        <el-col :span="8"> -->
        <el-form-item label="总监理工程师证书号">
          <el-input style="width: 230px;" readonly v-model="form.ZJZhengHao" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="发证日期">
          <el-date-picker readonly v-model="form.ZJfzrq" value-format="yyyy-MM-dd" type="date" placeholder=""
            style="width: 250px;display: inline-block;">
          </el-date-picker>
        </el-form-item>
        <!-- </el-col>
        <el-col style="width: 80%;" :span="8"> </el-col>
        <el-col :span="8"> -->
        <br>
        <el-form-item label="建设部证书号">
          <el-input style="width: 230px;" readonly v-model="form.JSBZhengHao" type="text" auto-complete="off"
            placeholder=""></el-input>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="8"> -->
        <el-form-item label="发证日期">
          <el-date-picker readonly v-model="form.JSBfzrq" value-format="yyyy-MM-dd" type="date" placeholder=""
            style="width: 250px;display: inline-block;">
          </el-date-picker>
        </el-form-item>
        <!-- </el-col> -->
        <el-col :span="24">
          <div class="formTitle m-b-20">监理工程师业绩/简历</div>
        </el-col>
        <el-col :span="24">
          <el-table :data="jianli" style="width: 1200px;display: inline-block;">
            <el-table-column align="center" label="序号" width="100" type="index"> </el-table-column>
            <el-table-column align="center" prop="Nian" label="添加时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.Nian, "{y}-{m}-{d}") }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="QYLoginName" label="工作单位">
            </el-table-column>
            <el-table-column align="center" label="监理工程师业绩/简历">
              <template slot-scope="scope">
                <!-- <el-button @click="seeJianli(scope.row)" slot="reference">查看</el-button>
				-->
                <el-popover placement="top" title="业绩:" width="400" trigger="click">
                  <div v-html="scope.row.zyJianSheYeJi"></div>
                  <el-button slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <div class="formTitle m-b-20">证件信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证">

            <span> <image-preview v-if="fileList0.length != 0" :src="fileList0[0].url" :width="'140px'"
                :height="'140px'" /></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业证">
            <span><image-preview v-if="fileList1.length != 0" :src="fileList1[0].url" :width="'140px'"
                :height="'140px'" /> </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职称证">

            <span> <image-preview v-if="fileList2.length != 0" :src="fileList2[0].url" :width="'140px'"
                :height="'140px'" /></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学信网证明">
            <span> <image-preview v-if="fileList3.length != 0" :src="fileList3[0].url" :width="'140px'"
                :height="'140px'" /></span> </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <div class="formTitle m-b-20">变更记录</div>
        </el-col> -->
      </el-row>
    </el-form>

  </div>
</template>

<script>
import {
  listRenCai,
  getRenCai,
  delRenCai,
  addRenCai,
  updateRenCai,
  getJianli
} from "@/api/xiehui/jlry/RenCai";
import Editor1 from "../../../../components/Editor1.vue";
export default {
  components: { Editor1 },
  props: {
    IdInfo: {
      type: Number,
      default: "",
    },
    cardNum: {
      type: String,
      default: "",
    }
  },
  dicts: ['job_title'],
  data() {
    return {
      jianli: [],
      yejiInfo: '',
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", //上传路径
      fileList0: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      form: {},
      photoAll: [],
      baseUrl: process.env.VUE_APP_BASE_API2,
      openJianli: false,
      formId: null,
      jianliInfo: '',


    };
  },
  watch: {
    IdInfo: {
      handler(newVal, oldVal) {
        this.formId = newVal;
        this.getInfo();
      },
      immediate: true, // immediate选项可以开启首次赋值监听
    },
    cardNum: {
      handler(newVal, oldVal) {
        // this.getInfo();
      },
      immediate: true, // immediate选项可以开启首次赋值监听
    }
  },
  computed: {},
  methods: {
    getInfo() {
      // console.log("🚀 ~ getRenCai ~ this.IdInfo:", this.IdInfo)
      getRenCai(this.formId).then(response => {
        this.form = response.data.renCai;
        this.photoAll = response.data.personCords;

        this.photoAll.forEach((item) => {
          if (item.ZJLX == 0) {
            this.fileList0.push({ url: this.baseUrl + item.ZJImgUrl })
          }
          if (item.ZJLX == 1) {
            this.fileList1.push({ url: this.baseUrl + item.ZJImgUrl })
          }
          if (item.ZJLX == 3) {
            this.fileList2.push({ url: this.baseUrl + item.ZJImgUrl })
          }
          if (item.ZJLX == 4) {
            this.fileList3.push({ url: this.baseUrl + item.ZJImgUrl })
          }
        })
        // this.form.personcord = this.photoAll;
      });
      getJianli({ ShenFenZheng: this.cardNum }).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            let qaz = response.data[i]
            qaz.zyJianSheYeJi = response.data[i].zyJianSheYeJi.replaceAll("&amp;", "&").replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&quot;", `"`).replaceAll("&#039;", "'").replaceAll("&nbsp;", " ")
            this.jianli.push(qaz)
          }
        }
      })
    }
  },
  created() {

  },
  mounted() { }
};
</script>
<style lang="scss" scoped>
.formTitle {
  color: #409eff;
  border-bottom: 1px solid #409eff;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

::v-deep .el-select>.el-input {
  display: block;
  width: 230px;
}

// ::v-deep .el-form-item__label {
//   text-align: justify !important;

//   text-align-last: justify !important;
// }

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .select-container {
  width: 100%;
  /* 如果需要，可以设置外部容器的宽度 */
}

::v-deep .select-container .el-select {
  width: 100%;
  /* 让 el-select 占满外部容器的宽度 */
}

::v-deep .hide .el-upload--picture-card {
  display: none;
}
</style>
