<template>
  <div>
    <BaseDialog
      width="800px"
      :isShow.sync="isEditCertDialog"
      :title="dialogTitle"
      @close="close"
      @submit="submitForm"
      :appendToBody="true"
      :confirmStatus="false"
    >
      <div class="content">
        <div class="left-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm1"
            label-width="100px"
          >
            <el-form-item label="持证人" prop="staffName">
              <div
                class="staffName"
                :style="{ color: ruleForm.staffName ? '#333333' : '' }"
                @click="openStaffListDialog()"
              >
                {{ ruleForm.staffName || "点击选择" }}
              </div>
            </el-form-item>
            <el-form-item label="证书类型" prop="certificateType">
              <el-select
                v-model="ruleForm.certificateType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in certificateTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证书名称" prop="certificateName">
              <el-input
                v-model="ruleForm.certificateName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="证书编号" prop="certificateNumber">
              <el-input
                v-model="ruleForm.certificateNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="发证机关" prop="certificateAddress">
              <el-input
                v-model="ruleForm.certificateAddress"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="发证日期" prop="startTime">
              <el-date-picker
                v-model="ruleForm.startTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="有效日期" prop="endTime">
              <el-date-picker
                v-model="ruleForm.endTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            width: 1px;
            height: 200px;
            background: #dddddd;
            align-self: center;
          "
        ></div>
        <div class="right-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="证书上传" props="previewImg">
              <div
                style="
                  width: 230px;
                  height: 170px;
                  border: 2px dashed #999;
                  border-radius: 15px;
                  line-height: 170px;
                  text-align: center;
                "
                v-if="!ruleForm.previewImg"
              >
                <label for="previewImg" @click="uploadImg">
                  <i class="el-icon-circle-plus-outline iconStsz"></i>
                </label>
              </div>

              <div v-else class="img">
                <el-image
                  style="width: 200px; height: 180px; object-fit: contain"
                  :src="$methodsTools.splitImgHost(ruleForm.previewImg)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(ruleForm.previewImg),
                  ]"
                >
                </el-image>
                <div class="sign" @click="clearImgs()">X</div>
              </div>
              <div style="color: #999">（支持格式：jpg、jpeg、png、gif）</div>
            </el-form-item>
            <el-form-item label="备注" prop="staffRemarks">
              <el-input
                type="textarea"
                :rows="4"
                v-model="ruleForm.staffRemarks"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="certificateMajor"
          style="width: 100%"
          fit
          :border="false"
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            'text-align': 'center',
            border: '0',
          }"
          :cell-style="{
            'text-align': 'center',
            border: '0',
          }"
        >
          <el-table-column
            min-width="150px"
            prop="certificateMajor"
            label="专业"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.certificateMajor"
                placeholder="请输入"
              />
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="startEffectiveDate"
            label="有效日期开始"
          >
            <template slot-scope="scope">
              <el-date-picker
                style="width: 90%"
                v-model="scope.row.startEffectiveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="endEffectiveDate"
            label="有效日期结束"
          >
            <template slot-scope="scope">
              <el-date-picker
                style="width: 90%"
                v-model="scope.row.endEffectiveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column min-width="150px" prop="btn" width="80px">
            <template slot-scope="scope">
              <i
                class="el-icon-remove"
                style="cursor: pointer"
                @click="handleRow(scope.$index, 'del')"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="font-size: 14px; cursor: pointer; margin: 10px"
          @click="handleRow(null, 'add')"
        >
          <i
            class="el-icon-circle-plus"
            style="color: #1890ff; margin-right: 2px"
          ></i>
          <span>新增</span>
        </div>
      </div>
      <!-- 持证人列表弹窗 -->
      <staffListDialog ref="staffListDialog" @handle-staff="handleStaff" />
    </BaseDialog>
  </div>
</template>
  
  <script>
import { getCertificateTypeList } from "@/views/companyManagement/component/typeList";
import { addStaffCert, updateStaffCert } from "@/api/staff";
import staffListDialog from "@/views/companyManagement/staffCertificate/staffListDialog";
export default {
  components: {
    staffListDialog,
  },
  data() {
    return {
      rules: {
        staffName: [{ required: true, message: "持证人", trigger: "blur" }],
        certificateType: [
          { required: true, message: "证书类型", trigger: "blur" },
        ],
        certificateName: [
          { required: true, message: "证书名称", trigger: "blur" },
        ],
      },
      ruleForm: {},
      certificateMajor: [],
      isEditCertDialog: false,
      dialogTitle: '新增',
      certificateTypeList: getCertificateTypeList(),
    };
  },

  mounted() {},

  methods: {
    openBoxs(row, type) {
      this.isEditCertDialog = true;
      if (type === "add") {
        this.dialogTitle = "新增";
        this.ruleForm = {};
        this.certificateMajor = [];
        return;
      }
      this.dialogTitle = "修改";
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.certificateMajor = JSON.parse(this.ruleForm.certificateMajor || "[]");
      this.ruleForm.startTime = this.$methodsTools.timestampTo1013('show', this.ruleForm.startTime)
      this.ruleForm.endTime = this.$methodsTools.timestampTo1013('show', this.ruleForm.endTime)
    },
    // 打开持证人列表弹窗
    openStaffListDialog() {
      this.$refs.staffListDialog.openBoxs(this.ruleForm);
    },
    handleStaff(row) {
      this.$set(this.ruleForm, "staffName", row.staffName);
      this.ruleForm.staffId = row.staffId;
      this.ruleForm.idCard = row.idCard;
      this.ruleForm.companyId = row.companyId;
      this.ruleForm.departmentId = row.departmentId;
    },
    close() {
    },
    submitForm() {
      this.ruleForm.startTime = this.$methodsTools.timestampTo1013('save', this.ruleForm.startTime)
      this.ruleForm.endTime = this.$methodsTools.timestampTo1013('save', this.ruleForm.endTime)
      this.$refs["ruleForm1"].validate((valid) => {
        console.log(valid, "rule");
        if (valid) {
          const _request =
            this.dialogTitle === "新增" ? addStaffCert : updateStaffCert;
          this.ruleForm.certificateMajor = JSON.stringify(
            this.certificateMajor
          );
          _request(this.ruleForm)
            .then((res) => {
              this.$message.success("操作成功");
              this.isEditCertDialog = false;
              this.$emit("refresh");
            })
            .finally(() => {
              console.log("end");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleRow(index, type) {
      console.log(index);
      if (type === "del") {
        this.certificateMajor.splice(index, 1);
      } else {
        this.certificateMajor.push({
          certificateMajor: "",
          startEffectiveDate: "",
          endEffectiveDate: "",
        });
      }
    },
    // 上传主图操作
    async uploadImg(e) {
      // console.log(this.$methodsTools.submitUpload(1).then(res => res), 'submitUpload')
      this.$set(
        this.ruleForm,
        "previewImg",
        await this.$methodsTools.submitUpload(1).then((res) => res)
      );
    },
    // 清除上传图片
    clearImgs() {
      this.$set(this.ruleForm, "previewImg", "");
    },
  },
};
</script>
  
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-bottom: 25px;
}
.table {
  border: 1px solid #e6ebf5;
  .el-table::before {
    display: none;
  }
}
.staffName {
  color: #999999;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  padding: 0 10px;
  border-radius: 5px;
  width: 215px;
  overflow: hidden;
}
.title {
  font-size: 14px;
  font-weight: bold;
  color: #2f4378;
  margin-bottom: 20px;
  border-top: 1px solid #ddd;
  padding-top: 15px;
}
.upload {
  color: #1890ff;
  cursor: pointer;
  background: #f2f2f2;
  padding: 3px 12px;
  display: inline-block;
  border-radius: 5px;
  font-size: 12px;
  &:hover {
    border: 1px dashed #1890ff;
  }
}
.mark {
  background: rgba($color: #000000, $alpha: 0.1);
  position: absolute;
  z-index: 9;
  top: 0;
  left: 25px;
  right: 25px;
  bottom: 0;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  line-height: 45px;
  // pointer-events: none;
  &:hover {
    font-weight: bold;
    background: rgba($color: #000000, $alpha: 0.3);
  }
}
.img {
  text-align: center;
  position: relative;
  margin-top: 5px;

  .sign {
    z-index: 9;
    top: -15px;
    right: -15px;
    position: absolute;
    border-radius: 50%;
    font-size: 14px;
    transform: scale(0.7);
    color: red;
    background: #fafafa;
    font-weight: bold;
    padding: 0 13px;
    cursor: pointer;
    &:hover {
      background: red;
      color: #fafafa;
    }
  }
}
</style>
  