<template>
<section class="main">

	<div class="p_all_20">
    <order-search
    ref="searchnav"
    :search-param="searchParam"
    :exportdetail-url="'/order/exportJajuOrder'"
    :brandType="1"
    :orderIds="orderIds"
    :tableLoading.sync="tableLoading"
    @backData="backData"></order-search>
     <div class="tabletitbox">
          <el-table style="width: 100%;margin-top:20px;" class="TableTitle">
              <el-table-column
                :label="item.labelName"
                :width="item.widthVal"
                align="center"
                v-for="(item,index) in TableTitleValue" :key="index"
              >
              </el-table-column>
          </el-table>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange($event,dataList)" class="allChecked">全选</el-checkbox>
     </div>
         <div class="ListWrap" v-loading="tableLoading">
            <div class="dataNo" v-show="!dataList.length">暂无数据</div>
            <div class="divLine" v-for="(item,index) in dataList" :key="index" v-show="dataList.length" >
              <div class="orderOption">
                <div class="left">
                   <el-checkbox class="isChenked" v-model="item.isChecked" @change="handleCheckedCitiesChange($event,item,index)"></el-checkbox>
                    <span class="spanMright">订单编号：{{item.orderCode}}</span>
                    <span class="spanMright">下单时间：{{item.addDate}}</span>
                     
                      <span class="spanMright">交货期：{{item.deliveryDateStatusDesc}}
                        <i v-if="!item.lookFlag" style="display: inline-block;vertical-align: text-top;background: #F56C6C;width:8px;height: 8px;border-radius:100%;"></i>
                      </span>
                </div>
              </div>
              <el-table
                  tooltip-effect="dark"
                  style="width: 100%"
                  :data="dataList[index].details"
                  :show-header="false"
                  border
                  :span-method="objectSpanMethod"
                  :cell-class-name="tableRowClassName"
                  >
                      <el-table-column
                        align="center"
                        label="商品"
                        :width="widthSizeObj.productWidth"
                        >
                        <template slot-scope="scope">
                          <div class="goodsInfo" v-if="scope.row.skuId" @click="goProdetail(scope.row.skuId)">
                            <div class="goodsimg">
                              <img :src="scope.row.goodsImg + '?x-oss-process=image/resize,h_200,w_200'" alt="">
                            </div>
                            <div>
                           <div class="goodstext blueColor ellipsis_4" style="line-height:24px;">
                              {{scope.row.goodsInfo}} ({{scope.row.specStr}})
                            </div>
                            <div>
                              <img v-if="scope.row.etaoProductTypeIcon" style="width:30px;" :src="scope.row.etaoProductTypeIcon" alt="">
                              <img v-else style="width:30px;" :src="scope.row.etaoProductVipIcon" alt="">
                            </div>
                            </div>
 
                          </div>
                          <div class="goodsInfo" v-else>
                            <div class="goodsimg">
                              <img :src="scope.row.goodsImg + '?x-oss-process=image/resize,h_200,w_200'" alt="">
                            </div>
                            <div>
                              <div class="goodstext ellipsis_4" style="line-height:24px;">
                                {{scope.row.goodsInfo}} ({{scope.row.specStr}})
                              </div>
                              <div>
                                <img v-if="scope.row.etaoProductTypeIcon" style="width:30px;" :src="scope.row.etaoProductTypeIcon" alt="">
                                <img v-else style="width:30px;" :src="scope.row.etaoProductVipIcon" alt="">
                              </div>
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      
                  <el-table-column
                    prop="count"
                    label="数量"
                    align="center"
                    :width="widthSizeObj.numberWidth2">
                  </el-table-column>
                  <el-table-column
                    label="线上结算(元)"
                    align="center"
                    :width="widthSizeObj.numberWidth3">
                    <template slot-scope="scope">
                      <div class="text_al">
                        <span>线上单价：{{scope.row.settlePrice}}</span>
                        <el-tooltip class="item " effect="light" placement="top-start" >
                          <div slot="content">
                            <div v-for="(item,i) in scope.row.labels" :key="i">
                              {{scope.row.labels[i]}}
                            </div>
                            </div>
                          <span class="el-icon-question"></span>
                        </el-tooltip>
                      </div>
                      <div class="text_al">线上总价：{{scope.row.totalSettlePrice}}</div>
                         <div class="text_al" v-if="scope.row.hasRefund">
                        <span class="redColor el-icon-time" @click="goRefund(scope.row.refundId)">{{scope.row.refundStatusDesc}}</span>
                        </div>
                      
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="线下结算(元)"
                    align="center"
                    :width="widthSizeObj.numberWidth3"
                    >
                    <template slot-scope="scope">
                        <div class="text_al">
                          线下单价：{{scope.row.EhomeOfflinePrice}}
                        </div>
                        <div class="text_al">
                          线下总价：{{scope.row.TotalEhomeOfflinePrice}}
                        </div>
                    
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="买家"
                    align="center"
                    :width="widthSizeObj.receiverWidth">
                    <template slot-scope="scope">
                      <!-- <span>{{item.userInfo?item.userInfo.userName:''}}</span> -->
                      <span>{{item.buyerName}}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="交易状态"
                    align="center"
                    :width="widthSizeObj.numberWidth"
                    >
                    <template slot-scope="scope">
                       <div :style="{color:item.orderStatusDesc=='已完成'?'#12b34e':''}">{{item.orderStatusDesc}}</div>
                      <div class="m6"><span class="spanMright blueColor" 
                      @click="goOrderDetail(item.orderId,item.allRefundStatus)">详情</span></div>
                        <div v-if="item.showDelayInfo==1" class="redColor">
                            {{item.delayInfo}}
                        </div>
                    </template>
                  </el-table-column>
                  
                  <el-table-column
                    label="商品备注"
                    align="center"
                    :width="widthSizeObj.dealWidth"
                    prop="goodsRemark"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                       <div class="ellipsis_4">{{scope.row.goodsRemark}}</div>
                    </template>
                  </el-table-column>
            </el-table>
            <div class="orderRemarkbox"><span class="s1">订单备注：</span><span class="s2">{{item.remark}}</span></div>
            </div>
            </div>
          <div class="pagination">
          <pagination @eventSizeChange="eventSizeChange" @eventCurrentChange="eventCurrentChange"
          :total="total" :pageSize="searchParam.pageSize" :currentPage="searchParam.pageNum"></pagination>

          </div>
  </div>


</section>

</template>

<script>
import { mapState,mapMutations } from 'vuex'
import qs from 'qs'
import pagination from "@/components/common/pagination"
import orderSearch from '@/components/common/orderSearchSelf'
import {getOrderRowColum,osmethod,_getStorage,_saveStorage,_removeStorage } from '@/utils/utils'
  export default {
      name: 'orderlistself',
      components:{
        pagination,
        orderSearch,
      },
      data() {
          return {
            dialogVisible:false,
            dialogImageUrl:'',
            noGet:false,
            listType:'',
            tableLoading: false,
            widthSizeObj:'', // 宽度配置
            objProps:{
              dialogFormVisible:false,
              orderid:'',
              url:'/order/deliver', //发货路径
              showDelayInfo:0,
              delayImgPath:""
            },

          activeStatus: '-1',
          total:0,
         searchParam: {
          orderCode: '',
          brandId: '',
          addDateBegin:'',
          addDateEnd:'',
          pageNum:1,
          pageSize:10,

        },
        dataList:[],
        orderIndexArr:[],
        hoverOrderArr:[],
        rowIndex: '-1',
        TableTitleValue:[
          {labelName:"商品",widthVal:this.widthSize.productWidth},
          {labelName:"数量",widthVal:this.widthSize.numberWidth2},
          {labelName:"线上结算(元)",widthVal:this.widthSize.numberWidth3},
          {labelName:"线下结算(元)",widthVal:this.widthSize.numberWidth3},
          {labelName:"买家",widthVal:this.widthSize.receiverWidth},
          {labelName:"交易状态",widthVal:this.widthSize.numberWidth},
          {labelName:"商品备注",widthVal:this.widthSize.dealWidth},

        ],
        multipleSelection:[],
        orderIds:'',
        checkAll: false,
        isIndeterminate: false,

      };
      },
      mounted(){
       this.widthSizeObj = this.widthSize;//宽度配置
    },

    methods: {
      ...mapMutations("navBar",['getOrderTimeOutTip']),
      handleCheckAllChange(el,data){
        this.multipleSelection = []
        if(el){
          this.dataList.map((res)=>{
            res.isChecked =true
            if(res.isChecked){
              this.multipleSelection.push(res.orderId)
            }
          })

        }else{
          this.dataList.map((res)=>{
            res.isChecked =false
          })
        }
        if(this.multipleSelection.length>0){
          this.orderIds = this.multipleSelection.join(',')
        }else{
          this.orderIds=''
        }
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(el,item,index) {
           this.multipleSelection = []
           this.dataList.map((res)=>{
            if(res.isChecked){
              this.multipleSelection.push(res.orderId)
            }
          })
        this.$set(this.dataList,index,item)
     
        this.checkAll = this.dataList.length === this.multipleSelection.length;

        if(this.multipleSelection.length>0){
          this.orderIds = this.multipleSelection.join(',')
        }else{
          this.orderIds=''
        }
        
        this.isIndeterminate = this.multipleSelection.length>0 && this.multipleSelection.length < this.dataList.length
        
      },
      showImgFun(url){
          this.dialogVisible=true
          this.dialogImageUrl=url
      },
      backData(res){
          this.getOrderList();
      },
         eventSizeChange(val) {
          this.searchParam.pageSize = val;
          this.getOrderList();
        },
        eventCurrentChange(val) {
          this.searchParam.pageNum = val;
          this.getOrderList();
        },
        getOrderList() {
            let { brandId } = _getStorage('info');
            this.searchParam.brandId =brandId;
            var params = this.searchParam;
            this.$axios.get('/order/HomeList',{
              params
            }).then((res) => {
              this.tableLoading = false;
              if(res.data.code==200){
                 let list = res.data.data.list;
                 this.dataList = list;
                 this.total = ~~res.data.data.total;
                this.isAllRefund();
                this.orderIndexArr = getOrderRowColum(list);
              }else{
                // this.$message.error(res.data.message);
              }

            }).catch(()=>{
              this.tableLoading = false;
            })
        },
       
        //合并行
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {

          if(this.orderIndexArr.length>0){
            if (columnIndex === 4 || columnIndex === 5) {
              return osmethod(this.orderIndexArr,rowIndex)
            }
          }
        },

      //默认行的样式
      tableRowClassName({row,rowIndex}) {
         return 'hovered-row'
      },
      //所有明细都退款成功或已确认退款，隐藏确认订单和发货按钮。因为需要平台确认后才真正改变订单状态。
      isAllRefund(){
        const dataLen = this.dataList.length;
        const refundCount = [];
        const detailsLen = [];
        for(var i = 0; i<dataLen;i++){
          const deLen = this.dataList[i].details && this.dataList[i].details.length;
          this.dataList[i].allRefundStatus = true;
          let aa = this.dataList[i].details.length;

          detailsLen.push(aa);

          for(var j=0;j<deLen;j++){
            let re = this.dataList[i].details[j].refund;
            refundCount[i] = [];
            if(re && (re.status==3 || re.auditStatus==1)){
                  refundCount[i][j] = j;
            }
          }

        }
          for(let a = 0;a<refundCount.length;a++){
            for(let b =0;b<detailsLen.length; b++){
              if(a===b){
                if(refundCount[a].length === detailsLen[b]){
                  this.dataList[a].allRefundStatus=false
                }
              }
            }
          }
        // console.log('detailsLen--',detailsLen);
        // console.log('refundCount---',refundCount)
      },

     
      goOrderDetail(orderid,isAllrefund){
         var isAllrefund = !isAllrefund?1:0
        var orderid = orderid;
           this.$router.push({ path: '/order/frmOrderDetail', query:{
            orderid:orderid,
            isAllrefund:isAllrefund
          }})
      },
      goRefund(refundId){
          this.$router.push({path:'/order/refundProcessing',query:{refundId:refundId}})
        },
        
      goProdetail(skuId){
           if(skuId){
            this.$router.push({ path: '/goods/productdetails', query:{
              skuId:skuId,
            }})
           }
      },

    },
      activated() {
      if (!this.$route.meta.isBack) {
          this.listType = this.$route.params.type?this.$route.params.type:'-1';
          //首页跳进来的订单状态
          if(this.listType){
            this.activeStatus = this.listType+''
          }
          this.searchParam.pageNum = 1;
           this.getOrderList();
        }
        this.$route.meta.isBack = false;
      },
      beforeRouteEnter(to, from, next) {
          if ((from.path == "/order/frmOrderDetail") || (from.path =='/goods/productdetails') || (from.path == '/order/refundProcessing')) {
            to.meta.isBack = true;
          } else {
            to.meta.isBack = false;
          }
          next();
      },
    watch:{
          //监听相同路由下参数变化的时候，从而实现异步刷新
          '$route'(to,from) {

                this.listType = this.$route.params.type?this.$route.params.type:'-1';

                if(from.path.indexOf('/order/orderlistself') != -1 && to.path.indexOf('/order/orderlistself') != -1){
                    // this.activeStatus = this.listType+'';
                    this.searchParam.pageNum =1
                    this.getOrderList();
                }
                if(from.path == '/order/frmOrderDetail' || from.path =='/goods/productdetails' || from.path == '/order/refundProcessing'){
                  if(this.activeStatus != this.listType){
                     this.activeStatus = this.listType+'';
                      this.searchParam.pageNum =1
                    }
                  this.getOrderList();
                }
              
          }
     },
  }

</script>

<style lang="scss" scoped="scoped">
@import '@/assets/styles/order.scss';
.orderRemarkbox{
  padding: 10px;
  border:1px solid #EBEEF5;
  border-top: 0;
  display: flex;
  line-height: 22px;
  align-items: top;
  .s1{
    min-width: 74px;
  }
  
}
.tabletitbox{
  position: relative;
  .allChecked{
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
</style>

