<script name="finalInfo" setup>
import Accessory from '@/components/accessory/index.vue'
import { ref, onMounted, nextTick } from 'vue'
import NoData from '@/components/noData/index.vue'
import * as echarts from 'echarts'
const collapseModal = ['1', '2', '3', '4', '5', '6', '7']
const props = defineProps({
  detailData: Object,
  isShowApp: {
    type: Boolean,
    default: true
  }
})
const data = ref(),
  getInfo = async () => {
    data.value = {
      isCompletedLogCollection: props.detailData?.isCompletedLogCollection,
      actualPerformanceIndicators: props.detailData?.actualPerformanceIndicators && JSON.parse(props.detailData?.actualPerformanceIndicators) || [],
      finalAcceptanceMaterials: props.detailData.finalAcceptanceMaterials ? JSON.parse(props.detailData.finalAcceptanceMaterials) : undefined,
      finalIrsApps: props.detailData?.finalIrsApps
    }
  },
  // 材料表格
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '材料名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '是否有材料',
      key: 'isHave',
      slot: 'isHave',
      width: 100
    },
    {
      label: '附件/说明（支持扩展名：.doc .docx .pdf）',
      key: 'files',
      slot: 'files'
    }
  ],
  column1 = [
    {
      label: '核心业务',
      prop: 'businessName',
      key: 'businessName'
    },
    {
      label: '实际成效指标',
      prop: 'name',
      key: 'name'
    },
    {
      label: '数值',
      prop: 'nums',
      key: 'nums'
    },
    {
      label: '单位',
      prop: 'unit',
      key: 'unit'
    }
  ],
  // 应用
  applications = ref([
    {
      name: '应用1',
      status: '运行中',
      memoryRate: 11,
      cpuRate: 33,
      cpRate: 44
    },
    {
      name: '应用2',
      status: '运行中',
      memoryRate: 68,
      cpuRate: 43,
      cpRate: 30
    }
  ]),
  applicationData = ref({})
let chart1, chart2, chart3
const chart1Ref = ref(), chart2Ref = ref(), chart3Ref = ref(),
  getCirChartOptions = (precent, color, text) => {
    const colorList = [color, 'rgba(0, 0, 0, 0.1)']
    return {
      legend: {
        show: false
      },
      graphic: [
        {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: `${precent}%`,
            fill: '#333333', // 文字的颜色
            fontSize: 16,
            fontWeight: 'bold',
            fontFamily: 'DINAlternate-Bold, DINAlternate'
          }
        },
        {
          type: 'text',
          left: 'center',
          bottom: '0',
          style: {
            text: `${text}`,
            fill: '#333333', // 文字的颜色
            fontSize: 12
          }
        }
      ],
      series: [
        {
          type: 'pie',
          radius: ['58%', '75%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          data: [
            {
              value: precent
            },
            {
              value: 100 - precent
            }
          ],
          itemStyle: {
            color: function (params) {
              return colorList[params.dataIndex]
            }
          },
          labelLine: {
            show: false
          }
        }
      ]
    }
  },
  initChart1 = () => {
    if (!chart1) chart1 = echarts.init(chart1Ref.value)
    const option = getCirChartOptions(applicationData.value.memoryRate, '#5ADE92',
      '近三个月内存平均使用率')
    chart1.setOption(option)
  },
  initChart2 = () => {
    if (!chart2) chart2 = echarts.init(chart2Ref.value)
    const option = getCirChartOptions(applicationData.value.cpuRate, '#0967FD',
      '近三个月CPU平均使用率')
    chart2.setOption(option)
  },
  initChart3 = () => {
    if (!chart3) chart3 = echarts.init(chart3Ref.value)
    const option = getCirChartOptions(applicationData.value.cpRate, '#ffae00',
      '近三个月磁盘平均使用率')
    chart3.setOption(option)
  },
  getChart = () => {
    initChart1()
    initChart2()
    initChart3()
  },
  // 切换应用
  tabName = ref(0),
  changeApp = (index) => {
    tabName.value = index
    applicationData.value = applications.value[index]
    getChart()
  },
  changeModal = (val) => {
    console.log(val)
  }
onMounted(async () => {
  getInfo()
  applications.value = props?.detailData.projectApplications?.map((i, index) => {
    return {
      name: i.applicationName || i.relatedExistsApplication,
      status: '运行中',
      finalIrsApps: data.value.finalIrsApps[index]
    }
  }) || []
  applicationData.value = applications.value[0]
  await nextTick()
  // getChart()
})
</script>

<template>
  <el-collapse v-if="data" v-model="collapseModal" @change="changeModal">
    <el-collapse-item v-if="isShowApp&&applications?.length" name="1" class="mb-16">
      <template #title>
        <div class="collapse-title">关联的应用信息</div>
      </template>
      <div class="pb-24">
        <el-tabs v-model="tabName" tab-position="left" @tab-change="changeApp">
          <el-tab-pane
            v-for="(item,index) in applications"
            :key="index"
            :label="item.name"
            :name="index"
          />
          <div class="pl-24">
            <p class="font-semibold text-14 mb-16">应用状态：<span class="text-primary">{{ applicationData.status }}</span></p>
            <p class="font-semibold text-14">资源概览</p>
            <div class="p-16">
              <el-row class="mb-16">
                <el-col :span="12">
                  <p class="mb-8">云资源使用情况</p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="云资源实例使用数">
                      {{ applicationData?.finalIrsApps?.cloudResourceUsage.instancesNum }}
                    </el-descriptions-item>
                    <el-descriptions-item label="云资源产品">
                      暂无
                    </el-descriptions-item>
                    <el-descriptions-item label="云资源利用率">
                      {{ applicationData?.finalIrsApps?.cloudResourceUsage.utilizationRate }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12" class="mb-16">
                  <p class="mb-8">数据使用情况</p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="数据共享申请量">
                      {{ applicationData?.finalIrsApps?.dataUsage.sharedApplicationVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="数据共享使用量">
                      {{ applicationData?.finalIrsApps?.dataUsage.sharedUsage }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12" class="mb-16">
                  <p class="mb-31"></p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="协同接口调用量">
                      {{ applicationData?.finalIrsApps?.dataUsage.collaborativeInterfaceCallVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="数据共享调用量">
                      {{ applicationData?.finalIrsApps?.dataUsage.sharedInterfaceCallVolume }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12" class="mb-16">
                  <p class="mb-8">组件使用情况</p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="组件申请量">
                      {{ applicationData?.finalIrsApps?.componentUsage.applicationVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="组件调用量">
                      {{ applicationData?.finalIrsApps?.componentUsage.callVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="组件使用量">
                      {{ applicationData?.finalIrsApps?.componentUsage.useVolume }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12" class="mb-16">
                  <p class="mb-31"></p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="统一组件调用量">
                      {{ applicationData?.finalIrsApps?.componentUsage.unifyCallolVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="使用组件">
                      暂无
                    </el-descriptions-item>
                    <el-descriptions-item label="使用强制类组件">
                      暂无
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12" class="mb-16">
                  <p class="mb-8">产生数据</p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="产生数据量">
                      {{ applicationData?.finalIrsApps?.generateData.volume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="产生数据共享使用量">
                      {{ applicationData?.finalIrsApps?.generateData.sharedUseVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="数据接口被调用量">
                      {{ applicationData?.finalIrsApps?.generateData.dataInterfaceCallsVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="使用批量数据">
                      暂无
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12" class="mb-16">
                  <p class="mb-31"></p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="产生数据共享申请量">
                      {{ applicationData?.finalIrsApps?.generateData.sharedApplicationVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="产生数据审批通过率">
                      {{ applicationData?.finalIrsApps?.generateData.approvalPassRate }}
                    </el-descriptions-item>
                    <el-descriptions-item label="协同接口被调用量">
                      {{ applicationData?.finalIrsApps?.generateData.collaborativeInterfaceCallVolume }}
                    </el-descriptions-item>
                    <el-descriptions-item label="使用共享接口">
                      暂无
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="12">
                  <p class="mb-8">试运行报告</p>
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="试运行报告通过率">
                      {{ applicationData?.finalIrsApps?.operationReport.passRate }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
            </div>
            <template v-if="false">
              <p class="font-semibold text-14">云资源利用率</p>
              <el-row>
                <el-col :span="8">
                  <div ref="chart1Ref" style="height: 200px"></div>
                </el-col>
                <el-col :span="8">
                  <div ref="chart2Ref" style="height: 200px"></div>
                </el-col>
                <el-col :span="8">
                  <div ref="chart3Ref" style="height: 200px"></div>
                </el-col>
              </el-row>
            </template>
          </div>
        </el-tabs>
      </div>
    </el-collapse-item>
    <el-collapse-item name="7" class="mb-16">
      <template #title>
        <div class="collapse-title">实施信息</div>
      </template>
      <el-descriptions
        v-if="data?.actualPerformanceIndicators?.length"
        :column="2"
        border
        class="mb-8"
      >
        <el-descriptions-item label="是否完成日志数据归集" :span="2">
          {{ data.isCompletedLogCollection?'是':'否' }}
        </el-descriptions-item>
        <el-descriptions-item label="实际成效指标" :span="2">
          <table-list
            :pagination="false"
            style="width: 100%"
            :column="column1"
            :data="data.actualPerformanceIndicators"
            :empty-temp="false"
          />
        </el-descriptions-item>
      </el-descriptions>
      <no-data v-else />
    </el-collapse-item>
    <el-collapse-item
      v-for="(item,index) in data.finalAcceptanceMaterials"
      :key="item.title"
      :name="index+2+''"
      class="mb-16"
    >
      <template #title>
        <div class="collapse-title">{{ item.title }}</div>
      </template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="item.data"
        :pagination="false"
        :empty-temp="false"
      >
        <template #isHave="{scope}">
          <span>{{ scope.row.isHave?'是':'否' }}</span>
        </template>
        <template #files="{scope}">
          <template v-if="scope.row.isHave">
            <p v-for="(file,key) in scope.row.files" :key="key" class="mb-4">
              <accessory :file-name="file.name" :file-id="file?.response?.data?.id" />
            </p>
          </template>
          <template v-else>
            {{ scope.row.reason }}
          </template>
        </template>
      </table-list>
    </el-collapse-item>
  </el-collapse>
  <no-data v-else />
</template>
