<template>
  <div id="project-check">
    <div class="side-area">
      <Title text="本月检查统计"></Title>
      <ShadowContainer>
        <div class="chart-container" id="current-chart">
          <div id="current-check-stats" ref="currentCheckStatsChart"></div>
        </div>
      </ShadowContainer>
      <Title text="检查事项隐患排行"></Title>
      <ShadowContainer>
        <div class="blackspot-table">
          <div class="warning-table-header">
            <div class="warning-table-index">排序</div>
            <div class="warning-table-point">检查事项</div>
            <div class="warning-table-count">隐患数量</div>
          </div>
          <div
            class="warning-table-list"
            v-infinite-scroll="load"
            :infinite-scroll-distance="1"
            id="table-scroll"
          >
            <div
              class="warning-table-column"
              v-for="(column, index) in blackspotRanking"
              :key="index"
            >
              <div class="warning-table-index">
                <img
                  :src="
                    index == 0
                      ? require('@/assets/projectcheck/rect-red.png')
                      : index == 1
                      ? require('@/assets/projectcheck/rect-orange.png')
                      : require('@/assets/projectcheck/rect-yellow.png')
                  "
                  alt=""
                />
                <span>{{ index + 1 }}</span>
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="column.check_item_name"
                placement="top"
              >
                <div class="warning-table-point">
                  {{ column.check_item_name }}
                </div>
              </el-tooltip>
              <div class="warning-table-count">
                {{ column.check_item_count }}
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="right-area">
      <Title text="月检测概况" type="long"></Title>
      <ShadowContainer>
        <div class="time-selector">
          <i class="el-icon-arrow-left" @click="getPrevMonth"></i>
          <span>{{ year }}年{{ month }}月</span>
          <i class="el-icon-arrow-right" @click="getNextMonth"></i>
        </div>
        <div class="chart-status">
          <div class="left-pie-charts">
            <div class="chart-angle">
              <div class="chart-title">项目自查</div>
              <div class="chart-container">
                <div id="project-check-chart" ref="projectCheck"></div>
              </div>
            </div>
            <div class="chart-angle">
              <div class="chart-title">企业检查</div>
              <div class="chart-container">
                <div id="enterprise-check" ref="enterpriseCheck"></div>
              </div>
            </div>
            <div class="chart-angle">
              <div class="chart-title">监督检测</div>
              <div class="chart-container">
                <div id="supervise-check" ref="superviseCheck"></div>
              </div>
            </div>
            <div class="chart-angle">
              <div class="chart-title">移动巡查</div>
              <div class="chart-container">
                <div id="move-check" ref="moveCheck"></div>
              </div>
            </div>
          </div>
          <div id="right-question-chart" ref="questionBarChart"></div>
        </div>
      </ShadowContainer>
      <Title text="整改记录" type="long"></Title>
      <ShadowContainer>
        <div class="record-table">
          <div class="warning-table-header">
            <div class="warning-table-no">检查单号</div>
            <div class="warning-table-check">检查部位/事项</div>
            <div class="warning-table-type">检查类别</div>
            <div class="warning-table-emergency">紧急程度</div>
            <div class="warning-table-person">检查人员</div>
            <div class="warning-table-time">发起时间</div>
            <div class="warning-table-limit">整改期限</div>
            <div class="warning-table-status">处理状态</div>
          </div>
          <div
            class="warning-table-list"
            v-infinite-scroll="loadCorrect"
            :infinite-scroll-distance="1"
          >
            <div
              class="warning-table-column"
              v-for="(column, index) in correctList"
              :key="index"
              @click="getCorrectDetail(column.id)"
            >
              <div class="warning-table-no">{{ column.check_no }}</div>
              <div class="warning-table-check">
                {{ column.check_part_name }}/{{ column.check_item_name }}
              </div>
              <div class="warning-table-type">{{ column.check_type_text }}</div>
              <div class="warning-table-emergency">{{ column.level_text }}</div>
              <div class="warning-table-person">
                {{ column.check_person_name }}
              </div>
              <div class="warning-table-time">{{ column.check_date }}</div>
              <div class="warning-table-limit">{{ column.rectify_date }}</div>
              <div :class="['warning-table-status', `status${column.status}`]">
                {{ column.status_text }}
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
      <CorrectDialog
        :visible="correctDialogVisible"
        :data="correctDetail"
        @changeVisible="(val) => (correctDialogVisible = val)"
      />
    </div>
  </div>
</template>
<script>
import {
  getCurrentMonthCheckStats,
  getBlackspotRankingList,
  getMonthCheckStatis,
  getCorrectRecords,
  getCorrectRecordDetail,
} from "@/api/index";
import CorrectDialog from "./CorrectDialog.vue";
export default {
  name: "ProjectCheck",
  components: { CorrectDialog },
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      blackspotRanking: [],
      currentMonthCheckData: [],
      blackSpotPage: 1,
      monthCheckData: {},
      recordList: [],
      correctList: [],
      correctPage: 1,
      correctDialogVisible: false,
      correctDetail: {},
    };
  },
  methods: {
    getPrevMonth() {
      if (this.month == 1) {
        this.month = 12;
        this.year = this.year - 1;
      } else {
        this.month = this.month - 1;
      }
      this.getMonthCheckStatis();
    },
    getNextMonth() {
      if (this.month == 12) {
        this.month = 1;
        this.year = this.year + 1;
      } else {
        this.month = this.month + 1;
      }
      this.getMonthCheckStatis();
    },
    renderCurrentMonthCheckChart() {
      const chartData = [...this.currentMonthCheckData];
      const chart = this.$echarts.init(this.$refs.currentCheckStatsChart);
      let total = 0;
      chartData.map((item) => {
        total += item.value;
      });
      const option = {
        title: {
          x: "27%", //X坐标
          y: "40%",
          text: total,
          subtext: "累计检查",
          textAlign: "center",
          textStyle: {
            //标题样式
            fontSize: 30,
            fontWeight: "bolder",
            color: "#00fcff",
          },
          subtextStyle: {
            //副标题样式
            fontSize: 16,
            fontWeight: "bolder",
            lineHeight: 24,
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          right: "10%",
          top: "30%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "inherit",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = chartData;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = [`{a|${name}}`, `{b|${target}}`];
            return arr.join("   ");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "60%"],
            center: ["28%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: chartData.map((item) => {
              return {
                ...item,
                itemStyle: {
                  color:
                    item.name == "无问题"
                      ? "#18D7B9"
                      : item.name == "待整改"
                      ? "#E39B36"
                      : item.name == "复查中"
                      ? "#5399F7"
                      : item.name == "已整改"
                      ? "#E25E80"
                      : "",
                },
              };
            }),
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("current-check-stats"));
      });
    },
    load() {
      if (this.blackspotRanking.length == 0) {
        getBlackspotRankingList({ page: 1 }).then((res) => {
          this.blackSpotPage = 1;
          this.blackspotRanking = res.data.data;
          this.$forceUpdate();
          this.$nextTick(() => {
            const element = document.getElementById("table-scroll");
            this.autoScroll(1, 50, 1500, element);
          });
        });
      }
    },
    loadCorrect() {
      if (this.correctList.length == this.correctPage * 10) {
        getCorrectRecords({
          page: this.correctPage + 1,
        }).then((res) => {
          this.correctPage += 1;
          this.correctList = [...this.correctList, ...res.data.data];
          this.$forceUpdate();
        });
      } else if (this.correctList.length == 0) {
        getCorrectRecords({ page: 1 }).then((res) => {
          this.correctPage = 1;
          this.correctList = res.data.data;
          this.$forceUpdate();
        });
      }
    },
    getMonthCheckStatis() {
      getMonthCheckStatis({
        month: `${this.year}-${
          this.month < 10 ? "0" + this.month : this.month
        }`,
      }).then((res) => {
        this.monthCheckData = res.data;
        this.renderSmallChart(
          "project-check-chart",
          "projectCheck",
          res.data.project_data,
          "#FEBA01"
        );
        this.renderSmallChart(
          "enterprise-check",
          "enterpriseCheck",
          res.data.company_data,
          "#FC6E03"
        );
        this.renderSmallChart(
          "supervise-check",
          "superviseCheck",
          res.data.supervise_data,
          "#E86365"
        );
        this.renderSmallChart(
          "move-check",
          "moveCheck",
          res.data.move_data,
          "#CD4091"
        );
        this.renderQuestionBarChart(res.data);
      });
    },
    renderSmallChart(id, ref, data, pColor) {
      const chartData = [...data];
      const chart = this.$echarts.init(this.$refs[`${ref}`]);
      let total = 0;
      chartData.map((item) => {
        total += item.value;
      });
      const option = {
        title: {
          x: "26%", //X坐标
          y: "30%",
          text: total,
          subtext: "检查量",
          textAlign: "center",
          textStyle: {
            //标题样式
            fontSize: 18,
            fontWeight: "bolder",
            color: "#00fcff",
          },
          subtextStyle: {
            //副标题样式
            fontSize: 13,
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          right: "15%",
          top: "28%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "inherit",
            rich: {
              a: {
                fontSize: 12,
                align: "left",
              },
              b: {
                fontSize: 14,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = chartData;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = [`{a|${name}}`, `{b|${target}}`];
            return arr.join("   ");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["65%", "75%"],
            center: ["28%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: chartData.map((item) => {
              return {
                ...item,
                itemStyle: {
                  color: item.name == "有隐患" ? pColor : "#18D7B9",
                },
              };
            }),
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById(`${id}`));
      });
    },
    renderQuestionBarChart(data) {
      const chart = this.$echarts.init(this.$refs.questionBarChart);
      const xAxisData = data.bar_chart_data.map((item) => {
        return item.name;
      });
      const series = data.bar_chart_data[0].data.map((item) => {
        return {
          name: item.name,
          type: "bar",
          data: data.bar_chart_data.map((iItem) => {
            return iItem.data.filter((filterItem) => {
              return filterItem.name == item.name;
            })[0].value;
          }),
          barWidth: 15,
          itemStyle: {
            color:
              item.name == "质量问题"
                ? "#B16400"
                : item.name == "安全问题"
                ? "#CF2C16"
                : "",
          },
        };
      });
      const option = {
        grid: {
          top: 80,
          bottom: 30,
          left: 50,
          right: 0,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          top: "5%",
          itemGap: 20,
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
          minInterval: 1,
        },
        series: series,
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById(`right-question-chart`));
      });
    },
    getCorrectDetail(id) {
      getCorrectRecordDetail(id).then((res) => {
        this.correctDetail = res.data;
        this.correctDialogVisible = true;
      });
    },
    autoScroll(stepLength, speed, delay, element) {
      let interval;
      //let step = 1
      element.scrollTop = 0;
      function start() {
        interval = setInterval(scrolling, speed);
        element.scrollTop += stepLength;
      }
      function scrolling() {
        var sTop = element.scrollTop;
        element.scrollTop += stepLength;
        if (
          sTop === element.scrollTop ||
          sTop == 0 ||
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          element.scrollTop = 0;
          clearInterval(interval);
          setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        setTimeout(start, delay);
      }
    },
  },
  mounted() {
    getCurrentMonthCheckStats().then((res) => {
      this.currentMonthCheckData = res.data;
      this.$nextTick(() => {
        this.renderCurrentMonthCheckChart();
      });
    });

    this.getMonthCheckStatis();
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#project-check {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  .side-area {
    width: 28%;
  }
  .right-area {
    width: calc(72% - 20px);
    margin-left: 0 20px;
  }
}
.time-selector {
  line-height: 40px;
  background: rgba(44, 96, 162, 0.2);
  display: flex;
  justify-content: space-between;
  color: #c6def9;
  font-size: 14px;
  i {
    line-height: 40px !important;
    font-size: 22px;
    padding: 0 12px;
    cursor: pointer;
  }
}
.chart-status {
  display: flex;
  margin-top: 12px;
  .left-pie-charts {
    width: calc(50% - 6px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .chart-angle {
      width: calc(50% - 6px);
    }
    .chart-container {
      width: 100%;
      height: 130px;
      background: linear-gradient(
        90deg,
        rgba(39, 172, 251, 0.05) 0%,
        rgba(39, 172, 251, 0) 50%,
        rgba(39, 172, 251, 0.05) 100%
      );
      margin-bottom: 12px;
      position: relative;
      div {
        width: 100%;
        height: 100%;
      }
      .custom-chart {
        position: absolute;
        width: 20%;
        left: 18%;
        transform: translateY(-50%);
        top: 50%;
      }
    }
  }
  #right-question-chart {
    width: calc(50% - 6px);
  }
}
.chart-title {
  line-height: 30px;
  text-align: center;
  background: linear-gradient(
    90deg,
    rgba(39, 172, 251, 0.4) 0%,
    rgba(39, 172, 251, 0.15) 50%,
    rgba(39, 172, 251, 0.4) 100%
  );

  font-size: 14px;
  color: #c6def9;
}
.blackspot-table {
  font-size: 14px;
  text-align: center;
  color: #c6def9;
  .warning-table-list {
    height: 280px;
    overflow: auto;
  }
  .warning-table-header {
    background: rgba(44, 96, 162, 0.2);
    display: flex;
    padding: 12px 0;
  }
  .warning-table-column {
    padding: 12px 0;
    background: rgba(44, 96, 162, 0.05);
    display: flex;
    &:nth-child(2n) {
      background: rgba(44, 96, 162, 0.1);
    }
  }
  .warning-table-index {
    width: 15%;
    position: relative;
    img {
      width: 40px;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  .warning-table-point {
    width: 65%;
  }
  .warning-table-count {
    width: 20%;
  }
}

.record-table {
  font-size: 14px;
  text-align: center;
  color: #c6def9;
  .warning-table-list {
    height: 280px;
    overflow: auto;
  }
  .warning-table-header {
    background: rgba(44, 96, 162, 0.2);
    display: flex;
    padding: 12px 0;
  }
  .warning-table-column {
    padding: 12px 0;
    background: rgba(44, 96, 162, 0.05);
    display: flex;
    &:nth-child(2n) {
      background: rgba(44, 96, 162, 0.1);
    }
    cursor: pointer;
  }
  .warning-table-no {
    width: 10%;
  }
  .warning-table-check {
    width: 30%;
  }
  .warning-table-type {
    width: 10%;
  }
  .warning-table-emergency {
    width: 10%;
  }
  .warning-table-person {
    width: 10%;
  }
  .warning-table-time {
    width: 10%;
  }
  .warning-table-limit {
    width: 10%;
  }
  .warning-table-status {
    width: 10%;
    &.status1 {
      color: #ff5a56;
    }
    &.status2 {
      color: #e39b36;
    }
    &.status3 {
      color: #b42de6;
    }
    &.status4 {
      color: #66cab9;
    }
  }
}
#current-chart {
  position: relative;
  .custom-chart {
    position: absolute;
    width: 32%;
    top: 50%;
    transform: translateY(-50%);
    left: 12%;
  }
  #current-check-stats {
    height: 396px;
  }
}
</style>