<template>
  <div class="rechargeList">
    <div class="user_head">
      <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/user')">
      <span>
        充值订单
      </span>
    </div>
    <div class="list" :style="{height:cHeigth}">
      <el-tabs class="haoyou" @tab-click="handleClick">
        <el-tab-pane label="待支付" >
          <ul class="list-group list-group-flush" v-if="!cueShow" style="line-heigt:1.5rem">
            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
              <div class="section">
                  <p class="d-flex align-items-center">
                    <span class="leftColor">订单编号</span>
                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">下单时间</span>
                      <span class="ml-auto rightColor">{{item.order_time}}</span>
                  </p>
              </div>
              <div class="section">
                  <p class="d-flex align-items-center">
                      <span class="leftColor">办理进度</span>
                      <span class="ml-auto" style="color:#fb2e2e">{{item.order_state_text}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">实付金额</span>
                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
                  </p>
              </div>
              <div class="footer  align-items-center" style="justify-content: space-between;">
                  <button class="btn btn-info" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
                  <button class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="item.id" :data-key="idx"  @click="cancel">取消订单</button>
                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
                  <button style="background: #F78F7E;border:1px solid #F78F7E" class="btn btn-info" :data-key="idx" :data-type="item['order_type']" @click="gopay">去付款</button>
              </div>
            </li>
          </ul>
            <div class="cuewords" v-if="cueShow">
                <p>您暂时还没有订单</p>
            </div>
        </el-tab-pane>
        <el-tab-pane label="充值中" name="recharging">
          <ul class="list-group list-group-flush" v-if="!cueShow2" style="line-heigt:1.5rem">
            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
              <div class="section">
                  <p class="d-flex align-items-center">
                    <span class="leftColor">订单编号</span>
                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">下单时间</span>
                      <span class="ml-auto rightColor">{{item.order_time}}</span>
                  </p>
              </div>
              <div class="section">
                  <p class="d-flex align-items-center">
                      <span class="leftColor">办理进度</span>
                      <span class="ml-auto" style="color:#fb2e2e">{{item.order_state_text}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">实付金额</span>
                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
                  </p>
              </div>
              <div class="footer  align-items-center" style="justify-content: flex-end;">
                  <button class="btn btn-info btnLeft" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
              </div>
            </li>
          </ul>
            <div class="cuewords" v-if="cueShow2">
                <p>您暂时还没有订单</p>
            </div>
        </el-tab-pane>
        <el-tab-pane label="充值成功" name="success">
          <ul class="list-group list-group-flush" v-if="!cueShow3" style="line-heigt:1.5rem">
            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
              <div class="section">
                  <p class="d-flex align-items-center">
                    <span class="leftColor">订单编号</span>
                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">下单时间</span>
                      <span class="ml-auto rightColor">{{item.order_time}}</span>
                  </p>
              </div>
              <div class="section">
                  <p class="d-flex align-items-center">
                      <span class="leftColor">办理进度</span>
                      <span class="ml-auto" style="color:#fb2e2e">{{item.order_state_text}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">实付金额</span>
                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
                  </p>
              </div>
              <div class="footer  align-items-center" style="justify-content: flex-end;">
                  <button class="btn btn-info btnLeft" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
              </div>
            </li>
          </ul>
            <div class="cuewords" v-if="cueShow3">
                <p>您暂时还没有订单</p>
            </div>
        </el-tab-pane>
        <el-tab-pane label="充值失败" name="failed">
          <ul class="list-group list-group-flush" v-if="!cueShow4" style="line-heigt:1.5rem">
            <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
              <div class="section">
                  <p class="d-flex align-items-center">
                    <span class="leftColor">订单编号</span>
                    <span class="ml-auto rightColor">{{item.refill_order_sn}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">下单时间</span>
                      <span class="ml-auto rightColor">{{item.order_time}}</span>
                  </p>
              </div>
              <div class="section">
                  <p class="d-flex align-items-center">
                      <span class="leftColor">办理进度</span>
                      <span class="ml-auto" style="color:#fb2e2e">{{item.order_state_text}}</span>
                  </p>
                  <p class="d-flex align-items-center">
                      <span class="leftColor">实付金额</span>
                      <span class="ml-auto leftColor">&yen;{{item.order_price}}</span>
                  </p>
              </div>
              <div class="footer  align-items-center" style="justify-content: flex-end;">
                  <button class="btn btn-info btnLeft" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
                  <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-key="idx" :data-type="item['order_type']" @click="goDetail">订单详情</a>
              </div>
            </li>
          </ul>
            <div class="cuewords" v-if="cueShow4">
                <p>您暂时还没有订单</p>
            </div>
        </el-tab-pane>
      </el-tabs>
      <div class="more" v-if="moreShow">
        <a href="javascript:void(0);" class="btn btn-light btn-block m-2 pt-3 pb-3" v-on:click="loadMore"
          v-if="hasMore">点击加载更多</a>
        <p class="text-center" style="color:#999" v-if="!hasMore">没有更多了</p>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../extend/Http";
import {MessageBox, Message} from 'element-ui';
export default {
  name: 'rechargeList',
  data() {
    return {
      list: [],
      status: 0,
      activeName: '',
      cueShow: false,
      cueShow2: false,
      cueShow3: false,
      cueShow4: false,
      moreShow: false,
      hasMore: true,
      page: 1
    }
  },
  computed: {
    cHeigth() {
      if (this.list.length) {
        return 'auto'
      } else {
        return '100%'
      }
    }
  },
  created() {
    this.getRechargeLists()
  },
  methods: {
    async getRechargeLists () {
      let res = await Http.getInstance().getRechargeLists({
        page: this.page,
        order_state: this.status
      });
      console.log('充值订单', res);
      if(res.data.length == 0){
        this.moreShow = false
        this.cueShow = true
        this.cueShow2 = true
        this.cueShow3 = true
        this.cueShow4 = true
      }else{
        this.list = res.data
        this.hasMore = res.data.length >9 ;
        this.moreShow = true
      }
    },
    async handleClick(tab,event){
      if(tab.label == '待支付'){
        this.list = []
        this.page = 1
        this.status = 0
        let res = await Http.getInstance().getRechargeLists({
            page: this.page,
            order_state: this.status
        });
        this.list = res.data
        if(res.data.length == 0){
          this.moreShow = false
          this.cueShow = true
          this.cueShow2 = true
          this.cueShow3 = true
          this.cueShow4 = true
        }else{
            this.list = res.data
            this.hasMore = res.data.length >9 ;
            this.moreShow = true
            this.cueShow = false
            this.cueShow2 = true
            this.cueShow3 = true
            this.cueShow4 = true
        }
      } else if (tab.label == '充值中') {
        this.list = []
        this.page = 1
        this.status = 1
        let res = await Http.getInstance().getRechargeLists({
            page: this.page,
            order_state: this.status
        });
        // console.log('充值中', res);
        this.list = res.data
        if(res.data.length == 0){
          this.moreShow = false
          this.cueShow = true
          this.cueShow2 = true
          this.cueShow3 = true
          this.cueShow4 = true
        }else{
            this.list = res.data
            this.hasMore = res.data.length >9 ;
            this.moreShow = true
            this.cueShow = true
            this.cueShow2 = false
            this.cueShow3 = true
            this.cueShow4 = true
        }
      } else if (tab.label == '充值成功') {
        this.list = []
        this.page = 1
        this.status = 2
        let res = await Http.getInstance().getRechargeLists({
            page: this.page,
            order_state: this.status
        });
        // console.log('充值成功', res);
        this.list = res.data
        if(res.data.length == 0){
          this.moreShow = false
          this.cueShow = true
          this.cueShow2 = true
          this.cueShow3 = true
          this.cueShow4 = true
        }else{
            this.list = res.data
            this.hasMore = res.data.length >9 ;
            this.moreShow = true
            this.cueShow = true
            this.cueShow2 = true
            this.cueShow3 = false
            this.cueShow4 = true
        }
      } else {
        this.list = []
        this.page = 1
        this.status = 3
        let res = await Http.getInstance().getRechargeLists({
            page: this.page,
            order_state: this.status
        });
        // console.log('充值失败', res);
        this.list = res.data
        if(res.data.length == 0){
          this.moreShow = false
          this.cueShow = true
          this.cueShow2 = true
          this.cueShow3 = true
          this.cueShow4 = true
        }else{
            this.list = res.data
            this.hasMore = res.data.length >9 ;
            this.moreShow = true
            this.cueShow = true
            this.cueShow2 = true
            this.cueShow3 = true
            this.cueShow4 = false
        }
      }
    },
    open() {
      // @ts-ignore
      MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE  + '</a><p>手机号同步微信</p>', '请联系客服', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "拨打" ,
      }).then(action =>{
        window.location.href = 'tel://' +Http.PHONE;
      });
    },
    async loadMore() {
      let res = await Http.getInstance().getRechargeLists({
        page: this.page,
        status: this.status
      });
      this.hasMore = res.data.length >9 ;
      this.list = [].concat(this.list.concat(res.data));
      this.page++;
    },
    // 取消订单
    cancel(event) {
      // console.log('event', event);
      MessageBox.alert( '你确定要取消订单吗？', '温馨提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
      }).then(async() =>{
        let data = this.list[event.target.getAttribute("data-key")];
        // console.log(data)
        let res = await Http.getInstance().RechargecancelOrder({
          order_id: data.id
        });
        if(res && res.code == 1){
            Message({
                message: '订单已取消', duration: 2000, type: "success"
            });
            this.getRechargeLists()
            // setTimeout(function(){
            //   location.reload()
            // },1000)
        }
      }).catch(() => {
      });
    },
    // 订单详情
    goDetail(event) {
      let data = this.list[event.target.getAttribute("data-key")];
      console.log('data', data);
      this.$router.push({
        name: "rdetail", params: {
          id: data["id"],
          card_no: data['card_no'],
          order_state_text: data["order_state_text"],
          order_time: data["order_time"],
          refill_order_sn: data["refill_order_sn"],
          order_price: data['order_price']
        }
      });
      localStorage.setItem('rechageId', JSON.stringify(data["id"]))
    },
    // 付款
    async gopay(event) {
      let data = this.list[event.target.getAttribute("data-key")];
      this.$router.replace({
        name: 'opayment',
        params: {
          order_sn: data.refill_order_sn,
          type: '1',
          recharfe: 'false'
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
// 顶部导航
.user_head{
    text-align: center;
    font-size: 2rem;
    // font-family: 'PingFang SC';
    padding-bottom: 1.667rem;
    padding-top: 1rem;
    // font-weight: bold;
    line-height: 1.5rem;
    background-color: #fff;
    .leftIcon{
        position: absolute;
        left: 1.667rem;
        top: 1.4rem;
        width: 0.667rem;
    }
    span {
        vertical-align: middle;
        color: #333;
    }
}
 .list {
    width: 100%;
    // height: auto;
    position: absolute;
    background-color: #EDF0F5;
}
// tab栏样式
.list /deep/.el-tabs__active-bar {
    background-color: #4FDCA2;
}
.list /deep/.el-tabs__item.is-active {
    color: #333;
}
.list /deep/.el-tabs__item {
    color: #666;
    font-size: 1.4rem;
}
.list /deep/.el-tabs__nav-wrap {
    background-color: #fff;
}
.list /deep/.el-tabs__header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 0;
    background-color: #fff;
}
.list /deep/.el-tabs__nav-wrap::after {
    background: none;
}
// 右侧字体颜色
.rightColor {
    color: #666;
}
.leftColor {
    color: #333;
}
.list-wrap {
}
.haoyou{
  .el-tabs__nav-scroll{
      /*margin-left: 9rem;*/
      // padding: 0 8rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
  }
}
// 内边距
    .list-group {
        padding: 1rem;
    }
    .list .list-group-item {
        border-radius: 0.833rem;
        // padding: .5rem;
        padding: 1rem 1rem 1.5rem 1rem;
        margin: .5rem;
        margin-bottom: 0;
        background: #fff;
    }

.footer {
    color: #ffffff;
    // float: right;
    width: 100%;
    display: flex;
    padding-top: 1rem;
    .btn {
        padding: 0.375rem 0.55rem;
    }
    .btn-info{
        // margin: 0 0.5rem;
        border: none;
        // border-radius: 1.5rem;
        border-radius: 0.5rem;
        font-size: 1rem;
    }
    .btnLeft {
        margin-right: 1rem;
    }
}
.footer:first-child {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.cuewords{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    p{
        margin-top: 9rem;
        color: #999
    }
}
.section{
    position: relative;
}
.seal-img{
    position: absolute;
    // top: 0;
    // right: 5rem;
    // width: 5rem;
    top: -6.5rem;
    height: 6rem;
    right: 0rem;
    width: 6rem;
    background: url("../../assets/image/seal_03@2px.png") no-repeat;
    background-size: 100%;
    // padding-top: 1.7rem;
    // padding-left: 0.9rem;
    padding-top: 2.25rem;
    padding-left: 1.4rem;
    span{
        // color: #ee1e1e;
        color: #fff;
        font-size: 1rem;
        display: inline-block;
        // transform:rotate(-31deg);
        transform:rotate(-11deg);
        font-weight:700 ;
        text-align: center;
    }
}
.btn-light:hover {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.more {
  height: 47px;
}
</style>