<template>
  <div class="app-container">
    <div class="top">
      <div class="top-item">
        <el-card class="card-box">
          <div class="title">
            <i class="el-icon-pie-chart icon-tip" />
            <span>数据总览</span>
          </div>
          <!-- 饼图 -->
          <div style="display: flex; justify-content: center">
            <div ref="chartRef" style="width: 490px; height: 270px"></div>
          </div>
          <div style="display: flex; justify-content: space-between; margin-top: 15px">
            <div class="left-tip">平台设备总数：{{ dataAll.totalSum }}</div>
            <div class="left-tip">装备总数：{{ dataAll.maNum }}</div>
            <div class="left-tip">工具总数：{{ dataAll.toolNum }}</div>
          </div>
        </el-card>
      </div>

      <!--  -->
      <div class="top-item">
        <el-card class="card-box">
          <div class="title">
            <i class="el-icon-bangzhu icon-tip" />
            <span>使用情况</span>
          </div>
          <div class="content">
            <div class="content-item" style="background: #f3fbf8">
              <div class="line" style="background: #79d1b8" />
              <div class="item-box">
                <div>在库数量</div>
                <div class="num">{{ useData.availableNum }}</div>
              </div>
            </div>
            <div class="content-item" style="background: #f2f6fe">
              <div class="line" style="background: #9dbefa" />
              <div class="item-box">
                <div>自用数量</div>
                <div class="num">{{ useData.inNum }}</div>
              </div>
            </div>
            <div class="content-item" style="background: #f3fbf8">
              <div class="line" style="background: #79d1b8" />
              <div class="item-box">
                <div>共享数量</div>
                <div class="num">{{ useData.shareNum }}</div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="content-item" style="background: #fdf1ea">
              <div class="line" style="background: #f2ab7f" />
              <div class="item-box">
                <div>维修数量</div>
                <div class="num">{{ useData.repairNum }}</div>
              </div>
            </div>
            <div class="content-item" style="background: #fbedeb">
              <div class="line" style="background: #e56d74" />
              <div class="item-box">
                <div>退役数量</div>
                <div class="num">{{ useData.scrapNum }}</div>
              </div>
            </div>
            <div style="flex: 1"></div>
          </div>
        </el-card>
      </div>

      <div class="top-item">
        <el-card class="card-box">
          <div class="title">
            <i class="el-icon-date icon-tip" />
            <span>实时事件</span>
          </div>
          <!-- 滚动列表 -->
          <div class="scroll-wrapper" ref="wrap" @mouseenter="pause" @mouseleave="resume">
            <ul class="scroll-list" ref="list">
              <li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
                <div style="display: flex; align-items: center; justify-content: space-between">
                  <div style="width: 65%">
                    <span>{{ index + 1 }}. </span>
                    <span>{{ item.deptAbbreviation }} </span>
                    <span>{{ item.applyUser }} </span>
                    <span>{{ item.businessName }}</span>
                  </div>
                  <div>{{ item.applyTime }}</div>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
    </div>

    <div class="bottom">
      <el-card class="card-box2">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px">
          <div class="title">
            <i class="el-icon-reading icon-tip" />
            <span>装备对比</span>
          </div>
          <div style="display: flex; justify-content: space-between; align-items: center">
            <el-button type="primary" size="mini" @click="handleActive">图表分析</el-button>
            <i class="el-icon-download icon-tip" style="margin-left: 10px; cursor: pointer" @click="handleExport" />
          </div>
        </div>

        <el-table
          v-if="activeTab"
          v-loading="isLoading"
          :data="tableList"
          highlight-current-row
          border
          stripe
          style="width: 100%"
        >
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column
            v-for="(column, index) in tableColumns"
            show-overflow-tooltip
            :key="index"
            :label="column.label"
            :prop="column.prop"
            align="center"
          >
          </el-table-column>
        </el-table>
        <!-- 柱状图 -->
        <div v-else ref="barRef" style="width: 100%; height: 340px; margin-top: 20px"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDeviceNumAll, getUseDeviceNum, getReal, getDeviceByDept } from '@/api/basic/home'

export default {
  name: 'ProvincialCompany',
  data() {
    return {
      isLoading: false,
      toolTotal: 60,
      equipTotal: 50,
      activeTab: true,
      dataAll: {
        maNum: 0,
        maPercent: 0,
        toolNum: 0,
        toolPercent: 0,
        totalSum: 0,
      },
      useData: {
        availableNum: 0,
        inNum: 0,
        repairNum: 0,
        scrapNum: 0,
        shareNum: 0,
      },
      eventList: [],
      timer: null,
      speed: 30,

      tableColumns: [
        { label: '公司名称', prop: 'companyName' },
        { label: '装备总数', prop: 'maNum' },
        { label: '装备总价值', prop: 'maCost' },
        { label: '工具总数', prop: 'toolNum' },
        { label: '编码工具总数', prop: 'toolCodeNum' },
        { label: '数量工具总数', prop: 'toolNoCodeNum' },
      ],
      tableList: [],
    }
  },
  mounted() {
    this.getDataAll()
    this.getUseData()
    this.getEventList()
    this.getList()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },

  methods: {
    async getDataAll() {
      try {
        const res = await getDeviceNumAll()
        this.dataAll = res.data
        this.initChart()
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    async getUseData() {
      try {
        const res = await getUseDeviceNum()
        this.useData = res.data
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    async getEventList() {
      try {
        const res = await getReal()
        this.eventList = res.data
        this.startScroll()
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    async getList() {
      try {
        const res = await getDeviceByDept()
        this.tableList = res.data
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    handleActive() {
      this.activeTab = !this.activeTab
      if (!this.activeTab) {
        this.$nextTick(() => {
          this.initBarChart()
        })
      }
    },
    startScroll() {
      const wrap = this.$refs.wrap

      this.timer = setInterval(() => {
        wrap.scrollTop++

        // 如果滚到底部，则跳回 0，实现无缝滚动
        if (wrap.scrollTop >= wrap.scrollHeight - wrap.clientHeight) {
          wrap.scrollTop = 0
        }
      }, this.speed)
    },

    pause() {
      clearInterval(this.timer)
    },

    resume() {
      this.startScroll()
    },
    handleExport() {
      this.download('material-mall/index/export', {}, `装备对比_${new Date().getTime()}.xlsx`)
    },
    initChart() {
      const chartDom = this.$refs.chartRef
      const chart = echarts.init(chartDom)

      const option = {
        legend: {
          orient: 'horizontal',
          bottom: 0,
          textStyle: {
            fontSize: 14,
          },
        },

        series: [
          {
            name: '数量',
            type: 'pie',
            radius: ['20%', '65%'],
            label: {
              show: true,
              position: 'outside',
              formatter: (params) => {
                return `{a|${params.percent}%}\n{b|${params.name}}`
              },
              rich: {
                a: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  lineHeight: 20,
                },
                b: {
                  fontSize: 12,
                  color: '#666',
                  lineHeight: 18,
                },
              },
            },
            data: [
              { value: this.dataAll.maNum, name: '装备总数' },
              { value: this.dataAll.toolNum, name: '工具总数' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
              },
            },
          },
        ],
      }

      chart.setOption(option)
    },
    initBarChart() {
      const barDom = this.$refs.barRef
      const barChart = echarts.init(barDom)

      const companyNames = this.tableList.map((item) => item.companyName)
      const equipTotals = this.tableList.map((item) => item.maNum)
      const toolTotals = this.tableList.map((item) => item.toolNum)

      const option = {
        tooltip: { trigger: 'axis' },

        legend: {
          top: 0,
          right: 20,
          data: ['装备总数', '工具总数'],
        },

        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },

        xAxis: {
          type: 'category',
          data: companyNames,

          axisLabel: {
            fontSize: 13,
            interval: 0, // 强制全部显示
            lineHeight: 16,
            formatter: function (name) {
              const maxLen = 3 // 每行6字符，可调整
              if (name.length <= maxLen) return name
              const rows = Math.ceil(name.length / maxLen)
              let res = ''
              for (let i = 0; i < rows; i++) {
                res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n'
              }
              return res
            },
          },
        },

        yAxis: {
          type: 'value',
          name: '数量（个）',
          nameTextStyle: { fontSize: 14 },
        },

        series: [
          {
            name: '装备总数',
            type: 'bar',
            barWidth: 35,
            barGap: '0%', // ← 两个柱子紧贴
            barCategoryGap: '0%', // ← 类目间无空隙
            itemStyle: {
              color: '#5470C6',
              borderRadius: [4, 4, 0, 0],
            },
            data: equipTotals,
          },
          {
            name: '工具总数',
            type: 'bar',
            barWidth: 35,
            barGap: '0%',
            barCategoryGap: '0%',
            itemStyle: {
              color: '#91CC75',
              borderRadius: [4, 4, 0, 0],
            },
            data: toolTotals,
          },
        ],
      }

      barChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #f2f2f2;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  .top-item {
    flex: 1;
  }
  .left-tip {
    font-size: 13px;
    background: #f5f5f5;
    padding: 3px 10px;
    border-radius: 5px;
    color: #75787d;
  }
}
.card-box {
  width: 100%;
  border-radius: 15px;
  height: 360px;
}
.card-box2 {
  width: 100%;
  border-radius: 15px;
  min-height: 430px;
}
.title {
  font-weight: 900;
}
.icon-tip {
  margin-right: 10px;
  font-weight: 900;
}
::v-deep .card-box {
  padding: 0 !important;
}

.content {
  width: 100%;
  margin-top: 20px;
  display: flex;
  gap: 20px;

  .content-item {
    flex: 1;
    border-radius: 8px;
    height: 90px;
    /* background: #f3fbf8; */
    display: flex;
    align-items: center;
    overflow: hidden;

    .line {
      width: 4px;
      height: 90px;
      /* background: #79d1b8; */
    }
    .item-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #75787d;
      font-size: 13px;
    }
    .num {
      margin-top: 10px;
      font-size: 20px;
      color: #333;
      font-weight: 800;
    }
  }
}

.scroll-wrapper {
  margin-top: 10px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.scroll-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.scroll-list li {
  padding: 8px 12px;
  font-size: 14px;
  transition: background 0.3s;
}

/* 隔行背景色 */
.scroll-list li.odd {
  background-color: #ebf8f3;
}
</style>
