<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="rules" :size="ELsize" label-width="150px" :disabled="disabled">
      <el-row :gutter="20">
        <!-- <el-col :span="24">
          <h2>结算卡信息</h2>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="银行卡类型" prop="accountType">
            <el-radio-group v-model="formData.accountType">
              <el-radio v-for="dict in dict.type.account_type" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡照片正面" prop="cardFrontUrl" class="imageView">
            <imageUpload v-if="!disabled" v-model="formData.cardFrontUrl" :limit="1" promptText="点击上传银行卡照片正面"
              unique="cardFrontUrl" />
            <ImagePreview width="200px" height="200px" v-else-if="formData.cardFrontUrl" :src="formData.cardFrontUrl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡照片反面" prop="cardBackUrl" class="imageView">
            <imageUpload v-if="!disabled" v-model="formData.cardBackUrl" :limit="1" promptText="点击上传银行卡照片反面"
              unique="cardBackUrl" />
            <ImagePreview width="200px" height="200px" v-else-if="formData.cardBackUrl" :src="formData.cardBackUrl" />
          </el-form-item>
        </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>

        <!-- 对公信息 -->
        <template v-if="formData.accountType == 'corporate'">
          <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="24">
            <el-form-item label="银行卡开户地" prop="bankProvinceName">
              <span v-if="formData.bankProvinceName">{{
                formData.bankProvinceName +
                formData.bankCityName +
                formData.bankAreaName
              }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开户许可证" prop="openLicenseUrl" class="imageView">
              <imageUpload v-if="!disabled" v-model="formData.openLicenseUrl" :limit="1" promptText="点击上传开户许可证"
                unique="openLicenseUrl" />
              <ImagePreview width="200px" height="200px" v-else-if="formData.openLicenseUrl"
                :src="formData.openLicenseUrl" />
            </el-form-item>
          </el-col>
        </template>

        <!-- 对私信息 -->
        <template v-if="
          formData.accountType == 'for_private_legal_entities' ||
          formData.accountType == 'for_private_non_legal_entities'
        ">
          <el-col :span="24" v-if="formData.accountType == 'for_private_non_legal_entities'">
            <el-form-item label="开户地点" prop="bankProvinceName">
              <span v-if="formData.bankProvinceName">{{
                formData.bankProvinceName +
                formData.bankCityName +
                formData.bankAreaName
              }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="结算人身份证人像面" prop="settlementIdCardFrontUrl" class="imageView">
              <imageUpload v-if="!disabled" v-model="formData.settlementIdCardFrontUrl" :limit="1"
                promptText="点击上传结算人身份证人像面" unique="settlementIdCardFrontUrl" />
              <ImagePreview width="200px" height="200px" v-else-if="formData.settlementIdCardFrontUrl"
                :src="formData.settlementIdCardFrontUrl" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="结算人身份证国徽面" prop="settlementIdCardBackUrl" class="imageView">
              <imageUpload v-if="!disabled" v-model="formData.settlementIdCardBackUrl" :limit="1"
                promptText="点击上传结算人身份证国徽面" unique="settlementIdCardBackUrl" />
              <ImagePreview width="200px" height="200px" v-else-if="formData.settlementIdCardBackUrl"
                :src="formData.settlementIdCardBackUrl" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="持卡人姓名" prop="settlementName">
              <el-input v-model="formData.settlementName" placeholder="请输入持卡人姓名" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号码" prop="settlementIdCard">
              <el-input v-model="formData.settlementIdCard" placeholder="请输入身份证号码" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证起始有效期" prop="settlementIdValidStart">
              <el-date-picker v-model="formData.settlementIdValidStart" type="date" placeholder="选择身份证起始有效期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证结束有效期" prop="settlementIdValidEnd">
              <el-date-picker v-model="formData.settlementIdValidEnd" type="date" placeholder="选择身份证结束有效期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="持卡人手机号" prop="settlementPhone">
              <el-input v-model="formData.settlementPhone" placeholder="请输入持卡人手机号" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="formData.accountType == 'for_private_non_legal_entities'">
            <el-col :span="12">
              <el-form-item label="授权委托书" prop="authorizationLetterUrl" class="imageView">
                <imageUpload v-if="!disabled" v-model="formData.authorizationLetterUrl" :limit="1"
                  promptText="点击上传授权委托书" unique="authorizationLetterUrl" />
                <ImagePreview width="200px" height="200px" v-else-if="formData.authorizationLetterUrl"
                  :src="formData.authorizationLetterUrl" />
              </el-form-item>
            </el-col>
          </el-col>
        </template>

        <!-- <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 { businessSettlementInfo } from "@/api/shop";
export default {
  dicts: ["enterprise_type", "account_type"],
  data() {
    return {
      loading: false,
      info: {},
      formData: {},
      rules: {},
      disabled: true,
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      businessSettlementInfo().then((res) => {
        if (res.code == 200) {
          this.info = res.data || {};
          this.formData = { ...res.data };
        }
      });
    },
    // 营业执照上传成功触发识别接口
    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);
    },
  },
};
</script>

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

.imageView {
  width: 100%;
  min-height: 265px;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-range-editor.is-disabled,
::v-deep .el-range-editor.is-disabled input,
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff !important;
  color: rgb(96, 98, 102) !important;
}
</style>
