<template>
  <layout-body>
    <Form v-if="showLoading" ref="withdraw" :model="data" class="detail" :label-width="100" :rules="withdrawRules">
      <Form-item label="店铺名称">
        <span>{{ data.shopName }}</span>
      </Form-item>
      <Form-item label="可提现金额(元)">
        <span>{{ data.availableAmount }}</span>
        <br />
        <span class="red">*支付宝每日转账最高限额10万元人民币，单日超过10万人民币限额的，请联系平台客服</span>
      </Form-item>
      <Form-item label="提现方式">
        <span>最大可提现</span><span>{{ beginTimeStr }}</span>
        ~
        <span>{{ endTimeStr }}</span>
        <br />
        <span>请选择账单日期</span>
        <Date-picker v-model="beginStr" type="date" placeholder="选择日期时间" @on-change="changeBeginStr" />
        <Date-picker v-model="endStr" type="date" placeholder="选择日期时间" @on-change="changeEndStr" />
      </Form-item>
      <Form-item label="提现金额" prop="withdrawAmount">
        <input v-model="data.withdrawAmount" disabled placeholder="请选择日期获取提现金额" />
      </Form-item>
      <Form-item label="提现到帐号">
        <span>{{ data.withdrawAccount }}</span>
      </Form-item>
      <Form-item label="账号名称">
        <span>{{ data.withdrawAccountName }}</span>
      </Form-item>
      <Form-item label="备注">
        <span>{{ data.remark }}</span>
      </Form-item>
      <Form-item>
        <Button id="btnSubmit" type="primary" size="large" :disabled="submitDisabled" @click="save">确认提现</Button>
        <Button id="cancel" type="primary" size="large" @click="backList">取消</Button>
      </Form-item>
    </Form>
    <Spin v-else-if="showLoading" size="large" fix></Spin>
  </layout-body>
</template>

<script>
import moment from 'moment';
import crypto from 'util/crypto';
import FinanceService from 'services/finance/finance-service';
import { WithdrawApply } from './store';

export default {
  data() {
    return WithdrawApply.call(this);
  },
  created() {
    const params = {
      token: this.$user.token,
      timestamps: Math.round(new Date().getTime() / 1000),
    };
    this.financeService = new FinanceService();
    this.financeService
      .shopWithdrawApplyInit(params)
      .then(result => {
        if (result.code === 200) {
          this.data = result.data;
          this.beginStr = this.formatDate(result.data.billBeginTime);
          this.endStr = this.formatDate(result.data.billEndTime);
          this.beginTimeStr = this.formatDate(result.data.billBeginTime);
          this.endTimeStr = this.formatDate(result.data.billEndTime);
          this.submitDisabled = false;
          this.data.beginTime = result.data.billBeginTime;
          this.data.endTime = result.data.billEndTime;
          this.data.withdrawAmount = result.data.withdrawAmount ? result.data.withdrawAmount : 0;
        }
      })
      .catch(() => {
        this.$Message.error('请求出错');
        this.showLoading = false;
      });
  },
  mounted() {},
  methods: {
    backList() {
      this.$router.push({ name: 'finance.withdraw.withdrawlist' });
    },
    getInfo() {
      return this.financeService.shopWithdrawApplyInit().then(result => {
        if (result.code === 200) {
          this.data = result.data;
          this.$emit('on-change', this.data);
        }
      });
    },
    beforeSave() {
      const params = {};
      params.shopId = this.$user.currentShop.shopsId;
      params.applyPid = this.$user.pid;
      params.applyAmount = this.data.withdrawAmount ? this.data.withdrawAmount : 0;
      params.applyType = this.apply.applyType;
      params.beginTime = this.data.beginTime;
      params.endTime = this.data.endTime;
      params.applyPhone = this.apply.applyPhone;
      params.targetAccount = this.data.withdrawAccount;
      params.token = this.$user.token;
      params.timestamp = Math.round(new Date().getTime() / 1000);
      params.salt = this.apply.salt;
      const arrParams = Object.keys(params).map(key => {
        return params[key];
      });
      params.sign = crypto.md5(arrParams.join('|'));
      params.account = this.$user.name;
      return params;
    },
    save() {
      const applyParams = this.beforeSave();
      this.$Loading.start();
      this.submitDisabled = true;
      return this.financeService.shopWithdrawApply(applyParams).then(result => {
        if (result.code === 200) {
          this.$Loading.finish();
          this.$Notice.success({
            title: '提交成功',
            desc: '确认提现成功！',
          });
          this.backList();
        } else {
          this.$Loading.error();
          this.submitDisabled = false;
          this.$Notice.error({
            title: '提交错误',
            desc: result.message,
          });
        }
      });
    },
    submit() {
      this.validateWithdrawApply()
        .then(([r1, r2]) => {
          if (r1 & r2) {
            return Promise.resolve();
          } else {
            this.$Message.error('请填写必填项');
            return Promise.reject();
          }
        })
        .then(this.save)
        .catch(() => this.$Loading.error());
    },
    refresh() {
      this.getInfo();
    },
    formatDate(date) {
      if (date) {
        return moment.unix(date).format('YYYY-MM-DD');
      }
    },
    getAvailableAmount() {
      const params = {};
      params.beginTime = this.beginStr;
      params.endTime = this.endStr;
      if (this.beginStr > this.endStr) {
        this.$Notice.error({
          title: '时间范围异常',
          desc: '请正确选择开始结束时间',
        });
        return;
      }
      this.financeService.shopGetAvailableAmount(params).then(result => {
        if (result.code === 200) {
          this.data.withdrawAmount = result.data.availableAmount;
        } else {
          this.$Notice.error({
            title: '查询错误',
            desc: result.message,
          });
        }
      });
    },
    changeBeginStr(value) {
      this.beginStr = value;
    },
    changeEndStr(value) {
      this.endStr = value;
      this.getAvailableAmount();
    },
  },
};
</script>

<style lang="scss">
.detail {
  .ivu-input-wrapper {
    width: 300px;
  }

  .ivu-date-picker-editor {
    width: 150px;
  }

  .ivu-select {
    width: 200px;
  }

  .ivu-table-cell {
    .ivu-input-wrapper {
      width: auto;
    }
  }

  .btn-fixed {
    &.fix {
      width: calc(100% - 200px);
      position: fixed;
      bottom: 0;
      left: 200px;
      text-align: right;
      padding-right: 50px;
      height: 60px;
      line-height: 60px;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 1px 0 5px 1px #ccc;
      z-index: 1002;
    }
  }

  .red {
    color: red;
  }
}
</style>