<template>
  <div class="eventRem">
    <div class="reply" :style="{ color: color }">筛选查询</div>
    <x-form :formItems="selectItems" @onClickType="onClickType"></x-form>
    <new-table
      :height="600"
      :title="title"
      :listData="list"
      :tableItems="tableItems"
      :shows="tableShows"
    >
      <template #alarmPicture="scope">
        <img
          :src="scope.row.alarmPicture"
          @click="clickImg(scope.row.alarmPicture)"
          alt="事件提醒"
          width="140"
        />
      </template>
      <template #handler="scope">
        <el-button type="text" @click="open(scope.row)">视频回看</el-button>
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="pageSize"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    ></table-footer>
    <el-dialog title="回放视频" :visible.sync="videoVisible" width="50%">
      <div style="width: 100%; height: 600px">
        <iframe
          v-if="videoVisible"
          :src="'static/dahua/index.html?' + rtsp"
          frameborder="0"
          style="width: 100%; height: 100%"
        >
        </iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="videoVisible = false">取 消</el-button>
        <el-button type="primary" @click="videoVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <el-dialog title="事件提醒图片" :visible.sync="dialogVisible" width="50%">
      <img :src="imgUrl" alt="事件提醒图片" width="100%" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import XForm from "@/components/XForm";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
import { getEventList, getFaceToken } from "../../utils/api";
import { getCarWashVideo } from "../../utils/chenApi";

export default {
  name: "EventRem",
  computed: {
    ...mapState(["color", "ip"]),
  },
  components: {
    XForm,
    NewTable,
    TableFooter,
  },
  data() {
    return {
      day: 2,
      selectItems: [
        {
          id: 6,
          type: "datepicker",
          placeholder: [],
          field: "value1",
          col: 6,
        },
        {
          id: 7,
          type: "button",
          text: "查询",
          col: 2,
          click: "search",
        },
      ],
      title: "数据列表",
      list: [],
      tableItems: [
        {
          prop: "alarmDate",
          label: "时间",
          minWidth: "100",
          slotName: "alarmDate",
        },
        {
          prop: "alarmPosition",
          label: "位置",
          minWidth: "100",
          slotName: "alarmPosition",
        },
        {
          prop: "alarmPicture",
          label: "图片",
          minWidth: "100",
          slotName: "alarmPicture",
        },
        {
          label: "操作",
          minWidth: "100",
          slotName: "handler",
        },
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
      alarmStartDateString: "",
      alarmEndDateString: "",
      rtsp: "",
      videoVisible: false,
      dialogVisible: false,
      imgUrl: "", // 点击图片后放大的图片路径
    };
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      let params = {
        alarmStartDateString: this.alarmStartDateString
          ? this.alarmStartDateString + " 00:00:00"
          : "",
        alarmEndDateString: this.alarmEndDateString
          ? this.alarmEndDateString + " 23:59:59"
          : "",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getEventList(params).then(async (res) => {
        if (res.code === 0) {
          const result = JSON.parse(res.data.result);
          this.list = result.data.pageData;
          console.log(this.list);
          this.total = parseInt(res.total);
          // const { token } = await getFaceToken();
          this.list.forEach((item) => {
            item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
          });
        }
      });
    },
    setDay(data) {
      this.day = data.type;
    },
    onClickType(data) {
      console.log(data);
      if (data.type === "search") {
        if (data.data.value1) {
          this.alarmStartDateString = data.data.value1[0];
          this.alarmEndDateString = data.data.value1[1];
        }
        this.init();
      }
    },
    open(row) {
      getCarWashVideo({
        happendTime: row.alarmDate,
        channelName: row.alarmPosition,
      }).then((res) => {
        if (res.code === 0) {
          this.rtsp = res.URL;
          this.videoVisible = true;
        } else {
          this.$message.error("视频获取失败");
        }
      });
    },
    // 点击图片放大
    clickImg(url) {
      this.dialogVisible = true;
      this.imgUrl = url;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.eventRem {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
}
.reply {
  width: 100%;
  border: 1px solid #ddd;
  border-bottom: 0;
  height: 50px;
  background-color: #f3f3f3;
  line-height: 50px;
  font-size: 18px;
  box-sizing: border-box;
  padding-left: 20px;
}
</style>
