<template>
  <div>
    <BaseDialog
      width="900px"
      :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="80px"
          >
            <el-form-item label="企业名称" prop="companyId">
              <el-select v-model="ruleForm.companyId" placeholder="请选择">
                <el-option
                  v-for="item in getCompanyList"
                  :key="item.companyId"
                  :label="item.companyName"
                  :value="item.companyId"
                >
                </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="issuanceDate">
              <el-date-picker
                v-model="ruleForm.issuanceDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="有效日期" prop="effectiveDate">
              <el-date-picker
                style="width: 150px"
                v-model="ruleForm.effectiveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                :disabled="ruleForm.effectiveFlag == 1"
              >
              </el-date-picker>
              <el-checkbox
                style="margin-left: 10px"
                v-model="ruleForm.effectiveFlag"
                :true-label="1"
                :false-label="0"
              >
                长期
              </el-checkbox>
            </el-form-item>
            <el-form-item label="发证机关" prop="issuingAuthority">
              <el-input
                v-model="ruleForm.issuingAuthority"
                placeholder="请输入发证机关"
              ></el-input>
            </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="80px"
          >
            <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="companyCertificateRemarks">
              <el-input
                type="textarea"
                :rows="1"
                v-model="ruleForm.companyCertificateRemarks"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="textList"
          style="width: 100%"
          fit
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            'text-align': 'center',
            border: '0',
          }"
          :cell-style="{
            'text-align': 'center',
            border: '0',
          }"
        >
          <el-table-column prop="date" label="主项/增项">
            <template slot-scope="scope">
              <el-select v-model="scope.row.itemClass" placeholder="请选择">
                <el-option
                  v-for="item in [
                    { value: 1, label: '主项' },
                    { value: 2, label: '增项' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="qualificationCategory" label="资质类别/等级">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.qualificationCategory"
                placeholder="请输入"
              />
            </template>
          </el-table-column>
          <el-table-column prop="applicationDate" label="申请日期">
            <template slot-scope="scope">
              <el-date-picker
                style="width: 90%"
                v-model="scope.row.applicationDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column 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>
    </BaseDialog>
  </div>
</template>
  
  <script>
import { addCertificate, updateCertificate } from "@/api/company";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      rules: {
        companyId: [{ required: true, message: "企业名称", trigger: "blur" }],
        certificateName: [
          { required: true, message: "证书名称", trigger: "blur" },
        ],
      },
      ruleForm: {},
      textList: [],
      isEditCertDialog: false,
      dialogTitle: "新增",
    };
  },
  computed: {
    ...mapGetters(["getCompanyList"]),
  },
  mounted() {},

  methods: {
    async openBoxs(row, type) {
      this.isEditCertDialog = true;
      if (type === "add") {
        this.dialogTitle = "新增";
        this.ruleForm = {};
        this.textList = [];
        return;
      }
      this.dialogTitle = "修改";
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.ruleForm.companyId = Number(row.companyId);
      this.textList = JSON.parse(row.text) || [];
      this.ruleForm.issuanceDate = this.$methodsTools.timestampTo1013('show', this.ruleForm.issuanceDate)
      this.ruleForm.effectiveDate = this.$methodsTools.timestampTo1013('show', this.ruleForm.effectiveDate)
    },
    close() {
    },
    submitForm() {
      this.ruleForm.issuanceDate = this.$methodsTools.timestampTo1013('save', this.ruleForm.issuanceDate)
      this.ruleForm.effectiveDate = this.$methodsTools.timestampTo1013('save', this.ruleForm.effectiveDate)
      this.$refs["ruleForm1"].validate((valid) => {
        console.log(valid, "rule");
        if (valid) {
          this.ruleForm.certificateType = 2; // 2:资质证书
          const _request =
            this.dialogTitle === "新增" ? addCertificate : updateCertificate;
          this.ruleForm.text = JSON.stringify(this.textList);
          _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.textList.splice(index, 1);
      } else {
        this.textList.push({ });
      }
    },
    // 上传主图操作
    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;
}
.table {
  border: 1px solid #e6ebf5;
  .el-table::before {
    display: none;
  }
}

.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>
  