<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import { registerRefreshCallback } from '@/composables/useRefresh'

import * as echarts from 'echarts';

const chart1Ref = ref<HTMLDivElement>()
const chart2Ref = ref<HTMLDivElement>()
const chart3Ref = ref<HTMLDivElement>()

onMounted(() => {
  if (chart1Ref.value && chart2Ref.value && chart3Ref.value) {
    const myChart1 = echarts.init(chart1Ref.value);
    const option1 = {
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value'
      },

      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 140, 210, 100, 80, 20],
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: '#83bff6'},
              {offset: 0.5, color: '#188df0'},
              {offset: 1, color: '#188df0'}
            ])
          },
        }
      ]
    };
    myChart1.setOption(option1);

    const myChart2 = echarts.init(chart2Ref.value);
    const option2 = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['50%', '60%'],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 1048, name: '人工费'},
            {value: 735, name: '材料费'},
            {value: 580, name: '其他'},
          ]
        }
      ]
    };
    myChart2.setOption(option2);


    const myChart3 = echarts.init(chart3Ref.value);
    const option3 = {
      series: [
        {
          type: 'gauge',
          progress: {
            show: true,
            width: 5
          },
          axisLine: {
            lineStyle: {
              width: 5
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 10,
            itemStyle: {
              borderWidth: 2
            }
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '70%']
          },
          data: [
            {
              value: 70
            }
          ]
        }
      ]
    };
    myChart3.setOption(option3);


    window.onresize = function () {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
    };
  }

})

const list = [
  {
    type: '财务审核',
    who: '张三',
    result: '成功',
    time: '2022-07-28 09:41:00',
    remark: '通过',
  },
  {
    type: '财务审核',
    who: '张三',
    result: '成功',
    time: '2022-07-28 09:41:00',
    remark: '通过',
  },
  {
    type: '财务审核',
    who: '张三',
    result: '成功',
    time: '2022-07-28 09:41:00',
    remark: '通过',
  },
  {
    type: '财务审核',
    who: '张三',
    result: '成功',
    time: '2022-07-28 09:41:00',
    remark: '通过',
  },
]
list.push(...list)
const logList = reactive(list);

const appoveList = reactive([
  {
    name: '张三',
    number: '001',
    department: '财务部门'
  },
  {
    name: '李四',
    number: '002',
    department: '财务部门'
  },
  {
    name: '王五',
    number: '003',
    department: '财务部门'
  },
  {
    name: '赵六',
    number: '004',
    department: '财务部门'
  }
])

// 顶部刷新按钮点击事件
registerRefreshCallback(() => {
  console.log('overview 顶部刷新按钮被点击了')
})

</script>

<template>
  <article class="overview-page">
    <el-row :gutter="24" class="first-row">
      <el-col :span="6">
        <el-card shadow="never">
          <img src="@/assets/icon1.svg" class="icon" alt="">
          <span class="number">21.2 k</span>
          <span class="index">指标1</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <img src="@/assets/icon2.svg" class="icon" alt="">
          <span class="number">1.6 k</span>
          <span class="index">指标2</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <img src="@/assets/icon3.svg" class="icon" alt="">
          <span class="number">826.0</span>
          <span class="index">指标3</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <img src="@/assets/icon4.svg" class="icon" alt="">
          <span class="number">28.8 %</span>
          <span class="index">指标4</span>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="second-row">
      <el-col :span="18">
        <el-card shadow="never" header="标题" class="card-chart1">
          <div class="chart1" ref="chart1Ref"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" header="费用占比" class="card-chart2">
          <div class="chart2" ref="chart2Ref"></div>
        </el-card>
        <el-card shadow="never" header="审批进度" class="card-chart3">
          <div class="chart3" ref="chart3Ref"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="never" header="审核流程">
      <el-steps :active="4" finish-status="success">
        <el-step title="申请" description="申请单位：某某单位"></el-step>
        <el-step title="审批1" description="审批人：张三"></el-step>
        <el-step title="审批2" description="审批人：李四"></el-step>
        <el-step title="审批3" description="审批人：王五"></el-step>
        <el-step title="审批4" description="审批人：赵六"></el-step>
        <el-step title="审批5" description="审批人：钱七"></el-step>
        <el-step title="审批6" description="审批人：孙八"></el-step>
        <el-step title="财务审批" description="审批人：周九"></el-step>
      </el-steps>
    </el-card>

    <el-card shadow="never" header="项目信息">
      <el-descriptions :column="4" size="small">
        <el-descriptions-item label="申请单位：">某某建筑公司</el-descriptions-item>
        <el-descriptions-item label="单位编号：">11111111</el-descriptions-item>
        <el-descriptions-item label="负责人：">张三</el-descriptions-item>
        <el-descriptions-item label="评估单位：">某某建筑公司</el-descriptions-item>
        <el-descriptions-item label="审批单位：">某某审批单位</el-descriptions-item>
        <el-descriptions-item label="工程类型：">某某类型</el-descriptions-item>
        <el-descriptions-item label="项目编号：">100000</el-descriptions-item>
        <el-descriptions-item label="项目规模：">100000</el-descriptions-item>
        <el-descriptions-item label="紧急程度：">
          <el-tag size="small" type="danger">紧急</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预计报价：">100000</el-descriptions-item>
        <el-descriptions-item label="工程时间：">2022-01-01 至 2023-12-31</el-descriptions-item>
        <el-descriptions-item label="工程周期：">2年</el-descriptions-item>
        <el-descriptions-item label="人员规模：">200</el-descriptions-item>
        <el-descriptions-item label="备注：">没有备注</el-descriptions-item>
        <el-descriptions-item label="状态：">
          <el-tag size="small">待审批</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前流程：">
          <el-tag size="small" type="success">某某步骤</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="工程地址：">
          珠海市香洲区某某街道某某路100号
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" header="审批人员">
      <!-- 列表 -->
      <el-table :data="appoveList">
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="number" label="工号"/>
        <el-table-column prop="department" label="所属部门"></el-table-column>
        <template #empty>
          <el-empty :image-size="120" description="暂无数据"/>
        </template>
      </el-table>
    </el-card>

    <el-card shadow="never" header="操作日志">
      <!-- 列表 -->
      <el-table :data="logList">
        <el-table-column prop="type" label="操作类型"/>
        <el-table-column prop="who" label="操作人"/>
        <el-table-column prop="result" label="执行结果">
          <template #default="scope">
            <el-tag effect="dark" type="success">
              {{ scope.row.result }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="操作时间"/>
        <el-table-column prop="remark" label="备注"/>
        <template #empty>
          <el-empty :image-size="120" description="暂无项目"/>
        </template>
      </el-table>
      <el-pagination background layout="total, prev, pager, next" :total="50"/>
    </el-card>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
