<template>
  <div>
    <BaseDialog
      width="700px"
      :isShow.sync="isShow"
      title="坏账设置"
      @submit="submitForm"
      @close="close"
    >
      <el-form
        inline
        hide-required-asterisk
        :model="form"
        :rules="rules"
        ref="form"
      >
        <div v-for="(item, index) in form.data" :key="index">
          <el-form-item
            label="账龄:"
            :prop="'data.' + index + '.yearType'"
            :rules="rules['yearType']"
          >
            <el-select v-model="item.yearType" placeholder="请选择账龄">
              <el-option
                v-for="(item, idx) in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="disabled(idx, item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="扣押比例:"
            class="range"
            label-width="90px"
            :rules="rules['detainRate']"
            :prop="'data.' + index + '.detainRate'"
          >
            <el-input
              v-model="item.detainRate"
              v-int="{ max: 100 }"
              placeholder="请输入扣押比例"
            >
              <template slot="append"> % </template>
            </el-input>
          </el-form-item>
          <el-form-item label-width="0" label=" ">
            <div class="btns">
              <i
                @click="add(index)"
                v-if="!yearType.includes(1) && form.data.length < 5"
                class="el-icon-circle-plus-outline"
              ></i>
              <i
                v-if="index != 0"
                @click="del(index)"
                class="el-icon-remove-outline"
              ></i>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import { setBadBill, badBillDetail } from "@/api/financed/index";
export default {
  name: "badBill",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: { data: [] },
      rules: {
        detainRate: [
          { required: true, message: "请输入扣押比例", trigger: "blur" },
        ],
        yearType: [
          { required: true, message: "请选择账龄", trigger: "change" },
        ],
      },
      typeList: [
        { label: "1年以上", value: 1 },
        { label: "1-2年", value: 2 },
        { label: "2-3年", value: 3 },
        { label: "3-4年", value: 4 },
        { label: "4-5年", value: 5 },
        { label: "5年以上", value: 6 },
      ],
    };
  },

  mounted() {},

  methods: {
    init() {
      this.resetForm();
      this.badBillDetail();
    },
    resetForm() {
      this.form = {
        data: [
          {
            detainRate: undefined,
            yearType: undefined,
          },
        ],
      };
    },
    badBillDetail() {
      badBillDetail().then((res) => {
        if (res.data) {
          this.form.data = JSON.parse(res.data);
        }
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          setBadBill(this.form.data).then((res) => {
            this.$message.success("坏账设置成功");
            this.isShow = false;
          });
        } else {
          return false;
        }
      });
    },
    close() {
      this.$nextTick(() => {
        this.$refs["form"].resetFields();
      });
    },
    disabled(idx, value) {
      if (this.form.data.length <= 1) {
        return false;
      }
      return this.yearType.some((e) => (idx == 0 ? e != 1 : e == value));
    },
    add(index) {
      this.form.data.splice(index + 1, 0, {
        detainRate: undefined,
        yearType: undefined,
      });
    },
    del(index) {
      this.form.data.splice(index, 1);
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
    yearType() {
      console.log(this.form.data);
      return this.form.data.map((e) => e.yearType).filter((e) => e);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .range {
  .el-form-item__content {
    width: 200px;
  }
}
.btns {
  margin-left: -10px;
  height: 36px;
  display: flex;
  align-items: center;
  i {
    font-size: 24px;
    cursor: pointer;
    margin-left: 5px;
  }
}
</style>
