<template>
  <div class="Echarts">
    <el-row>
      <el-col :span="8">
        <div id="Analysis" style="width:100%;height:430px;" />
      </el-col>
      <el-col :span="16">
        <div id="LaddingNumberInfo" style="width:100%;height:430px;">
          <el-tabs @tab-click="tab_cliek">
            <el-tab-pane
              v-for="(item, index) in tags"
              :key="item"
              :label="item"
              :name="item"
            />
          </el-tabs>
          <el-table height="320" :data="sData">
            <el-table-column label="提单号" prop="LadingBillNumber" />
            <el-table-column label="总件数" prop="TotalOrderCount" />
            <el-table-column label="离港时间" prop="DepartTime" />
            <el-table-column label="到港时间" prop="ArrivalTime" />
            <el-table-column label="清关时间" prop="ClearanceTime" />
            <el-table-column label="上网件数/比例" prop="OnlineCount">
              <template slot-scope="props">
                {{ props.row.OnlineCount }}件<br> {{ (props.row.OnlineRate*100).toFixed(2) }}%
              </template>
            </el-table-column>
            <el-table-column label="上网天数" prop="AvgOnlineDays" />
            <el-table-column label="签收件数/比例" prop="OnlineCount">
              <template slot-scope="props">
                {{ props.row.SignCount }}件<br> {{ (props.row.SignRate*100).toFixed(2) }}%
              </template>
            </el-table-column>
            <el-table-column label="签收天数" prop="AvgSignDays" />
          </el-table>
          <el-pagination
            :hide-on-single-page="true"
            :page-sizes="[4, 10, 20, 30]"
            :current-page="pagerDto.PageIndex"
            :page-size="pagerDto.PageSize"
            background
            layout="prev, pager, next ,total ,jumper,sizes,slot "
            :total="pagerDto.total"
            @current-change="loadLadding"
          />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div id="Logisticsratio" style="width:100%;height:300px;" />
    </el-row>
    <el-drawer
      :visible.sync="drawerSearh"
      direction="rtl"
      title="搜索"
    >
      <el-form :model="searchDto" label-width="100px" class="demo-form-inline">
        <el-form-item label="派送渠道">
          <el-select v-model="searchDto.ChannelId" placeholder="派送渠道" clearable filterable>
            <el-option
              v-for="item in delvierChannels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="客户名称">
          <el-select v-model="searchDto.CustomerId" placeholder="客户名称" clearable filterable>
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="发货时间">
          <div class="block">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="genData">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <div class="handle-button" style="top: 250px;background-color: rgb(24, 144, 255);" @click="drawerSearh=true"><i data-v-439db53a="" class="el-icon-search" /></div>
  </div>
</template>
<style>
.handle-button{width: 48px;
    height: 48px;
    position: fixed;
    right: 10px;
    text-align: center;
    font-size: 24px;
    border-radius: 6px 0 0 6px!important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    line-height: 48px;}
</style>
<script>
import '@/utils/echarts-customed.js'
import { _getCustomers, _getDeliverChannel } from '@/api/baseInfo'
import { _getStatusGroupsDatas, _getStatusDailyQtyGroups, _getLaddingDestinations, _getLaddingAnalysis } from '@/api/trackingOrder'
export default {
  name: 'Trackingindex',
  data() {
    return {
      date: ['2020-07-01', '2020-08-01'],
      searchDto: {
        Start: '2020-07-01',
        End: '2020-08-01',
        ChannelId: '',
        CustomerId: ''
      },
      data: {
        legendData: ['加载中'],
        seriesData: [{ name: '加载中', value: 1 }],
        date: [],
        online: [],
        sign: [],
        preInternetAccess: []
      },
      pagerDto: {
        PageIndex: 1,
        PageSize: 4,
        total: 0,
        QuerySort: [{ Field: 'Id', IsDesc: true }],
        _GrE_DepartTime: '',
        _LeE_DepartTime: '',
        _Eq_Destination: ''
      },
      drawerSearh: false,
      customers: [],
      delvierChannels: [],
      myChart: {},
      analysis: {},
      tags: {},
      sData: [],
      tIndex: ''
    }
  },
  created() {
    _getDeliverChannel().then(response => {
      this.delvierChannels = response
    })
    _getCustomers().then(repsonse => {
      this.customers = repsonse
    })
    _getLaddingDestinations().then(response => {
      this.tags = response
      this.pagerDto._Eq_Destination = this.tags[0]
      this.loadLadding()
    })
  },
  mounted() {
    this.myEcharts()
    var newDate = new Date()
    var start = this.addByTransDate(newDate, 30)
    var end = this.addByTransDate(newDate, 15)
    this.date = [start, end]
    this.genData()
  },
  methods: {

	  myEcharts() {
		  // 基于准备好的dom，初始化echarts实例
		    this.myChart = this.$echarts.init(document.getElementById('Logisticsratio'), 'customed')

		  // 指定图表的配置项和数据
		  var option = {
        autoresize: true,
			  title: {
				  text: '比例变化'
			  },
			  tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
			  legend: {
				  data: ['签收率', '上网率', '预上网率']
			  },
			  xAxis: {
          type: 'category',
          boundaryGap: false,
				  data: this.data.date
			  },
			  yAxis: {},
			  series: [{
				  name: '签收率',
				  type: 'line',
          data: this.data.sign
			  }, {
				  name: '上网率',
				  type: 'line',
				  data: this.data.online
			  }, {
				  name: '预上网率',
				  type: 'line',
				  data: this.data.preInternetAccess
			  }]
		  }

		  // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)

      this.analysis = this.$echarts.init(document.getElementById('Analysis'), 'customed')
      var analysisOption = {
        autoresize: true,
        title: {
          text: '比例分析',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: this.data.legendData
        },
        series: [
          {
            name: '状态',
            type: 'pie',
            radius: ['35%', '70%'],
            center: ['40%', '50%'],
            data: this.data.seriesData,
            labelLine: {
              show: false
            },
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 4,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.analysis.setOption(analysisOption)
    },
    tab_cliek(t) {
      this.pagerDto._Eq_Destination = t.name
      this.loadLadding()
    },
    loadLadding(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex }
      this.pagerDto._GrE_DepartTime = this.date[0]
      this.pagerDto._LeE_DepartTime = this.date[1]
      _getLaddingAnalysis(this.pagerDto).then(response => {
        this.pagerDto.total = response.TotalCount
        this.sData = response.Result
      })
    },
    genData() {
      this.searchDto.Start = this.date[0]
      this.searchDto.End = this.date[1]
      _getStatusGroupsDatas(this.searchDto).then(response => {
        this.analysis.setOption({ series: { data: response.data }, legend: { data: response.date }})
      })
      _getStatusDailyQtyGroups(this.searchDto).then(response => {
        this.myChart.setOption(
          { series:
                    [
                      {
                        name: '签收率',
                        type: 'line',
                        data: response.Sign
                      },
                      {
                        name: '上网率',
                        type: 'line',
                        data: response.Online
                      },
                      {
                        name: '预上网率',
                        type: 'line',
                        data: response.PreInternetAccess
                      }
                    ],
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: response.Date
          }
          }
        )
      })
    },
    dateFormatter(date, fmt) { // author: meizz
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      }
      return fmt
    },
    addByTransDate(dateParameter, num) {
      var translateDate = ''; var dateString = ''; var monthString = ''; var dayString = ''
      var newDate = dateParameter
      newDate = newDate.valueOf()
      newDate = newDate - num * 24 * 60 * 60 * 1000 // 备注 如果是往前计算日期则为减号 否则bai为加号
      newDate = new Date(newDate)
      // 如果月du份长度少于2，则前加 0 补位
      if ((newDate.getMonth() + 1).toString().length == 1) {
        monthString = 0 + '' + (newDate.getMonth() + 1).toString()
      } else {
        monthString = (newDate.getMonth() + 1).toString()
      }
      if (newDate.getDate().toString().length == 1) {
        dayString = 0 + '' + newDate.getDate().toString()
      } else {
        dayString = newDate.getDate().toString()
      }
      dateString = newDate.getFullYear() + '-' + monthString + '-' + dayString
      return dateString
    }

  }
}
</script>

<style>
 div.el-tabs__content{display:hidden;}
</style>
