<template>
  <div class="realTimeSearchTotal">
    <div class="searchMain">
      <div class="searchBox" ref="searchref">
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <el-form-item label="电压等级">
            <el-select v-model="formdata.dyid" @change="getSearchxl">
              <el-option
                v-for="item in dyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线路名称">
            <el-select
              v-model="formdata.lineid"
              @change="getSearchgt"
              filterable
            >
              <el-option
                v-for="item in xlOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="杆塔名称">
            <el-select
              v-model="formdata.towerid"
              @change="getSearchzz"
              filterable
            >
              <el-option
                v-for="item in gtOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="装置名称">
            <el-select
              v-model="formdata.termid"
              @change="getSearchtd"
              filterable
            >
              <el-option
                v-for="item in zzOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通道">
            <el-select v-model="formdata.channelid">
              <el-option
                v-for="item in tdOptions"
                :key="item.id"
                :label="
                  item.alias !== null && item.alias !== ''
                    ? item.alias
                    : item.name
                "
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="formdata.starttime"
              type="datetime"
              placeholder="开始日期"
              value-format="timestamp"
              :picker-options="pickerOptions"
              default-time="00:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="formdata.endtime"
              type="datetime"
              default-time="23:59:59"
              placeholder="结束日期"
              value-format="timestamp"
              :picker-options="pickerOptions"
              class="ml10"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formdata.search"
              placeholder="请输入线路/杆塔/设备名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="pictureBox" v-loading="loading">
        <el-table :data="picList" style="width: 100%" height="calc(100% - 0px)">
          <el-table-column prop="cmdid" label="装置编号" width="180">
          </el-table-column>
          <el-table-column prop="total" label="图片总数" width="180">
          </el-table-column>
          <el-table-column prop="wrongCount" label="异常时间点" width="180">
          </el-table-column>
          <el-table-column prop="channels" label="异常数据列表">
            <template slot-scope="scope">
              <div v-for="channelItem in scope.row.channels">
                <span v-for="presetItem in channelItem.presets">
                  <p
                    v-for="wrongHour in presetItem.hours"
                    v-if="wrongHour.wrong == true"
                  >
                    通道{{ channelItem.channelId }}-预置位{{
                      presetItem.presetId
                    }}
                    -<span>
                      {{ wrongHour.hour }}-<span v-if="wrongHour.total > 2"
                        >多{{ wrongHour.total - 2 }}</span
                      ><span v-else="wrongHour.total < 2"
                        >少{{ 2 - wrongHour.total }}</span
                      ></span
                    >
                  </p>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pageNation" v-if="picList.length !== 0">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[20, 50, 100, 200]"
          layout="sizes, prev, pager, next, jumper,total"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchInfo, getPhotoStatApi } from "@/utils/api/index";
import defaultImage from "../../assets/img/nodatapic2.jpg";
export default {
  name: "realTimeSearch",
  data() {
    return {
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },

      picList: [],
      dyOptions: [{ id: -1, name: "全部" }], //电压数据
      xlOptions: [{ id: -1, name: "全部" }], //线路数据
      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
      zzOptions: [{ id: -1, name: "全部" }], //装置数据
      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
      formdata: {
        dyid: -1,
        lineid: -1,
        towerid: -1,
        channelid: -1,
        termid: -1,
        search: "",
      },
      tdTermid: "",
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: false,
      signtype: 0, //0第一次查询
      channels: [
        { id: 1, name: "通道 1" },
        { id: 5, name: "通道 5" },
        { id: 7, name: "通道 7" },
      ],
      presets: [
        { id: 1, name: "预置位1" },
        { id: 255, name: "默认预置位" },
      ],
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
  },
  mounted() {
    this.$set(this.formdata, "endtime", new Date().getTime());
    if (JSON.stringify(this.$route.query) === "{}") {
      this.$set(
        this.formdata,
        "starttime",
        new Date(new Date().toLocaleDateString()).getTime()
      );

      this.getSearchdy();
    } else {
      this.getSearchdy();
      this.formdata.dyid = this.$route.query.dyId;
      this.formdata.lineid = this.$route.query.lineId;
      this.formdata.towerid = this.$route.query.towerId;
      this.formdata.channelid = this.$route.query.channelId;
      this.formdata.termid = this.$route.query.termId;
      this.$set(this.formdata, "starttime", Number(this.$route.query.date));
      this.getPicData();
    }
  },
  methods: {
    setDefaultImage(e) {
      e.target.src = defaultImage;
    },
    //获取电压信息
    getSearchdy() {
      getSearchInfo({ type: 1 })
        .then((res) => {
          this.dyOptions = this.dyOptions.concat(res.data.list);
          console.log(this.dyOptions);
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.dyid = this.dyOptions[0].id;
          } else {
            this.formdata.dyid = Number(this.$route.query.dyId);
          }
          this.getSearchxl();
        })
        .catch((err) => {});
    },
    //获取线路数据
    getSearchxl() {
      getSearchInfo({ type: 2, id: this.formdata.dyid })
        .then((res) => {
          this.xlOptions = [{ id: -1, name: "全部" }];
          this.xlOptions = this.xlOptions.concat(res.data.list);

          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.lineid = this.xlOptions[0].id;
          } else {
            this.formdata.lineid = Number(this.$route.query.lineId);
          }
          this.getSearchgt();
        })
        .catch((err) => {});
    },
    //获取杆塔数据
    getSearchgt() {
      getSearchInfo({ type: 3, id: this.formdata.lineid })
        .then((res) => {
          this.gtOptions = [{ id: -1, name: "全部" }];
          this.gtOptions = this.gtOptions.concat(res.data.list);
          // this.formdata.towerid = this.gtOptions[0].id;
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.towerid = this.gtOptions[0].id;
          } else {
            this.formdata.towerid = Number(this.$route.query.towerId);
          }

          this.getSearchzz();
        })
        .catch((err) => {});
    },
    //获取装置数据
    getSearchzz() {
      getSearchInfo({ type: 4, id: this.formdata.towerid })
        .then((res) => {
          this.zzOptions = [{ id: -1, name: "全部" }];
          this.zzOptions = this.zzOptions.concat(res.data.list);
          // this.formdata.termid = this.zzOptions[0].id;
          console.log("切换了杆塔");
          // console.log(this.formdata.termid);
          // console.log(this.zzOptions[0].id);
          // this.formdata.termid = this.zzOptions[0].id;
          // console.log(this.formdata.termid);
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.termid = this.zzOptions[0].id;
          } else {
            this.formdata.termid = Number(this.$route.query.termId);
          }

          this.getSearchtd();
        })
        .catch((err) => {});
    },
    //获取通道数据
    getSearchtd() {
      getSearchInfo({ type: 5, id: this.formdata.termid })
        .then((res) => {
          this.tdOptions = [{ id: -1, name: "全部", alias: null }];
          this.tdOptions = this.tdOptions.concat(res.data.list);

          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.channelid = this.tdOptions[0].id;
          } else {
            this.formdata.channelid = Number(this.$route.query.channelId);
          }

          //this.getPicData();
        })
        .catch((err) => {});
    },
    getSearchtdAlone() {
      getSearchInfo({ type: 5, id: this.tdTermid })
        .then((res) => {
          this.tdOptions = [{ id: -1, name: "全部", alias: null }];
          this.tdOptions = this.tdOptions.concat(res.data.list);
        })
        .catch((err) => {});
    },
    //获取图片列表
    getPicData() {
      this.loading = true;
      this.$set(this.formdata, "pageindex", this.page);
      this.$set(this.formdata, "pagesize", this.pageSize);
      console.log(this.formdata);
      getPhotoStatApi(this.formdata)
        .then((res) => {
          // this.picList = [];
          this.picList = res.data;
          // this.total = res.data.total;
          // this.tdTermid = res.data.list[0].termid;
          // this.getSearchtdAlone();
          // console.log(this.$route.query);
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    //查询
    onSubmit() {
      if (this.formdata.starttime > this.formdata.endtime) {
        return this.$message({
          duration: 1500,
          showClose: true,
          message: "开始日期不能大于结束日期",
          type: "warning",
        });
      }
      this.page = 1;
      this.getPicData();
    },
    processData() {
      this.picList = this.rawData.map((device) => {
        const abnormalInfo = [];

        device.channels.forEach((channel) => {
          channel.presets.forEach((preset) => {
            preset.hours.forEach((hour) => {
              if (hour.wrong) {
                const time = hour.hour.split(" ")[1] + ":00";
                const expected = hour.base;
                const actual = hour.timeList.length;

                if (actual > expected) {
                  abnormalInfo.push(
                    `通道${channel.channelId}在${time}多${
                      actual - expected
                    }条数据（共${actual}条，预期${expected}条）`
                  );
                } else if (actual < expected) {
                  abnormalInfo.push(
                    `通道${channel.channelId}在${time}缺${
                      expected - actual
                    }条数据（共${actual}条，预期${expected}条）`
                  );
                }
              }
            });
          });
        });

        return {
          cmdid: device.cmdid,
          abnormalInfo,
        };
      });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      //this.picList = [];
      this.getPicData();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPicData();
    },
  },
};
</script>
<style lang="less">
.realTimeSearchTotal {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;
  .searchMain {
    border: 1px solid #dddddd;
    height: calc(100% - 22px);
    padding: 12px;
    border-radius: 4px;
    .ml10 {
      margin-left: 10px;
    }
  }
  .pictureBox {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    height: calc(100% - 138px);
    max-height: calc(100% - 138px);

    border: 1px solid #eee;
    .picShowBox {
      height: 100%;
      overflow: auto;
    }

    .imgList {
      width: calc((100% - 104px) / 4);
      position: relative;
      display: inline-block;
      margin: 8px;
      position: relative;
      padding: 4px;
      border-radius: 3px;
      background: #fff;
      height: 200px;

      .el-card__body {
        padding: 0px;
        height: 100%;
      }
      .bigpic {
        width: 100%;
        height: 100%;
        //background-size: 100% 100%;
        position: relative;

        .el-image {
          width: 100%;
          height: 100%;

          .el-image__placeholder {
            background: url(../../assets/img/nopicbg.png) no-repeat center;
            background-size: 20% 20%;
          }
          img {
            cursor: pointer;
            width: 100%;
            height: 200px;
          }
        }
        &:hover {
          .deleteBox {
            display: block;
          }
        }
      }
      .caption {
        position: absolute;
        bottom: 0px;
        background: #169e8ca1;
        width: calc(100% - 8px);
        padding: 4px;
        color: #333;
        .infoTop {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
          margin-top: 2px;
          padding-left: 5px;
          padding-right: 5px;
        }
        .infoBottom {
          color: #fff;
          font-size: 12px;
          font-weight: normal;
          margin-top: 6px;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      .deleteBox {
        position: absolute;
        right: 4px;
        top: 4px;
        z-index: 2;
        display: none;
        .el-button {
          width: auto;
          background: rgba(0, 0, 0, 0.5);
          border: 1px solid transparent;
          color: #fff;
          font-size: 16px;
          padding: 3px;
        }
        &:hover {
          .el-button {
            background: #f56c6c;
            //color: #f56c6c;
          }
        }
      }
    }
    .el-loading-mask {
      background-color: rgba(255, 255, 255, 0.4);
    }
    .noPicBox {
      display: flex;
      width: 100%;
      height: calc(100% - 86px);
      overflow: auto;
      .el-empty {
        margin: auto;
      }
    }
  }
}
</style>
