<template>
  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
    <div class="network-searchForm">
      <a-form-model ref="queryForm" :model="queryParam" layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="投递时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <a-range-picker
                id="rubbishTotal-time"
                v-model="time"
                style="width: 100%;"
                :format="dateFormat"
                :placeholder="['开始时间','结束时间']"
                :disabledDate="disabledDate"
                @change="onChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="provinceCode" label="所属区域:" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
              <a-select id="rubbishTotal-provinceCode" allowClear v-model="queryParam.provinceCode" @change="getCityList" placeholder="请选择省">
                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item prop="cityCode" label=" " :colon="false" :label-col="{ span:1 }" :wrapper-col="{ span:22}">
              <a-select allowClear id="rubbishTotal-cityCode" v-model="queryParam.cityCode" @change="getAreaList" placeholder="请选择市">
                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item prop="districtCode" label=" " :colon="false" :label-col="{ span:0 }" :wrapper-col="{ span:20}">
              <a-select allowClear id="rubbishTotal-districtCode" v-model="queryParam.districtCode" @change="getDistrictCode" placeholder="请选择区/县">
                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="网点名称" prop="stationNo" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <a-select
                id="rubbishTotal-stationNo"
                placeholder="请选择网点名称"
                allowClear
                v-model="queryParam.stationNo"
                :showSearch="true"
                option-filter-prop="children"
                @change="stationNoChange"
                :filter-option="filterOption">
                <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="网点标签" prop="stationNo" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
              <a-select
                style="max-height: 50px;overflow: auto;margin-top: 3px;"
                id="rubbishTotal-labelNo"
                placeholder="请选择网点标签"
                mode="multiple"
                allowClear
                v-model="queryParam.labelNoList"
                :showSearch="true"
                option-filter-prop="children"
                :filter-option="filterOption"
              >
                <a-select-option v-for="item in lableData" :key="item.labelNo" :value="item.labelNo">{{ item.labelName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-button class="handle-btn serach-btn" id="rubbishTotal-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button class="handle-btn serach-btn" type="" id="rubbishTotal-btn-reset" @click="handleReset">重置</a-button>
            <a-button class="export-btn" id="rubbishTotal-export" v-hasPermission="'M_rubbishTotal_export'" :loading="loading" @click="handleExport">导出</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 合计 -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div class="ftext" slot="message">总计<span> {{ totalNum }} </span>条，可回收垃圾总计<span> {{ recyclTotal }} </span>千克，有害垃圾总计<span> {{ harmTotal }} </span>千克</div>
    </a-alert>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
    </s-table>
  </a-card>

</template>

<script>
import { STable, VSelect } from '@/components'
import { stationList } from '@/api/releaseRecord.js'
import { lableSeleteList } from '@/api/labelSetting.js'
import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
import { getSumList, exportSumForm, getSumTotal } from '@/api/reportForm.js'
import moment from 'moment'
import getDate from '@/libs/getDate.js'
export default {
  components: { STable, VSelect },
  data () {
    return {
      loading: false,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          span: 7
        },
        wrapperCol: {
          span: 17
        }
      },
      // 将默认近七天时间日期回显在时间选择框中
      time: [
        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD HH'),
        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD HH')
      ],
      dateFormat: 'YYYY-MM-DD',
      // 查询参数
      queryParam: {
        beginDate: null, // 开始时间
        endDate: null, // 结束时间
        stationNo: undefined, // 网点no
        name: '', // 网点名称
        provinceCode: undefined, //  省
        provinceName: '',
        cityCode: undefined, // 市
        cityName: '', // 市名称
        districtCode: undefined, // 区
        districtName: '', // 区名称
        labelNoList: []
      },
      addrProvinceList: [], //  省下拉
      addrCityList: [], //  市下拉
      addrDistrictList: [], //  区下拉
      optionData: [],
      lableData: [],
      totalNum: 0,	// 总条数
      recyclTotal: 0,	// 可回收总计
      harmTotal: 0, // 有害垃圾总计
      // 表头
      columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '网点名称', dataIndex: 'stationName', width: 100, align: 'center' },
        { title: '可回收垃圾投递量（kg）',
          children: [{ title: '废旧衣物', width: 100, align: 'center', dataIndex: 'clothesWeight', customRender: (text) => { return text || 0 } },
            { title: '废旧纸张', width: 100, align: 'center', dataIndex: 'paperWeight', customRender: (text) => { return text || 0 } },
            { title: '废旧塑料', width: 100, align: 'center', dataIndex: 'plasticWeight', customRender: (text) => { return text || 0 } },
            { title: '废旧金属', width: 100, align: 'center', dataIndex: 'metalWeight', customRender: (text) => { return text || 0 } },
            { title: '废旧金属/塑料', width: 100, align: 'center', dataIndex: 'plasticOrMetalWeight', customRender: (text) => { return text || 0 } },
            { title: '废旧玻璃', width: 100, align: 'center', dataIndex: 'glassWeight', customRender: (text) => { return text || 0 } },
            { title: '可回收物', width: 100, align: 'center', dataIndex: 'recyclingWeight', customRender: (text) => { return text || 0 } }] },
        { title: '可回收垃圾小计（kg）', dataIndex: 'recyclTotalWeight', width: 100, align: 'center' },
        { title: '有害垃圾（kg）', dataIndex: 'harmWeight', width: 100, align: 'center' }],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const searchData = Object.assign(parameter, this.queryParam)
        if (this.time && this.time.length) {
          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD 00:00:00')
        } else {
          searchData.beginDate = ''
          searchData.endDate = ''
        }
        return getSumList(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.totalNum = res.data.count
            this.getListTotal()
            return res.data
          } else {
            this.totalNum = 0
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.time = [
        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD HH'),
        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD HH')
      ]
      vm.$refs.queryForm.resetFields()
      vm.getStationList()
      vm.getProvinceList()
      vm.getlableSeleteList()
    })
  },
  methods: {
    // 不可选日期
    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]
      }
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 获取标签数据
    getlableSeleteList () {
      lableSeleteList().then(res => {
        if (res.status == 200) {
          this.lableData = res.data || []
        }
      })
    },
    // 获取省列表'
    getProvinceList () {
      getProvince().then(res => {
        if (res.status == 200) {
          this.addrProvinceList = res.data || []
        } else {
          this.addrProvinceList = []
        }
      })
    },
    // 获取城市列表
    getCityList (val) {
      this.addrCityList = []
      this.addrDistrictList = []
      this.queryParam.provinceName = val ? this.addrProvinceList.find(item => item.code == this.queryParam.provinceCode).name : ''
      this.queryParam.cityCode = undefined
      this.queryParam.cityName = ''
      this.queryParam.districtCode = undefined
      this.queryParam.districtName = ''
      this.getCityListRequest(val)
    },
    getCityListRequest (val) {
      getCityByPro({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrCityList = res.data || []
        } else {
          this.addrCityList = []
        }
      })
    },
    // 获取区县列表
    getAreaList (val) {
      this.addrDistrictList = []
      this.queryParam.cityName = val ? this.addrCityList.find(item => item.code == this.queryParam.cityCode).name : ''
      this.queryParam.districtCode = undefined
      this.queryParam.districtName = ''
      this.getAreaListRequest(val)
    },
    getAreaListRequest (val) {
      getDistrictByCity({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrDistrictList = res.data || []
        } else {
          this.addrDistrictList = []
        }
      })
    },
    // 选择区
    getDistrictCode (val) {
      this.queryParam.districtName = val ? this.addrDistrictList.find(item => item.code == this.queryParam.districtCode).name : ''
    },
    // 选择网点
    stationNoChange (val) {
      this.queryParam.name = val ? this.optionData.find(item => item.stationNo == val).name : ''
    },
    // 导出
    handleExport () {
      const params = this.queryParam
      if (this.time && this.time.length) {
        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
        params.endDate = moment(this.time[1]).format('YYYY-MM-DD 00:00:00')
      } else {
        params.beginDate = ''
        params.endDate = ''
      }
      if (!params.beginDate && !params.endDate) {
        this.$message.error('请先选择需要导出的投放时间区间再进行导出！')
        return
      }
      // 判断两个时间段是否相差m个月  第二个参数指相差单位，第三个参数指是否返回浮点形式（小数）
      if (moment(params.endDate).diff(moment(params.beginDate), 'months', true) > 3) {
        this.$message.error('单次最多只能导出3个月的数据，请缩小查询区间后再进行导出！')
        return
      }
      this.$confirm({
        title: '提示',
        content: '导出过程可能需要一些时间，且导出期间不能进行其它操作，确定要导出吗？',
        onOk: () => {
          this.loading = true
          exportSumForm(params).then(res => {
            this.loading = false
            this.download(res)
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },
    download (data) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      const a = moment(this.queryParam.beginDate).format('LL') + '-' + moment(this.queryParam.endDate).format('LL')
      const address = this.queryParam.provinceCode ? this.addrProvinceList.find(item => item.id == this.queryParam.provinceCode).name +
      (this.queryParam.cityCode ? this.addrCityList.find(item => item.id == this.queryParam.cityCode).name : '') +
      (this.queryParam.districtCode ? this.addrDistrictList.find(item => item.id == this.queryParam.districtCode).name : '') : ''
      const fname = a + '垃圾分类投递量统计表' + (address ? '（' + address + '）' : '')
      link.setAttribute('download', fname + '.xlsx')
      document.body.appendChild(link)
      link.click()
    },
    // 查询
    refresh () {
      this.$refs.table.refresh(true)
    },
    // 获取合作商数据
    getStationList () {
      stationList().then(res => {
        if (res.status == 200) {
          this.optionData = res.data || []
        }
      })
    },
    // 合计
    getListTotal () {
      const params = this.queryParam
      if (this.time && this.time.length) {
        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
        params.endDate = moment(this.time[1]).format('YYYY-MM-DD 00:00:00')
      } else {
        params.beginDate = ''
        params.endDate = ''
      }
      getSumTotal(params).then(res => {
        if (res.status == 200) {
          if (res.data) {
            this.recyclTotal = res.data.recyclAll || 0
            this.harmTotal = res.data.harmAll || 0
          } else {
            this.recyclTotal = 0
            this.harmTotal = 0
          }
        }
      })
    },
    // 重置
    handleReset () {
      this.time = [
        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD HH'),
        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD HH')
      ]
      this.queryParam.labelNoList = []
      this.$refs.queryForm.resetFields()
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
	.shopOrder-table-page-search-wrapper {
		.network-searchForm {
			.ant-form-inline .ant-form-item {
				width: 100%;
			}

			// 搜索框的下间距
			.ant-form-item {
				margin-bottom: 10px;
			}

			.handle-btn {
				margin-top: 4px;
			}

			.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>
