<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main" v-loading="loadings" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
        <el-col :span="24" style="margin: 0 0 10px 0">
          <el-col :span="2"><el-button type="primary" size="mini" @click="toBack()">返回</el-button></el-col>
        </el-col>
        <el-col :span="24">
          <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #money>
              <el-input v-model="form.money" type="number" placeholder="请输入提现金额" @change="onChange"></el-input>
              <p style="color: red">可提现金额为：{{ canGet || 0 }}</p>
            </template>
          </data-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: shopCashOut } = createNamespacedHelpers('shopCashOut');
export default {
  name: 'detail',
  props: { canGet: { type: Number } },
  components: {},
  data: function () {
    return {
      loadings: true,
      // info部分
      infoFields: [
        { label: '提现金额', model: 'money', custom: true },
        { label: '银行卡号', model: 'card' },
        { label: '银行卡所属', model: 'card_name' },
        { label: '所属银行', model: 'card_bank' },
      ],
      rules: {
        money: [{ required: true, message: '提现金额', trigger: 'blur' }],
        card: [{ required: true, message: '银行卡号', trigger: 'blur' }],
        card_name: [{ required: true, message: '银行卡所属', trigger: 'blur' }],
        card_bank: [{ required: true, message: '所属银行', trigger: 'blur' }],
      },
      form: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...shopCashOut(['query', 'delete', 'fetch', 'update', 'create']),
    // 查询
    async search() {
      if (this.id) {
        const res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      } else {
        const obj = { shop: _.get(this.user.shop, '_id'), status: '0' };
        this.$set(this, 'form', obj);
      }
      this.loadings = false;
    },
    onChange(value) {
      if (value > this.canGet) {
        this.$message({ type: `warning`, message: `可提现金额为${this.canGet}` });
        this.$set(this.form, 'money', 0);
      }
    },
    // 保存
    async toSave({ data }) {
      data.apply_time = moment().format('YYYY-MM-DD HH:mm:ss');
      let res;
      if (data._id) res = await this.update(data);
      else res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.toBack();
      }
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  text-align: left;
}
</style>
