<template>
  <div class="content-app">
    <div class="up">
      <SecurityCheckHeader
        title="航线货物关联统计"
        @change="change"
        :withExportButton="false"
        @search="search"
        mode="combobox"
        selectPlaceholder="目的地"
        :optionLists="destination"
      />
    </div>
    <div class="content_top">
      <div class="header">
        <p>不同综合风险等级货物对应不同航线比例</p>
      </div>
      <div id="echarts-proportion"></div>
    </div>
    <div class="content_bottom">
      <div class="header">
        <p>不同综合风险等级货物分布比例</p>
      </div>
      <div class="content_classification">
        <div class="chart">
          <GraphicEchart :texter="dataall" @echar="echar('总数')" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="datarisk" @echar="echar('高风险')" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="dataLowrisk" @echar="echar('低风险')" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="datafirst" @echar="echar('优先')" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="dataordinary" @echar="echar('普通')" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="datastrictly" @echar="echar('严控')" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { eleCake } from '@/utils/app-ecahrts'
import GraphicEchart from '../components/graphicHome.vue'
import SecurityCheckHeader from '../components/securityCheckHeader.vue'
import { agent, routeall } from '@/api/statistics/statistics.js'
export default {
  data() {
    return {
      multiple: 'multiple',
      queryData: {
        beginDate: '',
        endDate: '',
        places: [],
        proxyId: '',
      },
      queryDatacopy: {},
      destination: [],
      dataall: {
        id: 7,
        name: '总件数',
        cont: '20000',
        top: '35%',
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        data: [
          { value: 335, name: '1' },
          { value: 0, name: '2' },
        ],
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#E7EBF4', '#6161BD'],
      },
      datarisk: {
        id: 8,
        kaer: 1,
        formatter: '{c}%',
        name: '高风险',
        cont: '70%',
        top: '35%',
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#E7EBF4', '#EE50A6'],
      },
      dataLowrisk: {
        id: 9,
        formatter: '{c}%',
        kaer: 1,
        name: '低风险',
        cont: '70%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#E7EBF4', '#F3C742'],
      },
      datafirst: {
        id: 10,
        kaer: 1,
        formatter: '{c}%',
        name: '优先',
        cont: '10%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#E7EBF4', '#5AC591'],
      },
      dataordinary: {
        id: 11,
        kaer: 1,
        formatter: '{c}%',
        name: '普通',
        cont: '10%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#E7EBF4', '#70B4D4'],
      },
      datastrictly: {
        id: 12,
        kaer: 1,
        formatter: '{c}%',
        name: '严控',
        cont: '10%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        color: ['#E7EBF4', '#E64545'],
      },
    }
  },
  components: {
    GraphicEchart,
    SecurityCheckHeader,
  },
  created() {
    this.formatDate()
  },
  mounted() {
    if (Object.keys(this.$route.query).length !== 0) {
      const { beginDate, endDate, places, proxyId } = this.$route.query
      this.queryData.beginDate = beginDate
      this.queryData.endDate = endDate
      if (typeof places == 'string') {
        this.queryData.places = [places]
      } else {
        this.queryData.places = places
      }
      this.queryData.proxyId = proxyId
    }
    this.routdata()
    this.relationDate()
  },
  methods: {
    formatDate() {
      let date = new Date()
      let myyear = date.getFullYear()
      let mymonth = date.getMonth() + 1
      let myweekday = date.getDate()
      mymonth < 10 ? (mymonth = '0' + mymonth) : mymonth
      myweekday < 10 ? (myweekday = '0' + myweekday) : myweekday
      this.queryData.beginDate = `${myyear}-${mymonth}-${myweekday}`
      this.queryData.endDate = `${myyear}-${mymonth}-${myweekday}`
    },
    search(data) {
      if (typeof data[1] == 'string' && data[1] == '') {
        data[1] = []
      }
      if (typeof data[1] == 'string' && data[1] != '') {
        data[1] = [data[1]]
      }
      this.queryData = {
        beginDate: data[0][0],
        endDate: data[0][1],
        places: data[1],
        proxyId: data[2],
      }
      this.relationDate()
    },
    //点击跳转
    echar(data) {
      let params = {
        startTime: this.queryData.beginDate,
        endTime: this.queryData.endDate,
        destination: this.queryData.places,
        agentCode: this.queryData.proxyId,
        openResult: '',
        riskRating: data,
      }
      if (data == '总数') {
        params.riskRating = ''
      }
      this.$router.push({
        path: '/securityCheck/waybillTable',
        query: params,
      })
    },
    //货物关联统计接口
    async relationDate() {
      try {
        // console.log(params);
        const result = await agent(this.queryData)
        if (result.status == 200) {
          let arr = [] //高风险
          let Low = [] //低风险
          let firs = [] //优先级
          let pt = []
          let strictly = []
          let arrx = [] //x轴
          result.data.forEach((element) => {
            arrx.push(element.flightLine)
            element.datas.forEach((res) => {
              if (res.level === '高风险') {
                arr.push(res.count)
              } else if (res.level == '低风险') {
                Low.push(res.count)
              } else if (res.level == '优先') {
                firs.push(res.count)
              } else if (res.level == '普通') {
                pt.push(res.count)
              } else if (res.level == '严控') {
                strictly.push(res.count)
              }
            })
            // console.log(arr);
          })
          let arrall = eval(arr.join('+')) //高风险总和
          let Lowall = eval(Low.join('+')) //低风险级总和
          let firsall = eval(firs.join('+')) //优先级总和
          let ptall = eval(pt.join('+')) //普通级总和
          let strictlyall = eval(strictly.join('+')) //严控级总和
          let alldata = arrall + Lowall + firsall + ptall + strictlyall // 总数
          // arrx.forEach((element) => {
          //   let obj = {
          //     name: element,
          //     lable: element,
          //   };
          //   this.destination.push(obj);
          // });
          this.init(arr, arrx, Low, firs, pt, strictly)
          this.dataall.cont = alldata
          this.dataall.data = [
            {
              value: 0,
              name: '',
            },
            {
              value: alldata,
              name: '总数',
            },
          ]
          this.datarisk.cont = Math.floor((arrall / alldata).toFixed(2) * 100)
          this.datarisk.data = [
            {
              value: alldata,
              name: '总数',
            },
            {
              value: arrall,
              name: '高风险',
            },
          ]
          this.dataLowrisk.cont = Math.floor((Lowall / alldata).toFixed(2) * 100)
          this.dataLowrisk.data = [
            {
              value: alldata,
              name: '总数',
            },
            {
              value: Lowall,
              name: '低风险',
            },
          ]
          this.datafirst.cont = Math.floor((firsall / alldata).toFixed(2) * 100)
          this.datafirst.data = [
            {
              value: alldata,
              name: '总数',
            },
            {
              value: firsall,
              name: '优先',
            },
          ]
          this.dataordinary.cont = Math.floor((ptall / alldata).toFixed(2) * 100)
          this.dataordinary.data = [
            {
              value: alldata,
              name: '总数',
            },
            {
              value: ptall,
              name: '普通',
            },
          ]
          this.datastrictly.cont = Math.floor((strictlyall / alldata).toFixed(2) * 100)
          this.datastrictly.data = [
            {
              value: alldata,
              name: '总数',
            },
            {
              value: strictlyall,
              name: '严控',
            },
          ]
        }
      } catch (error) {
        console.log(error)
      }
    },
    async routdata() {
      try {
        const result = await routeall({})
        if (result.status == 200) {
          this.destination = []
          result.data.forEach((element) => {
            let obj = {
              name: element,
              lable: element,
            }
            this.destination.push(obj)
          })
          this.destination.sort(this.up)
        }
      } catch (error) {
        console.log(error)
      }
    },
    up(x, y) {
      return x.lable.charCodeAt(0) - y.lable.charCodeAt(0)
    },
    change() {
      let param = JSON.parse(JSON.stringify(this.queryData))
      param.places = param.places[0]
      this.$router.push({
        path: './cargoRelevanceTable',
        query: this.queryData,
      })
    },
    init(arr, arrx, Low, firs, pt, strictly) {
      let myChart = this.$echarts.init(document.getElementById('echarts-proportion')) //统计折线
      eleCake.series[0].data = arr
      eleCake.series[1].data = Low
      eleCake.series[2].data = firs
      eleCake.series[3].data = pt
      eleCake.series[4].data = strictly
      eleCake.xAxis.data = arrx
      myChart.clear()
      myChart.setOption(eleCake, true)
      window.onresize = () => {
        myChart.resize()
      }
      let that = this
      myChart.on('click', (a, b) => {
        let params = {
          startTime: that.queryData.beginDate,
          endTime: that.queryData.endDate,
          destination: '',
          agentCode: that.queryData.proxyId,
          openResult: '',
          riskRating: '',
        }
        params.riskRating = a.seriesName
        params.destination = a.name
        that.$router.push({
          path: '/securityCheck/waybillTable',
          query: params,
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: flex-start;
  > p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    margin: 0 0 24px 0;
  }
}
.content_top {
  width: 100%;
  height: 43vh;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 24px;
}
#echarts-proportion {
  width: 100%;
  height: 90%;
}
.content_bottom {
  width: 100%;
  height: 33vh;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 24px;
  > .content_classification {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
#echarts-distribution {
  width: 100%;
  height: 80%;
}
.chart {
  width: 16%;
  height: 200px;
}
</style>