<template>
  <div class="project-aivideo">
    <div class="screen-content">
      <el-row>
        <el-col :span="6">
          <module-one-1-1 label="预警概况" style="position: relative;">
            <div style="transform: scale(0.8);position: relative;top: -40px;left:-70px;">
              <project-overview-chart :key="'ai1' + overviewDay" :sp="''" txtTop="12" gifTop="8px"
                :maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay"
                :text="overviewTextDay" :height="180" :width="580" :fn="changeChart1"></project-overview-chart>

              <project-overview-chart :key="'ai2' + overview" :sp="''" txtTop="12" gifTop="8px"
                :maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
                :text="overviewText" :height="180" :width="580" :fn="changeChart1"></project-overview-chart>
            </div>
          </module-one-1-1>
          <module-one-2-1 label="预警排名" style="position: relative;">
            <div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
              <table class="tb-list1">
                <tr>
                  <th>排名</th>
                  <th>项目名称</th>
                  <th>预警数量</th>
                  <th>预警占比</th>
                </tr>
                <tr v-for="(it, idx) in orderList" :key="idx" class="tr-cmd" @click="doStandardDlg(it)">
                  <td>{{ it.ord }}</td>
                  <td>{{ it.projectName }}</td>
                  <td>{{ it.value }}</td>
                  <td>{{ it.percent.toFixed(2) }}%</td>
                </tr>
              </table>
            </div>

          </module-one-2-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">
                    <span>单位名称:</span>
                    <span>{{ it.deptName }}</span>
                  </div>
                  <div class="item-row">
                    <span>预警名称:</span>
                    <span>{{ it.alarmTypeName }}</span>
                  </div>
                  <div class="item-row">
                    <span>预警时间:</span>
                    <span style="color:rgba(1, 169, 255, 1)">{{ it.createTime }}</span>
                  </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"  style="text-align: center;margin-top: 20px;">
                <img src="images/nodata.png" style="width: 240px;">
                <div style="text-align: center;">暂无数据</div>
            </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="结束日期"></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" :class="selType==it.dictValue?'active':''" @click="doSelType(it.dictValue)" v-for="(it,idx) in aiTypes" :key="idx">{{ it.dictLabel }}</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">
                    <span>单位名称:</span>
                    <span>{{ it.deptName }}</span>
                  </div>
                  <div class="item-row">
                    <span>预警名称:</span>
                    <span>{{ it.alarmTypeName }}</span>
                  </div>
                  <div class="item-row">
                    <span>预警时间:</span>
                    <span style="color:rgba(1, 169, 255, 1)">{{ it.createTime }}</span>
                  </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"  style="text-align: center;margin-top: 100px;">
                <img src="images/nodata.png" style="width: 240px;">
                <div style="text-align: center;">暂无数据</div>
            </div>
            </div>
          </module-one-2-3>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import "../components/module/module-one-1-3";
import "../components/module/module-one-2-1";
import "../components/module/module-one-1-1";
import "../components/module/module-one-2-3";
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      //预警概况
      overview: 0,
      overviewDay: 0,
      overviewInterval: "",
      overviewTotal: 0,
      legendOpt1: {
        icon: "rect",
        padding: [0, 0, 0, 0],
        itemHeight: 10,
        textStyle: {
          fontSize: 9,
          color: "#c3dbfd",
          rich: {
            name: {
              color: "#c3dbfd",
              padding: [0, 0, 0, 0],
            },
            percent: {
              color: "#4676FD",
            },
          },
        },
      },
      overviewText: "累计预警",
      //预警概况
      typeDistributionData: [],
      overviewTextDay: "今日预警",
      overviewTotalDay: 0,
      legendOpt2: {
        icon: "rect",
        textStyle: {
          fontSize: 9,
          color: "#c3dbfd",
          rich: {
            name: {
              color: "#c3dbfd",
              padding: [0, 0, 0, 0],
            },
            percent: {
              color: "#f73647",
            },
          },
        },
      },
      typeDistributionDataDay: [],
      orderList: [],
      todayPage: {
        pageSize: 6,
        pageIndex: 1,
        total: 0
      },
      listPage:{
        pageSize: 12,
        pageIndex: 1,
        total: 0
      },
      todayList: [],
      todayKey:0,
      listDatas:[],
      listKey:0,
      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]);
                    }
                }]
            },
    };
  },
  beforeDestroy() {
  },
  mounted() {
    this.$api.dict("aibox_alarm_type").then((d) => {
      this.aiTypes=d||[];
    });
    let dt1=this.$dt((+new Date())-30*24*3600*1000);
        let dt2=this.$dt(new Date());
        this.selDate=[dt1,dt2];
    this.$bus.$on("projectChange", debounce((res) => {
      this.projectInfo = res;
      this.dept = this.$root.dept || this.dept || {};
      this.projectInfos = this.$root.projects || this.projectInfos || [];
      this.init();
    })
    );
    if (this.$root.hasInitHeader) {
      this.initMe();
    }
  },
  methods: {
    doSelType(n){
      if(this.selType!=n){
        this.selType=n;
        this.listPage.pageIndex=1;
        this.loadList();
      }
    },
    dtChange(init) {
      this.listPage.pageIndex=1;
      this.loadList();
    },
    changeChart1(opt) {
      opt.title.padding = [60, 0, 0, 145];
      return opt;
    },
    initMe() {
      this.projectInfo = this.$root.project;
      this.dept = this.$root.dept;
      this.projectInfos = this.$root.projects;
      this.init();
    },
    init() {
      this.getAiVideoAlertorTypeCount();
      this.groupCountByProject();
      this.todayPage.pageIndex=1;
      this.loadTodayList();
      this.listPage.pageIndex=1;
      this.selType=0;
      this.loadList();
    },
    handleTodayCurrentChange(n){
      this.todayPage.pageIndex=n;
      this.loadTodayList();
    },
    handleListCurrentChange(n){
      this.listPage.pageIndex=n;
      this.loadList();
    },
    loadList(){
      let postData = {
        projectDeptId: this.dept?.id || 0,
        projectId: this.projectInfo?.id,
        params: {
          beginTime:this.selDate[0],
          endTime:this.selDate[1]
        }
      };
      if (postData.projectDeptId == 0) {
        delete postData.projectDeptId
      }
      if (postData.projectId == 0) {
        delete postData.projectId
      }
      if(this.selType!=0){
        postData.alarmType=this.selType;
      }
      this.$api.aiBoxVideo.list(postData, this.listPage.pageIndex, this.listPage.pageSize).then(d => {
        this.listPage.total = d.total || 0;
        this.listDatas = d.rows || [];
        this.listKey++;        
      });
    },
    loadTodayList() {
      let postData = {
        projectDeptId: this.dept?.id || 0,
        projectId: this.projectInfo?.id,
        params: {
          date: new Date()
        }
      };
      if (postData.projectDeptId == 0) {
        delete postData.projectDeptId
      }
      if (postData.projectId == 0) {
        delete postData.projectId
      }
      this.$api.aiBoxVideo.list(postData, this.todayPage.pageIndex, this.todayPage.pageSize).then(d => {
        this.todayPage.total = d.total || 0;
        this.todayList = d.rows || [];
        this.todayKey++;
      });
    },
    groupCountByProject() {
      this.$api.aiBoxVideo
        //.groupCountByProject(this.dept?.id || 0, this.projectInfo?.id)
        .groupCountByProject( 0, null)
        .then((d) => {
          let sum = 0;
          let tmps = (d.data || []).map((it, idx) => {
            it.ord = idx + 1;
            it.percent = 0;
            sum += it.value;
            return it;
          });
          tmps.forEach(it => {
            it.percent = it.value * 100.0 / sum;
          })
          this.orderList = tmps;
        });
    },
    getAiVideoAlertorTypeCount() {

      //今日视图
      this.$api.aiBoxVideo
        .groupCountByAlarmType(this.dept?.id || 0, this.projectInfo?.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.aiBoxVideo
        .groupCountByAlarmType(this.dept?.id || 0, this.projectInfo?.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++;
          }
        });
    },
  },
};
</script>

<style lang="less">
.project-aivideo {
  .chart-overview-gif {
    top: 37px !important;
    left: 93px;
  }

  .tb-list1 {
    margin: 12px;
    width: calc(100% - 24px);
    border-collapse: collapse;
    border: solid 1px #ffffff52;

    th {
      font-size: 14px;
      border: solid 1px #ffffff52;
      line-height: 60px;
    }

    td {
      font-size: 12px;
      text-align: center;
      border: solid 1px #ffffff52;
      line-height: 40px;
    }
  }
  .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>
