<template>
  <section class="sealDetail">
    <ai-detail>
      <template #title>
        <ai-title title="添加企业印章" isShowBack isShowBottomBorder @onBackClick="back"/>
      </template>
      <template #content>
        <el-form size="small" ref="SealForm" :model="form" :rules="rules" label-suffix="：" label-width="160px">
          <ai-title title="单位信息" isShowBottomBorder/>
          <el-form-item label="单位名称" prop="organizeName">
            <el-input clearable v-model="form.organizeName" placeholder="请输入..." maxlength="25" show-word-limit/>
          </el-form-item>
          <el-form-item label="单位类型" prop="organizeType">
            <el-select clearable v-model="form.organizeType" placeholder="请输入...">
              <el-option v-for="(op,i) in $dict.getDict('organizeType')" :key="i" :value="op.dictValue"
                         :label="op.dictName"/>
            </el-select>
          </el-form-item>
          <div class="flexFillRow">
            <el-form-item label="企业注册类型" prop="organRegType">
              <el-select clearable v-model="form.organRegType" placeholder="请输入...">
                <el-option v-for="(op,i) in $dict.getDict('organRegType')" :key="i" :value="op.dictValue"
                           :label="op.dictName"/>
              </el-select>
            </el-form-item>
            <el-form-item v-if="!!form.organRegType" :label="$dict.getLabel('organRegType',form.organRegType)"
                          prop="organCode">
              <el-input clearable v-model="form.organCode" placeholder="请输入..."/>
            </el-form-item>
            <div v-else/>
          </div>
          <div class="flexFillRow">
            <el-form-item label="注册类型" prop="registerType">
              <el-select clearable v-model="form.registerType" placeholder="请输入...">
                <el-option v-for="(op,i) in $dict.getDict('registerType')" :key="i" :value="op.dictValue"
                           :label="op.dictName"/>
              </el-select>
            </el-form-item>
            <div/>
          </div>
          <template v-if="form.registerType==1">
            <div class="flexFillRow">
              <el-form-item label="代理人姓名" prop="agentName">
                <el-input clearable v-model="form.agentName" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="代理人身份证号" prop="agentIdNumber">
                <el-input clearable v-model="form.agentIdNumber" placeholder="请输入..."/>
              </el-form-item>
            </div>
            <div class="flexFillRow">
              <el-form-item label="代理人手机号" prop="signPhone">
                <el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
              </el-form-item>
              <div/>
            </div>
          </template>
          <template v-if="form.registerType==2">
            <div class="flexFillRow">
              <el-form-item label="法人姓名" prop="legalName">
                <el-input clearable v-model="form.legalName" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="法人身份证号" prop="legalIdNumber">
                <el-input clearable v-model="form.legalIdNumber" placeholder="请输入..."/>
              </el-form-item>
            </div>
            <div class="flexFillRow">
              <el-form-item label="法人手机号" prop="signPhone">
                <el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
              </el-form-item>
              <div/>
            </div>
          </template>
          <ai-title title="印章信息" isShowBottomBorder/>
          <el-form-item class="sealImageTypes" label="生成印章类型" prop="organizeTemplateType">
            <div v-for="(op,i) in sealImageTypes" :key="i" class="item" @click="form.organizeTemplateType=op.value">
              <el-image :src="op.image" fit="contain"/>
              <el-radio :label="op.value" v-model="form.organizeTemplateType">{{ op.name }}</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="横向文内容" prop="htext">
            <el-input clearable v-model="form.htext" placeholder="0-8个字，如合同专用章，财务专用章等" maxlength="8" show-word-limit/>
          </el-form-item>
          <el-form-item label="下弦文内容" prop="qtext">
            <el-input clearable v-model="form.qtext" placeholder="0-20个字，下弦文是指的贵司公章底部一串防伪数字" maxlength="20"
                      show-word-limit/>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="handleSubmit" v-loading="loading">提交</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "sealDetail",
  inject: ['seal'],
  data() {
    return {
      form: {
        organizeTemplateType: "STAR",
        organizeType: "4",
        organRegType: "NORMAL",
        registerType: "1"
      },
      loading: false
    }
  },
  computed: {
    sealImageTypes() {
      return this.$dict.getDict("organizeTemplateType")?.map(e => ({
        image: e.dictColor,
        value: e.dictValue,
        name: e.dictName
      })) || []
    },
    rules() {
      return {
        organizeName: [{required: true, message: "请填写单位名称"}],
        organCode: [{required: true, message: `请填写${this.$dict.getLabel('organRegType', this.form.organRegType)}`}],
        legalName: [{required: true, message: "请填写法人姓名"}],
        agentName: [{required: true, message: "请填写代理人姓名"}],
        organizeTemplateType: [{required: true}],
        htext: [{required: true, message: "请填写横向文内容"}],
        qtext: [{required: true, message: "请填写下弦文内容"}],
        organizeType: [{required: true, message: "请选择单位类型"}],
        organRegType: [{required: true, message: "请选择企业注册类型"}],
        registerType: [{required: true, message: "请选择注册类型"}],
        signPhone: [
          {required: true, message: "请填写手机号码"},
          {pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
        ],
        legalIdNumber: [
          {required: true, message: "请填写法人身份证号码"},
          {validator: (r, v, cb) => cb(this.idCardNoUtil.checkIdCardNo(v) ? undefined : "身份证号码格式有误")}
        ],
        agentIdNumber: [
          {required: true, message: "请填写代理人身份证号码"},
          {validator: (r, v, cb) => cb(this.idCardNoUtil.checkIdCardNo(v) ? undefined : "身份证号码格式有误")}
        ],
      }
    }
  },
  created() {
    this.$dict.load("registerType", "organRegType", "organizeType", "organizeTemplateType")
  },
  methods: {
    back() {
      this.seal.showList = true
      this.seal.getSignatures()
    },
    handleSubmit() {
      this.$refs.SealForm.validate(v => {
        if (v) {
          this.loading = true
          this.seal.instance.post("/app/syssignaccount/register", {
            userType: 0,
            signType: 2,
            signPhone: this.form.signPhone,
            registerInfo: {...this.form, legalArea: 0},
            style: {...this.form, sealColor: "RED"}
          }).then(res => {
            this.loading = false
            if (res?.code == 0) {
              this.$message.success("添加成功!")
              this.back()
            }
          }).catch(() => this.loading = false)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sealDetail {
  height: inherit;

  ::v-deep .ai-detail__content--wrapper {
    .el-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .el-form-item {
      margin-bottom: 0;

      .el-select {
        width: 100%;
      }

      &.sealImageTypes > .el-form-item__content {
        display: flex;
        gap: 40px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          cursor: pointer;

          .el-image {
            width: 80px;
            height: 80px;
          }
        }
      }
    }

    .flexFillRow {
      display: flex;
      align-items: center;

      & > * {
        flex: 1;
        min-width: 0;
      }
    }
  }

  ::v-deep .ai-detail__footer > .el-button {
    width: 92px;
    height: 32px;
  }
}
</style>
