<template>
  <div class="order-wrap" v-if="!toggleCoupon">
    <nav-bar :title="data.content" v-if="data && !toggleCoupon"/>
    <div class="wrap" v-if="data">
      <!-- 支付 -->
      <div class="list">
        <div class="header flex_sb align-c">
          <p>支付单编号：{{data.payOrderCode}}</p>
          <span>{{data.orderStatusText}}</span>
        </div>
        <div class="content">
          <div class="flex_sb align-c">
            <p>应付金额：</p>
            <span>{{data.orderPriceText}}</span>
          </div>
          <div class="flex_sb align-c">
            <p>已付金额：</p>
            <span>{{data.paidAmountText}}</span>
          </div>
          <div class="flex_sb align-c" v-if="data.poundagePriceText">
            <p></p>
            <span>{{data.poundagePriceText}}</span>
          </div>
          <div class="flex_sb align-c">
            <p>是否可用优惠：</p>
            <span>{{data.isCoupons == 1 ? '可用' : '不可用'}}</span>
          </div>
          <div class="flex_sb remark">
            <p>说明：</p>
            <span>{{data.remark}}</span>
          </div>
        </div>
        <div class="footer coupon flex_sb align-c" @click="showCoupon" :class="{isCoupons: data.isCoupons == 1}">
          <h4>优惠券：</h4>
          <p v-if="userCoupon.amount">
            - {{userCoupon.moneySymbol}}{{userCoupon.amount}}
            <i class="icon icon-jiantou-you"></i>
          </p>
          <p v-else>
            {{data.couponsText}}
            <i v-if="data.isCoupons == 1" class="icon icon-jiantou-you"></i>
          </p>
        </div>
      </div>
      <!-- 退款详情 -->
      <div class="list" @click="goNextPage('refund')" v-if="data.refundAmountText">
        <div class="footer flex_sb align-c">
          <h4>退款详情</h4>
          <p>已退{{data.refundAmountText}}<i class="icon icon-jiantou-you"></i></p>
        </div>
      </div>
      <!-- 支付流水 -->
      <div class="list" v-if="data.payFlowList && data.payFlowList.length">
        <div class="header title flex_sb align-c">
          <h4>支付流水</h4>
        </div>
        <div class="card" v-for="(item, index) in data.payFlowList" :key="index">
          <div class="head flex_sb align-c">
            <p>支付状态：</p>
            <span>{{item.statusText}}</span>
          </div>
          <div class="message">
            <div class="flex_sb align-c">
              <p>支付流水编号：</p>
              <span>{{item.payFlowCode}}</span>
            </div>
            <div class="flex_sb align-c">
              <p>金额：</p>
              <span>{{item.otPrice}}</span>
            </div>
            <div class="flex_sb align-c" v-if="item.poundagePriceText">
              <p>包含手续费：</p>
              <span>{{item.poundagePriceText}}</span>
            </div>
            <div class="flex_sb align-c">
              <p>支付方式：</p>
              <span>{{item.payModeText}}</span>
            </div>
            <div class="flex_sb align-c">
              <p>支付时间：</p>
              <span>{{item.payFinishTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <van-button type="default" @click="goPay" v-if="data.orderStatus != 2">去支付</van-button>
      </div>
    </div>
  </div>
  <!-- 优惠券 -->
  <div class="order-coupon-wrap" v-else>
    <van-nav-bar
      title="优惠券"
      left-arrow
      right-text="确定"
      @click-left="onClickLeft"
      @click-right="setCoupon"
    />
    <div class="wrap">
      <div
        v-for="(item, index) in couponData" 
        :key="index" 
        class="list"
        @click="selectCoupon(item)"
        :class="{disabled: item.enable !== 1}">
        <div class="flex_sb align-c title">
          <div>
            <span>{{item.moneySymbol}}</span>
            <p>{{item.amount}}</p>
            <h5>{{item.name}}</h5>
          </div>
          <p class="selected" v-if="item.isSelected">已选中</p>
        </div>
        <div class="info">
          <div class="flex_sb align-c date">
            <p>有效日期：{{item.validityStartTime}} - {{item.validityEndTime}}</p>
            <p @click="item.isShow = !item.isShow" v-show="item.remark">
              {{item.typeText}}
              <i class="icon" :class="[item.isShow ? 'icon-jiantou-shang ': 'icon-jiantou-xia']"></i>
            </p>
          </div>
          <div class="preferential flex" v-show="item.remark && item.isShow">
            <p>优惠详情：</p>
            <span>{{item.remark}}</span>
          </div>
        </div>
        <div class="roundLeft"></div>
        <div class="roundRight"></div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "Order",
  components: {
    NavBar
  },
  data() {
    return {
      lang: this.$store.state.langStr,
      data: null,
      couponData: [],
      userCoupon: {},
      userCouponId: null,
      userCouponCopy: {},
      userCouponIdCopy: null,
      toggleCoupon: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_order_info;
      params.data = {
        id: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            this.data = res.data;
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 跳转
    goNextPage(val) {
      this.$router.push({
        path: `/${this.lang}/${val}?id=${this.data.id}`
      });
    },
    // 去支付
    goPay() {
      if (Number(this.data.isAuth) != 1) {
        this.$Dialog
          .confirm({
            message: "当前用户未认证，是否前往认证页面?"
          })
          .then(() => {
            let lang = this.$store.state.langStr;
            this.$router.push({
              path: `/${lang}/user/card`
            });
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      let params = {};
      params.url = this.$apis.api_upay_info;
      params.data = {
        id: this.data.id
      };
      if (this.userCouponId && Number(this.data.isCoupons) === 1)
        params.data.userCouponId = this.userCouponId;
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            if (Number(res.data.continueToPay) === 2) {
              this.$Toast("订单支付成功");
              this.getData();
            } else if (Number(res.data.continueToPay) === 1) {
              let data = this.$util.deepClone(res.data);
              data.id = this.data.id;
              data.userCouponId = this.userCouponId;
              this.$util.sessionStorage.save(
                "orderInfo",
                encodeURIComponent(JSON.stringify(data))
              );
              this.$router.push({
                path: `/${this.lang}/pay`
              });
            }
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 优惠券
    showCoupon() {
      if (Number(this.data.isCoupons) != 1) {
        return;
      }
      this.toggleCoupon = !this.toggleCoupon;
      let params = {};
      params.url = this.$apis.api_order_coupon;
      params.data = {
        id: this.data.id
      };
      if (this.toggleCoupon) {
        this.$net.req(params, this).then(
          res => {
            if (Number(res.code) === 0) {
              let data = res.data.list;
              data.forEach(element => {
                element.isShow = false;
                element.isSelected = false;
                if (this.userCouponId === element.userCouponId) {
                  element.isSelected = true;
                }
              });
              this.couponData = this.$util.deepClone(data);
            } else {
              this.$Toast(res.msg);
            }
          },
          e => {
            this.$Toast(e.msg);
          }
        );
      }
    },
    // 选择优惠券
    selectCoupon(item) {
      let data = this.couponData;
      data.forEach(element => {
        element.isShow = false;
        if (element.userCouponId != item.userCouponId) {
          element.isSelected = false;
        } else {
          element.isSelected = !element.isSelected;
        }
      });
      this.couponData = this.$util.deepClone(data);
      if (item.isSelected) {
        this.userCouponIdCopy = item.userCouponId;
        this.userCouponCopy = {
          moneySymbol: item.moneySymbol,
          amount: item.amount
        };
      } else {
        this.userCouponIdCopy = null;
        this.userCouponCopy = {};
      }
    },
    // 确定优惠券
    setCoupon() {
      this.userCouponId = this.userCouponIdCopy;
      this.userCoupon = this.$util.deepClone(this.userCouponCopy);
      this.onClickLeft();
    },
    // 优惠券返回
    onClickLeft() {
      this.toggleCoupon = false;
    }
  }
};
</script>

<style scoped lang='less'>
.order-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .wrap {
    > div {
      background: #fff;
      padding: 0 20px;
      margin: 0 0 10px;
    }
    .list {
      > .header {
        height: 40px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 15px;
        p {
          color: #333;
          font-size: 14px;
        }
        span {
          color: #ff523d;
          font-size: 14px;
        }
      }
      > .header.title {
        height: auto;
        border: 0;
        margin: 0;
        padding: 20px 0 15px;
        h4 {
          font-size: 20px;
        }
      }
      .content {
        margin-top: -5px;
        color: #999;
        font-size: 14px;
        > div {
          margin: 0 0 10px;
        }
        .remark {
          p {
            flex-shrink: 0;
          }
        }
      }
      .card {
        padding: 0 15px 10px;
        background: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 15px;
        .head {
          height: 40px;
          p {
            color: #222;
            font-size: 14px;
          }
          span {
            color: #ff523d;
            font-size: 14px;
            flex-shrink: 0;
          }
        }
        .message {
          color: #999;
          font-size: 14px;
          margin-top: -10px;
          > div {
            margin: 10px 0;
          }
        }
      }
      > .footer {
        height: 50px;
        h4 {
          font-size: 20px;
          color: #222;
        }
        p {
          color: #999;
          font-size: 14px;
          i {
            margin-left: 5px;
          }
        }
      }
      > .footer.coupon {
        height: 50px;
        h4 {
          font-size: 14px;
          color: #444;
          font-weight: 400;
        }
        p {
          color: #bbb;
          font-size: 14px;
          i {
            color: #bbb;
            font-size: 14px;
          }
        }
      }
      > .footer.isCoupons {
        p {
          color: #ff523d;
        }
      }
    }
    .list:nth-last-child(2) {
      padding-bottom: 5px;
    }
    .btn {
      padding: 0 20px;
      background: #f9f9f9;
      margin-bottom: 8px;
      button {
        width: 100%;
        height: 45px;
        font-size: 18px;
        background: rgba(255, 82, 61, 1);
        border-radius: 25px;
        color: #fff;
        border: 0;
      }
    }
  }
}
</style>
