<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="documentType">
              <el-select v-model="ruleForm.documentType" 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>
            </el-form-item>
            <el-form-item label="企业类型" prop="companyType">
              <el-select v-model="ruleForm.companyType" placeholder="请选择">
                <el-option
                  v-for="item in companyTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="信用代码" prop="creditCode">
              <el-input
                v-model="ruleForm.creditCode"
                placeholder="请输入信用代码"
              ></el-input>
            </el-form-item>
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input
                style="width: 115px"
                v-model="ruleForm.registeredCapital"
                placeholder="请输入"
              ></el-input>
              万元（人民币）
            </el-form-item>
            <el-form-item label="法定代表" prop="legalRepresentative">
              <el-input
                v-model="ruleForm.legalRepresentative"
                placeholder="请输入法定代表"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业地址" prop="companyAddress">
              <el-input
                v-model="ruleForm.companyAddress"
                placeholder="请输入企业地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="成立日期" prop="establishDate">
              <el-date-picker
                v-model="ruleForm.establishDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            width: 1px;
            height: 400px;
            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="营业期限" prop="operateDate">
              <el-date-picker
                style="width: 170px"
                v-model="ruleForm.operateDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                :disabled="ruleForm.operateFlag == 1"
              >
              </el-date-picker>
              <el-checkbox
                style="margin-left: 10px"
                v-model="ruleForm.operateFlag"
                :true-label="1"
                :false-label="0"
              >
                长期
              </el-checkbox>
            </el-form-item>
            <el-form-item label="登记机关" prop="registrationAuthority">
              <el-input
                v-model="ruleForm.registrationAuthority"
                placeholder="请输入登记机关"
              ></el-input>
            </el-form-item>
            <el-form-item label="经营范围" prop="experienceScope">
              <el-input
                type="textarea"
                :rows="3"
                v-model="ruleForm.experienceScope"
              ></el-input>
            </el-form-item>
            <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>
    </BaseDialog>
  </div>
</template>
  
  <script>
import { getCompanyTypeList } from "@/views/companyManagement/component/typeList";
import { addCertificate, updateCertificate } from "@/api/company";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      rules: {
        companyId: [{ required: true, message: "企业名称", trigger: "blur" }],
        companyType: [{ required: true, message: "企业类型", trigger: "blur" }],
        documentType: [
          { required: true, message: "证件类型", trigger: "blur" },
        ],
      },
      ruleForm: {},
      isEditCertDialog: false,
      dialogTitle: "新增",
      isEffectiveDate: false,
      companyTypeList: getCompanyTypeList(), // 获取企业类型列表数据
    };
  },
  computed: {
    ...mapGetters(["getCompanyList"]),
  },
  mounted() {},

  methods: {
    async openBoxs(row, type) {
      this.isEditCertDialog = true;
      if (type === "add") {
        this.dialogTitle = "新增";
        this.ruleForm = {};
        this.isEffectiveDate = false;
        return;
      }
      this.dialogTitle = "修改";
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.ruleForm.companyId = Number(row.companyId);
      this.ruleForm.documentType = Number(row.documentType);
      this.ruleForm.companyType = Number(row.companyType);
      this.ruleForm.establishDate = this.$methodsTools.timestampTo1013('show', this.ruleForm.establishDate)
      this.ruleForm.operateDate = this.$methodsTools.timestampTo1013('show', this.ruleForm.operateDate)
    },
    close() {
    },
    submitForm() {
      this.ruleForm.establishDate = this.$methodsTools.timestampTo1013('save', this.ruleForm.establishDate)
      this.ruleForm.operateDate = this.$methodsTools.timestampTo1013('save', this.ruleForm.operateDate)
      this.$refs["ruleForm1"].validate((valid) => {
        console.log(valid, "rule");
        if (valid) {
          this.ruleForm.certificateType = 1; // 1:营业执照
          const _request =
            this.dialogTitle === "新增" ? addCertificate : updateCertificate;
          _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;
        }
      });
    },
    // 上传主图操作
    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;
}

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