<!--
 * @Author: your name
 * @Date: 2021-09-13 17:52:31
 * @LastEditTime: 2021-12-06 13:46:38
 * @LastEditors: Please set LastEditors
 * @Description: 生物安全 - 车辆管理
 * @FilePath: \hyyfClient\src\views\BioSafety\CarAdmin.vue
-->
<template>
  <div class="car-admin">
    <head-btns
      :btnNames="btnNames"
      :btnSelected="btnSelected"
      @btnSelected="getBtnSelected"
    >
    </head-btns>

    <!-- 筛选条件 -->
    <query-conditions
      :formItems="formItems"
      :propFormData="propFormData"
      :defaultEmit="true"
      @getQueryParams="handleQuery"
    >
    </query-conditions>

    <!-- 表格 -->
    <new-table
      :title="title"
      :listData="listData"
      :tableItems="tableItems"
      :shows="tableShows"
      :height="475"
    >
      <!-- <template v-slot:right>
        <template v-if="btnSelected === 1">
          <div>
            <el-button size="mini">黑名单</el-button>
          </div>
        </template>
        <template v-else-if="btnSelected === 2">
          <div>
            <el-button size="mini">黑名单</el-button>
          </div>
        </template>
        <template v-else>
          <div>
            <el-button size="mini">黑名单</el-button>
          </div>
        </template>
      </template> -->
      <template v-slot:carNum="slotProps">
        {{ slotProps.row.carNum ? slotProps.row.carNum : "未识别" }}
      </template>
      <template v-slot:originalPicPath="slotProps">
        <img
          :src="slotProps.row.originalPicPath"
          @click="clickImg(slotProps.row.originalPicPath)"
          alt="车辆通行"
          width="120"
        />
      </template>
      <template v-slot:alarmPicture="slotProps">
        <img
          :src="slotProps.row.alarmPicture"
          @click="clickImg(slotProps.row.alarmPicture)"
          alt="车辆通行"
          width="120"
        />
      </template>
      <template v-slot:handler="slotProps">
        <el-button size="mini" @click="clickEvent(slotProps.row)">
          查看回放
        </el-button>
      </template>

      <!-- 车辆烘干的回放 -->
      <template #handlerDrying="slotProps">
        <el-button size="mini" @click="clickDryingEvent(slotProps.row)">
          查看本次烘干温度详情
        </el-button>
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="size"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    >
    </table-footer>
    <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>
    <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="tempVisible" width="80%">
      <div style="width: 100%; height: 500px">
        <chart-car-drying :tempList="tempChartData"></chart-car-drying>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tempVisible = false">取 消</el-button>
        <el-button type="primary" @click="tempVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HeadBtns from "components/bioSafety/Btns";
import QueryConditions from "components/bioSafety/QueryConditions";
import NewTable from "components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import ChartCarDrying from "./chart/ChartCarDrying.vue";

import { formItems, propFormData } from "./carAdmin/queryCondition.config";
import { titles, tableItems, tableShows } from "./carAdmin/table.config";

import {
  getCarPassage,
  getCarWash,
  getCarWashTotal,
  getCarWashVideo,
  getCarDrying,
  getCarDryingTemp,
} from "../../utils/chenApi";
import { getFaceToken } from "../../utils/api";
import { timeDate } from "../../utils/index";

export default {
  name: "CarAdmin",
  components: {
    HeadBtns,
    QueryConditions,
    NewTable,
    TableFooter,
    ChartCarDrying,
  },
  data() {
    return {
      btnNames: [
        // 按钮情况
        { id: 1, name: "车辆通行" },
        { id: 2, name: "车辆洗消" },
        { id: 3, name: "车辆烘干" },
      ],
      btnSelected: 1, // 选中的按钮
      formItems: [], // 传给 QueryCondition 组件的 formItems
      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
      title: "", // 传给 BioTable 组件的 title
      listData: [], // 传给 BioTable 组件的表格展示的值 listData
      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
      tableShows: {},
      // table的翻页
      total: 0,
      size: 20,
      pageNum: 1,
      selectId: "",
      params: {},
      dialogVisible: false,
      imgUrl: "", // 点击图片后放大的图片路径
      videoVisible: false, // 车辆回放
      rtsp: "", // 车辆回放的地址
      tempVisible: false, // 车辆烘干 - 查看温度详情
      tempChartData: {},
    };
  },
  mounted() {
    this.formItems = formItems[this.btnSelected - 1];
    this.propFormData = propFormData[this.btnSelected - 1];
    console.log(this.propFormData);
    this.title = titles[this.btnSelected - 1];
    this.tableItems = tableItems[this.btnSelected - 1];
    this.tableShows = tableShows;
    if (this.btnSelected === 1) {
      this.carPassage();
    } else if (this.btnSelected === 2) {
      this.carWash();
    } else {
      this.carDrying();
    }
  },
  methods: {
    getBtnSelected(id) {
      this.btnSelected = id;
      this.formItems = formItems[id - 1];
      this.propFormData = propFormData[id - 1];
      this.title = titles[id - 1];
      this.tableItems = tableItems[id - 1];
      this.pageNum = 1;
      this.listData = [];
      this.params = {};
      console.log("1111");
      if (this.btnSelected === 1) {
        this.carPassage();
      } else if (this.btnSelected === 2) {
        this.carWash();
        this.carWashTotal();
      } else {
        this.carDrying();
      }
    },
    // 获取查询条件
    handleQuery(params) {
      this.pageNum = 1;
      this.params = params;

      this.listData = [];
      if (this.btnSelected === 1) {
        this.carPassage();
      } else if (this.btnSelected === 2) {
        this.carWash();
        this.carWashTotal();
      } else {
        this.carDrying();
      }
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      this.pageNum = 1;
      this.listData = [];
      if (this.btnSelected === 1) {
        this.carPassage();
      } else if (this.btnSelected === 2) {
        this.carWash();
      } else {
        this.carDrying();
      }
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      if (this.btnSelected === 1) {
        this.carPassage();
      } else if (this.btnSelected === 2) {
        this.carWash();
      } else {
        this.carDrying();
      }
    },
    // 车辆通行 查询
    carPassage() {
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        carNum: this.params.name || undefined,
      };
      getCarPassage(queryParams).then((res) => {
        console.log("res:", JSON.parse(res.result));
        const result = JSON.parse(res.result);
        this.listData = result.data.pageData;
        this.listData.forEach((item) => {
          item.originalPicPath = `https://36.26.62.70:447/evo-apigw/${item.originalPicPath}`;
          item.devChnName = item.devChnName.split("_")[0];
        });
        this.total = parseInt(result.data.totalRows);
      });
    },
    // 点击图片放大
    clickImg(url) {
      this.dialogVisible = true;
      this.imgUrl = url;
    },
    // 车辆洗消
    carWash() {
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
          timeDate(new Date().getTime()),
        ];
      }
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        alarmStartDateString: this.params.time[0] + " 00:00:00",
        alarmEndDateString: this.params.time[1],
        nodeCodeList: ["1002871$1$0$0", "1002872$1$0$0", "1002873$1$0$0"],
        deviceCategory: 1,
        alarmType: 303,
        dbType: 0,
      };
      getCarWash(queryParams).then(async (res) => {
        console.log("res:", JSON.parse(res.result));
        const result = JSON.parse(res.result);
        this.listData = result.data.pageData;
        const { token } = await getFaceToken();
        this.listData.forEach((item) => {
          item.alarmPicture = `https://36.26.62.70:447/evo-pic/${item.alarmPicture}?token=${token}&oss_addr=172.16.3.223:8925`;
        });
      });
    },
    // 车辆洗消 - 按钮
    clickEvent(row) {
      getCarWashVideo({
        happendTime: row.alarmDate,
        channelName: row.alarmPosition,
      }).then((res) => {
        if (res.code === 0) {
          this.rtsp = res.URL;
          this.videoVisible = true;
        }
      });
    },
    // 车辆洗消 - 总条数
    carWashTotal() {
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
          timeDate(new Date().getTime()),
        ];
      }
      let queryParams = {
        orgCodeList: [],
        nodeCodeList: ["1002871$1$0$0", "1002872$1$0$0", "1002873$1$0$0"],
        deviceCategory: 1,
        alarmStartDateString: this.params.time[0] + " 00:00:00",
        alarmEndDateString: this.params.time[1] + " 23:59:59",
        alarmType: 303,
        dbType: 0,
      };
      getCarWashTotal(queryParams).then((res) => {
        this.total = JSON.parse(res.result).data.value;
      });
    },
    // 车辆烘干
    carDrying() {
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
          timeDate(new Date().getTime()),
        ];
      }
      getCarDrying({
        startTimeString: this.params.time[0] + " 00:00:00",
        endTimeString: this.params.time[1] + " 23:59:59",
        current: this.pageNum,
        size: this.size,
      }).then((res) => {
        if (res.code === 10000) {
          this.listData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 车辆烘干的回放事件
    clickDryingEvent(row) {
      getCarDryingTemp({
        deviceId: row.deviceId,
        eventTimeString: row.eventTime,
      }).then((res) => {
        if (res.code === 10000) {
          this.tempChartData = res.data;
          this.tempVisible = true;
        }
      });
    },
  },
};
</script>

<style scoped>
.car-admin {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>
