<!-- 风险台账-统计图表 -->
<template>
  <div>
    <a-space class="header-box">
      <div class="input-top">
        <div class="inputBox">
          <span class="title-box">{{ '库区名称' }}</span>
          <a-input class="select-box" style="width: 190px" v-model:value="informationData.orgName" placeholder="请输入" />
          <span class="title-box">{{ '市州' }}</span>
          <a-select class="select-box" v-model:value="informationData.zcdzCity" style="width: 190px" placeholder="请选择">
            <a-select-option v-for="item in auditStatus" :key="item.id" :value="item.id">
              {{ item.dictLabel }}
            </a-select-option>
          </a-select>
          <span class="title-box">{{ '日期' }}</span>
          <a-range-picker class="select-box" v-model:value="informationData.date" valueFormat="YYYY-MM-DD" />
        </div>
        <div class="btnBox">
          <a-button style="margin-right: 16px" @click="searchData">查询</a-button>
          <a-button style="margin-right: 16px" @click="reset">重置</a-button>
        </div>
      </div>
    </a-space>
    <!-- 各类事故类型 -->
    <div class="accident-content">
      <p class="accident-text">{{ '各类事故发生次数' }}</p>
      <div class="accident-box">
        <div class="accident-title" v-for="(i, index) in accidentTypeList" :key="i.type">
          <p class="accident-type">{{ i.label }}：</p>
          <p class="accident-data">{{ i.value }}</p>
        </div>
      </div>
      <p class="accident-text">{{ '各市州事故发生次数' }}</p>
      <!-- 事故发生次数 echarts图表 -->
      <div v-if="isShowData.length > 0" id="chart" class="echats-box"></div>
      <p v-else>{{ '暂无数据' }}</p>
    </div>
  </div>
</template>
<script setup>
import safetyProductionApi from '@/api/security.info/riskLedgerApi.js'
import * as echarts from 'echarts'
import { nextTick } from 'vue'

const informationData = ref({
  orgName: undefined,
  zcdzCity: undefined,
  date: []
})
const isShowData = ref([])
const accidentTypeList = ref([
  { label: '熏蒸事故', type: 1, value: 0 }, { label: '火灾事故', type: 2, value: 0 }, { label: '烘干事故', type: 3, value: 0 }, { label: '高空事故', type: 4, value: 0 },
  { label: '用电事故', type: 5, value: 0 }, { label: '车辆事故', type: 6, value: 0 }, { label: '吊装事故', type: 7, value: 0 }, { label: '水灾事故', type: 8, value: 0 }
])
const auditStatus = ref([])
// echarts柱状图实例
const draw = (list) => {
  const date = []
  const data = []
  list.forEach((d) => {
    date.push(d.zcdzName)
    data.push(d.numberOccurrence || 0)
  })
  const option = {
    tooltip: {
      trigger: 'axis', // 坐标轴触发
      axisPointer: { // 坐标轴指示器配置项
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: date
    },
    yAxis: {
      type: 'value',
      name: '事故次数',
      axisLabel: {
        // 使用 formatter 函数将刻度值格式化为整数
        formatter: function (value) {
          return Math.ceil(value); // 使用 Math.ceil 函数向上取整
        }
      },
      minInterval: 2, // 设置最小间隔为1
      nameTextStyle: {
        // color: 'red', // 标题颜色
        // fontSize: 16, // 字体大小
        // 其他样式设置
      },
    },
    series: [
      {
        data: data,
        type: 'bar',
        barWidth: '30' // 设置为类目宽度的50%
      }
    ]
  }
  // 使用刚刚创建的配置项来初始化你的 ECharts 实例
  echarts.init(document.getElementById('chart')).setOption(option)
}
// 市州下拉框数据
const getSearchData = () => {
  safetyProductionApi.recognizetParentId({ parentId: '1781535965870915586' }).then((res) => {
    auditStatus.value = res
  })
}

// 列表分页
const onSearch = () => {
  const [s, e] = informationData.value.date
  const fd = {
    orgName: informationData.value.orgName,
    zcdzCity: informationData.value.zcdzCity,
    occurrenceTimeStart: s,
    occurrenceTimeEnd: e,
  }
  safetyProductionApi.ssriskaccidentChart(fd).then((res) => {
    res.type.forEach(i => {
      accidentTypeList.value.forEach(e => {
        if (i.accidentType == e.type) {
          e.value = i.numberOccurrence
        }
      })
    })
    res.city.map(e => {
      return (
        isShowData.value.push(e.numberOccurrence)
      )
    })
    nextTick(() => {
      draw(res.city)
    })
  })
}
// 查询
const searchData = () => {
  onSearch()
}
// 重置
const reset = () => {
  informationData.value = {
    orgName: undefined,
    zcdzCity: undefined,
    date: []
  }
  onSearch()
}
onMounted(() => {
  onSearch(), getSearchData()
})
</script>
<style scoped>
.header-box {
  padding: 20px;
  width: 100%;
}

.input-top {
  display: flex;
}


.select-box {
  margin-left: 12px;
}

.title-box {
  margin-left: 20px;
  line-height: 30px;
}

.btnBox {
  width: 260px;
  margin-left: 20px;
  justify-content: start;
  display: flex;
}

.accident-content {
  background-color: #fff;
}

.accident-text {
  font-size: 16px;
  font-weight: 400;
  padding: 16px;
}

.accident-box {
  display: flex;
  width: 90%;
  padding-left: 6%;
  margin-bottom: 16px;
}

.accident-title {
  display: flex;
  width: 18%;
}

.ant-input-group-addon {
  border: 0;
}

.ant-input,
.ant-btn {
  border-radius: 5px;
}

.ant-pagination {
  margin-top: 12px;
  float: right;
  margin-right: 16px;
}

.echats-box {
  width: 98%;
  height: 400px
}

.add-btn {
  background-color: rgba(112, 125, 233);
}
</style>