<template>
  <div id="project-check">
    <div class="side-area">
      <Title text="本月检查统计"></Title>
      <ShadowContainer class="short-container">
        <div
          style="
            display: flex;
            height: 100%;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div style="display: flex">
            <div class="chart-container">
              <div id="current-check-stats" ref="currentCheckStatsChart"></div>
              <div class="title">
                <div class="main-title">
                  {{ monthCheckTotal }}
                </div>
                <div class="sub-title">累计检查</div>
              </div>
            </div>
            <div class="chart-legends">
              <div
                v-for="(legend, index) in currentMonthCheckData"
                :key="index"
                :style="{
                  color:
                    legend.name == '无问题'
                      ? '#18D7B9'
                      : legend.name == '待整改'
                      ? '#E39B36'
                      : legend.name == '复查中'
                      ? '#5399F7'
                      : legend.name == '已整改'
                      ? '#E25E80'
                      : '',
                }"
              >
                <span
                  class="rect"
                  :style="{
                    background:
                      legend.name == '无问题'
                        ? '#18D7B9'
                        : legend.name == '待整改'
                        ? '#E39B36'
                        : legend.name == '复查中'
                        ? '#5399F7'
                        : legend.name == '已整改'
                        ? '#E25E80'
                        : '',
                  }"
                ></span>
                {{ legend.name }} {{ legend.value }}
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
      <Title text="检查事项隐患排行"></Title>
      <ShadowContainer class="short-container">
        <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"
            @mouseenter="clearScroll"
            @mouseleave="reScroll"
          >
            <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 class="short-container">
        <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-background"
                style="
                  display: flex;
                  height: calc(100% - 30px);
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <div style="display: flex">
                  <div class="chart-small-container">
                    <div id="project-check-chart" ref="projectCheck"></div>
                    <div class="title">
                      <div class="main-title">
                        {{ projectTotal }}
                      </div>
                      <div class="sub-title">检查量</div>
                    </div>
                  </div>
                  <div class="chart-legends">
                    <div
                      v-for="(legend, index) in monthCheckData.project_data"
                      :key="index"
                      :style="{
                        color: legend.name == '有隐患' ? '#FEBA01' : '#18D7B9',
                      }"
                    >
                      <span
                        class="rect"
                        :style="{
                          background:
                            legend.name == '有隐患' ? '#FEBA01' : '#18D7B9',
                        }"
                      ></span>
                      {{ legend.name }} {{ legend.value }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart-angle">
              <div class="chart-title">企业检查</div>
              <div
                class="chart-background"
                style="
                  display: flex;
                  height: calc(100% - 30px);
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <div style="display: flex">
                  <div class="chart-small-container">
                    <div id="enterprise-check" ref="enterpriseCheck"></div>
                    <div class="title">
                      <div class="main-title">
                        {{ enterpriseTotal }}
                      </div>
                      <div class="sub-title">检查量</div>
                    </div>
                  </div>
                  <div class="chart-legends">
                    <div
                      v-for="(legend, index) in monthCheckData.company_data"
                      :key="index"
                      :style="{
                        color: legend.name == '有隐患' ? '#FC6E03' : '#18D7B9',
                      }"
                    >
                      <span
                        class="rect"
                        :style="{
                          background:
                            legend.name == '有隐患' ? '#FC6E03' : '#18D7B9',
                        }"
                      ></span>
                      {{ legend.name }} {{ legend.value }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart-angle">
              <div class="chart-title">监督检测</div>
              <div
                class="chart-background"
                style="
                  display: flex;
                  height: calc(100% - 30px);
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <div style="display: flex">
                  <div class="chart-small-container">
                    <div id="supervise-check" ref="superviseCheck"></div>
                    <div class="title">
                      <div class="main-title">
                        {{ superviceTotal }}
                      </div>
                      <div class="sub-title">检查量</div>
                    </div>
                  </div>
                  <div class="chart-legends">
                    <div
                      v-for="(legend, index) in monthCheckData.supervise_data"
                      :key="index"
                      :style="{
                        color: legend.name == '有隐患' ? '#E86365' : '#18D7B9',
                      }"
                    >
                      <span
                        class="rect"
                        :style="{
                          background:
                            legend.name == '有隐患' ? '#E86365' : '#18D7B9',
                        }"
                      ></span>
                      {{ legend.name }} {{ legend.value }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart-angle">
              <div class="chart-title">移动巡查</div>

              <div
                class="chart-background"
                style="
                  display: flex;
                  height: calc(100% - 30px);
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <div style="display: flex">
                  <div class="chart-small-container">
                    <div id="move-check" ref="moveCheck"></div>
                    <div class="title">
                      <div class="main-title">
                        {{ moveTotal }}
                      </div>
                      <div class="sub-title">检查量</div>
                    </div>
                  </div>
                  <div class="chart-legends">
                    <div
                      v-for="(legend, index) in monthCheckData.move_data"
                      :key="index"
                      :style="{
                        color: legend.name == '有隐患' ? '#CD4091' : '#18D7B9',
                      }"
                    >
                      <span
                        class="rect"
                        :style="{
                          background:
                            legend.name == '有隐患' ? '#CD4091' : '#18D7B9',
                        }"
                      ></span>
                      {{ legend.name }} {{ legend.value }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="right-question-chart" ref="questionBarChart"></div>
        </div>
      </ShadowContainer>
      <Title text="整改记录" type="long"></Title>
      <ShadowContainer class="short-container">
        <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: {
        project_data: [],
        company_data: [],
        supervise_data: [],
        move_data: [],
      },
      recordList: [],
      correctList: [],
      correctPage: 1,
      correctDialogVisible: false,
      correctDetail: {},
      monthCheckTotal: 0,
      projectTotal: 0,
      enterpriseTotal: 0,
      superviceTotal: 0,
      moveTotal: 0,
    };
  },
  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;
      });
      this.monthCheckTotal = total;
      const option = {
        tooltip: {
          appendToBody: true,
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: ["58%", "70%"],
            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) => {
        let projectTotal = 0;
        res.data.project_data.map((item) => {
          projectTotal += item.value;
        });
        this.projectTotal = projectTotal;

        let enterpriseTotal = 0;
        res.data.company_data.map((item) => {
          enterpriseTotal += item.value;
        });
        this.enterpriseTotal = enterpriseTotal;

        let superviceTotal = 0;
        res.data.supervise_data.map((item) => {
          superviceTotal += item.value;
        });
        this.superviceTotal = superviceTotal;

        let moveTotal = 0;
        res.data.move_data.map((item) => {
          moveTotal += item.value;
        });
        this.moveTotal = moveTotal;

        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 = {
        tooltip: {
          appendToBody: true,
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: ["58%", "70%"],
            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: {
          appendToBody: true,
          trigger: "axis",
        },
        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) {
      var that = this;

      function start() {
        that.interval1 = 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(that.interval1);
          that.timeout1 = setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        that.timeout1 = setTimeout(start, delay);
      }
    },
    clearScroll() {
      clearInterval(this.interval1);
      clearTimeout(this.timeout1);
    },
    reScroll() {
      this.$nextTick(() => {
        const element = document.getElementById("table-scroll");
        this.autoScroll(1, 50, 1500, element);
      });
    },
  },
  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;
  height: calc(100% - 12px);
  .side-area {
    width: 25%;
    min-width: 400px;
    height: 100%;
  }
  .right-area {
    width: 75%;
    margin-left: 12px;
    height: 100%;
  }
}
.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;
  height: calc(100% - 52px);
  .left-pie-charts {
    width: calc(50% - 6px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .chart-angle {
      width: calc(50% - 6px);
      height: calc(50% - 6px);
      #project-check-chart,
      #enterprise-check,
      #supervise-check,
      #move-check {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url("@/assets/chart.png") no-repeat;
        background-size: 50% 50%;
        background-position: center center;
      }
    }
  }
  #right-question-chart {
    width: calc(50% - 6px);
    height: 100%;
  }
}
.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;
}
.warning-table-list {
  height: calc(100% - 43.5px);
  overflow: auto;
}
.blackspot-table {
  font-size: 14px;
  text-align: center;
  color: #c6def9;
  height: 100%;

  .warning-table-header {
    background: rgba(44, 96, 162, 0.2);
    display: flex;
    padding: 12px 0;
    font-weight: bold;
  }
  .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);
    }
    &:hover {
      background: rgba(44, 96, 162, 0.5);
    }
  }
  .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;
  height: 100%;

  .warning-table-header {
    background: rgba(44, 96, 162, 0.2);
    display: flex;
    padding: 12px 0;
    font-weight: bold;
  }
  .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);
    }
    &:hover {
      background: rgba(44, 96, 162, 0.5);
    }
    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-check-stats {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url("@/assets/chart.png") no-repeat;
  background-size: 50% 50%;
  background-position: center center;
}

.short-container {
  height: calc(50% - 118px);
}

.chart-legends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 300px);
  & > div {
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
  }
  .rect {
    width: 8px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

.chart-container {
  position: relative;
  width: 300px;
  height: 300px;
  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    .main-title {
      font-size: 30px;
      font-weight: bold;
      color: #00fcff;
    }
    .sub-title {
      font-size: 16px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
.chart-small-container {
  position: relative;
  width: 120px;
  height: 120px;
  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    .main-title {
      font-size: 18px;
      font-weight: bold;
      color: #00fcff;
    }
    .sub-title {
      font-size: 12px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
.chart-background {
  background: linear-gradient(
    90deg,
    rgba(39, 172, 251, 0.05) 0%,
    rgba(39, 172, 251, 0) 50%,
    rgba(39, 172, 251, 0.05) 100%
  );
}
</style>