<template>
  <el-dialog
    :visible="visible"
    width="500px"
    @close="handleClose"
    center
    :close-on-click-modal="false"
    title="供应商对公付款设置"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="银行名称" prop="public_bank">
        <el-input v-model="ruleForm.public_bank" placeholder="银行名称" />
      </el-form-item>

      <el-form-item label="银行卡号" prop="public_bankNo">
        <el-input v-model="ruleForm.public_bankNo" placeholder="银行卡号" />
      </el-form-item>

      <el-form-item class="flex-end">
        <el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/service/operate/supplier";
export default {
  props: ["visible", "row"],
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(newVal) {
        this.$emit("update:visible", newVal);
      },
    },
  },
  watch: {
    _visible: function (val) {
      if (val) {
        this.resetForm();
      }
    },
  },
  data() {
    return {
      ruleForm: {
        public_bank: "",
        public_bankNo: "",
      },
      rules: {
        public_bank: [
          {
            required: true,
            trigger: "change",
            message: "请输入银行名称",
          },
        ],
        public_bankNo: [
          {
            required: true,
            trigger: "change",
            message: "请输入银行卡号",
          },
        ],
      },
    };
  },
  methods: {
    handleClose() {
      this._visible = false;
      this.ruleForm = {
        public_bank: "",
        public_bankNo: "",
      };
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          const { public_bank, public_bankNo } = this.row;
          this.ruleForm = {
            public_bank: public_bank || "",
            public_bankNo: public_bankNo || "",
          };
        }
      });
    },
    async onSubmit() {
      try {
        await this.$refs.ruleForm.validate();

        const model = {
          ...this.ruleForm,
          id: this.row.id,
          service_tax: this.row.service_tax,
        };
        const { code } = await asyncRequest.save(model);
        this.loading = false;
        if (code === 1) {
          this.$notify.success({
            title: "设置成功！",
            message: "",
          });
          this.handleClose();
          this.$emit("refresh");
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>
