<template>
  <div class="order">
    <div class="order-left">
      <el-collapse v-model="activeNames" class="my-collapse">
        <el-collapse-item title="基本信息" name="1">
          <filter-input title="线上订单号" @input="onChange($event,'sourceId')" />
          <filter-input title="买家昵称" @input="onChange($event,'shopBuyerId')" />
          <filter-input title="买家ID" @input="onChange($event,'buyerId')" />
        </el-collapse-item>
        <el-collapse-item title="物流" name="2">
          <filter-input title="快递单号" @input="onChange($event,'logisticsId')" />
          <filter-input title="快递公司" @input="onChange($event,'logisticsCompany')" />
          <filter-input title="国际单号" @input="onChange($event,'internationalLogisticsId')" />
          <filter-input title="跨境物流" @input="onChange($event,'shipment')" />
        </el-collapse-item>
        <el-collapse-item title="时间" name="time">
          <filter-date title="计划发货时间" @change="onChange($event,'planDeliveryDate')" />
          <filter-date title="发货日期" @change="onChange($event,'sendDate')" />
          <filter-date title="预计送达时间" @change="onChange($event,'signTime')" />
          <filter-date title="确认收货时间" @change="onChange($event,'endTime')" />
        </el-collapse-item>
        <el-collapse-item title="分销和供应" name="3">
          <filter-input title="分销商编号" @input="onChange($event,'drpCoIdFrom')" />
          <filter-input title="供销商编号" @input="onChange($event,'drpCoIdTo')" />
        </el-collapse-item>
        <el-collapse-item title="标签和备注" name="4">
          <filter-input title="标签" labelWidth="60" placeholder="以逗号分隔，单个标签不能超过十个字符" type="textarea" @input="onChange($event,'labels')" />
          <filter-input title="订单备注" labelWidth="60" placeholder="卖家备注" @input="onChange($event,'remark')" />
          <filter-input title="线下备注" labelWidth="60" placeholder="线下备注" @input="onChange($event,'note')" />
        </el-collapse-item>
        <order-checkbox title="旗帜" keyName="sellerFlag" :options="sellerFlagOptions" @checkboxChange="onChange($event,'sellerFlag')" />
        <order-radio title="是否已提交" keyName="isSubmitte" :options="isSubmittedOptions" noLimit @radioChange="onChange($event,'isSubmitte')" />
        <order-radio title="订单来源" keyName="sourceFrom" :options="sourceFromOptions" noLimit @radioChange="onChange($event,'sourceFrom')" />
        <order-checkbox title="订单类型" keyName="type" :options="typeOption" noLimit @checkboxChange="onChange($event,'type')" />
        <order-radio title="订单状态" keyName="status" :options="statusOptions" noLimit @radioChange="onChange($event,'status')" />
        <order-checkbox title="省份" keyName="receiverProvinceCode" :options="provinceOptions" @checkboxChange="onChange($event,'receiverProvinceCode')" />
      </el-collapse>
      <div class="searchHandle">
        <el-button size="mini">重置</el-button>
        <el-button type="primary" size="mini">搜索</el-button>
      </div>
    </div>
    <div class="order-right">
      <div class="tool">
        <order-tool />
      </div>
      <div class="table">
        <order-table :data="data"/>
        <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>
      <add-order ref="addOrder" />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import filterInput from './components/filterInput.vue'
import OrderCheckbox from "./components/orderCheckbox.vue";
import OrderRadio from './components/orderRadio.vue'
import filterDate from './components/filterDate.vue'
import OrderTool from "./components/orderTool.vue";
import OrderTable from "./components/orderTable.vue";
import AddOrder from "./components/addOrder.vue";
@Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable,AddOrder}})
export default class Order extends Vue {
  activeNames:Array<any>=['1']
  data:Array<any> = []
  page:any={
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 500 //总条数
  }
  value:any={
    sourceId:'',  //线上订单号
    shopBuyerId:'', //买家昵称
    buyerId:'', //买家ID
    logisticsId:'', //快递单号
    logisticsCompany:'', //快递公司
    internationalLogisticsId:'', //国际物流单号
    isSubmitte:'', //数据是否已提交
    drpCoIdFrom:'', //分销商编号
    drpCoIdTo:'', //供销商编号
    sourceFrom:'', //订单来源
    type:'', //订单类型
    status:'' , //订单状态
  }
  //数据是否已提交options
  isSubmittedOptions:Array<any>=[{
    label:'未提交(暂存)',
    value:0
  },{
    label:'已提交',
    value:1
  }]

  //订单来源
  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:'普通订单'
  },{
    label:'补发订单'
  },{
    label:'分销Plus'
  },{
    label:'供销Plus'
  },{
    label:'换货订单'
  }]

  //订单状态 
  statusOptions:Array<any>=[{
    label:'待付款',
    value:'WaitPay'
  },{
    label:'发货中',
    value:'Delivering'
  },{
    label:'被合并',
    value:'Merged'
  },{
    label:'异常',
    value:'Question'
  },{
    label:'被拆分',
    value:'Split'
  },{
    label:'等供销商|外仓发货',
    value:'WaitOuterSent'
  },{
    label:'已付款待审核',
    value:'WaitConfirm'
  },{
    label:'已客审待财审',
    value:'WaitFConfirm'
  },{
    label:'已发货',
    value:'Sent'
  },{
    label:'取消',
    value:'Cancelled'
  }]

  //省份
  provinceOptions:Array<any>=[{
    label:'北京',
    value:'1'
  },{
    label:'天津',
    value:'2'
  },{
    label:'上海',
    value:'3'
  },{
    label:'河北省',
    value:'4'
  },{
    label:'广西壮族自治区',
    value:'5'
  }]

  //旗帜
  sellerFlagOptions:Array<any>=[{
    label:'红旗',
    value:'1'
  },{
    label:'黄旗',
    value:'2'
  },{
    label:'绿旗',
    value:'3'
  },{
    label:'蓝旗',
    value:'4'
  },{
    label:'紫旗',
    value:'5'
  }]

  //组件返回事件
  onChange(v:any,code:string){
    this.value[code] = v;
  }

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

}
</script>

<style lang="scss" scoped>
.order{
  width: 100%;
  display: flex;
  overflow-x: hidden;
  .order-left{
    width: 240px;
    flex-shrink: 0;
    background-color: #f0f0f0;
    border-right: solid 1px #CCC;
    box-sizing: border-box;
    padding: 4px;
    
    .my-collapse{
      padding: 0 4px;
      background: #FFF;
    }
    .searchHandle{
      display: flex;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 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% - 240px);
    box-sizing: border-box;
    padding-left: 8px;
    .tool{
      width: 100%;
    }
    .table{
      width: 100%;
      .page{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 16px;
        box-sizing: border-box;
      }
    }
  }
}
</style>

<style lang="scss">
.order-left{
  .el-collapse-item__content{
    padding-bottom: 0;
  }
}
</style>