<template>
  <div>
    <div class="text-left">
      <a-button type="primary" @click="$router.go(-1)">返回</a-button>
    </div>
    <p class="text-2xl font-bold mb-5">{{title}}</p>
    <div class="text-left">
      <a-form-model
        :model="form"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
        ref="addProductForm"
        :rules="rules"
      >
        <a-form-model-item
          label="产品名称"
          :wrapper-col="{ span: 5 }"
          prop="name"
        >
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item
          label="机构名称"
          :wrapper-col="{ span: 5 }"
          prop="orgnization"
        >
          <a-input v-model="form.orgnization" />
        </a-form-model-item>
        <a-form-model-item label="贷款期限（年）" required>
          <a-select
            :value="form.date"
            @change="(v)=>form.date = v"
            style="width: 20%"
          >
            <a-select-option value="1"> 1 </a-select-option>
            <a-select-option value="3"> 3 </a-select-option>
            <a-select-option value="10"> 10 </a-select-option>
          </a-select>
          <!-- <a-input-number
            :value="form.startTime"
            @change="(v) => (form.startTime = Math.floor(v))"
            :step="1"
            :max="98"
            style="width: 20%"
            :min="0"
          />
          ——
          <a-input-number
            :value="form.endTime"
            @change="(v) => (form.endTime = Math.floor(v))"
            :step="1"
            :max="360"
            :min="Math.floor(form.startTime + 1)"
            style="width: 20%"
          /> -->
        </a-form-model-item>
        <a-form-model-item label="参考利率（%）" required>
          <a-input-number
            :value="form.rate"
            @change="(v) => (form.rate = Number.parseFloat(v).toFixed(4))"
            placeholder="最多可输小数点后四位"
            :step="0.0001"
            :precision="4"
            :min="0"
            style="width: 20%; margin-right:10px"
          />起
          <!-- ——
          <a-input-number
            :value="
              isNaN(form.interstMax)
                ? +Number.parseFloat(form.interstMin + 0.01).toFixed(2)
                : form.interstMax
            "
            @change="
              (v) =>
                (form.interstMax = isNaN(v)
                  ? 0
                  : Number.parseFloat(v).toFixed(2))
            "
            placeholder="最多可输小数点后两位"
            :step="0.01"
            :min="+Number.parseFloat(form.interstMin + 0.01).toFixed(2)"
            style="width: 20%"
          /> -->
        </a-form-model-item>
        <a-form-model-item label="产品额度（万元）" required>
          <a-input-number
            :value="form.limitMin"
            @change="(v) => (form.limitMin = Math.floor(v))"
            style="width: 20%"
            :max="9998"
            :min="0"
          />
          ——
          <a-input-number
            style="width: 20%"
            :value="form.limitMax"
            @change="(v) => (form.limitMax = Math.floor(v))"
            :min="Math.floor(form.limitMin + 1)"
            :max="9999"
          />
        </a-form-model-item>
        <a-form-model-item label="担保方式" :wrapper-col="{ span: 5 }" required>
          <a-select
            style="width: 120px; margin-right: 10px"
            @change="changeGuarantee"
            v-model="form.guarantee"
          >
            <a-select-option
              v-for="(type, i) in guaranteeType"
              :key="type"
              :value="i + 1"
            >
              {{ type }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="产品分类" style="width: 100%" required>
          <a-select
            :default-value="form.type"
            style="width: 120px; margin-right: 10px"
            @change="changeProductType"
            v-model="form.type"
          >
            <a-select-option :value="eProductType.company">
              企业
            </a-select-option>
            <a-select-option :value="eProductType.identity">
              个人
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="产品介绍" prop="introduction">
          <a-textarea v-model="form.introduction" />
        </a-form-model-item>
        <a-form-model-item label="产品特点" prop="characteristic">
          <a-textarea v-model="form.characteristic" />
        </a-form-model-item>
        <a-form-model-item label="适用客户" prop="target">
          <a-textarea v-model="form.target" />
        </a-form-model-item>
        <a-form-model-item label="申请条件" prop="applicationCon">
          <a-textarea v-model="form.applicationCon" />
        </a-form-model-item>
        <a-form-model-item label="提交条件" prop="submissionCon">
          <a-textarea v-model="form.submissionCon" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ offset: 4 }">
          <a-button type="primary" @click="onSubmit" :disabled="disabled">
            确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import { InputNumber, FormModel, message, Row, Col } from "ant-design-vue";
import LoanProductService from "@/service/LoanProductService/index";
import { eProductType, eGuaranteeType } from "@/types/loanProduct";
import { iListItem } from "@/store/LoanProductManagement/type";
import { mapMutations } from "vuex";
Vue.use(InputNumber).use(Col).use(Row);

export default Vue.extend({
  props: {
    guaranteeType: {
      type: Array as PropType<String[]>,
      default() {
        return ["信用", "抵押", "保证", "贴现", "综合", "质押"];
      },
    },
  },
  mounted() {
    if (this.$route.query.record) {
      this.title = "编辑产品"
      const record: iListItem = JSON.parse(this.$route.query.record as string);
      this.form.name = record.product_name;
      this.form.orgnization = record.inst_name;
      // this.form.startTime = record.min_date;
      // this.form.endTime = record.max_date;
      // this.form.interstMin = record.rate_lower;
      // this.form.interstMax = record.rate_upper;
      this.form.date = record.date,
      this.form.rate = record.rate
      this.form.limitMin = record.min_amount;
      this.form.limitMax = record.max_amount;
      this.form.guarantee = record.guarantee_type;
      this.form.type = record.loan_type;
      this.form.introduction = record.products;
      this.form.characteristic = record.features;
      this.form.target = record.apply_to;
      this.form.applicationCon = record.apply_cond;
      this.form.submissionCon = record.submit_cond;
      this.uuid = record.uuid;
    }
  },
  computed: {
    disabled() {
      let result = true;
      const {
        name,
        orgnization,
        introduction,
        target,
        applicationCon,
        submissionCon,
      } = this.form;
      if (
        name &&
        orgnization &&
        introduction &&
        target &&
        applicationCon &&
        submissionCon
      ) {
        result = false;
      }
      return result;
    },
  },
  data() {
    return {
      title:"新增产品",
      form: {
        name: "",
        orgnization: "",
        // startTime: 0,
        // endTime: 1,
        date:1,
        rate:0,
        // interstMax: 0.01,
        // interstMin: 0,
        limitMax: 1,
        limitMin: 0,
        guarantee: eGuaranteeType.credit,
        type: eProductType.company,
        introduction: "",
        characteristic: "",
        target: "",
        applicationCon: "",
        submissionCon: "",
      },
      eProductType,
      uuid: "",
      eGuaranteeType,
      rules: {
        name: [
          { required: true, message: "请输入产品名称", trigger: "blur" },
          { message: "产品名称最长为20字", max: 20, trigger: "blur" },
        ],
        orgnization: [
          { required: true, message: "请输入机构名称", trigger: "blur" },
          { message: "机构名称最长为15字", max: 15, trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请输入最小贷期限", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请输入最大贷期限", trigger: "blur" },
        ],
        interstMax: [
          { required: true, message: "请输入最大参考利率", trigger: "blur" },
        ],
        interstMin: [
          { required: true, message: "请输入最小参考利率", trigger: "blur" },
        ],
        limitMax: [
          { required: true, message: "请输入最大产品额度", trigger: "blur" },
        ],
        limitMin: [
          { required: true, message: "请输入最小产品额度", trigger: "blur" },
        ],
        introduction: [
          { required: true, message: "请输入产品介绍", trigger: "blur" },
          { message: "内容最多为50字", max: 50, trigger: "blur" },
        ],
        characteristic: [
          { required: true, message: "请输入产品特点", trigger: "blur" },
          { message: "内容最多为50字", max: 50, trigger: "blur" },
        ],
        target: [
          { required: true, message: "请输入适用客户", trigger: "blur" },
          { message: "内容最多为50字", max: 50, trigger: "blur" },
        ],
        applicationCon: [
          { required: true, message: "请输入申请条件", trigger: "blur" },
          { message: "内容最多为50字", max: 50, trigger: "blur" },
        ],
        submissionCon: [
          { required: true, message: "请输入提交条件", trigger: "blur" },
          { message: "内容最多为50字", max: 50, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    changeGuarantee(value: eGuaranteeType) {
      this.form.guarantee = value;
      console.log(value);
    },
    changeProductType(value: eProductType) {
      this.form.type = value;
      console.log(value);
    },
    ...mapMutations("loanProductManagement", {
      productSave: "save",
    }),
    onSubmit() {
      (this.$refs.addProductForm as FormModel).validate((valid) => {
        if (valid) {
          if (this.$route.query.record) {
            // 编辑
            LoanProductService.getInstance()
              .modifyLoan({
                apply_cond: this.form.applicationCon,
                apply_to: this.form.target,
                features: this.form.characteristic,
                guarantee_type: this.form.guarantee as eGuaranteeType,
                inst_name: this.form.orgnization,
                max_amount: this.form.limitMax,
                // max_date: this.form.endTime,
                product_name: this.form.name,
                products: this.form.introduction,
                loan_type: this.form.type,
                date:+this.form.date,
                rate:+this.form.rate,
                // rate_lower: +this.form.interstMin,
                // rate_upper: +this.form.interstMax,
                submit_cond: this.form.submissionCon,
                min_amount: this.form.limitMin,
                // min_date: this.form.startTime,
                uuid: this.uuid,
              })
              .then((ret) => {
                if (ret.code === 200) {
                  message.success("编辑成功");
                  this.$router.push({ name: "loanProduct" });
                } else if (ret.code === 406) {
                  message.success("编辑失败");
                }
              });
          } else {
            // 新增
            LoanProductService.getInstance()
              .addLoan({
                apply_cond: this.form.applicationCon,
                apply_to: this.form.target,
                features: this.form.characteristic,
                guarantee_type: this.form.guarantee as eGuaranteeType,
                inst_name: this.form.orgnization,
                max_amount: this.form.limitMax,
                // max_date: this.form.endTime,
                min_amount: this.form.limitMin,
                // min_date: this.form.startTime,
                loan_type: this.form.type as eProductType,
                product_name: this.form.name,
                products: this.form.introduction,
                date:+this.form.date,
                rate:+this.form.rate,
                // rate_lower: +this.form.interstMin,
                // rate_upper: +this.form.interstMax,
                submit_cond: this.form.submissionCon,
              })
              .then((ret) => {
                if (ret.code === 200) {
                  message.success("新增成功");
                  console.log(ret);
                  this.$router.push({ name: "loanProduct" });
                } else if (ret.code === 406) {
                  message.success("新增失败");
                  console.log(ret);
                  this.$router.push({ name: "loanProduct" });
                }
              });
          }
          this.productSave({
            page: 1,
          });
        } else {
          return false;
        }
      });
    },
  },
});
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 10px;
}
.ant-form-item-control {
  text-align: center;
}
</style>