<template>
  <div class="project-ai-warning main-page">
    <el-col :span="6">
      <module-one-1-1 label="今日预警" style="position: relative">
        <project-overview-chart
          :key="'ai1' + overviewDay"
          :sp="''"
          :maintitle="overviewTotalDay"
          :legend-opt="legendOpt1"
          :typedata="typeDistributionDataDay"
          :text="overviewTextDay"
          :height="230"
        ></project-overview-chart>
      </module-one-1-1>
      <module-one-1-1 label="预警概况">
        <project-overview-chart
          :key="'ai2' + overview"
          :sp="''"
          :maintitle="overviewTotal"
          :legend-opt="legendOpt2"
          :typedata="typeDistributionData"
          :text="overviewText"
          :height="230"
        ></project-overview-chart>
      </module-one-1-1>
      <module-one-1-1 label="每日预警趋势">
        <trend-chart-line :height="280" :data="warningData"></trend-chart-line>
      </module-one-1-1>
    </el-col>
    <el-col :span="18">
      <module-one-1-3 label="今日预警详情" :key="todayKey" style="position: relative">
        <div class="today-list ai-list" v-if="todayList.length > 0">
          <div v-for="(it, idx) in todayList" :key="idx" class="today-item ai-item">
            <div class="item-left">
              <el-image
                style="width: 180px; height: 100px"
                :src="it.imageUrl + '.min.jpg'"
                :preview-src-list="[it.imageUrl]"
              >
              </el-image>
            </div>
            <div class="item-right">
              <div class="item-row">
                <div>预警名称:</div>
                <div style="color: rgba(1, 169, 255, 1)">{{ it.alarmTypeName }}</div>
              </div>
              <div class="item-row">
                <div>预警时间:</div>
                <div style="color: rgba(1, 169, 255, 1)">{{ it.createTime }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          v-if="todayList.length > 0"
          layout="total,prev, pager, next"
          :hide-on-single-page="false"
          @current-change="handleTodayCurrentChange"
          :total="todayPage.total"
          :page-size="todayPage.pageSize"
          :current-page.sync="todayPage.pageIndex"
          class="bg-pagination"
        ></el-pagination>

        <div v-if="todayList.length == 0" class="not-data">暂无预警数据</div>
      </module-one-1-3>
      <module-one-2-3 label="预警概况明细" style="position: relative">
        <div style="position: absolute; right: 0px; top: 4px">
          <el-date-picker
            class="bg-date-picker"
            v-model="selDate"
            type="daterange"
            popper-class="bg-date-picker-pop"
            :editable="false"
            @change="dtChange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div class="ai-nav">
          <div
            class="nav-item ai-content-nav-con ai-content-nav"
            :class="selType == 0 ? 'active' : ''"
            @click="doSelType(0)"
          >
            全部
          </div>
          <div
            class="nav-item ai-content-nav-con ai-content-nav"
            v-for="(it, idx) in aiTypes"
            :class="selType == it.value ? 'active' : ''"
            @click="doSelType(it.value)"
            :key="it.value"
          >
            {{ it.label }}
          </div>
        </div>
        <div class="data-list">
          <div class="ai-list" v-if="listDatas.length > 0">
            <div v-for="(it, idx) in listDatas" :key="idx" class="today-item ai-item">
              <div class="item-left">
                <el-image
                  style="width: 180px; height: 100px"
                  :src="it.imageUrl + '.min.jpg'"
                  :preview-src-list="[it.imageUrl]"
                >
                </el-image>
              </div>
              <div class="item-right">
                <div class="item-row">
                  <div>预警名称:</div>
                  <div style="color: rgba(1, 169, 255, 1)">
                    {{ it.alarmTypeName }}
                  </div>
                </div>
                <div class="item-row">
                  <div>预警时间:</div>
                  <div style="color: rgba(1, 169, 255, 1)">{{ it.createTime }}</div>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            v-if="listDatas.length > 0"
            layout="total,prev, pager, next"
            :hide-on-single-page="false"
            @current-change="handleListCurrentChange"
            :total="listPage.total"
            :page-size="listPage.pageSize"
            :current-page.sync="listPage.pageIndex"
            class="bg-pagination"
          ></el-pagination>
          <div v-if="listDatas.length == 0" class="not-data">暂无预警数据</div>
        </div>
      </module-one-2-3>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      overview: 0,
      overviewDay: 0,
      overviewTotal: 0,
      legendOpt1: {
        icon: "rect",
        textStyle: {
          color: "#c3dbfd",
          fontSize: 15,
          rich: {
            name: {
              color: "#c3dbfd",
              padding: [0, 20, 0, 0],
            },
            percent: {
              color: "#4676FD",
            },
          },
        },
      },
      legendOpt2: {
        icon: "rect",
        textStyle: {
          color: "#c3dbfd",
          fontSize: 14,
          rich: {
            name: {
              color: "#c3dbfd",
              padding: [0, 20, 0, 0],
            },
            percent: {
              color: "#4676FD",
            },
          },
        },
      },
      overviewText: "累计预警",
      //预警概况
      typeDistributionData: [],
      overviewTextDay: "今日预警",
      overviewTotalDay: 0,
      typeDistributionDataDay: [],
      todayPage: {
        pageSize: 6,
        pageIndex: 1,
        total: 0,
      },
      listPage: {
        pageSize: 12,
        pageIndex: 1,
        total: 0,
      },
      todayList: [],
      todayKey: 0,
      listDatas: [],
      selDate: [],
      aiTypes: [],
      selType: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      intervalTimes: null,
      warningData:[]
    };
  },
  mounted() {
    this.$store.dispatch("ChangeNav", 310);
    this.$bus.$on("projectChange", (prj) => {
      this.selProject = prj;
      this.init();
    });
    this.selProject = this.$store.getters.selProject;
    this.init();
  },
  methods: {
    init() {
      if (!this.selProject) {
        return;
      }
      this.$api.dict("aibox_alarm_type").then((d) => {
        this.aiTypes = d || [];
      });
      this.loadList();
      this.loadTodayList();
      this.getAiVideoAlertorTypeCount();
      this.daysTrendView();
    },
    doSelType(n) {
      if (this.selType != n) {
        this.selType = n;
        this.listPage.pageIndex = 1;
        this.loadList();
      }
    },
    dtChange(init) {
      this.listPage.pageIndex = 1;
      this.loadList();
    },
    handleTodayCurrentChange(n) {
      this.todayPage.pageIndex = n;
      this.loadTodayList();
    },
    handleListCurrentChange(n) {
      this.listPage.pageIndex = n;
      this.loadList();
    },
    loadList() {
      let postData = {
        pageNum: this.listPage.pageIndex,
        pageSize: this.listPage.pageSize,
        projectId: this.selProject.id,
      };
      if(this.selDate.length>0){
        let _params = {
          beginTime: this.selDate[0],
          endTime: this.selDate[1]
        }
        postData.params = _params;
      }
      if (this.selType != 0) {
        postData.alarmType = this.selType;
      }
      this.$api.aiWarning
        .list(postData)
        .then((d) => {
          this.listPage.total = d.total || 0;
          this.listDatas = d.rows || [];
          this.listKey++;
        });
    },
    loadTodayList() {
      let postData = {
        pageNum: this.todayPage.pageIndex,
        pageSize: this.todayPage.pageSize,
        projectId: this.selProject.id,
        params: {
          date: new Date(),
        },
      };
      this.$api.aiWarning
        .list(postData)
        .then((d) => {
          this.todayPage.total = d.total || 0;
          this.todayList = d.rows || [];
          this.todayKey++;
        });
    },
    getAiVideoAlertorTypeCount() {
      //今日视图
      this.$api.aiWarning.groupCountByAlarmType(this.selProject.id, "Y").then((response) => {
        if (response.data) {
          let sum = 0;
          response.data.forEach((datum) => {
            sum += datum.value;
          });
          this.overviewTotalDay = sum;
          this.typeDistributionDataDay = response.data;
          this.overviewDay++;
        }
      });

      //累计视图
      this.$api.aiWarning.groupCountByAlarmType(this.selProject.id, "N").then((response) => {
        if (response.data) {
          let sum = 0;
          response.data.forEach((datum) => {
            sum += datum.value;
          });
          this.overviewTotal = sum;
          this.typeDistributionData = response.data;
          this.overview++;
        }
      });
    },
    daysTrendView(){
      this.$api.aiWarning.getDaysTrendView(this.selProject.id).then((response) => {
        if (response.data) {
          let _data1 = [];
          let _date8 = [];
          response.data.forEach((datum) => {
            _data1.push(datum.total);
            _date8.push(datum.dayStr);
          });
          let _lineData = [];
          _lineData.push(_data1);
          let _color = ['#0078e7'];
          let _legend = ['预警总数'];
          let _trendData = {'lineData':_lineData,'color':_color,'legend':_legend,'date':_date8};
          this.warningData = _trendData;
        }
      });
    },
    initIntervalTimes(){
      this.intervalTimes = setInterval(this.init, 150000); // 每2.5分钟刷新一次
    },
  },
};
</script>
<style lang="less" scope>
.project-ai-warning {
  .project-overview-chart{
    .chart-overview-gif{
      margin-left: -10px !important;
    }
  }
  .ai-list {
    padding: 0px 24px 8px;
    .ai-item {
      display: inline-flex;
      margin: 12px 12px 0px 0px;
      width: calc(33% - 12px);
      color: #ccc;
      line-height: 24px;
      .item-right {
        padding-left: 12px;
      }
    }
  }
  .data-list {
    .ai-list {
      .ai-item {
        margin-bottom: 8px;
      }
    }
  }
  .ai-nav {
    padding: 12px;
    .nav-item {
      display: inline-block;
      margin-left: 12px;
      text-align: center;
      padding: 0px 8px;
      &:first-child {
        margin-left: 0px;
      }
    }
  }
}
</style>