<template>
  <el-dialog
    @close="handleclose"
    title="历史图片"
    :visible.sync="historyPicdialog"
    width="1366px"
    :close-on-click-modal="false"
    class="showDialogHistoryPic"
  >
    <div class="title">
      {{ picInfoData.lineName }}-{{ picInfoData.towerName }}-（{{
        picInfoData.alias !== null && picInfoData.alias !== ""
          ? picInfoData.alias
          : picInfoData.channnelname
      }}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
    </div>
    <carouselChart
      ref="carouselpic"
      :terminalPhoto="terminalPhoto"
      v-if="terminalPhoto.length > 0"
      v-loading="historyPicLoading"
    ></carouselChart>
  </el-dialog>
</template>
<script>
import carouselChart from "../../components/carouselChart.vue";
import { getHistoryList } from "@/utils/api/index";
export default {
  components: {
    carouselChart,
  },
  data() {
    return {
      page: 1, // 当前页数
      pageSize: 10, // 每页数量
      total: 0, //总条数
      selectnr: "", //获取当前数据内容
      historyPicLoading: false,
      historyPicdialog: false,
      //点击查看历史图片
      picInfoData: {}, //获取当前图片的信息
      terminalPhoto: [], //获取装置当前图片数据
      nopicPath: require("@/assets/img/nopic.jpg"),
    };
  },
  mounted() {},
  methods: {
    //获取图片数据
    getdataform(val) {
      this.selectnr = val;
      this.historyPicLoading = true;
      getHistoryList({
        channelId: this.selectnr.channelId,
        termId: this.selectnr.termId,
        pageindex: this.page,
        pagesize: this.pageSize,
      }).then((res) => {
        console.log(res);

        this.historyPicLoading = false;
        this.terminalPhoto = res.data.list;

        this.total = res.data.total;
      });
    },
    //下一页
    changebtn(e) {
      console.log(e);
      if (Math.floor(e / 9) == 1) {
        this.page++;
        getHistoryList({
          channelId: this.selectnr.channelId,
          termId: this.selectnr.termId,
          pageindex: this.page,
          pagesize: this.pageSize,
        }).then((res) => {
          this.terminalPhoto.push(res.data.list);
          this.total = res.data.total;
        });
      }
    },
    display(data) {
      this.historyPicdialog = true;
      this.picInfoData = data;
      console.log(data);
    },
    hide() {
      this.historyPicdialog = false;
      this.terminalPhoto = [];
    },
    handleclose() {
      this.historyPicdialog = false;
      this.terminalPhoto = [];
    },
  },
};
</script>
<style lang="less">
.showDialogHistoryPic {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-dialog {
    width: 70% !important;
    height: 90%;
    transform: none;
    margin: auto;
    left: auto;
    top: auto;
  }
  .el-dialog__body {
    height: calc(100% - 70px);
    .title {
      height: 32px;
      padding-left: 12px;
      line-height: 32px;
      color: #fff;
      font-size: 14px;
      background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
      text-align: center;
    }
    .thumb-example {
      //height: 100%;
    }
  }
}
</style>
