<template>
  <div v-loading="loading" class="orderList">
    <div class="white-box">
      <el-table class="withdraw-table" :data="tableData" style="width: 100%;" :span-method="objectSpanMethod">
        <el-table-column label="商品编号" prop="SKU_CODE"></el-table-column>
        <el-table-column label="商品名称" prop="GOODS_TITLE"></el-table-column>
        <el-table-column label="数量" prop="BUY_NUMS"></el-table-column>
        <el-table-column label="会员价格">
          <template slot-scope="props">
            {{ tool.formatPrice (props.row.REAL_PRICE * props.row.BUY_NUMS) }}
          </template>
        </el-table-column>
        <el-table-column label="会员PV">
          <template slot-scope="props">
            {{ tool.formatPrice (props.row.REAL_PV * props.row.BUY_NUMS) }}
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="SN">
          <template slot-scope="{row}">
            <span v-if="row.SEND_AT > 0  && row.STATUS === '已支付'" @click="openLogisticsQuery(row.SN)" style="cursor: pointer;"> <el-link type="primary">{{ row.SN }}</el-link> </span>
            <span v-else>{{ row.SN }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会员编号" prop="USER_NAME"></el-table-column>
        <el-table-column label="会员姓名" prop="REAL_NAME"></el-table-column>
        <el-table-column label="收货人" prop="CONSIGNEE"></el-table-column>
        <el-table-column label="收货电话" prop="MOBILE"></el-table-column>
        <el-table-column label="支付状态" prop="STATUS"></el-table-column>
        <el-table-column label="支付时间" prop="PAY_AT"></el-table-column>
        <el-table-column label="订单类型" prop="ORDER_TYPE"></el-table-column>
        <el-table-column label="支付类型" prop="PAY_TYPE"></el-table-column>
      </el-table>
      <div class="white-box-footer">
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>

    <el-dialog title="物流动态" :visible.sync="logisticsDialog" width="450px">
<!--      <el-button type="text">物流单号分组？</el-button>-->

      <el-timeline :reverse="false">
        <el-timeline-item v-for="(activity, index) in logistics" :key="index" :timestamp="activity.date_action">{{ activity.order_status }}</el-timeline-item>
      </el-timeline>
    </el-dialog>

    <el-dialog
      :top="dialogTop"
      :width="dialogWidth"
      title="物流动态"
      :visible.sync="logisticsQueryDialog"
      :before-close="logisticsQueryDialogHandleClose">
      <div class="diaBody" v-loading="logisticsQueryLoading">
        <el-tabs style="width: 100%!important" type="border-card" v-if="logisticsQueryList.length > 0">
          <el-tab-pane v-for="( item, index ) in logisticsQueryList" :key="index" :label="item.name">
            <div class="block">
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index2) in item.children"
                  :key="index2"
                  :icon="activity.icon"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.date_action">
                  <span class="timelineStatus">{{activity.order_status}}</span>
                </el-timeline-item>
              </el-timeline>
            </div>

          </el-tab-pane>
        </el-tabs>
        <el-empty v-if="logisticsQueryEmpty" :image-size="200"></el-empty>
<!--        <span slot="footer" class="dialog-footer">-->
<!--          <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="logisticsQueryDialog = false">确 定</el-button>-->
<!--      </span>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import network from '@/utils/network'
import tool from '@/utils/tool'
import axios from 'axios'
export default {
  name: 'order-list',
  components: {Pagination},
  data () {
    return {
      loading: false,
      form: {},
      tableData: null,
      list: null,
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
      // 订单号判断
      spanArr: [], // 用于存放需要合并的行的个数
      pos: 0, // 记录spanArr数组的下标
      logistics: [],
      logisticsDialog: false,
      logisticsNo: [],
      logisticsQueryDialog: false,
      logisticsQueryList: [],
      logisticsQueryLoading: false,
      reverse: true,
      logisticsQueryEmpty: false,
      dialogWidth:0,
      dialogTop:0
    }
  },
  created() {
    this.setDialogWidth()
  },
  mounted() {
    this.getData()
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  methods: {
    setDialogWidth() {
      var val = document.body.clientWidth
      const def = 800 // 默认宽度
      if (val > def) {
        this.dialogWidth = '60%'
        this.dialogTop = '15vh'
      } else {
        this.dialogWidth = '90%'
        this.dialogTop = '1vh'
      }
    },
    openLogisticsQuery (id) {
      this.logisticsQueryEmpty = false
      this.logisticsQueryList = []
      this.logisticsQueryDialog = true
      this.logisticsQueryLoading = true
      console.log(id)
      this.queryData(id).then(res => {
        const data = res.data.data
        let keysList = Object.keys(data)
        let list = []
        keysList.forEach((key, index) => {
          let oneList = data[key]
          oneList[ oneList.length - 1 ].color = '#0bbd87'
          oneList[ oneList.length - 1 ].size = 'large'
          // oneList[ oneList.length - 1 ].icon = 'el-icon-s-promotion'
          let one = {
            'name': key,
            'children': oneList
          }
          list.push(one)
        })
        console.log(list)
        this.logisticsQueryList = list
        this.logisticsQueryLoading = false
      }).catch((error) =>{
        console.log(error);
        this.logisticsQueryList = []
        this.logisticsQueryEmpty = true
        this.logisticsQueryLoading = false
      })
    },
    async queryData (id) {
      const link = 'https://taoplus.com.my/index.php?route=information/order_tracking/jsons&order_tracking_search=' + id
      const ret = await axios.get(link)// await 后面也可以跟的是Promise实例对象
      // console.log(ret)
      return ret
    },

    logisticsQueryDialogHandleClose (done) {
      this.logisticsQueryDialog = false
    },
    objectSpanMethod (obj) {
      if (obj.columnIndex >= 5) {
        // ⼆维数组存储的数据取出
        var _row = this.spanArr[obj.rowIndex]
        var _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else {
        return false
      }
    },
    getSpanArr (orderList) { // 传⼊你的列表数据
      this.pos = 0
      orderList.forEach((item, index) => {
        // 判断是否是第⼀项
        if (index === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 不是第⼀项时，就根据标识去存储
          if (// orderSn，createdAt...是你的第⼀个数据、第⼆个数据...

            orderList[index].ORDER_SN === orderList[index - 1].ORDER_SN &&
              orderList[index].USER_NAME === orderList[index - 1].USER_NAME &&
              orderList[index].REAL_NAME === orderList[index - 1].REAL_NAME &&
              orderList[index].CONSIGNEE === orderList[index - 1].CONSIGNEE &&
              orderList[index].MOBILE === orderList[index - 1].MOBILE &&
              orderList[index].PAY_AT === orderList[index - 1].PAY_AT
          ) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1)
            this.pos = index
          }
        }
      })
    },
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    getData (page, pageSize) {
      this.spanArr = []
      this.pos = 0
      let _this = this
      network.getPageData(_this, 'shop/order-list', page, pageSize, {type: this.type}, function (response) {
        _this.loading = false

        _this.list = response.list

        let settingObj = _this.list

        let settingArr = Object.keys(settingObj).map(key => {
          // console.log(key); //为每个键名
          return settingObj[key] // 把每个对象返回出去生成一个新的数组中相当于0:{id:1}
        })

        _this.tableData = settingArr
        // console.log('11111',_this.tableData);
        _this.getSpanArr(_this.tableData)
      })
    },
    showLogistics (orderSn) {
      const link = 'https://taoplus.com.my/index.php?route=information/order_tracking/json&order_tracking_search=TBS10182495KJ2430'
      axios.get(link).then(response => {
        //   const result = '{"result":1,"telephone":"","data":[{"order_status":"\u6cc9\u5dde\u5e02,\uff08<\u5609\u6b23\u6377\u5ba2\u4fbf\u5229\u5e97>\u7b7e\u6536\uff09,\u6536\u4ef6\u4eba\u5df2\u53d6\u8d70\u3002\u5982\u6709\u7591\u95ee\u8bf7\u7535\u8054\u5feb\u9012\u5458\uff1a<18876539912>\u3002\u98ce\u96e8\u517c\u7a0b\u9001\u5feb\u9012,\u53ea\u76fc\u5c0f\u4e3b\u80fd\u6ee1\u610f\u3002\u8bf7\u70b9\u51fb\\"\u670d\u52a1\u8bc4\u4ef7\\"\u53cd\u9988\u60a8\u7684\u611f\u53d7,\u52a9\u529bEMS\u4e0d\u65ad\u63d0\u5347\u670d\u52a1\u6c34\u5e73\u3002","location":"","date_action":"2023-05-27, 18:33:00","unix_time":1685183580,"date":"2023-05-27","time":"18:33:00","pod":""},{"order_status":"\u6cc9\u5dde\u5e02,\uff08\u60a8\u7684\u5feb\u9012\u5df2\u6d3e\u9001\u81f3\u5609\u6b23\u6377\u5ba2\u4fbf\u5229\u5e97\u4e70\u83dc\u4ee3\u6536\u70b9;\u81ea\u63d0\u70b9\u8054\u7cfb\u65b9\u5f0f\uff1a13799551976\uff0c\u8bf7\u51ed\u53d6\u8d27\u7801\u4e8e\u5609\u6b23\u6377\u5ba2\u4fbf\u5229\u5e97\u4e70\u83dc\u4ee3\u6536\u70b9;\u81ea\u63d0\u70b9\u8054\u7cfb\u65b9\u5f0f\uff1a13799551976\u53ca\u65f6\u9886\u53d6,\u5982\u6709\u7591\u95ee\u8bf7\u8054\u7cfb 18876539912\uff09","location":"","date_action":"2023-05-25, 11:49:00","unix_time":1684986540,"date":"2023-05-25","time":"11:49:00","pod":""},{"order_status":"\u6cc9\u5dde\u5e02,\u3010\u60e0\u5b89\u53bf\u884c\u4e1a\u5ba2\u6237\u57ce\u5317\u63fd\u6295\u90e8\u3011\u5b89\u6392\u6295\u9012,\u6295\u9012\u5458:\u82cf\u52c7\u654f,\u7535\u8bdd:18876539912,\u63fd\u6295\u90e8\u7535\u8bdd:0595-87392666","location":"","date_action":"2023-05-25, 09:24:00","unix_time":1684977840,"date":"2023-05-25","time":"09:24:00","pod":""},{"order_status":"\u6cc9\u5dde\u5e02,\u5230\u8fbe\u3010\u60e0\u5b89\u53bf\u884c\u4e1a\u5ba2\u6237\u57ce\u5317\u63fd\u6295\u90e8\u3011","location":"","date_action":"2023-05-25, 07:54:00","unix_time":1684972440,"date":"2023-05-25","time":"07:54:00","pod":""},{"order_status":"\u6cc9\u5dde\u5e02,\u79bb\u5f00\u3010\u798f\u5efa\u7701\u5bc4\u9012\u4e8b\u4e1a\u90e8\u6cc9\u5dde\u5e02\u90ae\u533a\u4e2d\u5fc3\u90ae\u4ef6\u5904\u7406\u4e2d\u5fc3\u3011,\u4e0b\u4e00\u7ad9\u3010\u60e0\u5b89\u53bf\u884c\u4e1a\u5ba2\u6237\u57ce\u5317\u63fd\u6295\u90e8\u3011","location":"","date_action":"2023-05-25, 05:52:00","unix_time":1684965120,"date":"2023-05-25","time":"05:52:00","pod":""},{"order_status":"\u6cc9\u5dde\u5e02,\u5230\u8fbe\u3010\u798f\u5efa\u7701\u5bc4\u9012\u4e8b\u4e1a\u90e8\u6cc9\u5dde\u5e02\u90ae\u533a\u4e2d\u5fc3\u90ae\u4ef6\u5904\u7406\u4e2d\u5fc3\u3011","location":"","date_action":"2023-05-25, 01:46:00","unix_time":1684950360,"date":"2023-05-25","time":"01:46:00","pod":""},{"order_status":"\u5e7f\u5dde\u5e02,\u79bb\u5f00\u3010\u5e7f\u5dde\u5e02\u534e\u9646\u5305\u4ef6\u8f66\u95f4\u3011,\u4e0b\u4e00\u7ad9\u3010\u798f\u5efa\u7701\u5bc4\u9012\u4e8b\u4e1a\u90e8\u6cc9\u5dde\u5e02\u90ae\u533a\u4e2d\u5fc3\u90ae\u4ef6\u5904\u7406\u4e2d\u5fc3\u3011","location":"","date_action":"2023-05-24, 10:34:00","unix_time":1684895640,"date":"2023-05-24","time":"10:34:00","pod":""},{"order_status":"\u5e7f\u5dde\u5e02,\u5230\u8fbe\u3010\u5e7f\u5dde\u5e02\u534e\u9646\u5305\u4ef6\u8f66\u95f4\u3011","location":"","date_action":"2023-05-24, 06:55:00","unix_time":1684882500,"date":"2023-05-24","time":"06:55:00","pod":""},{"order_status":"\u5e7f\u5dde\u5e02,\u79bb\u5f00\u3010\u5e7f\u5dde\u5e02\u7535\u5546\u5ba2\u6237\u9ec4\u57d4\u5927\u5b97\u63fd\u6295\u90e8\u3011,\u4e0b\u4e00\u7ad9\u3010\u5e7f\u5dde\u5e02\u534e\u9646\u5305\u4ef6\u8f66\u95f4\u3011","location":"","date_action":"2023-05-24, 04:48:00","unix_time":1684874880,"date":"2023-05-24","time":"04:48:00","pod":""},{"order_status":"\u5e7f\u5dde\u5e02,\u3010\u5e7f\u5dde\u5e02\u7535\u5546\u5ba2\u6237\u9ec4\u57d4\u5927\u5b97\u63fd\u6295\u90e8\u3011\u5df2\u6536\u5bc4,\u63fd\u6295\u5458:\u674e\u5c0f\u73b2,\u7535\u8bdd:18042839163","location":"","date_action":"2023-05-24, 00:12:00","unix_time":1684858320,"date":"2023-05-24","time":"00:12:00","pod":""},{"order_status":"\u5230\u8fbe\u4e2d\u56fd\u6d77\u5173\uff0c\u7b49\u5f85\u6e05\u5173\u4e2d","location":"","date_action":"2023-05-22, 16:21:30","unix_time":1684743690,"date":"2023-05-22","time":"16:21:30","pod":""},{"order_status":"\u7531\u9a6c\u6765\u897f\u4e9a\u3010\u5409\u9686\u5761\u3011\u53d1\u5f80\u4e2d\u56fd\u6d77\u5173(EMS 9774021751238)","location":"","date_action":"2023-05-17, 09:14:24","unix_time":1684286064,"date":"2023-05-17","time":"09:14:24","pod":""},{"order_status":"\u5206\u62e3\u4e2d","location":"","date_action":"2023-05-16, 12:55:35","unix_time":1684212935,"date":"2023-05-16","time":"12:55:35","pod":""},{"order_status":"\u52a0\u5f71\u603b\u90e8-\u53d1\u8d27","location":"","date_action":"2023-05-16, 11:06:31","unix_time":1684206391,"date":"2023-05-16","time":"11:06:31","pod":""},{"order_status":"\u52a0\u5f71\u603b\u90e8-\u6536\u8d27","location":"","date_action":"2023-05-16, 11:06:22","unix_time":1684206382,"date":"2023-05-16","time":"11:06:22","pod":""},{"order_status":"\u53d1\u8d27","location":"","date_action":"2023-05-16, 09:55:05","unix_time":1684202105,"date":"2023-05-16","time":"09:55:05","pod":""}]}';
        //   const res = JSON.parse(response)
        this.logistics = response.data

        // this.logistics.forEach((item, index) => {
        //   this.logisticsNo.push(index)
        // })

        // this.logisticsDialog = true
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped>

.timelineStatus{
  color: #409EFF;
}
.diaBody{
  min-height: 20vh;
}
</style>
