<template>
  <div class="morePicBox" v-if="isShow">
    <div class="headTitle">
      <div class="info">
        <p>
          {{ deviceData.linename }} - {{ deviceData.towername }} - ({{
            deviceData.alias !== null && deviceData.alias !== ""
              ? deviceData.alias
              : deviceData.channnelname
          }}) -
          {{ $moment(deviceData.photoTime).format("YYYY-MM-DD") }}
        </p>
        <!-- <p class="timeinfo" v-if="item.mediatype !== null">
            {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
          </p> -->
      </div>
      <div class="closeBox" @click="handleclose">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="picmain" v-loading="picLoading">
      <carouselChart
        ref="carouselpic"
        :terminalPhoto="terminalPhoto"
        :photoNum="photoNum"
        v-if="terminalPhoto.length > 0"
      ></carouselChart>
    </div>
  </div>
</template>
<script>
import carouselChart from "./carouselChart.vue";
import { getTerminalPhotoListJoggle } from "@/utils/api/index";
export default {
  components: {
    carouselChart,
  },
  props: {
    title: String,
  },

  data() {
    return {
      isShow: false,
      deviceData: "",
      terminalPhoto: [], //获取装置当前图片数据
      nopicPath: require("@/assets/img/nopic.jpg"),
      picLoading: false,
      photoNum: 10,
    };
  },
  mounted() {},
  methods: {
    display(data) {
      this.isShow = true;
      console.log(data);
      this.deviceData = data;
      if (data.photoTime == null) {
        data.photoTime = new Date().getTime();
      }
      this.getTerminalPhotoList(data.channelid, data.photoTime, data.termid);
    },
    //获取图片
    getTerminalPhotoList(channelid, date, termId) {
      this.terminalPhoto = [];
      this.picLoading = true;
      getTerminalPhotoListJoggle({
        channelid: channelid,
        time: date,
        terminalid: termId,
      })
        .then((res) => {
          console.log(res);
          this.picLoading = false;
          if (res.data.list.length == 0) {
            this.terminalPhoto = [
              {
                path: this.nopicPath,
                termId: termId,
                mediatype: 0,
              },
            ];
          } else {
            this.terminalPhoto = res.data.list;
          }
          // let newDataList = [];
          // let current = 0;
          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
          //     if (i % this.photoNum !== 0 || i === 0) {
          //       if (!newDataList[current]) {
          //         newDataList.push([this.terminalPhoto[i]]);
          //       } else {
          //         newDataList[current].push(this.terminalPhoto[i]);
          //       }
          //     } else {
          //       current++;
          //       newDataList.push([this.terminalPhoto[i]]);
          //     }
          //   }
          // }
          // this.terminalPhoto = [...newDataList];
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    handleclose() {
      this.isShow = false;
    },
  },
};
</script>
<style lang="less">
.morePicBox {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0px;
  left: 0px;
  z-index: 2;
  //z-index: 99999;
  .headTitle {
    height: 40px;
    padding-left: 18px;
    padding-right: 18px;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(180deg, #4cdbc8 10%, #128071);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .closeBox {
      width: 24px;
      height: 24px;
      align-items: center;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
  }
  .radioBox {
    position: absolute;
    top: 12px;
    right: 68px;
    color: #fff;
    font-size: 14px;
  }
  .picmain {
    width: 100%;
    height: calc(100% - 10px);
  }
}
</style>
