<template>
  <div class="history-order" id="orderHistory">
    <div class="order-left">
      <el-scrollbar class="search-content">
        <el-collapse v-model="activeNames" class="my-collapse">
          <el-collapse-item title="基本信息" name="1">
            <input-select :options="myOptions" @input="parameChange" ref="searchCom01" />
            <!-- <input-select :options="outLineOptions" @input="parameChangeBase($event,'idType','idValue')" ref="searchCom02" /> -->
          </el-collapse-item>
          <order-radio title="买家留言" keyName="buyerMessageFilter" ref="searchCom05" :options="buyerMessageOptions" noLimit @radioChange="onChange($event,'buyerMessageFilter')">
            <template v-slot:buyerMessage>
              <el-input style="width: 140px;" v-model="value.buyerMessageContent" size="mini" placeholder="留言内容"></el-input>
            </template>
          </order-radio>
          <order-radio title="卖家备注" keyName="remarkFilter" ref="searchCom06" :options="remarkFilterOptions" noLimit @radioChange="onChange($event,'remarkFilter')">
            <template v-slot:remarkFilter>
              <el-input style="width: 140px;" v-model="value.remarkContent" size="mini" placeholder="备注内容"></el-input>
            </template>
          </order-radio>
          <order-radio title="线下备注" ref="searchCom10" keyName="noteFilter" :options="noteFilterOptions" noLimit @radioChange="onChange($event,'noteFilter')">
            <template v-slot:noteContent>
              <el-input style="width: 140px;" v-model="value.noteContent" size="mini" placeholder="备注内容"></el-input>
            </template>
          </order-radio>
          <!-- <order-radio title="订单来源" keyName="sourceFrom" ref="searchCom11" :options="sourceFromOptions" noLimit @radioChange="onChange($event,'sourceFrom')" /> -->
          <!-- <order-checkbox title="订单类型" keyName="type" ref="searchCom12" :options="typeOption" noLimit @checkboxChange="onChange($event,'type')" /> -->
          <!-- <order-checkbox title="省份" ref="searchCom14" keyName="receiverProvinceCode" :options="provinceOptions" @checkboxChange="onChange($event,'receiverProvinceCodeList')" /> -->
        </el-collapse>
      </el-scrollbar>
      <div class="searchHandle">
        <el-button size="mini" @click="resert">重置</el-button>
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="order-right">
      <order-table :data="data" ref="orderTable" class="order-table" @detail="detail"/>
      <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>
    <detail-order ref="detailOrder" /> 
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import filterInput from '../order/components/filterInput.vue'
import OrderCheckbox from "../order/components/orderCheckbox.vue";
import OrderRadio from '../order/components/orderRadio.vue'
import orderTable from  './components/orderTable.vue'
import InputSelect from "../order/components/inputSelect.vue";
import DetailOrder from './components/detailOrder.vue'
import {getProvince } from '@/api/omsOrder'
import { query } from '@/api/omsOrderHistory'
@Component({components:{filterInput,OrderCheckbox,OrderRadio,orderTable,DetailOrder,InputSelect}})
export default class OrderHistory extends Vue {
  value:any={}
  activeNames:Array<any>=['1','buyerMessageFilter','remarkFilter','noteFilter','sourceFrom','receiverProvinceCode']
  page:any={
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  load = false;
  data:Array<any>=[]
  myOptions=[{
    label:'内部订单号',
    value:'orderId',
    format:/[^0-9,]*/g
  }]
  outLineOptions=[{
    label:'线上订单号',
    value:'sourceId'
  },{
    label:'支付单号',
    value:'outerPayId'
  }]
   //买家留言
   buyerMessageOptions=[{
    label:'无留言',
    value:1
  },{
    label:'未处理的留言',
    value:2
  },{
    slotName:'buyerMessage',
    label:'有留言',
    value:3
  }]
  //卖家备注
  remarkFilterOptions=[{
    label:'无备注',
    value:1,
  },{
    label:'未处理的备注',
    value:2,
  },{
    label:'有备注',
    slotName:'remarkFilter',
    value:3,
  }]
  noteFilterOptions:Array<any>=[{
    label:'无备注',
    value:1,
  },{
    label:'有备注',
    slotName:'noteContent',
    value:2,
  }]

  //订单来源
  sourceFromOptions:Array<any>=[{
    label:'手工下单',
    value:'ERP'
  },{
    label:'复制',
    value:'COPY'
  },{
    label:'合并',
    value:'MERGE'
  },{
    label:'拆分；拆分还原',
    value:'SPLIT'
  },{
    label:'手机',
    value:'MOBILE'
  },{
    label:'导入',
    value:'IMPORT'
  },{
    label:'供销推送',
    value:'drp-s'
  },{
    label:'快手；微商城',
    value:'KWAISHOP'
  },{
    label:'拼多多',
    value:'PINDUODUO'
  },{
    label:'头条放心购',
    value:'TOUTIAOFXG'
  },{
    label:'聚水潭',
    value:'JUSHUITAN'
  }]
   //订单类型
  typeOption:Array<any>=[{
    label:'普通订单',
    value:'Common'
  },{
    label:'补发订单',
    value:'Reissue'
  },{
    label:'分销Plus',
    value:'DistributionPlus'
  },{
    label:'供销Plus',
    value:'SupplyPlus'
  },{
    label:'换货订单',
    value:'Exchange'
  }]
  provinceOptions:Array<any>=[]

  mounted(){
    this.getProvince();
    this.getList();
  }
  //订单详情
  detail(row:any){
    let data = (this as any).$lodash.cloneDeep(row);
    (this.$refs.detailOrder as any).setShow(true);
    (this.$refs.detailOrder as any).setDetail(data); 
  }

  handleSizeChange(v:number){
    this.page.pageSize = v;
    this.getList();
  }
  handleCurrentChange(v:number){
    this.page.pageNo = v;
    this.getList();
  }
  getProvince(){
    this.provinceOptions = [];
    getProvince({
      pid:'0'
    }).then((res:any) => {
      if(res.data){
        for(const item of res.data){
          this.provinceOptions.push({
            label:item.extName,
            value:item.id
          })
        }
      }
    })
  }

  parameChange(parames:any){
    for(const key in parames){
      if(parames[key]){
        if(this.value[key]){
          this.value[key] = parames[key].split(',')
        }else{
          Vue.set(this.value, key, parames[key].split(','));
        }
      }else{
        Vue.set(this.value, key, parames[key]);
      }
    }
  }
  parameChangeBase(parames:any,n1:string,n2:string){
    for(const key in parames){
      if(parames[key]){
        this.value[n1] = key;
        this.value[n2] = parames[key].split(',');
      }else{
        this.value[n1] = '';
        this.value[n2] = [];
      }
    }
  }
  //组件返回事件
  onChange(v:any,code:string){
    this.value[code] = v;
  }
  //重置搜索数据
  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={};

    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;
    })
  }
}
</script>

<style lang="scss" scoped>
.history-order{
  width: 100%;
  height: 100%;
  display: flex;
  overflow: 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;
    }
  }
  .order-right{
    width: calc(100% - 260px);
    box-sizing: border-box;
    padding: 8px 8px 0 8px;
    height: 100%;
    .order-table{
      width: 100%;
      height: calc(100% - 48px);
    }
    .page{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 8px;
      box-sizing: border-box;
    }
  }
}
</style>

<style lang="scss">
.order-left{
  .el-collapse-item__content{
    padding-bottom: 0;
  }
  .el-collapse-item__header{
    font-weight: 700 !important;
  }
}
.search-content{
  height: calc(100% - 44px);
  div.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-scrollbar__bar {
    right: 0px;
  }
}
</style>