<template>
<section class="main">

	<div class="p_all_20">
    <order-search 
    ref="searchnav"
    :search-param="searchParam" 
    :exportmain-url="'/api/scanorder/exportmain'" 
    :brandType="1"
    :source="'saomafu'"
    @backData="backData"></order-search>
<!-- :source="'saomafu'" -->
       <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>
<!-- @mouseenter="mouseenter(index,item.flag)" @mouseleave="mouseleave(index,item.flag)" -->
            <div class="divLine" v-for="(item,index) in dataList" :key="index" v-show="dataList.length">

              <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.productWidth"
                        >
                        <template slot-scope="scope">
                          <!-- <div class="goodsInfoImg">
                            <span class="spanimg" v-for="(item,i) in scope.row.imgs" :key="i">
                              <image-alert :image="item" height="50"></image-alert>
                            </span>
                          </div> -->
                          <div class="goodsInfoImg" v-if="scope.row.imgs.length>0" @click="showImgs(scope.row.imgs)">
                            <img  :src="scope.row.imgs[0]" alt="" height="50">
                            <div v-if="scope.row.imgs.length>1">共{{scope.row.imgs.length}}张</div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                      prop="orderMoney"
                    label="结算单价(元)"
                    align="center"
                    :width="widthSizeObj.numberWidth">
                  </el-table-column>
                  <el-table-column
                    prop="deliverQty"
                    label="数量"
                    align="center"
                    :width="widthSizeObj.numberWidth">
                  </el-table-column>
                    <el-table-column
                    label="买家"
                    align="center"
                    :width="widthSizeObj.receiverWidth"
                    >
                    <template slot-scope="scope">
                      <span>{{item.userInfo?item.userInfo.userName:''}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="交易状态"
                    align="center"
                    :width="widthSizeObj.dealWidth"
                    >
                    <template slot-scope="scope">
                      <div>{{scope.row.orderStatusDesc}}</div>
                      <div class="m6"><span class="spanMright blueColor" 
                      @click="goOrderDetail(scope.row.orderId)">详情</span></div>
                      <el-button size="mini" type="primary" v-if="item.canConfirm"
                      @click="confirmOrder(item.orderId)" >确认订单</el-button>
           
                      <el-button size="mini" type="success"
                      @click="showSendDialog" :orderid="item.orderId" v-if="item.canDeliver">确认发货</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="orderMoney"
                    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 imageAlert from "@/components/common/imageAlert"
import orderSendDialog from '@/components/common/orderSendDialog.vue'
import pagination from "@/components/common/pagination"
import orderSearch from '@/components/common/orderSearch'
import orderRemark from '@/components/common/orderRemark'
import imagePreview from "@/components/common/imagePreview"
import {getOrderRowColum,osmethod} from '@/utils/utils'
  export default {
      name: 'saomafu',
      data() {
          return {
            imgsList:[],
            imgsVisible:false,
            tableLoading:true,
            widthSizeObj:'',
            objProps:{
              dialogFormVisible:false,
              orderid:'',
              url:'/scanorder/deliver',
            },
            objPropsRemark:{
              dialogFormVisible:false,
              orderid:'',
              supplierRemark:'',
              url:'/scanorder/supplierremark', //商家备注
            },
             breadcrumb:'',
            brandsList:[],
          activeStatus: '-1',
          total:0,
          multipleSelection: [],
        searchParam: {
          orderCode: '',
          brandId: '',
          actType: '',
          invoiceNo: '',
          receiver:'',
          deliveryDateStatus:'',
          addDateBegin:'',
          addDateEnd:'',
          completionDateBegin:'',
          completionDateEnd:'',
          pageNum:1,
          pageSize:10,
          status:'-1'
        },
        tabList:[
          {
                    labelText:'全部订单',
                    name:'order_all',
                    status:'-1',
                  },{
                    labelText:'待确认',
                    name:'order_waitConfirm',
                    status:'0',
                  },{
                    labelText:'待发货',
                    name:'order_waitSend',
                    status:'1',
                  },{
                    labelText:'已发货',
                    name:'order_haveSend00',
                    status:'2',
                  },{
                    labelText:'交易成功',
                    name:'order_haveSend',
                    status:'3',
                  },{
                    labelText:'订单关闭',
                    name:'order_done',
                    status:'4',
                  }
        ],
        dataList:[],
        dataTableTr:[],
        TableTitleValue:[
          {labelName:"商品",widthVal:this.widthSize.productWidth},
          {labelName:"单价(元)",widthVal:this.widthSize.numberWidth},
          {labelName:"数量",widthVal:this.widthSize.numberWidth},
          {labelName:"买家",widthVal:this.widthSize.receiverWidth},
          {labelName:"交易状态",widthVal:this.widthSize.dealWidth},
          {labelName:"实付款(元)",widthVal:this.widthSize.numberWidth},
        
        ]
      };
      },
      components:{
        orderSendDialog,
        pagination,
        imagePreview,
        // comBreadcrumb,
        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.breadcrumb = this.$route.meta.breadcrumb;
    },
    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();
        },

        getOrderList() {
            var params = this.searchParam;
            params.status = ~~this.activeStatus;

            this.$axios.get('/scanorder/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;
          },

        //订单状态数量统计
        getOrderStats(){
          this.$axios.get(this.HOST +'/etao/scanorder/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_waitConfirm',
                    status:'0',
                  },{
                    labelText:'待发货' +"("+ orderStats.waitDeliver+ ")",
                    name:'order_waitSend',
                    status:'1',
                  },{
                    labelText:'已发货' +"("+ orderStats.delivered+ ")",
                    name:'order_haveSend00',
                    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'
        },
        this.searchParam.pageNum = 1;
        this.searchParam.pageSize = 10;
        this.searchParam.status = parseInt(tab.name);
        this.$refs.searchnav.addDateVal ='';
        this.$refs.searchnav.cptDateVal ='';
       this.getOrderList();

      },
      goOrderDetail(orderid){
        var orderid = orderid;
           this.$router.push({ path: '/order/frdsaomafu', query:{
            orderid:orderid,
          }})
      },
      confirmOrder(orderid){
        let data = {"orderId":orderid};
        // let dataParam = qs.stringify(data);
        this.$confirm('确认订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/scanorder/confirm',data).then((res)=>{
            if(res.data.code == 200){
              this.$message.success(res.data.message);
                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();

        },
                //鼠标上移
        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 :''
        },
              // 备注
      showRemark(orderid,remark){
          this.objPropsRemark.orderid = orderid;
          this.objPropsRemark.supplierRemark = remark 
          this.objPropsRemark.dialogFormVisible = true;
      },
      cancelFormRemark(res){
        this.objPropsRemark.dialogFormVisible = res.state;
        this.getOrderList();
      },
    },
     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/frdsaomafu") {
            to.meta.isBack = true;
          } else {
            to.meta.isBack = false;
          }
          next();
      },
    watch:{
          //监听相同路由下参数变化的时候，从而实现异步刷新
          '$route'(to,from) {
              if(this.$route.query.activeStatus){
                  this.activeStatus = this.$route.query.activeStatus + '';
                  this.getOrderList();
              } 
                if(from.path == '/order/frdsaomafu'){
                this.getOrderList();
              }
          }
     },
  }

</script>

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