<template>
  <sd-detail-form
    ref="form"
    v-sd-watermark="waterMark"
    page-id="ic/evaluation/plan/icEvaluationPlan"
    form-id="icEvaluationPlan"
    :record-id="this.$route.query.planId ? parseInt(this.$route.query.planId) : null"
    :class="$style.form"
    :read-only="true"
    @sdFormReady="sdFormReady"
  >
    <template v-slot="{ model, fields }">
      <div :class="[$style.charts, $style.mainDiv]">
        <div>
          <div :class="$style.content">
            <div>基本信息</div>
            <a-divider :class="$style.divider" />
            <div :class="$style.projectBrief">
              <div>
                <div :class="$style.infoDiv">
                  <span :class="$style.label"
                    >评价类型：<font>{{ fields.evaluationType.attr.displayValue }}</font></span
                  >
                  <span :class="$style.label"
                    >检查单位：<font>{{ model.inspectUnitName }}</font></span
                  >
                  <span :class="$style.label"
                    >被评价单位：<font>{{ model.evaluationUnitName }}</font></span
                  >
                </div>
                <div :class="$style.dateDiv">
                  <div :class="$style.steps + ' ' + $style.process">
                    <span>
                      <a-icon
                        type="sd-audit-overview-plan"
                        theme="filled"
                        :class="$style.icon + ' ' + $style.passed"
                      />
                    </span>
                    <span>
                      <span>评价区间：</span>
                      <span>{{ model.evaluationStartTime | sdDateFormat('YYYY-MM-DD') }}</span
                      >至<span>{{ model.evaluationEndTime | sdDateFormat('YYYY-MM-DD') }}</span>
                    </span>
                  </div>
                  <div :class="$style.steps + ' ' + $style.process">
                    <span>
                      <a-icon type="carry-out" :class="$style.icon + ' ' + $style.passed" />
                    </span>
                    <span>
                      <span>评价实施周期：</span>
                      <span>{{
                        model.evaluationImplementationStart | sdDateFormat('YYYY-MM-DD')
                      }}</span
                      >至<span>{{
                        model.evaluationImplementationEnd | sdDateFormat('YYYY-MM-DD')
                      }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div :class="$style.content + ' ' + $style.process">
            <div>底稿完成情况</div>
            <a-divider :class="$style.divider" />
            <template v-if="JSON.stringify(firstProcess.data) !== '{}'">
              <div :class="$style.radioDiv">
                <a-radio-group
                  v-model="firstProcess.selectVal"
                  :options="selectList"
                  @change="radioChange('first')"
                ></a-radio-group>
              </div>
              <div
                ><sd-echart
                  :key="firstKey"
                  :class="$style.echarts"
                  :options="firstProcess.chart"
                  autoresize
              /></div>
              <div>
                <span @click="firstClick('all')">
                  <span>{{ firstProcess.data.totalNum }} </span>
                  <br />
                  <span>总数 </span>
                </span>
                <span :class="$style['no-start']" @click="firstClick('0')">
                  <span>{{ firstProcess.data.noStartNum }} </span>
                  <br />
                  <span>起草中 </span>
                </span>
                <span :class="$style['going']" @click="firstClick('1')">
                  <span>{{ firstProcess.data.executingNum }} </span>
                  <br />
                  <span>审批中</span>
                </span>
                <span :class="$style['finished']" @click="firstClick('5')">
                  <span>{{ firstProcess.data.finishedNum }} </span>
                  <br />
                  <span>已完成</span>
                </span>
              </div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
              <div> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content">
            <div>底稿完成情况-按人员</div>
            <a-divider :class="$style.divider" />
            <div :class="$style.radioDiv">
              <a-radio-group
                v-model="secondProcess.selectVal"
                :options="selectList"
                @change="radioChange('second')"
              ></a-radio-group>
            </div>
            <template v-if="secondProcess.data.length > 0">
              <div
                ><sd-echart
                  ref="secondChart"
                  :key="secondKey"
                  :class="$style.secondEcharts"
                  :options="secondProcess.chart"
                  autoresize
                  @click="secondClick"
              /></div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content + ' ' + $style.find">
            <div>测试结果</div>
            <a-divider :class="$style.divider" />
            <div :class="$style.radioDiv">
              <a-radio-group
                v-model="threeProcess.selectVal"
                :options="selectList"
                @change="radioChange('three')"
              ></a-radio-group>
            </div>
            <template v-if="threeProcess.data.length > 0">
              <div>
                <sd-echart
                  :key="threeKey"
                  :class="[$style.echarts]"
                  :options="threeProcess.chart"
                  autoresize
                  @click="threeClick"
                />
              </div>
              <div :class="$style.resDiv">
                <span>
                  <span style="color:#dce0fa">有效：{{ threeProcess.data[0].validNums }} </span>
                </span>
                <span :class="$style['no-start']">
                  <span style="color:#73a0fa">无效：{{ threeProcess.data[0].invalidNums }} </span>
                </span>
                <span :class="$style['going']">
                  <span style="color:#c3c3c3">不适用：{{ threeProcess.data[0].notAppNums }} </span>
                </span>
              </div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
              <div></div>
            </template>
          </div>
        </div>

        <div>
          <div :class="$style.content">
            <div>测试缺陷</div>
            <a-divider :class="$style.divider" />
            <div :class="$style.radioDiv">
              <a-radio-group
                v-model="fourProcess.selectVal"
                :options="selectList"
                @change="radioChange('four')"
              ></a-radio-group>
            </div>
            <template v-if="fourProcess.data.length > 0">
              <div :class="$style.testDiv">
                <span
                  @click="
                    fourClick({
                      name: '设计缺陷',
                      seriesName: '',
                    })
                  "
                >
                  <span
                    >设计缺陷：<font>{{ fourProcess.data[0].nums1 }}个</font></span
                  >
                </span>
                <span
                  :class="$style['no-start']"
                  @click="
                    fourClick({
                      name: '执行缺陷',
                      seriesName: '',
                    })
                  "
                >
                  <span
                    >执行缺陷：<font>{{ fourProcess.data[0].nums2 }}个</font></span
                  >
                </span>
                <span
                  :class="$style['going']"
                  @click="
                    fourClick({
                      name: '设计及执行缺陷',
                      seriesName: '',
                    })
                  "
                >
                  <span
                    >设计及执行缺陷：<font>{{ fourProcess.data[0].nums3 }}个</font>
                  </span>
                </span>
                <span
                  @click="
                    fourClick({
                      name: '',
                      seriesName: '一般',
                    })
                  "
                >
                  <span
                    >一般：
                    <font style="color:#8ccf9e">{{ fourProcess.data[0].nums4 }}个</font></span
                  >
                </span>
                <span
                  :class="$style['no-start']"
                  @click="
                    fourClick({
                      name: '',
                      seriesName: '重要',
                    })
                  "
                >
                  <span
                    >重要：
                    <font style="color:#0e69c7">{{ fourProcess.data[0].nums5 }}个</font></span
                  >
                </span>
                <span
                  :class="$style['going']"
                  @click="
                    fourClick({
                      name: '',
                      seriesName: '重大',
                    })
                  "
                >
                  <span
                    >重大：
                    <font style="color:#f5222d">{{ fourProcess.data[0].nums6 }}个</font></span
                  >
                </span>
              </div>
              <div
                ><sd-echart
                  :key="fourKey"
                  :class="$style.fourEcharts"
                  :options="fourProcess.chart"
                  autoresize
                  @click="fourClick"
              /></div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
            </template>
          </div>
        </div>
      </div>
    </template>
  </sd-detail-form>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import systemManage from '@/system-manage/system-manage'
import iamIcEvaluationOverviewServices from './iam-ic-evaluation-overview-services'
import components from './_import-components/iam-ic-evaluation-overview-import'

export default {
  name: 'IamIcEvaluationOverview',
  metaInfo: {
    title: '评价概况',
  },
  components: {
    ...components,
  },
  data() {
    return {
      firstKey: 0,
      secondKey: 0,
      threeKey: 0,
      fourKey: 0,
      params: {},
      planInfo: {},
      selectList: [
        { label: '全部', value: 'all' },
        { label: '控制测试', value: 'control' },
        { label: '穿行测试', value: 'cross' },
      ],
      waterMark: systemManage.getFormWaterMark(),
      planId: '',
      currenStep: 0,
      avatars: {
        groupLeader: {
          src: '',
        },
        projectPrincipal: {
          src: '',
        },
      },
      steps: [],
      firstProcess: {
        selectVal: 'all',
        data: {},
        chart: {
          title: [
            {
              text: '95%',
              textStyle: {
                color: '#8675FF',
                fontSize: 40,
              },
              itemGap: 20,
              x: 'center',
              top: '50%',
            },
            {
              text: '完成率',
              textStyle: {
                color: '#444444',
                fontSize: 25,
                fontWeight: 'normal',
              },
              itemGap: 20,
              x: 'center',
              top: '40%',
            },
          ],

          angleAxis: {
            polarIndex: 0,
            min: 0,
            max: 100,
            show: false,
            boundaryGap: ['40%', '40%'],
            startAngle: 90,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: [{}],

          series: [
            {
              type: 'bar',
              z: 10,
              name: '完成度',
              data: [50],
              showBackground: false,
              backgroundStyle: {
                borderWidth: 10,
                width: 10,
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 20, // 大的占比环
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#8675FF',
                },
              },
            },
            {
              type: 'pie',
              name: '内层细圆环',
              radius: ['45%', '35%'],
              startAngle: 90,
              hoverAnimation: false,
              clockWise: true,
              silent: true,
              itemStyle: {
                normal: {
                  color: '#DCE0FA',
                  shadowBlur: 0,
                  shadowColor: '#66666a',
                },
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              data: [100],
            },
          ],
        },
      },
      secondProcess: {
        selectVal: 'all',
        data: { value: 1 },
        chart: {
          textStyle: { color: '#000' },
          color: ['#f7df1e', '#0e69c7', '#f5222d'],
          tooltip: {
            axisPointer: {
              type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: (val) => {
              return val.seriesName + '：' + val.value
            },
          },
          legend: {
            orient: 'vertical',
            right: 0,
            top: 0,
            itemGap: 30,
            itemWidth: 40,
            itemHeight: 20,
            textStyle: {
              fontSize: 15,
            },
          },
          grid: {
            left: '3%',
            right: '30%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: [],
            axisLabel: {
              formatter: (val) => {
                return val.split('$')[0]
              },
            },
          },
          series: [
            {
              name: '起草中',
              type: 'bar',
              stack: 'total',
              barWidth: 40,
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: [320, 302, 301, 334, 390, 330, 320],
            },
            {
              name: '审批中',
              type: 'bar',
              stack: 'total',
              barWidth: 40,
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: '已完成',
              type: 'bar',
              stack: 'total',
              barWidth: 40,
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: [220, 182, 191, 234, 290, 330, 310],
            },
          ],
        },
      },
      threeProcess: {
        selectVal: 'all',
        data: [],
        chart: {
          color: ['#dce0fa', '#73a0fa', '#c3c3c3'],
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              return params.name.split('#')[0]
            },
          },
          legend: {
            top: '5%',
            left: 'center',
            show: false,
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '55%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold',
                  formatter: (params) => {
                    return params.name.split('#')[1]
                  },
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 25, name: '25%' },
                { value: 24, name: '24%' },
                { value: 66, name: '66%' },
              ],
            },
          ],
        },
      },
      fourProcess: {
        selectVal: 'all',
        data: [],
        chart: {
          color: ['#8ccf9e', '#0e69c7', '#f5222d'],
          grid: {
            left: '3%',
            right: '20%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: ['设计缺陷', '执行缺陷', '设计及执行缺陷'],
            },
          ],
          yAxis: {
            show: true,
            minInterval: 1,
          },
          series: [],
        },
      },
    }
  },
  created() {
    const planId = this.$route.query.planId
    if (planId) {
      this.planId = planId
    }
  },
  mounted() {},
  methods: {
    sdFormReady() {
      const getFormData = setInterval(() => {
        if (this.$refs.form) {
          this.initData()
          clearInterval(getFormData)
        }
      }, 100)
    },
    // 第一个图表点击钻取
    firstClick(type) {
      const url = `/iam-ic-overview-list?dataType=${
        this.firstProcess.selectVal
      }&listType=first&params=${JSON.stringify(this.params)}${
        type === 'all' ? '' : '&endType=' + type
      }`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第二个图表点击钻取
    secondClick(params) {
      let type
      if (params.seriesName === '起草中') {
        type = '0'
      }
      if (params.seriesName === '审批中') {
        type = '1'
      }
      if (params.seriesName === '已完成') {
        type = '5'
      }
      const url = `/iam-ic-overview-list?dataType=${
        this.secondProcess.selectVal
      }&listType=second&params=${JSON.stringify(this.params)}&endType=${type}&userAccount=${
        params.name.split('$')[1]
      }`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第三个图表点击钻取
    threeClick(params) {
      let type
      if (params.name.indexOf('有效') !== -1) {
        type = 'valid'
      }
      if (params.name.indexOf('无效') !== -1) {
        type = 'invalid'
      }
      if (params.name.indexOf('不适用') !== -1) {
        type = 'notApplicable'
      }
      const url = `/iam-ic-overview-list?dataType=${
        this.threeProcess.selectVal
      }&listType=three&params=${JSON.stringify(this.params)}&testResult=${type}`
      crossWindowWatcher.waitForChanged(url)
    },
    // 第四个图表点击钻取
    fourClick(params) {
      // 缺陷类型
      let defectType = null
      if (params.name.indexOf('设计缺陷') !== -1) {
        defectType = 'designDefects'
      }
      if (params.name.indexOf('执行缺陷') !== -1) {
        defectType = 'executionDefects'
      }
      if (params.name.indexOf('设计及执行缺陷') !== -1) {
        defectType = 'designExecutionDefects'
      }
      // 缺陷级别
      let defectLevel = null
      if (params.seriesName.indexOf('一般') !== -1) {
        defectLevel = 'commonly'
      }
      if (params.seriesName.indexOf('重要') !== -1) {
        defectLevel = 'important'
      }
      if (params.seriesName.indexOf('重大') !== -1) {
        defectLevel = 'major'
      }
      const url = `/iam-ic-overview-list?dataType=${
        this.fourProcess.selectVal
      }&listType=four&params=${JSON.stringify(this.params)}${
        defectType === null ? '' : '&defectType=' + defectType
      }${defectLevel === null ? '' : '&defectLevel=' + defectLevel}`
      crossWindowWatcher.waitForChanged(url)
    },
    // 单选按钮变化时
    radioChange(type) {
      if (type === 'first') {
        this.getFirstData(this.params)
      }
      if (type === 'second') {
        this.getSecondData(this.params)
      }
      if (type === 'three') {
        this.getThreeData(this.params)
      }
      if (type === 'four') {
        this.getFourData(this.params)
      }
    },
    getStepName(stepId) {
      const steps = this.steps.filter((item) => {
        return item.id === stepId
      })
      if (steps.length !== 0) {
        return steps[0].name
      }
      return ''
    },
    getUserAvatar(account) {
      return iamIcEvaluationOverviewServices.getUserAvatar(account).then((res) => {
        return URL.createObjectURL(res.data)
      })
    },
    initData() {
      // 先获取计划信息
      this.planInfo = this.$refs.form.getBackendValues()
      // 获取底稿完成情况
      const params = {
        planId: parseFloat(this.planId),
        fieldName: this.firstProcess.selectVal + '',
      }
      this.params = params
      // 获取第一个图表
      this.getFirstData(this.params)
      // 获取第二个图表
      this.getSecondData(this.params)
      // 获取第三个图表
      this.getThreeData(this.params)
      // 获取第四个图表
      this.getFourData(this.params)
    },
    // 获取第一个图表
    getFirstData(params) {
      params.fieldName = this.firstProcess.selectVal
      if (params.fieldName === 'all') {
        Promise.all([
          //  控制
          iamIcEvaluationOverviewServices.getFirstProcess({ ...params, fieldName: 'control' }),
          // 穿行
          iamIcEvaluationOverviewServices.getFirstProcess({ ...params, fieldName: 'cross' }),
        ]).then((allRes) => {
          this.firstProcess.chart.series[0].data = [
            Math.round(allRes[0].data.data[0].TYPE5 + allRes[1].data.data[0].TYPE5),
          ]
          if (allRes[0].data.data[0].TYPES + allRes[1].data.data[0].TYPES === 0) {
            this.firstProcess.chart.title[0].text = '0%'
          } else {
            this.firstProcess.chart.title[0].text =
              Math.round(
                ((allRes[0].data.data[0].TYPE5 + allRes[1].data.data[0].TYPE5) /
                  (allRes[0].data.data[0].TYPES + allRes[1].data.data[0].TYPES)) *
                  100
              ) + '%'
          }
          this.firstProcess.chart.series[0].data = [
            Math.round(
              ((allRes[0].data.data[0].TYPE5 + allRes[1].data.data[0].TYPE5) /
                (allRes[0].data.data[0].TYPES + allRes[1].data.data[0].TYPES)) *
                100
            ),
          ]
          this.firstKey++
          this.firstProcess.data = {
            totalNum: allRes[0].data.data[0].TYPES + allRes[1].data.data[0].TYPES,
            noStartNum: allRes[0].data.data[0].TYPE0 + allRes[1].data.data[0].TYPE0,
            executingNum: allRes[0].data.data[0].TYPE1 + allRes[1].data.data[0].TYPE1,
            finishedNum: allRes[0].data.data[0].TYPE5 + allRes[1].data.data[0].TYPE5,
          }
        })
      } else {
        iamIcEvaluationOverviewServices.getFirstProcess(params).then((res) => {
          if (res.data) {
            this.firstProcess.chart.series[0].data = [Math.round(res.data.data[0].TYPE5)]
            if (res.data.data[0].TYPES === 0) {
              this.firstProcess.chart.title[0].text = '0%'
            } else {
              this.firstProcess.chart.title[0].text =
                Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100) + '%'
            }
            this.firstProcess.chart.series[0].data = [
              Math.round((res.data.data[0].TYPE5 / res.data.data[0].TYPES) * 100),
            ]
            this.firstKey++
            this.firstProcess.data = {
              totalNum: res.data.data[0].TYPES,
              noStartNum: res.data.data[0].TYPE0,
              executingNum: res.data.data[0].TYPE1,
              finishedNum: res.data.data[0].TYPE5,
            }
          }
        })
      }
    },
    // 获取第二个图表
    getSecondData(params) {
      params.fieldName = this.secondProcess.selectVal
      if (params.fieldName === 'all') {
        Promise.all([
          //  控制
          iamIcEvaluationOverviewServices.getSecondProcess({ ...params, fieldName: 'control' }),
          // 穿行
          iamIcEvaluationOverviewServices.getSecondProcess({ ...params, fieldName: 'cross' }),
        ]).then((allRes) => {
          this.secondProcess.data = []
          if ((allRes[0].data.data.length === 0) | (allRes[1].data.data.length === 0)) return
          this.secondProcess.data = allRes[0].data.data
          // y轴赋值
          let yAxisData = []
          const darftData = []
          const applyData = []
          const endData = []
          const allData = {}
          // 控制
          allRes[0].data.data.forEach((controlItem, controlIndex) => {
            const userName =
              (controlItem.TEST_USER_NAME === null ? '未分配' : controlItem.TEST_USER_NAME) +
              '$' +
              controlItem.TEST_USER_ACCOUNT
            yAxisData.push(userName)
            allData[userName] = {
              TYPE0: controlItem.TYPE0,
              TYPE1: controlItem.TYPE1,
              TYPE5: controlItem.TYPE5,
            }
          })
          // 穿行
          allRes[1].data.data.forEach((crossItem, crossIndex) => {
            const userName =
              (crossItem.TEST_USER_NAME === null ? '未分配' : crossItem.TEST_USER_NAME) +
              '$' +
              crossItem.TEST_USER_ACCOUNT
            if (yAxisData.indexOf(userName) === -1) {
              yAxisData.push(userName)
              allData[userName] = {
                TYPE0: crossItem.TYPE0,
                TYPE1: crossItem.TYPE1,
                TYPE5: crossItem.TYPE5,
              }
            } else {
              allData[userName].TYPE0 += +crossItem.TYPE0
              allData[userName].TYPE1 += +crossItem.TYPE1
              allData[userName].TYPE5 += +crossItem.TYPE5
            }
          })
          yAxisData = []
          for (const nameStr in allData) {
            yAxisData.push(nameStr)
            darftData.push(allData[nameStr].TYPE0 === 0 ? null : allData[nameStr].TYPE0)
            applyData.push(allData[nameStr].TYPE1 === 0 ? null : allData[nameStr].TYPE1)
            endData.push(allData[nameStr].TYPE5 === 0 ? null : allData[nameStr].TYPE5)
          }
          this.secondProcess.chart.yAxis.data = yAxisData
          // 实际数据赋值
          this.secondProcess.chart.series = [
            {
              name: '起草中',
              type: 'bar',
              stack: 'total',
              barWidth: 40,
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: darftData,
            },
            {
              name: '审批中',
              type: 'bar',
              stack: 'total',
              barWidth: 40,
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: applyData,
            },
            {
              name: '已完成',
              type: 'bar',
              stack: 'total',
              barWidth: 40,
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: endData,
            },
          ]
          this.secondKey++
        })
      } else {
        iamIcEvaluationOverviewServices.getSecondProcess(params).then((res) => {
          if (res.data) {
            this.secondProcess.data = []
            if (res.data.data.length === 0) return
            this.secondProcess.data = res.data.data
            // y轴赋值
            const yAxisData = []
            const darftData = []
            const applyData = []
            const endData = []
            res.data.data.forEach((item) => {
              yAxisData.push(
                (item.TEST_USER_NAME === null ? '未分配' : item.TEST_USER_NAME) +
                  '$' +
                  item.TEST_USER_ACCOUNT
              )
              darftData.push(item.TYPE0 === 0 ? null : item.TYPE0)
              applyData.push(item.TYPE1 === 0 ? null : item.TYPE1)
              endData.push(item.TYPE5 === 0 ? null : item.TYPE5)
            })
            this.secondProcess.chart.yAxis.data = yAxisData
            // 实际数据赋值
            this.secondProcess.chart.series = [
              {
                name: '起草中',
                type: 'bar',
                stack: 'total',
                barWidth: 40,
                label: {
                  show: true,
                },
                emphasis: {
                  focus: 'series',
                },
                data: darftData,
              },
              {
                name: '审批中',
                type: 'bar',
                stack: 'total',
                barWidth: 40,
                label: {
                  show: true,
                },
                emphasis: {
                  focus: 'series',
                },
                data: applyData,
              },
              {
                name: '已完成',
                type: 'bar',
                stack: 'total',
                barWidth: 40,
                label: {
                  show: true,
                },
                emphasis: {
                  focus: 'series',
                },
                data: endData,
              },
            ]
            this.secondKey++
          }
        })
      }
    },
    // 获取第三个图表
    getThreeData(params) {
      params.fieldName = this.threeProcess.selectVal
      iamIcEvaluationOverviewServices.getThreeProcess(params).then((res) => {
        if (res.data) {
          this.threeProcess.data = []
          // 数据为0则直接退出
          if (
            res.data.data.length === 0 ||
            (res.data.data[0]['有效'] === 0 &&
              res.data.data[0]['无效'] === 0 &&
              res.data.data[0]['不适用'] === 0)
          ) {
            return
          }
          this.threeProcess.data = [
            {
              validNums: res.data.data[0]['有效'],
              invalidNums: res.data.data[0]['无效'],
              notAppNums: res.data.data[0]['不适用'],
            },
          ]
          // 实际数据赋值
          let allnums =
            res.data.data[0]['有效'] + res.data.data[0]['无效'] + res.data.data[0]['不适用']
          if (allnums === 0) {
            allnums = 1
          }
          this.threeProcess.chart.series[0].data = [
            {
              value: res.data.data[0]['有效'],
              name: '有效#' + Math.round((res.data.data[0]['有效'] / allnums) * 100) + '%',
            },
            {
              value: res.data.data[0]['无效'],
              name: '无效#' + Math.round((res.data.data[0]['无效'] / allnums) * 100) + '%',
            },
            {
              value: res.data.data[0]['不适用'],
              name: '不适用#' + Math.round((res.data.data[0]['不适用'] / allnums) * 100) + '%',
            },
          ]
          this.threeKey++
        }
      })
    },
    // 获取第四个图表
    getFourData(params) {
      params.fieldName = this.fourProcess.selectVal
      iamIcEvaluationOverviewServices.getFourProcess(params).then((res) => {
        if (res.data) {
          this.fourProcess.data = []
          let dataNums = 0
          for (const key in res.data.data[0]) {
            dataNums += res.data.data[0][key]
          }
          if (dataNums === 0) return
          this.fourProcess.data = [
            {
              nums1: res.data.data[0].SJ1 + res.data.data[0].SJ2 + res.data.data[0].SJ3,
              nums2: res.data.data[0].ZX1 + res.data.data[0].ZX2 + res.data.data[0].ZX3,
              nums3: res.data.data[0].J1 + res.data.data[0].J2 + res.data.data[0].J3,
              nums4: res.data.data[0].SJ1 + res.data.data[0].ZX1 + res.data.data[0].J1,
              nums5: res.data.data[0].SJ2 + res.data.data[0].ZX2 + res.data.data[0].J2,
              nums6: res.data.data[0].SJ3 + res.data.data[0].ZX3 + res.data.data[0].J3,
            },
          ]
          this.fourProcess.chart.series = [
            {
              name: '一般',
              type: 'bar',
              barGap: 0,
              emphasis: {
                focus: 'series',
              },
              data: [res.data.data[0].SJ1, res.data.data[0].ZX1, res.data.data[0].J1],
            },
            {
              name: '重要',
              type: 'bar',
              emphasis: {
                focus: 'series',
              },
              data: [res.data.data[0].SJ2, res.data.data[0].ZX2, res.data.data[0].J2],
            },
            {
              name: '重大',
              type: 'bar',
              emphasis: {
                focus: 'series',
              },
              data: [res.data.data[0].SJ3, res.data.data[0].ZX3, res.data.data[0].J3],
            },
          ]
          this.fourKey++
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/webflow/sd-flow-form.scss';
.main-div {
  display: inline-block;
  background: #ededed;
}
.radio-div {
  position: absolute;
  margin: 0px 30px;
  top: 65px;
  z-index: 200;
}
:global(.title_sd-detail-form_common) {
  visibility: hidden;
}
.res-div {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0px 30%;
  font-size: 18px;
  font-weight: bold;
}
.four-echarts {
  width: 100%;
}
.test-div {
  position: absolute;
  right: 0;
  width: 100%;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  flex-direction: column;
  color: #000;
  align-items: flex-end;
  margin: 0 30px;
  z-index: 100;
  span {
    cursor: pointer;
  }
}
.form {
  // background-color: rgb(232, 232, 232);
  .title_sd-detail-form_common .buttons_sd-detail-form_common {
    display: none;
  }
  :global(.buttons_sd-detail-form_common) {
    visibility: hidden;
    display: none;
  }
}

.process > div:last-child {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0px 30%;
  & > span {
    display: inline-block;
    margin: 0 5px;
    color: #000;
    cursor: pointer;
    &.no-start {
      color: grey;
    }
    &.going {
      color: green;
    }
    &.finished {
      color: blue;
    }
  }
}
.find > div:last-child {
  position: absolute;

  span {
    display: inline-block;
    margin: 0 5px;
  }
}

.charts {
  padding: 10px 0 0 10px;
  .icon {
    position: relative;
    top: 20%;
    // margin-right: 10px;
    font-size: 25px;
    color: #e9e9e9;
  }

  .emptyecharts {
    width: 600px;
    height: 400px;
    margin: auto auto;
    text-align: center;
    &::after {
      display: block;
      padding-top: 150px;
      content: '无数据';
    }
  }

  & > div {
    float: left;
    width: 50%;
    padding: 0 10px 10px 0;
  }
  & > div:first-child {
    width: 100%;
    .content > div:first-child {
      margin-left: 0;
    }
    .content > div {
      margin-left: 20px;
      // height: 30px;
      & > span {
        margin-right: 50px;
      }
      &.projectBrief {
        position: relative;
        height: 140px;
        & > div {
          position: absolute;
        }
        .info-div {
          display: flex;
          justify-content: space-between;
          font {
            color: #000000;
          }
        }
        .date-div {
          display: flex;
          justify-content: space-evenly;
        }
        & > div:first-child {
          top: 10px;
          right: 150px;
          left: 150px;
          width: 50%;
          margin: auto;

          .user {
            display: block;
            float: left;
            margin: 10px 0;
            & > span {
              float: left;
              margin-right: 5px;
            }
            & > span > span {
              display: block;
              font-size: 14px;
              color: #1e1e1e;
            }
            & > span > span:last-child {
              font-size: 10px;
              color: #b8b9be;
            }
          }
        }

        .label {
          margin-left: 20px;
          color: #c0c0c6;
        }
        .label:first-child {
          margin-left: 0;
        }

        .steps.process {
          & > span:first-child {
            border-color: #6dcded;
          }
          .icon {
            color: #6dcded;
          }
        }
        .steps {
          position: relative;
          float: left;
          width: 260px;
          padding: 20px 10px;
          &::before {
            position: absolute;
            right: 5px;
            display: block;
            width: 1px;
            height: 56px;
            content: '';
            border: 1px solid rgb(246, 246, 246);
          }
          &:last-child::before {
            display: none;
          }
          & > span:first-child {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 0;
            margin-right: 10px;
            text-align: center;
            border: 2px solid #e9e9e9;
            border-radius: 50%;
          }
          & > span {
            display: inline-block;
            float: left;
            font-size: 14px;
            line-height: 25px;
            color: #1e1e1e;
            word-break: keep-all;
          }
          & > span > span:first-child {
            display: block;
            font-size: 14px;
            color: #c0c0c6;
          }
        }
      }

      &.divider {
        height: 1px;
        margin: 10px 0;
      }
    }
    .status {
      display: block;
      height: 100%;
      background-color: #54c5eb;
      border-radius: 10%;
      .icon {
        top: 20px;
        font-size: 100px;
        color: #76d1ef;
      }
      span {
        position: absolute;
        top: 60px;
        left: 40px;
        font-size: 18px;
        color: #fbfdfe;
      }
    }
  }
  .echarts {
    margin: auto auto;
  }
  .second-echarts {
    width: 100%;
    height: 400px;
  }
  .find-echarts {
    width: 100%;
  }
  .content {
    position: relative;
    padding: 10px;
    background-color: #fff;
    & > div:first-child {
      font-weight: bold;
    }
    & > div:first-child::before {
      display: inline-block;
      width: 3px;
      height: 0;
      // margin: 0 10px;
      vertical-align: bottom;
      content: '';
      background-color: #1890ff;
    }
  }

  .divider {
    margin: 10px 0;
  }
}
</style>
