<template>
  <el-dialog 
    title="提现申请" 
    :visible.sync="dialogVisible" 
    width="450px" 
    append-to-body 
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="6em">
      <el-form-item label="提现用户" prop="userId" v-if="isSysAdmin()">
        <user-input v-model="form.userId" :text.sync="form.userName" @change="handleUserChange"/>
      </el-form-item>
      <el-form-item label="提现金额" prop="amount">
        <el-input-number 
          v-model="form.amount" 
          :precision="2" 
          :step="100"
          :min="0"
          controls-position="right"
          placeholder="请输入提现金额"
          style="width: calc(100% - 2em)"
          @change="calcWithdrawAmount"
        /> 元
      </el-form-item>

      <el-form-item label="提现账户" prop="accountId">
        <account-remote-select v-model="form.accountId" style="width: 100%;" :query="accountQuery" :before-get-options="beforeGetAccountOptions"/>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addWithdraw, calcWithdrawAmount } from "@/api/bst/withdraw";
import { AccountType } from "@/utils/enums";
import UserInput from "@/components/Business/User/UserInput";
import { mapGetters } from 'vuex';
import AccountRemoteSelect from "@/components/Business/Account/AccountRemoteSelect";

export default {
  name: 'WithdrawAddDialog',
  dicts: ['account_type', 'withdraw_service_type'],
  components: {
    UserInput,
    AccountRemoteSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      AccountType,
      form: {},
      rules: {
        amount: [
          { required: true, message: "提现金额不能为空", trigger: "blur" }
        ],
        accountId: [
          { required: true, message: "提现账户不能为空", trigger: "blur" }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userId', 'nickName']),
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    },
    // 查询账户列表
    accountQuery() {
      return {
        userId: this.form.userId
      }
    }
  },
  methods: {
    handleUserChange(user) {
      if (this.form.accountId != null) {
        this.form.accountId = null;
        this.$message.info("由于更换用户，请重新选择提现账户");
      }
    },
    beforeGetAccountOptions() {
      if (this.form.userId == null) {
        this.$modal.msgError('请先选择用户');
        return false;
      }
      return true;
    },
    calcWithdrawAmount() {
      calcWithdrawAmount(this.form.amount, this.form.userId).then(response => {
        this.form.serviceType = response.data.type;
        this.form.servicePoint = response.data.point;
        this.form.serviceCharge = response.data.serviceCharge;
      });
    },
    handleOpen() {
      this.reset();
    },
    reset() {
      this.form = {
        amount: null,
        accountId: null,
        userId: this.userId,
        userName: this.nickName,
      };
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          addWithdraw(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.dialogVisible = false;
            this.$emit('success');
          }).finally(() => {
            this.loading = false;
          });
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
      this.reset();
    }
  }
}
</script>

<style lang="scss" scoped>
.el-divider {
  margin: 16px 0;
}
</style>