<template>
  <div class="view-statisticalAnalysisSafeguardSynthesize">
    <el-row>
      <el-col :span="12" style="margin-bottom: 15px">
        <Card title="历年任务">
          <template slot="content">
            <LTable ref="table" :defaultFetch="true" :columns="columns" :dataSource="tableData" :options="options" :fetch="fetchTableData" @handleRowClick="handleRowClick" class="tabl-box" />
          </template>
        </Card>
      </el-col>
      <el-col :span="12" style="margin-bottom: 15px">
        <Card title="任务基本信息">
          <template slot="content">
            <el-descriptions :column="2" class="desc-box">
              <el-descriptions-item label="任务名称">{{ row.taskName }}</el-descriptions-item>
              <el-descriptions-item label="任务时间">{{ row.taskTime }}</el-descriptions-item>
              <el-descriptions-item label="任务时长">{{ row.taskDuration }}</el-descriptions-item>
              <el-descriptions-item label="飞行环境">{{ row.env }}</el-descriptions-item>
              <el-descriptions-item label="任务类型">{{ row.taskType }}</el-descriptions-item>
              <el-descriptions-item label="任务飞机数量">{{ row.taskAircraftNum }}</el-descriptions-item>
              <el-descriptions-item label="任务地点" span="2">{{ row.taskSite }}</el-descriptions-item>
              <el-descriptions-item label="任务描述" span="2">{{ row.taskDescribe }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </Card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <Card :title="`${subName}经济指标分析-项`">
          <template slot="content">
            <el-select v-model="model1" style="margin: 10px" placeholder="请选择" @change="handleChange(1)">
              <el-option v-for="item in selectOptions" :key="item.avmatCatalogCode" :label="item.avmatCatalogName" :value="item.avmatCatalogCode"> </el-option>
            </el-select>
            <div class="baseBar-box">
              <div class="baseBar-box-half" ref="echartBottomLeft"></div>
              <div class="baseBar-box-half" ref="echartBottomLeftOther"></div>
            </div>
          </template>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card :title="`${subName}经济指标分析-件`">
          <template slot="content">
            <el-select v-model="model2" style="margin: 10px" placeholder="请选择" @change="handleChange(2)">
              <el-option v-for="item in selectOptions" :key="item.avmatCatalogCode" :label="item.avmatCatalogName" :value="item.avmatCatalogCode"> </el-option>
            </el-select>
            <div class="baseBar-box">
              <div class="baseBar-box-half" ref="echartBottomCenter"></div>
              <div class="baseBar-box-half" ref="echartBottomCenterOther"></div>
            </div>
          </template>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card :title="`${subName}经济指标分析-金额`">
          <template slot="content">
            <el-select v-model="model3" style="margin: 10px" placeholder="请选择" @change="handleChange(3)">
              <el-option v-for="item in selectOptions" :key="item.avmatCatalogCode" :label="item.avmatCatalogName" :value="item.avmatCatalogCode"> </el-option>
            </el-select>
            <div class="baseBar-box">
              <div class="baseBar-box-half" ref="echartBottomRight"></div>
              <div class="baseBar-box-half" ref="echartBottomRightOther"></div>
            </div>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getLastMission, getAviationList, getAviationProject, getAviationAmount, getAviationMoney } from '@/api/statisticalAnalysis/statisticalAnalysisSafeguardSynthesize'
import { leftOption, leftOtherOption } from './index'
import { columns, options } from './table.js'
import { deepClone } from '@/utils/index'

export default {
  name: 'statisticalAnalysisSafeguardSynthesize',
  components: {},
  data() {
    // 这里存放数据
    return {
      tableData: [],
      options,
      columns: columns(this),
      model1: '全部',
      model2: '全部',
      model3: '全部',
      modelName1: '全部',
      modelName2: '全部',
      modelName3: '全部',
      row: {},
      subName: '',
      taskId: '',
      selectOptions: [],

      leftOption,
      leftOtherOption
    }
  },
  mounted() {
    this.getTreeList()
  },
  methods: {
    initChart() {
      this.fetchTermChart()
      this.fetchPieceChart()
      this.fetchSumChart()
    },
    async fetchTableData() {
      const { data } = await getLastMission()
      this.tableData = data
      this.row = this.tableData[0]
      this.handleRowClick(this.tableData[0])
    },
    handleChange(type) {
      if (type == 1) {
        let index = this.selectOptions.findIndex((v) => {
          return v.avmatCatalogCode == this.model1
        })
        this.modelName1 = this.selectOptions[index].avmatCatalogName
        this.fetchTermChart()
      } else if (type == 2) {
        let index = this.selectOptions.findIndex((v) => {
          return v.avmatCatalogCode == this.model2
        })
        this.modelName2 = this.selectOptions[index].avmatCatalogName
        this.fetchPieceChart()
      } else {
        let index = this.selectOptions.findIndex((v) => {
          return v.avmatCatalogCode == this.model3
        })
        this.modelName3 = this.selectOptions[index].avmatCatalogName
        this.fetchSumChart()
      }
    },
    handleRowClick(row) {
      this.row = row
      this.model1 = '全部'
      this.model2 = '全部'
      this.model3 = '全部'
      this.subName = row.taskName
      this.taskId = row.taskId

      this.initChart()
    },
    async getTreeList() {
      const { data } = await getAviationList()
      this.selectOptions = data
      this.selectOptions.unshift({ avmatCatalogCode: '全部', avmatCatalogName: '全部' })
    },
    // 经济指标-项
    async fetchTermChart() {
      const echartBottomLeft = echarts.init(this.$refs.echartBottomLeft)
      const echartBottomLeftOther = echarts.init(this.$refs.echartBottomLeftOther)

      const { data } = await getAviationProject({ avmatCatalogCode: this.model1 == '全部' ? '' : this.model1, taskId: this.taskId })

      let options = deepClone(this.leftOption)
      options.title[1].subtext = data.missionAviationMaterials + '%'
      options.series[0].data = [
        { value: data.missionAviationMaterials, name: this.modelName1, itemStyle: { color: '#5470c6' } },
        { value: 100 - data.missionAviationMaterials, name: '', itemStyle: { color: '#AAA' } }
      ]
      let otherOptions = deepClone(this.leftOtherOption)
      otherOptions.title[1].subtext = data.onMissionAviationMaterials + '%'
      otherOptions.series[0].data = [
        { value: data.onMissionAviationMaterials, name: this.modelName1, itemStyle: { color: '#5470c6' } },
        { value: 100 - data.onMissionAviationMaterials, name: '', itemStyle: { color: '#AAA' } }
      ]
      echartBottomLeft.setOption(options)
      echartBottomLeftOther.setOption(otherOptions)
    },
    // 经济指标-件
    async fetchPieceChart() {
      const echartBottomCenter = echarts.init(this.$refs.echartBottomCenter)
      const echartBottomCenterOther = echarts.init(this.$refs.echartBottomCenterOther)

      const { data } = await getAviationAmount({ avmatCatalogCode: this.model2 == '全部' ? '' : this.model2, taskId: this.taskId })

      let options = deepClone(this.leftOption)
      options.title[1].subtext = data.missionAviationMaterials + '%'
      options.series[0].data = [
        { value: data.missionAviationMaterials, name: this.modelName2, itemStyle: { color: '#5470c6' } },
        { value: 100 - data.missionAviationMaterials, name: '', itemStyle: { color: '#AAA' } }
      ]
      let otherOptions = deepClone(this.leftOtherOption)
      otherOptions.title[1].subtext = data.onMissionAviationMaterials + '%'
      otherOptions.series[0].data = [
        { value: data.onMissionAviationMaterials, name: this.modelName2, itemStyle: { color: '#5470c6' } },
        { value: 100 - data.onMissionAviationMaterials, name: '', itemStyle: { color: '#AAA' } }
      ]
      echartBottomCenter.setOption(options)
      echartBottomCenterOther.setOption(otherOptions)
    },
    // 经济指标-金额
    async fetchSumChart() {
      const echartBottomRight = echarts.init(this.$refs.echartBottomRight)
      const echartBottomRightOther = echarts.init(this.$refs.echartBottomRightOther)

      const { data } = await getAviationMoney({ avmatCatalogCode: this.model3 == '全部' ? '' : this.model3, taskId: this.taskId })

      let options = deepClone(this.leftOption)
      options.title[1].subtext = data.missionAviationMaterials + '%'
      options.series[0].data = [
        { value: data.missionAviationMaterials, name: this.modelName3, itemStyle: { color: '#5470c6' } },
        { value: 100 - data.missionAviationMaterials, name: '', itemStyle: { color: '#AAA' } }
      ]
      let otherOptions = deepClone(this.leftOtherOption)
      otherOptions.title[1].subtext = data.onMissionAviationMaterials + '%'
      otherOptions.series[0].data = [
        { value: data.onMissionAviationMaterials, name: this.modelName3, itemStyle: { color: '#5470c6' } },
        { value: 100 - data.onMissionAviationMaterials, name: '', itemStyle: { color: '#AAA' } }
      ]
      echartBottomRight.setOption(options)
      echartBottomRightOther.setOption(otherOptions)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
