<template>
  <div class="main-content">
    <div class="todo-and-card">
      <!-- 待办事项总览 -->
      <div class="todo-header">
        <span class="title">待办事项总览</span>
        <span class="tag normal">正常 <span class="color">{{ statusData.normal }}</span></span>
        <span class="tag overdue">超期 <span class="color">{{ statusData.overdue }}</span></span>
        <span class="tag soon-overdue">即将超期 <span class="color">{{ statusData.soonOverdue }}</span></span>
      </div>

      <!-- 统计卡片 -->
      <div class="card-group">
        <div class="stat-card" @click="goToTodoList('all')">
          <div class="icon">
            <svg-icon icon-class="d1" />
          </div>
          <div class="info">
            <div class="card-icon">我的待办</div>
            <div class="card-num">{{ cardData.myTodo }}</div>
          </div>
        </div>
        <div class="stat-card" @click="goToTodoList('abnormal')">
          <div class="icon">
            <svg-icon icon-class="d2" />
          </div>
          <div class="info">
            <div class="card-icon">经营异常(列入)</div>
            <div class="card-num">{{ cardData.abnormal }}</div>
          </div>
        </div>
        <div class="stat-card" @click="goToTodoList('illegal')">
          <div class="icon">
            <svg-icon icon-class="d3" />
          </div>
          <div class="info">
            <div class="card-icon">严重违法失信</div>
            <div class="card-num">{{ cardData.illegal }}</div>
          </div>
        </div>
        <div class="stat-card" @click="goToTodoList('repair')">
          <div class="icon">
            <svg-icon icon-class="d1" />
          </div>
          <div class="info">
            <div class="card-icon">信用修复</div>
            <div class="card-num">{{ cardData.creditRepair }}</div>
          </div>
        </div>
        <div class="stat-card" @click="goToTodoList('correct')">
          <div class="icon">
            <svg-icon icon-class="d2" />
          </div>
          <div class="info">
            <div class="card-icon">数据勘误</div>
            <div class="card-num">{{ cardData.dataCorrection }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-container">
      <!-- 柱状图 -->
      <div class="chart-item bar-chart">
        <div class="chart-title">各地区经营异常主体数量对比</div>
        <div id="barChart" class="chart-box" />
      </div>
      <!-- 环形图 -->
      <div class="chart-item pie-chart">
        <div class="chart-title">经营异常主体类型分布</div>
        <div id="pieChart" class="chart-box" />
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="userInfoDialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="520px"
    >
      <div class="user-info-dialog-tip">应局里的要求，系统需要采集用户的身份证号码与手机号码，请填写以下信息：</div>
      <div class="user-info-dialog-field">
        <span class="label">身份证号：</span>
        <el-input v-model.trim="userInfoForm.idCard" placeholder="请输入身份证号" />
      </div>
      <div class="user-info-dialog-field">
        <span class="label">手机号：</span>
        <el-input v-model.trim="userInfoForm.mobile" maxlength="11" placeholder="请输入手机号" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="userInfoSubmitting" @click="submitUserInfo">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import IDValidator from 'id-validator'
import { JSEncrypt } from 'jsencrypt'
import { taskUnionPageStatistic, indexPageStatistic } from '@/api/regulatoryPlatForm'
import { aiccsApiUsersappCheck, aiccsApiUsersappGetPublicKey, aiccsApiUsersappSetUserInfo } from '@/api/auto-basisapi'

export default {
  name: 'BusinessAbnormalDashboard',
  data() {
    return {
      barChart: null,
      pieChart: null,
      cardData: {
        myTodo: 0,
        abnormal: 0,
        illegal: 0,
        creditRepair: 0,
        dataCorrection: 0
      },
      statusData: {
        normal: 0,
        overdue: 0,
        soonOverdue: 0
      },
      userInfoDialogVisible: false,
      userInfoSubmitting: false,
      userInfoForm: {
        idCard: '',
        mobile: ''
      },
      userInfoPublicKey: ''
    }
  },
  mounted() {
    this.initBarChart()
    this.initPieChart()
    this.getCardData()
    this.getStatusData()
    this.checkAndCollectUserInfo()
    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', () => {
      this.barChart.resize()
      this.pieChart.resize()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.barChart.resize()
      this.pieChart.resize()
    })
  },
  methods: {
    // 初始化柱状图
    initBarChart() {
      const chartDom = document.getElementById('barChart')
      this.barChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            bottom: 5,
            height: 20,
            startValue: 0,
            endValue: 5
          }
        ],
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            rotate: 0,
            fontSize: 12,
            interval: 0,
            formatter: function(value) {
              // 每6个字符换行
              let result = ''
              for (let i = 0; i < value.length; i += 6) {
                result += value.substring(i, i + 6) + '\n'
              }
              return result.trim()
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数量（家）',
          nameTextStyle: { fontSize: 12 }
        },
        series: [
          {
            data: [],
            type: 'bar',
            itemStyle: {
              color: function(params) {
                const colors = ['#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a']
                return colors[params.dataIndex % colors.length]
              }
            }
          }
        ]
      }
      this.barChart.setOption(option)
    },
    // 初始化环形图
    initPieChart() {
      const chartDom = document.getElementById('pieChart')
      this.pieChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: { fontSize: 12 }
        },
        series: [
          {
            name: '主体类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [],
            color: ['#409eff', '#66b1ff', '#a0cfff']
          }
        ]
      }
      this.pieChart.setOption(option)
    },
    // 获取卡片数据
    async getCardData() {
      try {
        const userId = this.$store.state.user.keys
        const res = await taskUnionPageStatistic({
          customParamMap: {
            userId: userId,
            type: '',
            currentNodeOrBizStatus: ''
          }
        })
        if (res && res.data) {
          this.cardData.myTodo = res.data.allnum || 0
          this.cardData.abnormal = res.data.abnormalnum || 0
          this.cardData.illegal = res.data.illegalnum || 0
          this.cardData.creditRepair = res.data.repairnum || 0
          this.cardData.dataCorrection = res.data.correctnum || 0
        }
      } catch (error) {
        console.error('获取待办数据失败:', error)
      }
    },
    // 获取待办总览状态数据（正常、超期、即将超期）
    async getStatusData() {
      try {
        const userId = this.$store.state.user.keys
        const res = await indexPageStatistic({
          customParamMap: {
            userId: userId,
            type: '',
            currentNodeOrBizStatus: ''
          }
        })
        if (res && res.data) {
          // 更新状态数据
          const repairStatistic = res.data.repairStatistic || {}
          this.statusData.normal = repairStatistic.normalnum || 0
          this.statusData.overdue = repairStatistic.expirednum || 0
          this.statusData.soonOverdue = repairStatistic.aboutExpirenum || 0

          // 更新柱状图数据
          const abnEntLocStatistic = res.data.abnEntLocStatistic || []
          if (abnEntLocStatistic.length > 0) {
            const xAxisData = abnEntLocStatistic.map(item => item.orgName)
            const seriesData = abnEntLocStatistic.map(item => item.abnNum)
            this.updateBarChart(xAxisData, seriesData)
          }

          // 更新饼状图数据
          const entTypeStatistic = res.data.entTypeStatistic || {}
          const pieData = [
            { value: entTypeStatistic.enterpriseNum || 0, name: '企业' },
            { value: entTypeStatistic.individualNum || 0, name: '个体工商户' },
            { value: entTypeStatistic.coopNum || 0, name: '农民专业合作社' }
          ]
          this.updatePieChart(pieData)
        }
      } catch (error) {
        console.error('获取待办总览状态数据失败:', error)
      }
    },
    // 更新柱状图数据
    updateBarChart(xAxisData, seriesData) {
      const colors = ['#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a']
      this.barChart.setOption({
        xAxis: {
          data: xAxisData
        },
        series: [{
          data: seriesData,
          itemStyle: {
            color: function(params) {
              return colors[params.dataIndex % colors.length]
            }
          }
        }]
      })
    },
    // 更新饼状图数据
    updatePieChart(pieData) {
      this.pieChart.setOption({
        series: [{
          data: pieData
        }]
      })
    },
    hasUserInfoRecord(res) {
      const data = res && res.data
      if (typeof data === 'boolean') {
        return data
      }

      if (data && typeof data === 'object') {
        if (Object.prototype.hasOwnProperty.call(data, 'hasRecord')) {
          return Boolean(data.hasRecord)
        }
        if (Object.prototype.hasOwnProperty.call(data, 'recorded')) {
          return Boolean(data.recorded)
        }
        if (Object.prototype.hasOwnProperty.call(data, 'needCollect')) {
          return !data.needCollect
        }
        if (Object.prototype.hasOwnProperty.call(data, 'identityNo') || Object.prototype.hasOwnProperty.call(data, 'mobile')) {
          return Boolean(data.identityNo) && Boolean(data.mobile)
        }
      }

      return false
    },
    async checkAndCollectUserInfo() {
      try {
        const [checkRes, publicKeyRes] = await Promise.all([
          aiccsApiUsersappCheck(),
          aiccsApiUsersappGetPublicKey()
        ])
        if (!checkRes || checkRes.code !== 0) {
          this.userInfoDialogVisible = true
          return
        }
        this.userInfoPublicKey = (publicKeyRes && (publicKeyRes.data || publicKeyRes.msg || publicKeyRes.publicKey)) || ''
        this.userInfoDialogVisible = !this.hasUserInfoRecord(checkRes)
      } catch (error) {
        console.error('检查用户身份证和手机号失败:', error)
        this.userInfoDialogVisible = true
      }
    },
    validateUserInfoForm() {
      if (!this.userInfoForm.idCard) {
        this.$message.warning('请填写身份证号')
        return false
      }
      if (!this.userInfoForm.mobile) {
        this.$message.warning('请填写手机号')
        return false
      }

      const validator = new IDValidator()
      if (!validator.isValid(this.userInfoForm.idCard, 18)) {
        this.$message.warning('请输入合法的身份证号')
        return false
      }

      if (!/^1\d{10}$/.test(this.userInfoForm.mobile)) {
        this.$message.warning('请输入合法的手机号')
        return false
      }

      return true
    },
    async ensureUserInfoPublicKey() {
      if (this.userInfoPublicKey) {
        return true
      }

      try {
        const res = await aiccsApiUsersappGetPublicKey()
        this.userInfoPublicKey = (res && (res.data || res.msg || res.publicKey)) || ''
      } catch (error) {
        console.error('获取用户信息公钥失败:', error)
      }

      return Boolean(this.userInfoPublicKey)
    },
    async encryptWithPublicKey(value) {
      if (!this.userInfoPublicKey) {
        throw new Error('用户信息加密公钥为空')
      }

      const jse = new JSEncrypt()
      jse.setPublicKey(this.userInfoPublicKey)
      return jse.encrypt(String(value))
    },
    async submitUserInfo() {
      if (!this.validateUserInfoForm()) {
        return
      }

      this.userInfoSubmitting = true
      try {
        const hasPublicKey = await this.ensureUserInfoPublicKey()
        if (!hasPublicKey) {
          this.$message.warning('获取加密公钥失败，请稍后重试')
          return
        }

        const [identityNoEncrypted, mobileEncrypted] = await Promise.all([
          this.encryptWithPublicKey(this.userInfoForm.idCard),
          this.encryptWithPublicKey(this.userInfoForm.mobile)
        ])

        const res = await aiccsApiUsersappSetUserInfo({
          identityNoEncrypted,
          mobileEncrypted
        })

        if (res && res.code === 0) {
          this.$message.success('信息提交成功')
          this.userInfoDialogVisible = false
        } else {
          this.$message.warning((res && res.msg) || '信息提交失败')
        }
      } catch (error) {
        console.error('提交用户身份证和手机号失败:', error)
        this.$message.warning('信息提交失败')
      } finally {
        this.userInfoSubmitting = false
      }
    },
    // 跳转到我的待办对应 tab
    goToTodoList(activeName) {
      this.$router.push({
        path: '/toDoList',
        query: { activeName, activeNamet: Date.now() }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 右侧主内容
.main-content {
  flex: 1;
  padding: 0 20px 20px 20px;
  overflow-y: auto;
  height: calc(100vh - 84px);

  .todo-and-card{
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px #DDDDDD;
    padding: 16px 13px;
    margin-bottom: 20px;
    // 待办事项头部
    .todo-header {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      padding-left: 15px;

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        position: relative;
        margin-right: 94px;
        &::before{
          content: "";
          position: absolute;
          left: -8px;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 14px;
          border-radius: 1px;
          background: #3296FA;
        }
      }

      .tag {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 14px;
        .color{
          margin-left: 14px;
        }

        &.normal {
          .color{
            color: #409eff;
          }
        }

        &.overdue {
          .color{
            color: #f56c6c;
          }
        }

        &.soon-overdue {
          .color{
            color: #e6a23c;
          }
        }
      }
    }

    // 统计卡片组
    .card-group {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;

      .stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 35px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        .icon{
          background: #EBF5FF;
          border-radius: 65px;
          padding: 4px;
          border: 4px solid #FFFFFF;
          box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
          .svg-icon{
            width: 60px;
            height: 60px;
          }
        }
        .info{
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          .card-icon {
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
          }

          .card-num {
            font-size: 32px;
            font-weight: bold;
            color: #409eff;
          }
        }
      }
    }
  }

  // 图表容器
  .chart-container {
    display: flex;
    gap: 20px;
    height: 400px;

    .chart-item {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      &.bar-chart {
        flex: 3;
      }

      &.pie-chart {
        flex: 1;
      }

      .chart-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }

      .chart-box {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }

  .user-info-dialog-tip {
    margin-bottom: 18px;
    line-height: 22px;
    color: #333;
  }

  .user-info-dialog-field {
    display: flex;
    align-items: center;
    margin-bottom: 14px;

    .label {
      width: 80px;
      color: #333;
      flex-shrink: 0;
    }
  }
}
</style>
