<template>
  <section class="productAdd">
    <ai-detail>
      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
      <template #content>
        <el-form size="small" label-width="120px" :model="form" ref="ProductForm" :rules="rules">
          <ai-card title="基本信息">
            <template #content>
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="form.productName" placeholder="请输入" clearable show-word-limit maxlength="30"/>
              </el-form-item>
              <el-row type="flex" class="flexWrap">
                <el-form-item label="贷款额度(万)" prop="loanMin">
                  <el-input type="number" v-model.number="form.loanMin" placeholder="最低额度" clearable/>
                </el-form-item>
                <el-form-item label="" prop="loanMax">
                  <el-input type="number" v-model.number="form.loanMax" placeholder="最高额度" clearable/>
                </el-form-item>
                <el-form-item label="参考利率(%)" prop="interestRateMin">
                  <el-input type="number" v-model.number="form.interestRateMin" placeholder="最低利率" clearable/>
                </el-form-item>
                <el-form-item label="" prop="interestRateMax">
                  <el-input type="number" v-model.number="form.interestRateMax" placeholder="最高利率" clearable/>
                </el-form-item>
                <el-form-item class="half" label="还款期限" prop="repaymentTimeline">
                  <ai-select v-model="form.repaymentTimeline" placeholder="请选择"
                             :selectList="dict.getDict('productRepaymentTimeline')"/>
                </el-form-item>
                <el-form-item class="half" label="还款方式" prop="repaymentMethod">
                  <ai-select v-model="form.repaymentMethod" placeholder="请选择"
                             :selectList="dict.getDict('productRepaymentMethod')"/>
                </el-form-item>
              </el-row>
              <el-form-item label="担保方式" prop="guaranteeMode">
                <el-checkbox-group v-model="form.guaranteeMode">
                  <el-checkbox v-for="op in dict.getDict('productGuaranteeMode')" :key="op.dictValue"
                               :label="op.dictValue">
                    {{ op.dictName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-row type="flex" class="flexWrap">
                <el-form-item label="客户经理姓名" prop="bankCounterpart">
                  <el-input type="text" v-model="form.bankCounterpart" placeholder="客户经理姓名" clearable maxlength="6"/>
                </el-form-item>
                <el-form-item label="客户经理电话" prop="consultationTelephone">
                  <el-input type="text" v-model="form.consultationTelephone" placeholder="客户经理电话" clearable
                            maxlength="11"/>
                </el-form-item>
              </el-row>
              <el-form-item label="企业微信二维码" prop="qrCodeUrl">
                <ai-uploader v-model="form.qrCodeUrl" :instance="instance" :limit="1" isShowTip valueIsUrl/>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="适用范围">
            <template #content>
              <el-form-item label="适用范围" prop="areaId">
                <ai-area-get :instance="instance" v-model="form.areaId" showAll/>
              </el-form-item>
              <el-form-item label="面向对象" prop="faceUser">
                <el-checkbox-group v-model="form.faceUser">
                  <el-checkbox v-for="op in dict.getDict('productFaceUser')" :key="op.dictValue" :label="op.dictValue">
                    {{ op.dictName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="产品信息">
            <template #content>
              <el-form-item label="申请条件" prop="applyCondition">
                <el-input type="textarea" rows="5" v-model="form.applyCondition" placeholder="请输入" clearable
                          maxlength="500"
                          show-word-limit/>
              </el-form-item>
              <el-form-item label="所需材料" prop="needMaterial">
                <el-input type="textarea" rows="5" v-model="form.needMaterial" placeholder="请输入" clearable
                          maxlength="500"
                          show-word-limit/>
              </el-form-item>
              <el-form-item label="产品特色" prop="productFeatures">
                <el-input type="textarea" rows="5" v-model="form.productFeatures" placeholder="请输入" clearable
                          maxlength="500"
                          show-word-limit/>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="submit">申请发布</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "productAdd",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    addTitle() {
      return !!this.$route.query.id ? "编辑金融产品" : "添加金融产品"
    },
    rules() {
      return {
        productName: [{required: true, message: "请输入产品名称", trigger: 'blur'}],
        loanMin: [{required: true, message: "请输入最低贷款额度"}],
        loanMax: [
          {required: true, message: "请输入最高贷款额度", trigger: 'blur'},
          {validator: (r, v, cb) => v < this.form.loanMin ? cb("输入的最高贷款需大于最低贷款") : cb()}
        ],
        interestRateMin: [{required: true, message: "请输入最低参考利率", trigger: 'blur'}],
        interestRateMax: [
          {required: true, message: "请输入最高参考利率", trigger: 'blur'},
          {validator: (r, v, cb) => v < this.form.interestRateMin ? cb("输入的最高参考利率需大于最低参考利率") : cb()}
        ],
        repaymentTimeline: [{required: true, message: "请选择还款期限", trigger: 'blur'}],
        repaymentMethod: [{required: true, message: "请选择还款方式", trigger: 'blur'}],
        guaranteeMode: [{required: true, message: "请选择担保方式", trigger: 'blur'}],
        areaId: [{required: true, message: "请选择适用范围", trigger: 'blur'}],
        faceUser: [{required: true, message: "请选择面向对象", trigger: 'blur'}],
        applyCondition: [{required: true, message: "请输入申请条件", trigger: 'blur'}],
        needMaterial: [{required: true, message: "请输入所需材料", trigger: 'blur'}],
        productFeatures: [{required: true, message: "请输入产品特色", trigger: 'blur'}],
        // bankCounterpart: [{required: true, message: "请输入客户经理姓名", trigger: 'change'}],
        // consultationTelephone: [ {required: true, message: "请输入客户经理电话", trigger: 'change'}],
      }
    }
  },
  data() {
    return {
      dialog: false,
      form: {guaranteeMode: [], faceUser: [], loanMin: null},
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post("/appfinancialproduct/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = res.data
          this.form.faceUser = res.data.faceUser?.split(",")
          this.form.guaranteeMode = res.data.guaranteeMode?.split(",")
        }
      })
    },
    submit() {
      this.$refs.ProductForm.validate(v => {
        if (v) {
          let {form} = this
          form.faceUser = form.faceUser?.toString()
          form.guaranteeMode = form.guaranteeMode?.toString()
          this.instance.post("/appfinancialproduct/addOrUpdate", form).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.back()
            }
          })
        }
      })
    },
    back() {
      this.$router.push({})
    },
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.productAdd {
  height: 100%;

  .flexWrap {
    flex-wrap: wrap;

    .el-form-item {
      width: 50%;
    }
  }

  ::v-deep.half {
    width: 50%;
  }

  ::v-deep input[type="number"] {
    line-height: 1px !important;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
  }
}
</style>
