<!--
 * @Author: your name
 * @Date: 2021-09-16 11:27:35
 * @LastEditTime: 2021-11-28 17:20:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\views\BioSafety\DeadPig.vue
-->
<template>
  <div class="dead-pig">
    <!-- 筛选条件 -->
    <query-conditions
      :defaultEmit="true"
      :formItems="formItems"
      :propFormData="propFormData"
      @getQueryParams="handleQuery"
    ></query-conditions>

    <!-- 表格 -->
    <new-table
      :title="title"
      :listData="listData"
      :tableItems="tableItems"
      :shows="tableShows"
      :height="535"
    >
      <template v-slot:alarmPicture="slotProps">
        <img
          :src="slotProps.row.alarmPicture"
          @click="clickImg(slotProps.row.alarmPicture)"
          alt="车辆通行"
          width="380"
        />
      </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>
  </div>
</template>

<script>
import QueryConditions from "components/bioSafety/QueryConditions";
import NewTable from "components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";

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

import { getCarWash, getCarWashTotal } from "../../utils/chenApi";
import { getFaceToken } from "../../utils/api";

export default {
  name: "DeadPig",
  components: {
    QueryConditions,
    NewTable,
    TableFooter,
  },
  data() {
    return {
      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: "",
    };
  },
  mounted() {
    this.formItems = formItems;
    this.propFormData = propFormData;
    this.title = title;
    this.tableItems = tableItems;
    this.tableShows = tableShows;
    this.pigManage();
    this.pigTotal();
  },
  methods: {
    // 获取查询条件
    handleQuery(params) {
      console.log(params);
      this.params = params;
      this.pigManage();
      this.pigTotal();
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      // this.init();
      this.pigManage();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      // this.init();
      this.pigManage();
    },
    init() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.size,
        searchStr: this.keyword,
      };
      console.log(params);
      // 获取后端数据
    },
    // 死猪管理
    pigManage() {
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        alarmStartDateString: this.params.time[0] + " 00:00:00",
        alarmEndDateString: this.params.time[1] + " 23:59:59",
        nodeCodeList: [
          "1002874$1$0$0",
          "1002875$1$0$0",
          "1002876$1$0$0",
          "1002877$1$0$0",
          "1002878$1$0$0",
          "1002879$1$0$0",
          "1002880$1$0$0",
          "1002881$1$0$0",
          "1002882$1$0$0",
          "1002883$1$0$0",
          "1002884$1$0$0",
          "1002885$1$0$0",
          "1002886$1$0$0",
          "1002887$1$0$0",
          "1002888$1$0$0",
          "1002889$1$0$0",
          "1002890$1$0$0",
          "1002891$1$0$0",
          "1002892$1$0$0",
          "1002893$1$0$0",
          "1002894$1$0$0",
          "1002895$1$0$0",
          "1002896$1$0$0",
          "1002897$1$0$0",
          "1002898$1$0$0",
          "1002899$1$0$0",
          "1002900$1$0$0",
          "1002901$1$0$0",
          "1002902$1$0$0",
          "1002903$1$0$0",
          "1002904$1$0$0",
          "1002905$1$0$0",
          "1002906$1$0$0",
          "1002907$1$0$0",
          "1002908$1$0$0",
          "1002909$1$0$0",
          "1002910$1$0$0",
          "1002911$1$0$0",
          "1002912$1$0$0",
          "1002913$1$0$0",
          "1002939$1$0$0",
          "1002939$1$0$1",
          "1002939$1$0$2",
          "1002939$1$0$3",
          "1002939$1$0$4",
          "1002939$1$0$5",
          "1002939$1$0$6",
          "1002939$1$0$7",
          "1002939$1$0$8",
          "1002939$1$0$9",
          "1002940$1$0$0",
          "1002940$1$0$1",
          "1002940$1$0$2",
          "1002940$1$0$3",
          "1002940$1$0$4",
          "1002940$1$0$5",
          "1002940$1$0$6",
          "1002940$1$0$7",
          "1002939$1$0$10",
          "1002939$1$0$11",
          "1002939$1$0$12",
          "1002939$1$0$13",
          "1002939$1$0$14",
          "1002939$1$0$15",
        ],
        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`;
        });
      });
    },
    // 死猪管理 - 总数
    pigTotal() {
      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;
      });
    },
    // 点击图片放大
    clickImg(url) {
      this.dialogVisible = true;
      this.imgUrl = url;
    },
  },
};
</script>

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