<template>
  <xd-layout
    title="我的订单"
    background="#f8f8f8"
    :show-bar="true"
    :show-footer="false"
    @back="back"
  >
    <!--tab-->
    <view class="app-my-order">
      <view class="app-my-order-tab">
        <view
          class="app-my-order-tab__item"
          v-for="(item,index) in orderTab"
          :key="index"
          @click="handeChangeTabs(item)"
        >
          <view
            :style="{
              color:item['value'] === orderTabId ? '#333': '#999',
              fontWeight: item['value'] === orderTabId ? 'bold': 'normal'
            }"
          >{{item['label']}}</view>
          <view
            class="app-my-order-tab__item-line"
            :style="{background: $mainColor}"
            v-if="item['value'] === orderTabId"
          ></view>
        </view>
      </view>
      <view class="app-my-order-subTab" v-if="subTab.length > 0">
        <view
          class="app-my-order-subTab__item"
          v-for="(item,index) in subTab"
          :key="index"
          @click="handleSubTabChange(item)"
        >
          <xd-radio size="mini" v-model="item['selected']"></xd-radio>
          <view
            :style="{
              color:item['value'] === subTabId ? '#333': '#999',
              fontWeight: item['value'] === subTabId ? 'bold': 'normal'
            }"
          >{{item['label']}}</view>
        </view>
      </view>
    </view>
    <!--tab end-->
    <xd-store-order-list
      :list="orderList"
      :type="orderTabId"
      @onToPay="handleToPay"
      @onCannelOrder="handleCannelOrder"
      @onCashier="handleCashier"
      @onOrderDetail="handleOrderDetail"
    ></xd-store-order-list>
  </xd-layout>
</template>

<script>
  import {tabs, subTabs} from './order'
  import XdLayout from "@/components/XdLayout/XdLayout";
  import XdStoreOrderList from "@/dome/components/XdStoreOrderList/XdStoreOrderList";
  import XdRadio from "@/components/XdRadio/XdRadio";

  export default {
    name: "AppMyOrderhome",
    components: {
      XdStoreOrderList,
      XdLayout,
      XdRadio
    },
    data() {
      return {
        dataList: [],
        orderTabId: 0, //选中的订单类型
        orderTab: tabs, //订单类型菜单
        subTabId: null,
        subTab: [],

        orderList: null,
      }
    },
    created(){

    },
    methods: {


      /**
       * @description 主菜单切换事件
       * @param item
       */
      handeChangeTabs(item){
        if(item['value'] === this.orderTabId) return;
        this.orderTabId = item['value'];
        this.getList();
      },

      /**
       * @description 子级菜单切换事件
       * @param item
       */
      handleSubTabChange(item){
        if (item['value'] === this.subTabId) return;
        this.subTabId = item['value'];
        let subTab = this.$xdUniHelper.cloneDeep(this.subTab)
        subTab.map((value)=>{
          if(item['value'] === value['value']) {
            value['selected'] = true;
          }else{
            value['selected'] = false;
          }
        });
        this.subTab = subTab;
        this.getList();
      },

      /**
       * @description 获取我的订单接口
       */
      getList(){},

      /**
       * @description 待付款去支付
       * @param item
       */
      handleToPay(item){
        console.log('handleToPay', item)
      },

      /**
       * @description 取消订单
       * @param item
       */
      handleCannelOrder(item) {
        console.log('handleCannelOrder', item)
      },

      /**
       * @description 再次购买
       * @param item
       */
      handleCashier(item) {
        console.log('handleCashier', item)
      },

      /**
       * @description 去订单详情
       * @param item
       */
      handleOrderDetail(item) {
        console.log('handleOrderDetail', item)
      },

      back(){
        this.$xdUniHelper.navigateBack()
      },

    }
  }
</script>

<style scoped lang="less">
  .app-my-order {
    .uni-body-margin();
    box-sizing: border-box;
    font-weight: normal;
    padding-top: unit(20,rpx);
  }

  .app-my-order-tab {
    height: unit(68,rpx);
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__item {
      flex: 1;
      font-size: @xd-font-size-base + 2;
      text-align: center;
      position: relative;
      height: 100%;
      line-height: unit(68,rpx);

      &-line {
        position: absolute;
        height: unit(6,rpx);
        border-radius: unit(2,rpx);
        bottom: 0;
        left: 30%;
        right: 30%;
      }
    }
  }

  .app-my-order-subTab {
    border: 1px solid #ececec;
    box-sizing: border-box;
    height: unit(110,rpx);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    .uni-box-radius();
    margin-bottom: unit(20,rpx);

    &__item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 unit(20,rpx);
      font-size: @xd-font-size-base;

      & > view:last-child {
        margin-left: unit(10,rpx);
      }
    }
  }


</style>
