<template>
  <div class="validate-pay-wrap">
    <nav-bar title="上传支付凭证"/>
      <van-tabs v-model="form.offlinePayType" swipeable>
        <van-tab title="Hooli">
          <div class="wrap">
            <div>
              <div class="upload pr" :class="{isUpload: hooliForm.fileUrl}">
                <myUpload
                  @value="getImg"
                  @fileName="getFileName"
                  @img="getImg"
                  :img="hooliImg"
                  :info="'添加支付凭证'"
                  :contentType="'pay/voucher'"
                ></myUpload>
              </div>
              <div class="form">
                <van-field
                  v-model="hooliForm.offlinePayUser"
                  placeholder="请输入付款人姓名"
                  clearable
                />
                <div @click="show = true">
                  <span :class="{active: offlinePayMode}">{{offlinePayMode || '请选择支付方式'}}</span>
                  <i class="icon icon-jiantou-xia"></i>
                </div>
                <div @click="datetimeISShow = true">
                  <span :class="{active: offlinePayTime}">{{offlinePayTime || '请选择付款时间'}}</span>
                  <i class="icon icon-jiantou-xia"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="btn">
            <van-button
              type="default"
              @click="saveData"
              :class="{disabled: hooliDisabled}"
            >提交凭证</van-button>
          </div>
        </van-tab>
        <van-tab title="供应商">
          <div class="wrap">
            <div>
              <div class="upload pr" :class="{isUpload: form.fileUrl}">
                <myUpload
                  v-on:value="getImg"
                  @fileName="getFileName"
                  @img="getImg"
                  :img="businessImg"
                  :info="'添加支付凭证'"
                  :contentType="'pay/voucher'"
                ></myUpload>
              </div>
            </div>
          </div>
          <div class="btn">
            <van-button
              type="default"
              @click="saveData"
              :class="{disabled: businessDisabled}"
            >提交凭证</van-button>
          </div>
        </van-tab>
      </van-tabs>
      <van-popup v-model="show" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="show = false"
          @confirm="onChange"
        />
      </van-popup>
      <van-popup v-model="datetimeISShow" position="bottom">
        <van-datetime-picker
          v-model="hooliForm.offlinePayTime"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="datetimeISShow = false"
          @confirm="onChangeDate"
        />
      </van-popup>
    </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
import myUpload from "@/components/common/upload";

export default {
  name: "ValidatePay",
  components: {
    NavBar,
    myUpload
  },
  data() {
    return {
      data: [],
      form: {
        offlinePayType: 0,
        fileUrl: null,
        fileName: null
      },
      hooliForm: {
        offlinePayUser: null,
        offlinePayMode: null,
        offlinePayTime: null,
        fileUrl: null,
        fileName: null
      },
      offlinePayMode: null,
      offlinePayTime: null,
      payData: {},
      payAmount: "",
      minDate: new Date(2017, 9, 1),
      maxDate: new Date(),
      show: false,
      datetimeISShow: false,
      value: "",
      hooliValue: "",
      hooliDisabled: true,
      businessDisabled: true,
      hooliImg: "",
      businessImg: "",
      columns: []
    };
  },
  watch: {
    businessImg(val) {
      val ? (this.businessDisabled = false) : (this.businessDisabled = true);
    },
    hooliForm: {
      handler: function(val) {
        let n = 0;
        for (const key in val) {
          if (val.hasOwnProperty(key)) {
            const element = val[key];
            if (!element) n++;
          }
        }
        n ? (this.hooliDisabled = true) : (this.hooliDisabled = false);
      },
      deep: true
    }
  },
  created() {
    let data = this.$util.sessionStorage.fetch("orderInfo");
    this.payData = JSON.parse(decodeURIComponent(data));
    let payAmount = this.$util.sessionStorage.fetch("payAmount");
    this.payAmount = decodeURIComponent(payAmount);
    this.getPay();
  },
  methods: {
    // 获取支付方式列表
    getPay() {
      let params = {};
      params.url = this.$apis.api_hpay_common_offline;
      params.data = {};
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            let columns = res.data;
            columns.forEach(element => {
              element.text = element.value;
            });
            this.columns = columns;
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 保存数据
    saveData() {
      let params = {};
      params.url = this.$apis.api_hpay_offline;
      params.data = {};
      if (this.form.offlinePayType == 1) {
        if (this.businessDisabled === true) {
          return;
        }
        this.businessDisabled = true;
        Object.assign(params.data, this.form);
      } else {
        if (this.hooliDisabled === true) {
          return;
        }
        this.hooliDisabled = true;
        Object.assign(params.data, this.form, this.hooliForm);
      }
      params.data.payOrderId = this.payData.id;
      params.data.otPrice = this.payAmount;
      this.$net.req(params, this).then(
        res => {
          this.$Toast(res.msg);
          if (Number(res.code) == 0) {
            setTimeout(() => {
              let lang = this.$store.state.langStr;
              this.$util.sessionStorage.save("backOrderDetail", true);
              this.$router.push({
                path: `/${lang}/orderInfo/${this.payData.id}`
              });
              // this.$util.sessionStorage.remove("orderInfo");
              this.$util.sessionStorage.remove("payAmount");
            }, 1000);
          } else {
            setTimeout(() => {
              this.form.offlinePayType == 1
                ? (this.businessDisabled = false)
                : (this.hooliDisabled = false);
            }, 1000);
          }
        },
        e => {
          this.$Toast(e.msg);
          setTimeout(() => {
            this.form.offlinePayType == 1
              ? (this.businessDisabled = false)
              : (this.hooliDisabled = false);
          }, 1000);
        }
      );
    },
    // 选择支付方式
    onChange(picker) {
      this.offlinePayMode = picker.value;
      this.hooliForm.offlinePayMode = picker.key;
      this.show = false;
    },
    // 选择付款时间
    onChangeDate(picker) {
      this.hooliForm.offlinePayTime = this.$util.timestampToTime(
        picker.getTime()
      );
      this.offlinePayTime = this.$util.timestampToTime(picker.getTime());
      this.datetimeISShow = false;
    },
    // 获取图片名称
    getFileName(val) {
      this.form.offlinePayType == 1
        ? (this.form.fileName = val)
        : (this.hooliForm.fileName = val);
    },
    // 获取上传图片
    getImg(host, url) {
      if (this.form.offlinePayType == 0) {
        this.hooliImg = host;
        this.hooliForm.fileUrl = url;
      } else {
        this.businessImg = host;
        this.form.fileUrl = url;
      }
    }
  }
};
</script>

<style scoped lang='less'>
.validate-pay-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  ::-webkit-input-placeholder {
    color: #ccc;
  }
  ::-moz-placeholder {
    color: #ccc;
  }
  ::-moz-placeholder {
    color: #ccc;
  }
  :-ms-input-placeholder {
    color: #ccc;
  }
  .van-hairline--bottom::after {
    border: 0;
  }
  .wrap {
    padding: 20px;
    > div {
      background: #fff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      border: 1px solid rgba(238, 238, 238, 1);
      margin-bottom: 20px;
      padding: 15px;
      > p {
        margin: 10px 0;
        font-size: 13px;
        color: #ccc;
      }
      .form {
        margin-top: 20px;
        > div {
          margin: 0 0 30px;
          padding: 10px 0;
        }
        > div:after {
          left: 0;
        }
        > div:first-child {
          padding-bottom: 5px;
        }
        > div:not(:first-child) {
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #eee;
          span {
            font-size: 18px;
            color: #ccc;
            font-weight: 400;
          }
          .active {
            color: #222;
          }
          i {
            color: #bbb;
            font-size: 10px;
          }
        }
      }
      .upload {
        width: 100%;
        border-radius: 5px;
        height: 230px;
        border: 1px dashed #ddd;
        .info {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          z-index: 2;
          i {
            font-size: 40px;
            color: #999;
          }
          p {
            color: #999;
            font-size: 18px;
            font-weight: 500;
            margin-top: 15px;
          }
          .close {
            // display: none;
            top: 15px;
            right: 15px;
            width: 15px;
            font-size: 15px;
            height: 15px;
            color: rgba(255, 255, 255, 1);
          }
        }
        img {
          max-height: 230px;
        }
        .van-uploader {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .isUpload {
        border: 0;
        .info {
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          i,
          p {
            color: #fff;
          }
        }
      }
    }
  }
  .btn {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0 20px;
    button {
      width: 100%;
      height: 45px;
      font-size: 18px;
      background: #ff523d;
      border-radius: 25px;
      color: #fff;
      font-weight: 500;
      border: 0;
    }
    .disabled {
      background: rgba(254, 185, 175, 1);
    }
  }
}
</style>
