<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
      <el-row :gutter="20">
        <el-col :span="24">
          <h2>企业基本信息</h2>
        </el-col>
        <el-col :span="24">
          <el-col :span="12">
            <el-form-item
              label="营业执照"
              prop="businessLicenseImg"
              class="imageView"
            >
              <imageUpload
                v-model="formData.businessLicenseImg"
                :limit="1"
                promptText="点击上传营业执照"
                unique="businessLicenseImg"
                @input="handleBusinessLicense"
              />
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业全称" prop="enterpriseFullName">
            <el-input
              v-model="formData.enterpriseFullName"
              placeholder="请输入企业全称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业简称" prop="enterpriseAbbreviation">
            <el-input
              v-model="formData.enterpriseAbbreviation"
              placeholder="请输入企业简称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="社会统一信用代码" prop="uscCode">
            <el-input
              v-model="formData.uscCode"
              placeholder="请输入社会统一信用代码"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业类型" prop="enterpriseType">
            <el-select
              v-model="formData.enterpriseType"
              placeholder="请选择企业类型"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="dict in dict.type.enterprise_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成立日期" prop="establishmentDate">
            <el-date-picker
              v-model="formData.establishmentDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              clearable
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册地址" prop="registeredAddress">
            <el-input
              v-model="formData.registeredAddress"
              placeholder="请输入注册地址"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营业期限" prop="businessTermTime">
            <!-- businessTermStart, businessTermEnd -->
            <el-date-picker
              v-model="formData.businessTermTime"
              size="small"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <h2>法人信息</h2>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="idCardFrontUrl" class="imageView">
            <imageUpload
              v-model="formData.idCardFrontUrl"
              :limit="1"
              promptText="点击上传身份证正面"
              unique="idCardFrontUrl"
              @input="handleIdcard($event, 1)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="idCardBackUrl" class="imageView">
            <imageUpload
              v-model="formData.idCardBackUrl"
              :limit="1"
              promptText="点击上传身份证反面"
              unique="idCardBackUrl"
              @input="handleIdcard($event, 2)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人姓名" prop="legalPersonName">
            <el-input
              v-model="formData.legalPersonName"
              placeholder="请输入法人姓名"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证" prop="idCardNumber">
            <el-input
              v-model="formData.idCardNumber"
              placeholder="请输入身份证"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证有效期" prop="idCardValidTime">
            <!-- idCardValidStart, idCardValidEnd -->
            <el-date-picker
              v-model="formData.idCardValidTime"
              size="small"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <h2>结算账户信息</h2>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户人姓名" prop="accountHolderName">
            <el-input
              v-model="formData.accountHolderName"
              placeholder="请输入开户人姓名"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号" prop="bankCardNumber">
            <el-input
              v-model="formData.bankCardNumber"
              placeholder="请输入银行卡号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行名称" prop="bankName">
            <el-input
              v-model="formData.bankName"
              placeholder="请输入开户行名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支行名称" prop="subBranchName">
            <el-input
              v-model="formData.subBranchName"
              placeholder="请输入支行名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收呗的商户 ID" prop="thirdMerchantId">
            <el-input
              v-model="formData.thirdMerchantId"
              placeholder="请输入收呗的商户 ID"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <h2>电子签章信息</h2>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="平台公章"
            prop="platformSealUrl"
            class="imageView"
          >
            <imageUpload
              v-model="formData.platformSealUrl"
              :limit="1"
              promptText="点击上传平台公章图片"
              :isShowTip="false"
              unique="platformSealUrl"
            />
            <span style="color: #666666"
              >建议上传透明背景PNG格式，最佳尺寸200×200px</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="法人私章"
            prop="legalPersonSealUrl"
            class="imageView"
          >
            <imageUpload
              v-model="formData.legalPersonSealUrl"
              :limit="1"
              promptText="点击上传法人私章图片"
              :isShowTip="false"
              unique="legalPersonSealUrl"
            />
            <span style="color: #666666"
              >建议上传透明背景PNG格式，最佳尺寸200×200px</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同签署人" prop="contractSigner">
            <el-input
              v-model="formData.contractSigner"
              placeholder="请输入合同签署人"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署人手机号" prop="signerMobile">
            <el-input
              v-model="formData.signerMobile"
              placeholder="请输入签署人手机号"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm" :loading="loading"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  platformInfoInfo,
  platformInfoAdd,
  ocrBusinessLic,
  ocrIdcard,
} from "@/api/platformInfo";
import jsonData from "./platformInfoData.js";
export default {
  dicts: ["enterprise_type"],
  data() {
    return {
      loading: false,
      info: {},
      formData: {},
      rules: {},
    };
  },
  watch: {
    "formData.businessTermTime"(val) {
      //   console.log("watch", val);
      if (val) {
        this.formData.businessTermStart = val[0];
        this.formData.businessTermEnd = val[1];
      } else {
        this.formData.businessTermStart = "";
        this.formData.businessTermEnd = "";
      }
    },
    "formData.idCardValidTime"(val) {
      if (val) {
        this.formData.idCardValidStart = val[0];
        this.formData.idCardValidEnd = val[1];
      } else {
        this.formData.idCardValidStart = "";
        this.formData.idCardValidEnd = "";
      }
    },
  },
  created() {
    // console.log(jsonData.rules);
    this.rules = { ...jsonData.rules };
    this.getInfo();
  },
  methods: {
    getInfo() {
      platformInfoInfo().then((res) => {
        if (res.code == 200) {
          this.info = res.data || {};
          this.formData = { ...res.data };
          if (this.formData.businessTermStart) {
            let time = [
              this.formData.businessTermStart,
              this.formData.businessTermEnd,
            ];
            this.formData.businessTermTime = time;
            this.info.businessTermTime = time;
          }
          if (this.formData.idCardValidStart) {
            let time = [
              this.formData.idCardValidStart,
              this.formData.idCardValidEnd,
            ];
            this.formData.idCardValidTime = time;
            this.info.idCardValidTime = time;
          }
        }
      });
    },
    // 营业执照上传成功触发识别接口
    handleBusinessLicense(e) {
      console.log(e);
      if (e) {
        ocrBusinessLic({ imgHttpUrl: e }).then((res) => {
          //   console.log(res);
          if (res.code == 200 && res.data) {
            Object.assign(this.formData, {
              registeredAddress: res.data.address,
              uscCode: res.data.creditCode,
              enterpriseFullName: res.data.name,
            });
            this.$forceUpdate();
          }
        });
      }
    },
    formatDate(dateString) {
      // 创建一个新的日期对象
      const date = new Date(
        dateString.slice(0, 4),
        dateString.slice(4, 6) - 1,
        dateString.slice(6)
      );
      // 转换为ISO格式的字符串
      return date.toISOString().slice(0, 10);
    },
    // 识别身份证图片
    handleIdcard(e, front) {
      //   console.log(e);
      if (e) {
        ocrIdcard({ imgHttpUrl: e, front }).then((res) => {
          //   console.log(res);
          if (res.code == 200 && res.data) {
            if (front == 1) {
              Object.assign(this.formData, {
                legalPersonName: res.data.name,
                idCardNumber: res.data.idNo,
              });
            } else if (front == 2) {
              let issuingTime = this.formatDate(res.data.issuingTime);
              let overdueTime = this.formatDate(res.data.overdueTime);
              Object.assign(this.formData, {
                idCardValidTime: [issuingTime, overdueTime],
              });
            }
            this.$forceUpdate();
          }
        });
      }
    },

    cancel() {
      this.formData = { ...this.info };
      this.$refs.formRef.clearValidate();
    },
    submitForm() {
      console.log(this.formData);
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          let form = {
            ...this.formData,
            idCardValidTime: null,
            businessTermTime: null,
          };
          platformInfoAdd(form)
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.$message.success("保存成功");
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload.el-upload--picture-card {
  width: 100%;
  height: 200px;
}
.imageView {
  width: 100%;
  min-height: 265px;
}
</style>
