<template>
  <div>
    <Row :gutter="32">
      <i-col span="32">
        <row>
          <!--搜索、状态行-->
          <row class="top-10">
            <span class="left-15">选择日期</span>
            <DatePicker v-model="dateRange" class="left-10" type="daterange" placement="bottom-start" split-panels placeholder="请选择日期区间" style="width: 200px" size="small"></DatePicker>
            <span style="margin: 0 10px">渠道</span>
            <Select filterable placeholder="请选择渠道" v-model="channelId" @on-change="channelSelect" style="width:110px" size="small">
              <Option v-for="item in channelList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <span style="margin: 0 10px">类型</span>
            <Select filterable placeholder="请选择类型" v-model="orderTypeId" @on-change="orderStatusSelect" style="width:110px" size="small">
              <Option v-for="item in orderTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <Button type="primary" style="width: 70px;margin-left: 20px" @click="searchBtnClick" size="small">查询</Button>
          </row>
          <!--表格数据-->
          <row style="margin-top: 30px">
            <Table :columns="columns1" :data="data1"></Table>
            <Spin style="top: 40px;height: 200px" size="large" fix v-if="spinShow"></Spin>
            <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
                  placement="top" @on-change="handlePage" style="margin-top: 20px;float: right"></Page>
          </row>
        </row>
      </i-col>
    </Row>
  </div>
</template>
<script>

    export default {
        data() {
            return {
              columns1: [
                {
                  title: '序号',
                  width:'80px',
                  key: 'number',
                  align: 'center',
                },
                {
                  title: '店铺名称',
                  key: 'shopName',
                  align: 'center',
                  width:'300px',
                },
                {
                  title: '店铺编码',
                  key: 'shopCode',
                  align: 'center',
                },
                {
                  title: '大区',
                  key: 'region',
                  align: 'center',
                },
                {
                  title: '零售公司',
                  key: 'company',
                  width:'120px',
                  align: 'center',
                },
                {
                  title: '客户',
                  key: 'customer',
                  align: 'center',
                },
                {
                  title: '推广数',
                  key: 'orderTimeStr',
                  width:'140px',
                  align: 'center',
                },
                {
                  title: '派单门店',
                  key: 'sendShopName',
                  align:"center",
                },{
                  title: '派单时间',
                  key: 'dispatchTimeStr',
                  width:'140px',
                  align:"center",
                },{
                  title: '接单时间',
                  key: 'receiveTimeStr',
                  width:'140px',
                  align:"center",
                },{
                  title: '当前状态',
                  key: 'statusStr',
                  width:'100px',
                  align:"center",
                },{
                  title: '状态更新时间',
                  key: 'updateTimeStr',
                  width:'140px',
                  align:"center",
                },
                {
                  title: '操作',
                  key: 'see',
                  width:'80px',
                  render: (h, params) => {
                    return h('a', {
                        attrs: {
                          id: params.row.id
                        },
                        on: {
                          'click': () => {
                            //跳转详情页
                            this.goToDetail(params.row.id);
                          }
                        }
                      },[
                        h('span', {
                          domProps: {
                            innerHTML: '查看'
                          }
                        })
                      ]

                    );
                  }
                },
              ],

              //加载遮罩
              spinShow: false,
              //历史订单data
              data1: [],
              searchContent: null,

              //渠道
              channelList: [],
              channelId: 0,

              //订单状态
              // orderStatusList: [
              //   {"id":0, "name":"全部"},
              //   {"id":1, "name":"已签收"},
              //   {"id":2, "name":"已退换货"},
              //   {"id":3, "name":"已取消"},
              // ],
              orderTypeList: [],
              // orderStatusId: -1,
              orderTypeId: 0,
              //开始时间，结束时间
              startDate: null,
              endDate: null,
              dateRange: [],



              totalSize: 0,
              pageNum: sessionStorage.getItem("hisOrderPageNum") == null ? 1 : Number(sessionStorage.getItem("hisOrderPageNum")),
              pageSize: 10,

            }
        },
        mounted: function () {
          this.getSelectList();
          this.getMainList();
        },
        methods: {
          ok () {
              this.$Message.info('操作成功');
          },
          cancel () {
              this.$Message.info('取消操作');
          },
          //对象属性空检查
          checkParamBlank: function(obj){
            for(let param in obj){
              obj[param] = this.checkBlank(obj[param]);
            }
          },
          //数据空检查
          checkBlank: function(data){
            if(!data){
              return "--";
            }else{
              return data;
            }
          },
          //格式化日期
          formartDate: function(date, format, endFlag){
            if(!date){
              return null;
            }
            if(endFlag == null){
              return this.$moment(date).format(format) + " 00:00:00";
            }else{
              return this.$moment(date).format(format) + " 23:59:59";
            }
          },
          //渠道图片url
          getChannelImgUrl: function(channelCode){
              return "/static/img/channel/" + channelCode + ".jpg";
          },
          //搜索
          searchEnter: function(){
          },
          //渠道选择
          channelSelect: function(){
          },
          //订单状态选择
          orderStatusSelect: function(){
          },
          //查询按钮
          searchBtnClick: function(){
            this.pageNum = 1;
            this.getMainList();
          },
          /**mainList数据*/
          getMainList: function () {
              // this.data1 = [];
              // let that = this;
              // let request = {
              //     pageNum : that.pageNum,
              //     pageSize : that.pageSize,
              //     searchContent : that.searchContent,
              //     channelId : that.channelId === 0 ? null : that.channelId,
              //     status : null,
              //     startDate : this.formartDate(that.startDate, "YYYY-MM-DD"),
              //     endDate : this.formartDate(that.endDate, "YYYY-MM-DD", true),
              //   type: that.orderTypeId
              // };
              // //加载遮罩
              // this.spinShow = true;
              // historyOrder.getMainRequest(request,function (data) {
              //     that.spinShow = false;
              //     if(data.data.code !== "0000"){
              //       that.$Message.error("系统异常");
              //     }
              //     data = data.data.results;
              //     if(data){
              //         for(let i=0;i<data.length;i++){
              //             let entity = data[i];
              //             that.totalSize = data[i].totalSize;
              //             that.data1.push(entity);
              //             // data[i].channelImgUrl = orderCommon.getChannelImgUlr(data[i].channelCode);
              //             data[i].channelImgUrl = that.getChannelImgUrl(data[i].channelCode);
              //           //null改--
              //           that.checkParamBlank(entity);
              //         }
              //     }
              //     if(data == null || data.length == 0){
              //         that.totalSize = 0;
              //     }
              // });

          },
          /**基础数据：渠道list，策略明细list*/
          getSelectList:function(){
            // let that = this;
            // let request = {};
            // sendGoodsStrategy.getSelectListRequest(request,function (data) {
            //   that.channelList = [];
            //   if(data.data.code != "0000"){
            //     this.$Message.error("系统繁忙");
            //   }
            //   data = data.data.results;
            //   if(data){
            //     that.channelList = data.channelList;
            //   }
            // });
          },
          /**跳转详情页*/
          goToDetail: function (id) {
            this.$router.push({
              path: '/history/order/detail',
              query: {
                orderId: id,
              }
            });
          },

          //切页处理
          handlePage: function (value) {
            this.pageNum = value;
            this.getMainList();
            sessionStorage.setItem("hisOrderPageNum", this.pageNum)
          },



        }
    }
</script>

<style scoped>

  .top-10{
    margin-top: 10px;
  }
  .left-10{
    margin-left: 10px;
  }
  .left-15{
    margin-left: 15px;
  }
</style>
