<template>
  <div class="home">
    <div class="card_head_home">
      <div class="card_image_flex">
        <div style="display: flex;flex: none;height: 120px;">
          <el-image style="width: 286px;height: 120px;" :src="require('@/assets/images/transport.svg')"></el-image>
          <div class="home_content">
            <div class="title_content1">Logistics transportation system</div>
            <div class="title_content">物流运输 高效管理</div>
            <div class="title_content1">物流运输管理系统 冷链送药追溯平台</div>
          </div>
          <el-image style="width: 166px;height: 120px;" :src="require('@/assets/images/transport1.svg')"></el-image>
        </div>
        <div class="operationManual" @click="goTickets">
          <el-image style="width: 25px;height: 25px;" :src="require('@/assets/images/manual.png')"></el-image>
          <span>冷链送药追溯平台使用手册</span>
        </div>
      </div>
    </div>
    <div class="card_head_statistics">
      <div class="item_statistics">
        <span class="sum_title">今日总运单数</span>
        <span class="sum_num center_in">{{listData.todayNum || 0}}</span>
      </div>
      <div style="height: 4rem;">
        <el-divider direction="vertical"></el-divider>
      </div>
      <div class="item_statistics">
        <span class="sum_title">本月运单总数</span>
        <span class="sum_num icon_blue center_in">{{listData.thisMonthNum || 0}}</span>
      </div>
      <div style="height: 4rem;">
        <el-divider direction="vertical"></el-divider>
      </div>
      <div class="item_statistics">
        <span class="sum_title">本年运单总数</span>
        <span class="sum_num icon_blue center_in">{{listData.thisYearNum || 0}}</span>
      </div>
      <div style="height: 4rem;">
        <el-divider direction="vertical"></el-divider>
      </div>
      <div class="card_statistics">
        <div class="item_statistics" v-for="(item,index) in list" :key="index">
          <span class="title_hint" :style="{color:item.color,}">{{item.title}}</span>
          <span class="sum_num center_in">{{listData[`${item.field}`]  || 0}}</span>
        </div>
      </div>
    </div>
    <div style="display: flex;flex-direction: column;flex: 1;">
      <div class="card_head_statisticsil statistics_tendency" v-if="userName != 'admin'">
        <div class="card_time_select">
          <div style="display: flex;">
            <div :class="yearsType ? 'month_title' : 'year_title'" @click="switchover(true)">按月</div>
            <div :class="!yearsType ? 'month_title' : 'year_title'" @click="switchover(false)">按年</div>
          </div>
          <div v-show="yearsType">
            <el-date-picker v-model="timeValue" value-format="yyyy-MM" type="month" placeholder="选择月" size="small"
              :picker-options="setDisabled" @change="changeTime">
            </el-date-picker>
          </div>
          <div v-show="!yearsType">
            <el-date-picker v-model="timeValue1" value-format="yyyy" type="year" placeholder="选择年" size="small"
              :picker-options="setDisabled" @change="changeTime1">
            </el-date-picker>
          </div>
        </div>
        <div class="card_chart">
          <div id="pie1" class="chart"></div>
        </div>
      </div>
    </div>
    <div style="flex: 1;">
      <div class="card_head_statisticsil card_tendency"  v-if="userName != 'admin'">
        <!-- <div class="left_check" v-if="userList.type == 1">
            <div class="card_check" v-for="(item,index) in tableData" :key="index">
              <el-checkbox size="medium" v-model="item.checked"
                @change="(val)=>{valueChange(val,item)}">{{item.nickName}}</el-checkbox>
            </div>
          </div> -->
        <div class="tendency_chart_ial">
          <div class="space_between_in">
            <div class="card_radio">
              <div class="radio_title" :class="tabPosition == 'reCheck'? 'selected_check' : ''"
                @click="radioSelect(tabPosition)">复核人</div>
              <div class="radio_title" :class="tabPosition == 'delivery'? 'selectedil_check' : ''"
                @click="radioSelect(tabPosition)">配送员</div>
            </div>
            <!-- 时间 -->
            <div class="card_time_select">
              <div style="display: flex;">
                <div :class="yearsTypeil ? 'month_title' : 'year_title'" @click="switchoveril(true)">按月</div>
                <div :class="!yearsTypeil ? 'month_title' : 'year_title'" @click="switchoveril(false)">按年</div>
              </div>
              <div v-show="yearsTypeil">
                <el-date-picker v-model="timeValueil" value-format="yyyy-MM" type="month" placeholder="选择月" size="small"
                  :picker-options="setDisabled" @change="changeTimeil">
                </el-date-picker>
              </div>
              <div v-show="!yearsTypeil">
                <el-date-picker v-model="timeValueil1" value-format="yyyy" type="year" placeholder="选择年" size="small"
                  :picker-options="setDisabled" @change="changeTimeil1">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="card_chart">
            <div id="pie2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getUser
  } from '@/api/user'
  import {
    getWaybillHome,
    getUserStats
  } from '@/api/waybill'
  export default {
    name: 'HomeView',
    data() {
      return {
        setDisabled: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        list: [{
          color: '#409EFF',
          title: '已下单',
          field: 'waitDeliveryNum',
        }, {
          color: '#409EFF',
          title: '配送中',
          field: 'inDeliveryNum',
        }, {
          color: '#67C23A',
          title: '已签收',
          field: 'receiptNum',
        }, {
          color: '#F56C6C',
          title: '已拒收',
          field: 'rejectionNum',
        }],
        myChart: null,
        timeValue: '',
        timeValue1: '',
        yearsType: true,
        listData: {},
        textData: [],
        userName: '',
        userList: {},
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        tableData: [],
        Total: 0,
        tabPosition: 'reCheck',

        myChartil: null,
        timeValueil: '',
        timeValueil1: '',
        yearsTypeil: true,
      }
    },
    mounted() {
      const arr = localStorage.getItem('userList')
      const arr1 = JSON.parse(arr)
      this.userList = arr1
      if (arr1) {
        this.userName = arr1.username
      }

      function formatDate(date, type) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        const hours = ('0' + date.getHours()).slice(-2);
        const minutes = ('0' + date.getMinutes()).slice(-2);
        const seconds = ('0' + date.getSeconds()).slice(-2);
        if (type == 'month') {
          return `${year}-${month}`;
        } else if (type == 'year') {
          return `${year}`;
        }
      }
      const monthTime = formatDate(new Date(), 'month')
      const yearTime = formatDate(new Date(), 'year')
      this.timeValue = monthTime
      this.timeValue1 = yearTime
      this.timeValueil = monthTime
      this.timeValueil1 = yearTime
      this.getList()
      if (this.userName != 'admin') {
        this.resizeChart()
        this.getUserList()
      }
    },
    methods: {
      getList() {
        let params = {
          date: '',
          type: '',
        }
        if (this.yearsType) {
          params.date = this.timeValue
          params.type = 'month'
        } else {
          params.date = this.timeValue1
          params.type = 'year'
        }
        getWaybillHome(params).then(res => {
          if (res.code == 200) {
            this.listData = res.data
            const arr1 = []
            const arr2 = []
            if (res.data.stats) {
              let arrList = res.data.stats
              arrList.forEach(item => {
                arr1.push(item.date)
                arr2.push(item.num)
              })
            }
            this.textData[0] = arr1
            this.textData[1] = arr2
            if (this.userName != 'admin') {
              this.drawPie1()
            }
          }
        })
      },
      // 获取用户列表
      getUserList() {
        var params = {
          page: this.Pagination.PageIndex,
          pageSize: 9999,
          // pageSize: this.Pagination.PageSize,
        }
        getUser(params).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.tableData.forEach(item => {
              item.checked = false
            })
            this.Total = res.data.count
            this.getUserStatsList()
          }
        })
      },
      // 获取用户统计
      getUserStatsList() {
        let params = {
          date: '',
          type: '',
          userType: this.tabPosition,
          userIds: [],
        }
        if (this.yearsTypeil) {
          params.date = this.timeValueil
          params.type = 'month'
        } else {
          params.date = this.timeValueil1
          params.type = 'year'
        }
        getUserStats(params).then(res => {
          if (res.code == 200) {
            let arr = res.data
            let arr1 = []
            let nameList = []
            let dateList = []
            if (arr) {
              arr.forEach(item => {
                nameList.push(item.Name)
                let arr2 = {
                  name: item.Name,
                  type: 'line',
                  data: []
                }
                if (item.stats) {
                  item.stats.forEach(item1 => {
                    arr2.data.push(item1.num)
                  })
                  arr1.push(arr2)
                }
              })
              if (arr[0].stats) {
                arr[0].stats.forEach(item3 => {
                  dateList.push(item3.date)
                })
              }
            }
            this.drawPie2(nameList, dateList, arr1)
          }
        })
      },
      // 选择
      valueChange(value, event) {
        this.tableData.forEach(item => {
          if (item.id == event.id) {
            item.checked = value
          }
        })
        this.$forceUpdate()
      },
      // 选择配送人/复核人
      radioSelect(type) {
        if (type == 'reCheck') {
          this.tabPosition = 'delivery'
        } else {
          this.tabPosition = 'reCheck'
        }
        this.getUserStatsList()
      },
      // 选择月
      changeTime(value) {
        this.timeValue = value
        this.getList()
      },
      // 选择年
      changeTime1(value) {
        this.timeValue1 = value
        this.getList()
      },
      // 选择月
      changeTimeil(value) {
        this.timeValueil = value
        this.getUserStatsList()
      },
      // 选择年
      changeTimeil1(value) {
        this.timeValueil1 = value
        this.getUserStatsList()
      },
      resizeChart() {
        window.addEventListener("resize", () => {
          this.myChart.resize();
          this.myChartil.resize()
        });
      },
      // 运单统计
      switchover(value) {
        this.yearsType = value
        this.getList()
      },
      // 用户运单统计
      switchoveril(value) {
        this.yearsTypeil = value
        this.getUserStatsList()
      },
      drawPie1() {
        let that = this
        let showFlag = true
        if (that.textData && that.textData[0].length > 0) {
          showFlag = false
        } else if (!that.textData || that.textData[0].length == 0) {
          showFlag = true
        }
        that.myChart = that.$echarts.init(document.getElementById('pie1'))
        let option = {
          title: {
            show: showFlag,
            textstyle: {
              color: 'black',
              fontSize: 26,
            },
            text: '暂无数据',
            left: 'center',
            top: 'center',
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '3%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: that.textData[0],
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: that.textData[1],
            type: 'line',
            smooth: true,
            lineStyle: { //设置线条颜色
              normal: {
                color: '#409EFF' // 折线线条颜色:红色
              }
            },
            itemStyle: {
              color: '#409EFF', // 数据点颜色
            },
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "#409EFF", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(64,158,255,.5)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(64,158,255,.1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          }]
        };
        that.myChart.setOption(option);
      },
      // 用户运单统计
      drawPie2(nameList, dateList, arr1) {
        let that = this
        that.myChartil = that.$echarts.init(document.getElementById('pie2'))
        let option = {
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              var res = `${params[0].name} <br/>`
              for (const item of params) {
                if (item.value !== 0) {
                  res +=
                    `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} ：${item.value}<br/>`
                }
              }
              return res
            }
          },
          legend: {
            top: '4%',
            type: 'scroll',
            orient: 'vertical',
            left: 'left',
            data: nameList,
            selector: [{
              type: 'all',
              title: '全选'
            }, {
              type: 'inverse',
              title: '反选'
            }],
            selectorLabel: {
              color: '#000000',
              align: 'center',
              verticalAlign: 'middle',
              borderColor: '#DCDFE6',
              borderWidth: 1,
              padding: [5, 10, 5, 10],
            }
          },
          grid: {
            top: '10%',
            left: '10%',
            right: '2%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dateList
          },
          yAxis: {
            type: 'value'
          },
          series: arr1
        };
        that.myChartil.setOption(option);
      },
      // 使用手册
      goTickets() {
        window.open('https://kdocs.cn/l/ctKAOZ59Kdqn', "_blank")
      },
    }
  }
</script>
<style lang="scss" scoped>
  .home {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .card_head_home {
    position: relative;
    display: flex;
    background-color: #c8f4fa;
    border-radius: 5px;
    overflow: hidden;
    flex: none;
  }

  .operationManual {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
    flex: none;

    span {
      color: #909399;
      font-size: 16px;
      margin-left: 5px;
    }
  }

  .card_image_flex {
    display: flex;
    align-items: center;
    align-items: flex-end;
    justify-content: space-between;
    height: 140px;
    width: 100%;
  }

  .home_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0px 30px;
    flex: none;
  }

  .title_content {
    color: #2d4578;
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0px;
  }

  .title_content1 {
    color: #2d4578;
    font-size: 17px;
  }

  .card_head_statistics {
    display: flex;
    align-items: center;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    width: 100%;
    overflow: auto;
    flex: none;
  }

  .card_head_statisticsil {
    position: relative;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    width: calc(100% - 30px);
    flex: 1;
  }

  .statistics_tendency {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .card_tendency {
    display: flex;
    height: calc(100% - 45px);
  }

  .tendency_chart_ial {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .card_left_waybill {
    display: flex;
    flex-direction: column;
    height: 400px;
    flex: none;
    margin-right: 15px;
  }

  .card_right {
    display: flex;
    align-items: flex-end;
    width: 89%;
  }

  .card_statistics {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
  }

  .item_statistics {
    height: 90px;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 20px;
    padding-right: 10px;
  }

  .sum_title {
    font-size: 16px;
    color: #909399;
  }

  .sum_num {
    font-size: 30px;
  }

  .title_hint {
    font-size: 15px;
  }

  .el-divider--vertical {
    height: 100%;
    display: inline-block;
    width: 1px;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }

  .icon_blue {
    color: #67C23A;
  }

  .icon_red {
    color: #F56C6C;
  }

  .card_left {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .sum_item_title {
    text-align: left;
    font-size: 24px;
    margin: 5px;
  }

  .card_compare {
    display: flex;
    align-items: center;
  }

  .fs_13 {
    margin-left: 5px;
    font-size: 13px;
  }

  .card_time_select {
    /* position: absolute; */
    top: 20px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 20000;
  }

  .month_title {
    cursor: pointer;
    color: #67C23A;
    font-size: 15px;
    margin-right: 15px;
  }

  .year_title {
    cursor: pointer;
    font-size: 15px;
    margin-right: 15px;
  }

  .card_chart {
    display: flex;
    width: 100%;
    height: 100%;
  }

  #pie1 {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  #pie2 {
    width: 100%;
    height: 100%;
  }

  .card_check {
    margin-bottom: 6px;
  }

  .left_check {
    padding-right: 10px;
    border-right: 1px solid #DCDFE6;
  }

  .tendency_chart {
    margin-left: 10px;
    width: 100%;
  }

  .card_radio {
    display: flex;
    align-items: center;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .radio_title {
    cursor: pointer;
    font-size: 14px;
    flex: 1;
    padding: 6px 10px;
    color: #606266;
  }

  .selected_check {
    background-color: #409EFF;
    color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #409EFF;
  }

  .selectedil_check {
    background-color: #409EFF;
    color: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #409EFF;
  }
</style>
