<template>
  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
    <div class="shopOrder-searchForm">
      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item label="投放时间:" :label-col="{ span: 7 }" :wrapper-col="{ span: 17}">
              <a-range-picker
                style="width:100%"
                id="releaseRecordList-queryOrderDate"
                :disabledDate="disabledDate"
                v-model="queryOrderDate"
                :format="dateFormat"
                :placeholder="['开始时间', '结束时间']" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="设备编号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <a-input id="releaseRecordList-srcDeviceCode" allowClear :maxLength="30" v-model=" queryParam.srcDeviceCode " placeholder="请输入设备编号" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="网点名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <a-select
                id="releaseRecordList-stationNo"
                placeholder="请选择"
                allowClear
                v-model="queryParam.stationNo"
                :showSearch="true"
                option-filter-prop="children"
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="handleChange">
                <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button class="handle-btn serach-btn" id="releaseRecordList-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button class="handle-btn" type="" id="releaseRecordList-reset" @click="handleReset">重置</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item label="用户账号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <a-input id="releaseRecordList-customerMobile" allowClear :maxLength="11" v-model=" queryParam.customerMobile" placeholder="请输入用户账号" />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="6">
            <a-form-item label="投递方式" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <v-select code="ENABLE_FLAG" v-model="queryParam.loginFlag" allowClear placeholder="请选择投递方式" id="releaseRecordList-loginFlag"></v-select>
            </a-form-item>
          </a-col> -->
        </a-row>
      </a-form>
    </div>
    <!-- 合计 -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div class="ftext" slot="message">共<span> {{ orderTotal }} </span>单，兑换乐豆<span> {{ amountTotal }} </span>个</div>
    </a-alert>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 订单状态 -->
      <template slot="one" slot-scope="text, record">
        <span v-if="record.rubbishType=='CLOTHES'">{{ record.rubbishWeight }}</span>
        <span v-else>0</span>
      </template>
      <template slot="two" slot-scope="text, record">
        <span v-if="record.rubbishType=='PAPER'">{{ record.rubbishWeight }}</span>
        <span v-else>0</span>
        </span></template>
      <template slot="three" slot-scope="text, record">
        <span v-if="record.rubbishType=='PLASTIC'">{{ record.rubbishWeight }}</span>
        <span v-else>0</span>
      </template>
      <template slot="four" slot-scope="text, record">
        <span v-if="record.rubbishType=='METAL'">{{ record.rubbishWeight }}</span>
        <span v-else>0</span>
      </template>
      <template slot="five" slot-scope="text, record">
        <span v-if="record.rubbishType=='HARM'">{{ record.rubbishWeight }}</span>
        <span v-else>0</span>
      </template>
      <template slot="six" slot-scope="text, record">
        <span v-if="record.rubbishType=='MET_PLA'">{{ record.rubbishWeight }}</span>
        <span v-else>0</span>
      </template>
    </s-table>
  </a-card>

</template>

<script>
import { STable, VSelect } from '@/components'
import { getDeliveryLogList, getDeliveryLogTotal, stationList } from '@/api/releaseRecord.js'
import moment from 'moment'
import getDate from '@/libs/getDate.js'
export default {
  components: { STable, VSelect },
  data () {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 }
      },
	  // 将默认当天时间日期回显在时间选择框中
	  queryOrderDate: [
	    moment(getDate.getRecentday().starttime, this.dateFormat),
	    moment(getDate.getRecentday().endtime, this.dateFormat)
	  ],
	  dateFormat: 'YYYY-MM-DD',
      // 查询参数
      queryParam: {
        beginDate: null, // 开始时间
        endDate: null, // 结束时间
        customerMobile: '', //  用户手机
        srcDeviceCode: '', //  设备编号
        stationNo: undefined // 网点名称
      },
      optionData: [],
      orderTotal: 0,	// 总单数
      amountTotal: 0,	// 总金额
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '投放时间', dataIndex: 'deliveryTime', width: 200, align: 'center' },
        { title: '网点名称', dataIndex: 'stationName', width: 200, align: 'center' },
        { title: '设备编号', dataIndex: 'srcDeviceCode', width: 200, align: 'center' },
        { title: '用户账号', dataIndex: 'customerMobile', width: 200, align: 'center' },
        // { title: '投递方式', dataIndex: '', width: 200, align: 'center' },
        { title: '本次兑换乐豆（个）', dataIndex: 'goldNum', width: 100, align: 'center' },
        { title: '内置各箱体投放重量（g）',
				  children: [
            { title: '废旧衣物', width: 100, align: 'center', scopedSlots: { customRender: 'one' } },
            { title: '废旧纸张', width: 100, align: 'center', scopedSlots: { customRender: 'two' } },
            { title: '废旧塑料', width: 100, align: 'center', scopedSlots: { customRender: 'three' } },
            { title: '废旧金属', width: 100, align: 'center', scopedSlots: { customRender: 'four' } },
            { title: '有害垃圾', width: 100, align: 'center', scopedSlots: { customRender: 'five' } },
            { title: '废旧金属/塑料', width: 100, align: 'center', scopedSlots: { customRender: 'six' } }
				  ]
        }

      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
		  const searchData = Object.assign(parameter, this.queryParam)
		  if (this.queryOrderDate && this.queryOrderDate.length) {
		    searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
		    searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
		  } else {
		    searchData.beginDate = ''
		    searchData.endDate = ''
		  }
        return getDeliveryLogList(searchData).then(res => {
          if (res.status == 200) {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
            }
            this.getListTotal()
            return res.data
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.handleReset()
      vm.getStationList()
    })
  },
  methods: {
    moment,
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf() > Date.now()
    },
    // 创建时间change
    onChange (dates, dateStrings) {
      if ((dates, dateStrings)) {
        this.queryParam.beginDate = dateStrings[0]
        this.queryParam.endDate = dateStrings[1]
      }
    },

    handleChange (value) {
		  console.log(`selected ${value}`)
    },
    handleBlur () {
		  console.log('blur')
    },
    handleFocus () {
		  console.log('focus')
    },
    filterOption (input, option) {
		  return (
		    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
		  )
    },
    // 获取合作商数据
    getStationList () {
		  stationList().then(res => {
			  console.log(res, '-----合作商')
			  if (res.status == 200) {
				  this.optionData = res.data || []
			  }
		  })
    },

    // 合计
    getListTotal () {
      const params = {
        customerMobile: this.queryParam.customerMobile,
        beginDate: this.queryParam.beginDate,
        endDate: this.queryParam.endDate,
        srcDeviceCode: this.queryParam.srcDeviceCode, //  设备编号
        stationNo: this.queryParam.stationNo // 网点名称
      }
      if (this.queryOrderDate && this.queryOrderDate.length) {
        params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
        params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
      } else {
        params.beginDate = ''
        params.endDate = ''
      }
      getDeliveryLogTotal(params).then(res => {
        if (res.status == 200) {
          if (res.data) {
            this.orderTotal = res.data.totalNum || 0
            this.amountTotal = res.data.goldNum || 0
          } else {
			  this.orderTotal = 0
			  this.amountTotal = 0
		  }
        }
      })
    },
    // 重置
    handleReset () {
      // this.queryOrderDate = undefined
	  this.queryOrderDate = [
	    moment(getDate.getRecentday().starttime, this.dateFormat),
	    moment(getDate.getRecentday().endtime, this.dateFormat)
	  ],
      this.queryParam.customerMobile = ''
      this.queryParam.srcDeviceCode = ''
      this.queryParam.stationNo = undefined
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
  .shopOrder-table-page-search-wrapper{
    .shopOrder-searchForm{
      .ant-form-inline .ant-form-item{
        width: 100%;
      }
      // 搜索框的下间距
      .ant-form-item {
      	margin-bottom: 10px;
      }
      .handle-btn{
        margin-bottom: 15px;
      }
      .serach-btn{
        margin-right: 10px;
      }
    }
    .export-btn{
      background-color: #ff9900;
      border-color: #ff9900;
      color: #fff;
    }
    .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
      color: #fff;
      border-color: #ff9900;
    }
    .actionBtn {
    	font-size: 20px;
    	padding: 0 10px;
    }
    .blue {
    	color: #1890FF;
    }
    .green {
    	color: #16b50e;
    }
    .red {
    	color: red;
    }
  }
</style>
