<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"
          :options="beginTimeOptions"
          placeholder="选择日期时间"
          @on-change="changeBeginStr"
        />
        ~
        <Date-picker
          v-model="endStr"
          type="date"
          :options="endTimeOptions"
          placeholder="选择日期时间"
          @on-change="changeEndStr"
        />
      </Form-item>
      <Form-item label="提现金额" prop="withdrawAmount">
        <input v-model="data.withdrawAmount" :disabled="isAble" placeholder="请选择日期获取提现金额" />
      </Form-item>
      <Form-item label="短信验证码">
        <input v-model="data.verifyCode" placeholder="短信验证码" />
        <Button v-show="show" type="primary" size="large" @click="getVerifyCode">获取验证码</Button>
        <Button v-show="!show" type="default" size="large" disabled> {{ timeCount }}s 后重新发送</Button>
      </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 ShopService from 'services/shop/shop-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.shopService = new ShopService();
    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;
          this.beginTimeOptions = {
            disabledDate(date) {
              return date && date.valueOf() < result.data.billBeginTime * 1000 - 86400000;
            },
          };
          this.endTimeOptions = {
            disabledDate(date) {
              return date && date.valueOf() > result.data.billEndTime * 1000;
            },
          };
        }
      })
      .catch(() => {
        this.$Message.error('请求出错');
        this.showLoading = false;
      });
    this.getShopInfo();
  },
  mounted() {},
  methods: {
    //获取店铺信息
    getShopInfo() {
      this.shopService.getShop().then(res => {
        const { checkTel } = res.data;
        this.shopPhone = checkTel;
      });
    },

    //验证短信验证码
    verifySmsCode(verifyCode) {
      if (!verifyCode || verifyCode === '') {
        this.$Notice.error({
          title: '提交错误',
          desc: '验证码不能为空',
        });
        return false;
      }
      this.financeService.verifySmsCode({ phones: this.shopPhone, verifyCode }).then(res => {
        if (res.code !== 200) {
          this.$Notice.error({
            title: '提交错误',
            desc: res.message,
          });
          return false;
        } else {
          return true;
        }
      });
    },

    //获取短信验证码
    getVerifyCode() {
      if (this.shopPhone === '') {
        this.$Notice.error({
          title: '发送失败',
          desc: '店铺绑定手机为空，请先绑定手机',
        });
        return false;
      }
      this.validateBtn();
      const smsParams = {
        phones: this.shopPhone,
        project: 'shop',
        className: 'withdraw',
        methodName: 'getVerifyCode',
      };
      return this.financeService.sendShopVerifyCode(smsParams).then(result => {
        if (result.code === 200) {
          this.$Notice.success({
            title: '发送成功',
            desc: '验证码已发送到您手机！',
          });
        } else {
          this.$Notice.error({
            title: '发送失败',
            desc: result.message,
          });
        }
      });
    },

    // 点击验证码后倒计时
    validateBtn() {
      const timeCount = 60;
      if (!this.timer) {
        this.timeCount = timeCount;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.timeCount > 0 && this.timeCount <= timeCount) {
            this.timeCount--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    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;
      params.timeout = 60000; // 提现超时时间60秒
      // 短信验证码
      params.verifyCode = this.data.verifyCode;
      return params;
    },
    save() {
      if (!this.beforeSave()) {
        return false;
      }
      const applyParams = this.beforeSave();

      if (!this.verifySmsCode(applyParams.verifyCode)) {
        return false;
      }

      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() {
      if (this.beginStr > this.endStr) {
        this.$Notice.error({
          title: '时间范围异常',
          desc: '请正确选择开始结束时间',
        });
        return;
      }
      this.financeService.shopGetAvailableAmount(this.params).then(result => {
        if (result.code === 200) {
          this.data.withdrawAmount = result.data.availableAmount;
        } else {
          this.$Notice.error({
            title: '查询错误',
            desc: result.message,
          });
        }
      });
    },
    changeBeginStr(value) {
      this.params.beginTime = value;
    },
    changeEndStr(value) {
      this.params.endTime = 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>