<template>
  <div class="order" v-loading="load">
    <div class="order-right">
      <div class="tool">
        <el-radio-group v-model="radio" @input="typeChange">
          <el-radio v-for="(item,index) of sellTypeOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
        <el-button size="small" circle icon="el-icon-refresh" type="primary" @click="getList"></el-button>
      </div>
      <div class="table">
        <order-table :data="data" ref="orderTable" class="order-table" />
        <div class="page">
          <el-pagination v-if="page.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :page-size="page.pageSize"
            :layout="'total, sizes, prev, pager, next, jumper'" :total="page.total"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import OrderTool from "./components/orderTool.vue";
import OrderTable from "./components/orderTable.vue";
import { query,getProvince,smt,unSmt,purchaseQty,unCancel,resetQuestion,archive,merge } from '@/api/omsOrder'
import { queryAll } from '@/api/question'
@Component({components:{OrderTool,OrderTable}})
export default class Account extends Vue {
  activeNames:Array<any>=['1','statusList']
  radio='2'
  data:Array<any> = []
  load = false;
  showQues=false;
  isContainLabel=true;
  page:any={
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  sellTypeOptions:Array<any>=[
  //   {
  //   value: '1',
  //   label: '自营'
  // }, 
  {
    value: '2',
    label: '代发'
  }, {
    value: '3',
    label: '代销'
  }, {
    value: '4',
    label: '经销'
  }, {
    value: '5',
    label: '线下'
  }]
  questData:Array<any>=[]
  value:any={
    // sourceId:'',  //线上订单号
    // shopBuyerId:'', //买家昵称
    // buyerId:'', //买家ID
    // logisticsId:'', //快递单号
    // logisticsCompany:'', //快递公司
    // internationalLogisticsId:'', //国际物流单号
    // isSubmitte:'', //数据是否已提交
    // drpCoIdFrom:'', //分销商编号
    // drpCoIdTo:'', //供销商编号
    // sourceFrom:'', //订单来源
    // dateType:1,//时间类型
    // deliveryRemainingMin:0, //订单剩余发货时间(小时)-小于等于
    // deliveryRemainingMax:null, //订单剩余发货时间(小时)-大于等于
    // includeSkuType:1, //包含编码类型
    // type:'', //订单类型
    // status:'' , //订单状态
    // excludeSkuType:1, //排除编码类型
  }
  

  mounted(){
    this.getList();
  }
  typeChange(){
    this.page.pageNo = 1;
    this.getList();
  }
  //重置搜索数据
  clearSearchValue(){
    this.value={};
    for(const key in this.$refs){
      if(key.indexOf('searchCom') >= 0 && (this.$refs[key] as any).clear){
        (this.$refs[key] as any).clear()
      }
    }
    this.value.dateType = 1;
    this.value.includeSkuType = 1;
  }
  resert(){
    this.clearSearchValue();
    this.page.pageNo = 1;
    this.getList();
  }
  //搜索
  search(){
    this.page.pageNo = 1;
    this.getList();
  }
  //获取订单列表数据
  getList(){
    let data:any = (this as any).$lodash.cloneDeep(this.value);
    let params:any={};
    data.sellType = this.radio;
    data.businessType = 'B2B'
    params.pageNo = this.page.pageNo;
    params.pageSize = this.page.pageSize;
    this.load = true;
    query(params,data).then((res:any) => {
      this.data = res.data.records;
      this.page.pageNo = res.data.current;
      this.page.total = res.data.total;
      this.load = false;
      this.$forceUpdate();
    }).catch((err:any) => {
      this.load = false;
    })
  }
  //订单操作成功刷新页面
  handleSuccess(){
    this.page.pageNo = 1;
    this.clearSearchValue();
    this.getList();
  }

  handleSizeChange(v:number){
    this.page.pageSize = v;
    this.getList();
  }
  handleCurrentChange(v:number){
    this.page.pageNo = v;
    this.getList();
  }

}
</script>

<style lang="scss" scoped>
.order{
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: hidden;
  .order-left{
    width: 260px;
    height: 100%;
    flex-shrink: 0;
    background-color: #f0f0f0;
    border-right: solid 1px #CCC;
    box-sizing: border-box;
    padding: 4px 4px 0;
    position: relative;
    .my-collapse{
      padding: 0 4px;
      background: #FFF;
    }

    .searchHandle{
      display: flex;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 8px;
      background-color: #f0f0f0;
    }
    .box01{
      width: 100%;
      padding-bottom: 8px;
    }
  }
  .filter-box{
    width: calc(100% - 8px);
    background-color: #FFF;
    box-sizing: border-box;
    padding: 8px;
    border:solid 1px #EEE;
    
    .filter-row:last-child{
      padding: 0;
    }
  }
  .order-right{
    // width: calc(100% - 260px);
    width: 100%;
    box-sizing: border-box;
    padding-left: 8px;
    height: 100%;
    min-width: 900px;
    overflow-x: auto;
    .tool{
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 16px;
    }
    .table{
      width: 100%;
      height: calc(100% - 40px);
      .order-table{
        width: 100%;
        height: calc(100% - 48px);
      }
      .page{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 8px;
        box-sizing: border-box;
      }
    }
  }
  .el-icon-info{
    font-size: 16px;
    margin-left: 4px;
  }
}
// .order-label{
//   font-size: 12px;
// }
.orderSelect{
  width: 100%;
  margin-bottom: 4px;
}
.order-time{
  width: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}
.ques-box{
  .questtion-top{
    height: 30px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0 16px;
    background-color: #EEE;
    cursor: pointer;
    .quest-title{
      height: 30px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    .el-icon-setting{
      padding-right: 8px;
      color: #2d99f7;
      margin-left: 4px;
    }
    i{
      font-size: 16px;
      cursor: pointer;
    }
  }
  .ques-list{
    overflow: hidden;
    padding-left: 16px;
  }
}
</style>

<style lang="scss">
.order-left{
  .el-collapse-item__content{
    padding-bottom: 0;
  }
  .el-collapse-item__header{
    font-weight: 700 !important;
  }
}
.deliveryHours-input{
  width: 80px; 
  flex-shrink: 0; 
  padding: 0;
  .el-input__inner{
    padding: 0 !important;
    text-align: center;
  }
}
.search-content{
  height: calc(100% - 44px);
  div.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-scrollbar__bar {
    right: 0px;
  }
}
.labels-width-btn{
  margin-bottom: 8px;
  .el-input-group__append{
    background-color: #fff !important;
    width: 30px !important;
    padding: 0 10px;
    .el-icon-more{
      font-size: 16px;
    }
  }  
}
</style>