<template>
<section class="main0">

	<div class="p_all_20">
        <order-search
        ref="searchnav"
    :search-param="searchParam"
    :exportmain-url="'/api/ulineorder/exportMain'"
    :brandType="1"
    :source="'brand'"
    @backData="backData"></order-search>
       <el-tabs  @tab-click="handleClick" v-model="activeStatus">
            <el-tab-pane :label="item.labelText" :name="item.status" v-for="(item,index) in tabList" :key="index">
               <el-table style="width: 100%" 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-tab-pane>
        </el-tabs>
        <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"  @mouseenter="mouseenter(index,item.flag)" @mouseleave="mouseleave(index,item.flag)">

                  <div class="orderOption">
                     <div class="left">
                        <span class="spanMright">订单编号：{{item.orderCode}}</span>
                        <span class="spanMright">下单时间：{{item.addDate}}</span>
                       
                     </div>
                     <div class="right">
                  <el-tooltip content="商家备注" placement="right" effect="light">
                  <i
                  @click="showRemark(item.orderId,item.supplierRemark)" 
                  size="medium" 
                  class="el-icon-tickets" 
                  :style="{'color':item.supplierRemark?'#409EFF':'','line-height':'28px','cursor': 'pointer','font-size':'18px'}"></i>
        
                  </el-tooltip>
                </div>
                     <!-- <div class="right">
                             <el-tooltip placement="top">
                        <div slot="content" class="tooptipClass">
                              <div>{{item.flagRemark}}</div>
                        </div>
                        <span v-show="item.flag" :class="{'qiziClass':true,'iconfont':true,
                        'icon-qizi':item.flag == 0,
                        'icon-qizi-red-copy':item.flag == 1,
                        'icon-qizi-yellow-copy':item.flag == 2,
                        'icon-qizi-green-copy':item.flag == 3,
                        'icon-qizi-blue-copy':item.flag == 4,
                        'icon-qizi-violet-copy':item.flag == 5,
                        'icon-qizi':item.flag == 100,
                        }" @click="goOrderDetail(item.orderId)"></span>
                      </el-tooltip>
                     </div> -->
                  </div>

                  <el-table
                      tooltip-effect="dark"
                      style="width: 100%"
                      :data="dataTableTr[index]"
                      :show-header="false"
                      border
                      >
                          <el-table-column
                            align="center"
                            label="采购单"
                            :width="widthSizeObj.purchaseWidth"
                            >
                            <template slot-scope="scope">
                              <div class="goodsInfoImg" v-if="scope.row.purchasePics.length>0" @click="showImgs(scope.row.purchasePics)">
                                <!-- <span class="spanimg" v-for="(item,i) in scope.row.purchasePics" :key="i">
                                   <image-alert :image="item" height="50"></image-alert>
                                </span> -->
                                <img  :src="scope.row.purchasePics[0]" alt="" height="50">
                                <div v-if="scope.row.purchasePics.length>1">共{{scope.row.purchasePics.length}}张</div>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            label="收银小票"
                            :width="widthSizeObj.collectWidth"
                            >
                            <template slot-scope="scope">
                              <div class="goodsInfoImg" v-if="scope.row.receiptPics.length>0" @click="showImgs(scope.row.receiptPics)">
                                <!-- <span class="spanimg" v-for="(item,i) in scope.row.receiptPics" :key="i">
                                   <image-alert :image="item" height="50"></image-alert>
                                </span> -->
                                <img  :src="scope.row.receiptPics[0]" alt="" height="50">
                                <div v-if="scope.row.receiptPics.length>1">共{{scope.row.receiptPics.length}}张</div>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                          prop="sGuide"
                        label="导购"
                        align="center"
                        :width="widthSizeObj.guideWidth">
                      </el-table-column>
                      <el-table-column
                          prop="userName"
                        label="买家"
                        align="center"
                        :width="widthSizeObj.receiverWidth">
                      </el-table-column>
                          <el-table-column
                          prop="purchaseMoney"
                        label="金额(元)"
                        align="center"
                        :width="widthSizeObj.numberWidth">
                      </el-table-column>
                      <el-table-column
                        label="抵扣(元)"
                        align="center"
                        :width="119">
                        <template slot-scope="scope">
                          <div v-if="scope.row.purchaseMoney">采购金抵扣额:{{scope.row.purchaseMoney}}</div>
                          <div v-if="scope.row.advanceMoney">预付款抵扣额:{{scope.row.advanceMoney}}</div>
                          <span v-if="!scope.row.purchaseMoney && !scope.row.advanceMoney">0</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="交易状态"
                        align="center"
                        :width="130">
                        <template slot-scope="scope">
                          <div :style="{color:scope.row.orderStatusDesc=='已完成'?'#12b34e':''}">{{scope.row.orderStatusDesc}}</div>
                          <div class="m6"><span class="spanMright blueColor" @click="goOrderDetail(scope.row.orderId)">详情</span></div>
                           <!-- v-if="item.settleStatus == 1 && item.status == 0" -->
                          <el-button size="mini" type="primary" v-if="item.canConfirm"
                          @click="confirmOrder(item.orderId)" class="confirmBtn">确认订单</el-button>
                          <!-- 确认发货 v-if="item.settleStatus==1 && item.status == 1" -->
                          <el-button size="mini" type="primary"
                          @click="showSendDialog" :orderid="item.orderId" v-if="item.canDeliver">确认发货</el-button>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="realPaidMoney"
                        label="实付款(元)"
                        align="center"
                        :width="widthSizeObj.numberWidth"
                        >
                      </el-table-column>



                </el-table>
                </div>
                </div>
              <div class="pagination">
                <pagination @eventSizeChange="eventSizeChange" @eventCurrentChange="eventCurrentChange"
                :total="total" :pageSize="searchParam.pageSize" :currentPage="searchParam.pageNum"></pagination>
              </div>

              <image-preview :imgsList='imgsList' :dialogVisible='imgsVisible' @closeBox='closeBox'></image-preview>
  </div>

  <orderSendDialog :objProps="objProps"  @resData="cancelForm"></orderSendDialog>
  <orderRemark :objProps="objPropsRemark"  @resData="cancelFormRemark"></orderRemark>

</section>

</template>

<script>
import qs from 'qs'
import orderSendDialog from '@/components/common/orderSendDialog.vue'
import pagination from "@/components/common/pagination"
import imagePreview from "@/components/common/imagePreview"
import orderSearch from '@/components/common/orderSearch'
import orderRemark from '@/components/common/orderRemark'
import {getOrderRowColum,osmethod,_getStorage,_saveStorage,_removeStorage } from '@/utils/utils'
  export default {
     name: 'orderlistbrand',
      data() {
          return {
            imgsList:[],
            imgsVisible:false,
            listType:'',
            tableLoading:true,
            widthSizeObj:'',
            objProps:{
              dialogFormVisible:false,
              orderid:'',
              url:'/ulineorder/deliver',
            },
            objPropsRemark:{
              dialogFormVisible:false,
              orderid:'',
              supplierRemark:'',
              url:'/ulineorder/supplierremark', //商家备注
            },
          activeStatus: '-1',
          total:0,
          multipleSelection: [],
         searchParam: {
          orderCode: '',
          brandId: '',
          actType: '',
          invoiceNo: '',
          receiver:'',
          deliveryDateStatus:'',
          addDateBegin:'',
          addDateEnd:'',
          completionDateBegin:'',
          completionDateEnd:'',
          pageNum:1,
          pageSize:10,
          status:'-1',
          logisticsName:''
        },
         tabList:[{
                    labelText:'全部订单',
                    name:'order_all',
                    status:'-1',
                  },
                  {
                    labelText:'待确认',
                    name:'order_waitConfirm',
                    status:'0',
                  },{
                    labelText:'待发货',
                    name:'order_waitSend',
                    status:'1',
                  },{
                    labelText:'已发货',
                    name:'order_haveSend',
                    status:'2',
                  },{
                    labelText:'交易成功',
                    name:'order_done',
                    status:'3',
                  },{
                    labelText:'订单关闭',
                    name:'order_close',
                    status:'4',
                  },


                  ],
        dataList:[],
        TableTitleValue:[
          {labelName:"采购单",widthVal:this.widthSize.purchaseWidth},
          {labelName:"收银小票",widthVal:this.widthSize.collectWidth},
          {labelName:"导购",widthVal:this.widthSize.guideWidth},
          {labelName:"买家",widthVal:this.widthSize.receiverWidth},
          {labelName:"金额(元)",widthVal:this.widthSize.numberWidth},
          {labelName:"抵扣(元)",widthVal:119},
          {labelName:"交易状态",widthVal:130},
          {labelName:"实付款(元)",widthVal:this.widthSize.numberWidth},

        ]
      };
      },
      components:{
        orderSendDialog,
        pagination,
        imagePreview,
        orderSearch,
        orderRemark
      },
      computed:{

      },
      mounted(){
        this.widthSizeObj = this.widthSize;
        // this.activeStatus = this.$route.query.activeStatus || this.$route.query.activeStatus == 0?this.$route.query.activeStatus +'':this.activeStatus;

        //订单状态
       this.listType = this.$route.params.type?this.$route.params.type:'-1';
       if(this.listType){
         this.activeStatus = this.listType+''
       }
    },
    methods: {
      closeBox(status){
        this.imgsVisible = false;
      },
      showImgs(imgList){
        this.imgsList = [];
        imgList.forEach(item => {
          var img={url:item};
          this.imgsList.push(img)
        });
        this.imgsVisible = true;
      },
      backData(res){
          this.getOrderList();
      },
         eventSizeChange(val) {
          this.searchParam.pageSize = val;
          this.getOrderList();
        },
        eventCurrentChange(val) {
          this.searchParam.pageNum = val;
          this.getOrderList();
        },
        getBrands(){
          this.$axios.get(this.HOST +'/v1/select/brand',{
              params:{
                type:1
              }
            }).then((res) => {
              if(res.data.code==200){
                 this.brandsList = res.data.data;
              }else{
                this.$message.error(res.data.message);
              }
            }).catch(()=>{})
        },


        getOrderList() {
            let { brandId } = _getStorage('info');
            this.searchParam.brandId =brandId;
            var params = this.searchParam;
            params.status = ~~this.activeStatus;

            this.$axios.get('/ulineorder/list',{
              params
            }).then((res) => {
              if(res.data.code==200){
                this.tableLoading = false;
                 let dataArr = res.data.data.list;
                 this.total = ~~res.data.data.total;
                 this.dataList = res.data.data.list;
                 let tArr = this.arrTrans(dataArr);
                 this.dataTableTr= tArr;
              }else{
                this.$message.error(res.data.message)
              }

            }).catch(()=>{
              this.tableLoading =false;
            })
        },
         arrTrans(arr) {
            const tableArr = [];
            arr.forEach((item, index) => {
              let idx = index;
              if (!tableArr[idx]) {
                tableArr[idx] = [];
              }
              tableArr[idx].push(item);
            });
            return tableArr;
          },
        // getArr(dataArr){
        //   var arr2 = new Array();
        //   var i,j;
        //   var arr = [];
        //   for(i=0;i<dataArr.length;i++){
        //     arr.push(dataArr[i]);
        //     let currentArr = arr.slice(i,i+1);
        //     arr2[i] = dataArr[i];
        //     arr2[i].details = currentArr;

        //   }
        //   return arr2
        // },
        //订单状态数量统计
        getOrderStats(){
          this.$axios.get(this.HOST +'/etao/offlineorder/stats').then((res) => {
              if(res.data.code==200){
                let orderStats = res.data.data;
                let tabLists = [];
                tabLists = [{
                    labelText:'全部订单',
                    name:'order_all',
                    status:'-1',
                  },{
                    labelText:'待确认' +"("+ orderStats.waitConfirm+ ")",
                    name:'order_waitConfirm0',
                    status:'0',
                  },{
                    labelText:'待发货' +"("+ orderStats.waitDeliver+ ")",
                    name:'order_waitConfirm',
                    status:'1',
                  },{
                    labelText:'已发货' +"("+ orderStats.delivered+ ")",
                    name:'order_waitSend',
                    status:'2',
                  },{
                    labelText:'交易成功'+"("+ orderStats.finish+ ")",
                    name:'order_haveSend',
                    status:'3',
                  },{
                    labelText:'订单关闭'+"("+ orderStats.cancel+ ")",
                    name:'order_done',
                    status:'4',
                  }];
                this.tabList = tabLists;
              }else{
                this.$message.error(res.data.message);
              }

            }).catch(()=>{})
        },



      handleClick(tab, event) {
        this.activeStatus = tab.name;
        // this.searchParam = {},
        this.searchParam = {
          orderCode: '',
          brandId: '',
          actType: '',
          invoiceNo: '',
          receiver:'',
          deliveryDateStatus:'',
          addDateBegin:'',
          addDateEnd:'',
          completionDateBegin:'',
          completionDateEnd:'',
          pageNum:1,
          pageSize:10,
          status:'-1',
          logisticsName:''
        },
        this.searchParam.pageNum = 1;
        this.searchParam.pageSize = 10;
        this.searchParam.status = parseInt(tab.name);
        this.$refs.searchnav.addDateVal ='';
        this.$refs.searchnav.cptDateVal ='';
        // this.getOrderList();
          if(this.activeStatus == '-1'){
            this.$router.push({ path: '/order/orderlistbrand'})
        }else{
            this.$router.push({ path: '/order/orderlistbrand/' + this.activeStatus,})
        }
      },

      goOrderDetail(orderid){
        var orderid = orderid;
           this.$router.push({ path: '/order/frmOrderDetailBrand', query:{
            orderid:orderid,
          }})
      },
      confirmOrder(orderid){
        let data = {"orderId":orderid};
        // let dataParam = qs.stringify(data);
        this.$confirm('确认订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/ulineorder/confirm',data).then((res)=>{
            if(res.data.code == 200){
              this.$message.success("已确认订单");
                this.getOrderList();
                // this.getOrderStats();
            }else{
               this.$message.error(res.data.message);
            }
          }).catch((res)=>{});

        }).catch(() => {
        });
      },
      showSendDialog(e){
         let orderid = e.currentTarget.getAttribute("orderid");
         this.objProps.orderid = orderid
         this.objProps.dialogFormVisible = true;
      },
      cancelForm(res){
          this.objProps.dialogFormVisible = res.state;
          this.getOrderList();
        },
              // 备注
      showRemark(orderid,remark){
          this.objPropsRemark.orderid = orderid;
          this.objPropsRemark.supplierRemark = remark 
          this.objPropsRemark.dialogFormVisible = true;
      },
      cancelFormRemark(res){
        this.objPropsRemark.dialogFormVisible = res.state;
        this.getOrderList();
      },
                            //鼠标上移
        mouseenter(index,flag){
          this.dataList[index]["flag"] == 0?this.dataList[index]["flag"] = 100 :''
        },
        mouseleave(index,flag){
          this.dataList[index]["flag"] == 100?this.dataList[index]["flag"] = 0 :''
        },
    },
     activated() {
      if (!this.$route.meta.isBack) {
          this.searchParam.pageNum = 1;
           this.getOrderList();
        }
        this.$route.meta.isBack = false;
      },
      beforeRouteEnter(to, from, next) {
          if (from.path == "/order/frmOrderDetailBrand") {
            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/orderlistbrand') != -1 && to.path.indexOf('/order/orderlistbrand') != -1){
                this.activeStatus = this.listType+'';
                this.searchParam.pageNum =1
                this.getOrderList();
              }
              if(from.path == '/order/frmOrderDetailBrand'){
                if(this.activeStatus != this.listType){
                      this.activeStatus = this.listType+'';
                      this.searchParam.pageNum =1
                    }
                this.getOrderList();
              }
          }
     },
  }

</script>

<style lang="scss" scoped>
@import '@/assets/styles/order.scss';
.goodsInfoImg{
  cursor: pointer;
}
.goodsInfoImg .spanimg{display: inline-block;margin: 0 6px;}
.main0{
  width: 1010px;
}
</style>
