<style lang="scss" scoped>
</style>
<template>
  <div  :class="$q.platform.is.desktop ? 'q-ma-lg col': 'full-width'" style="min-height:80vh">
    <div class="" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
      <div :class="{'row items-center':$q.platform.is.mobile}">
        <q-btn-dropdown color="dark" flat dense :label="`訂單狀態：${orderStatusFiled}`" class="q-px-md" :class="{'col':$q.platform.is.mobile}">
          <q-list>
            <q-item clickable v-close-popup  v-for="item in orderEnums" :key="item.ID" @click="changeOrderType(item)">
              <q-item-section>
                <q-item-label>{{ item.Name }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>

        <q-btn-dropdown color="dark" flat dense :label="`商品類型：${productTypeFiled}`" class="q-px-md"  :class="{'col':$q.platform.is.mobile}">
          <q-list>
            <q-item clickable v-close-popup  v-for="(x,i) in productTypes" :key="i" @click="changeProductTypeHandler(x)">
              <q-item-section>
                <q-item-label>{{ x.desc }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </div>
      <q-space class="desktop-only" />
      <div>
        <q-input standout dense v-model="msg.GoodsName" :borderless="$q.platform.is.mobile" :class="{'q-mx-md':$q.platform.is.mobile}" label="商品名稱/訂單編號" @keypress.enter.native="initListHandler" >
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
      </div>
      
    </div>
    
    <q-card class="rounded-borders q-pa-md q-mt-md" flat v-for="item in orderList" :key="item.id">
      <div class="row justify-between items-center">
        <div>
          <q-chip size="12px" :class="[item.goodTypeEnum.bgColor,item.goodTypeEnum.color]" square>{{ item.goodTypeEnum?item.goodTypeEnum.desc:'' }}</q-chip>
          <span class="f12 q-ml-md text-grey-5 desktop-only">訂單編號：#{{ item.orderNo }}</span>
        </div>
        <div class="text-grey-5  desktop-only">下單日期：{{ item.createTimeStr }}</div>
        <div class="row items-center">
          <q-btn color="dark" icon="iconfont iconmessage1" label="联系客服" flat @click="goCustomerServiceHandler" class="q-mr-md" />
          <q-icon :name="item.orderStatusInfo.icon" :class="[item.orderStatusInfo.color]" size="14px" />
          <span class="q-ml-sm" :class="[item.orderStatusInfo.color]">{{ item.orderStatusInfo.desc }}</span>
        </div>
      </div>
      <div class="q-pa-md bg-grey-2 rounded-borders mobile-only q-mt-sm">
        <div class="f12 text-grey-6">訂單編號：#{{ item.orderNo }}</div>
        <div class="text-grey-6 q-mt-sm">下單日期：{{ item.createTimeStr }}</div>
      </div>
      <div class="q-mt-sm" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
          <div class="row col full-width">
            <q-img
            :src="item.goodsPic"
            class="rounded-borders q-mr-md"
            spinner-color="grey-2"
            :style="{width: $q.platform.is.desktop?'150px':'80px',height:$q.platform.is.desktop?'80px':'40px'}"
            />
            <div class="col">
              <div class="text-body1 ellipsis cursor-pointer" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')">{{ item.goodsName }}</div>
              <div class="text-grey-5" :class="{'q-mt-sm':$q.platform.is.desktop}">{{ item.orderMake }} </div>
              <div class="q-mt-sm text-grey-8 f12 row items-center desktop-only">
                <q-icon name="iconfont iconpeople1" size="14px" class="q-mr-sm" />
                <span class="q-mr-md">{{ item.surName }}/{{ item.name }}</span>
                <q-icon name="iconfont icontelephone" size="14px" class="q-mr-sm" />
                <span class="q-mr-md">{{ item.contactNumber }}</span>
                <q-icon name="iconfont iconemail" size="14px" class="q-mr-sm" />
                <span class="q-mr-md">{{ item.mailbox }}</span>
              </div>
            </div>
          </div>
          <div class="q-mt-sm text-grey-8 f12 row items-center mobile-only">
            <q-icon name="iconfont iconpeople1" size="14px" class="q-mr-sm" />
            <span class="q-mr-md">{{ item.surName }}/{{ item.name }}</span>
            <q-icon name="iconfont icontelephone" size="14px" class="q-mr-sm" />
            <span class="q-mr-md">{{ item.contactNumber }}</span>
          </div>
          <div class="" :class="{'q-mt-md row items-end':$q.platform.is.mobile,'q-ml-lg':$q.platform.is.desktop}">
            <div class="col mobile-only text-left">
              <q-btn color="dark" icon="iconfont iconmessage1" label="联系客服" flat @click="goCustomerServiceHandler" />
            </div>
            <div>
              <div class="text-right">
              <span>CNY:</span>
              <span class="text-h6 q-ml-sm">{{ moneyFormat(item.totalPrice,2) }}</span>
            </div>
            <div class="q-mt-md text-right" v-if="item.orderStatus==1">
              <!-- <q-btn color="dark" dense flat class="q-px-sm" label="查看訂單" /> -->
               <q-btn color="primary" dense flat class="q-px-sm" label="取消訂單" @click="cancalOrder(item.orderNo)" />
               <q-btn color="primary" dense unelevated class="q-px-sm q-ml-sm" label="立即支付" @click="CommonJump('/pay/'+item.orderNo,{},'blank')" />
            </div>
            <div class="q-mt-md text-right" v-else>
              <q-btn color="dark" dense flat class="q-px-sm" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')" label="查看訂單" />
           </div>
            </div>
          </div>
      </div>
    </q-card>
    <div class="row justify-end q-mt-lg">
      <q-pagination
        v-if="pageCount > 1"
        v-model="msg.pageIndex"
        :max="pageCount"
        @input="getOrderList"
        :direction-links="true"
        color="white"
        text-color="dark"
        active-color="primary"
        active-text-color="white"
        active-design="unelevated"
        unelevated
        glossy
        ellipses
        :max-pages="6"
        boundary-numbers
        size="13px"
        padding="sm md"
      ></q-pagination>
    </div>
    
    <!-- <noneData v-show="!orderList.length"></noneData> -->
    <div class="text-center" v-if="!orderList || orderList.length==0">
      <none-data
        iconType="order"
        title="沒有找到您的訂單信息哦"
        subtitle="趕緊去挑選心儀的旅遊產品吧"
      ></none-data>
    </div>
  </div>
</template>

<script>
import NoneData from "src/components/common/noneData.vue";
import {mappingListType,transProductEnum} from "src/utils/producttypeenum";
import EnumHelper from 'src/utils/enumhelper';
import OrderStatusEnum from 'src/utils/orderStautsEnum';
import ListProductTypeEnum from 'src/utils/listProductType';
export default {
  components: {
    NoneData,
  },
  data() {
    return {
      orderEnums: [],
      orderList: [],
      current: 1,
      pageCount: 0,
      orderStatusFiled:'',
      productTypeFiled:'',
      msg:{
        pageSize:10,
        pageIndex:1,
        OrderStatus: 0,
        GoodsName: '',
        OrderTypeStr:''
      },
      productTypes:[]
    };
  },
  mounted() {
    this.productTypes = Object.values(ListProductTypeEnum).filter(x=>x.value!=3)
    this.productTypes.splice(0,0,{
      value:'',
      desc:'全部類型'
    })
    this.productTypeFiled=this.productTypes[0].desc
    this.type = this.$route.query.type
    if(this.type) {
      this.msg.OrderStatus = Number(this.type)
    }
    this.getOrderEnums();
    this.getOrderList();
  },
  methods: {
    cancalOrder(OrderNo) {
      console.log(this.$q.dialog)
      this.$q.dialog({
        title: '取消確認',
        message: '訂單取消後，系統將立即釋放位置，請問是否執行?',
        cancel: true,
        persistent: true
      }).onOk(() => {
        this.apipost('GetCancelOrder_post',{OrderNo},r=>{
          if(r.data.resultCode==1){
            this.$message.success('訂單取消成功')
            this.getOrderList()
          }else{
            this.$message.error('訂單取消失敗，請重新嘗試')
          }
        })
      }).onCancel(() => {
        // console.log('>>>> Cancel')
      })
    },
    pageChange(value) {
      this.current = value;
      this.getOrderList();
    },
    changeOrderType(item) {
      if (this.msg.OrderStatus != item.ID) {
        this.msg.OrderStatus = item.ID
        this.orderStatusFiled = item.Name
        this.initListHandler()
      }
    },
    changeProductTypeHandler(x){
      if(x.desc!=this.productTypeFiled){
        this.msg.OrderTypeStr = x.value==''?'':transProductEnum(x.value).join(',')
        this.productTypeFiled = x.desc
        this.initListHandler()
      }
    },
    initListHandler(){
      this.msg.pageIndex = 1;
      this.pageCount = 0;
      this.orderList = [];
      this.getOrderList();
    },
    getOrderEnums() {
      this.apipost(
        "GetDirectOrderStatusEnum_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            
            this.orderEnums = res.data.data;
            this.orderEnums.splice(0,0,{ID:0,Name:'全部訂單'})
            console.log(this.orderEnums)
            this.orderStatusFiled = this.orderEnums[0].Name
          } else {
            this.$message.error(res.data.message);
          }
        },
        null
      );
    },
    goCustomerServiceHandler(){
      window.open('https://work.weixin.qq.com/kfid/kfcaec7130ac124872a', '_blank');
    },
    getOrderList() {
      this.apipost(
        "GetMyDirectOrderPageList_post",
        this.msg,
        (res) => {
          if (res.data.resultCode == 1) {
            const { count, pageData, pageCount } = res.data.data;
            this.count = count;
            this.pageCount = pageCount;
            this.orderList = pageData;
            this.orderList.forEach(x=>{
              x.goodTypeEnum = mappingListType(x.goodsType)
              x.orderStatusInfo = EnumHelper.ParseToEnum(OrderStatusEnum,x.orderStatus,'value')
            })
          } else {
            this.$message.error(res.data.message)
          }
        },
        null
      );
    },
  },
};
</script>