<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="提现金额：" prop="amount">
            <div>
              <el-input-number
                v-model="ruleForm.amount"
                :min="0"
                :max="this.amountSum"
                :step="1"
                label="描述文字"
              ></el-input-number>
            </div>
            <div>可提现金额：{{ amountSum }}</div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 选择商品 -->
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  props: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "提现",
        show: false,
        width: "600px",
      },
      amountSum: 0,
      modalData: {},
      ruleForm: {
        amount: "",
      },
      rules: {
        amount: [
          {
            required: true,
            message: "请输入提现金额",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              if (value > this.amountSum) {
                callback(new Error("提现金额不能大于可提现金额"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.ruleForm.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          this.amountSum = row ? row : 0;
          this.modalConfig.title = "提现金额";
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          // submit: true,
          handle: () => {
            if (this.isAdd) {
              this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  console.log(valid);
                  this.$api.wallet.Withdrawal(this.ruleForm).then((res) => {
                    this.$emit("init");
                    this.$emit("getWithdrawalRecord");
                    this.toggle();
                  });
                }
              });
            }
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>