<template>
  <!-- 抓拍图片 -->
  <div class="videoSnap">
    <div id="videoBox">
      <div id="left_listBox">
        <n-space>
          <p class="TopListSpan">开始日期:</p>
          <n-date-picker v-model:value="times1" type="datetime" placeholder="请选择开始日期" />
        </n-space>
        <n-space>
          <p class="TopListSpan">结束日期:</p>
          <n-date-picker v-model:value="times2" type="datetime" placeholder="请选择结束日期" />
        </n-space>
        <div class="videoTable">
          <n-tree
            v-if="treesData.length"
            :data="treesData"
            :node-props="checkCamera"
            block-line
            :default-expanded-keys="defaultExpandedKeys"
          />
        </div>
      </div>
      <div id="right_videoWindow">
        <!-- 暂无数据 -->
        <div class="snapImg" v-if="imgData.length > 0">
          <div class="part" v-for="item in imgData" :key="item.captureId">
            <n-image :src="item.captureUrl" lazy> </n-image>
            <p>{{ item.captureTime }}</p>
          </div>
        </div>
        <n-pagination v-if="imgData.length > 0" :page="page" :page-size="pageSize" :page-count="total" @update:page="getSnapData" />
        <n-empty class="noData" v-if="imgData.length == 0" description="暂无抓拍图片"></n-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue';
import { formatDate } from '@/utils/util';
import { getCameraTree, pageQueryCamerPictureInfos } from '@/services';

export default {
  name: 'videoSnap',
  setup() {
    const allData = reactive({
      times1: new Date().getTime() - 1 * 24 * 3600 * 1000,
      times2: Date.now(),
      page: 1,
      total: 1,
      pageSize: 21,
      cameraCode: '6ca932eda7d1409190b7d5a5118ad4ce',
      imgData: [{ captureUrl: '11' }, { captureUrl: '22' }, { captureUrl: '33' }],
      defaultExpandedKeys: ['root000000'], //默认展开节点
      treesData: [
        {
          label: '0',
          key: '0',
          click: false,
          children: [
            {
              label: '组1',
              key: '0-0',
              click: false,
              children: [
                {
                  label: '铁路桥',
                  key: 'cf99e49a50f641ba83832dd5ebff3fa5',
                  click: true,
                },
                {
                  label: '王家墩',
                  key: '4097ade6e64142d7ac7adff80b4617f0',
                  click: true,
                },
              ],
            },
          ],
        },
      ],
    });
    // 点击摄像头
    const checkCamera = ({ option }) => {
      return {
        onClick() {
          allData.cameraCode = option.key;
          allData.page = 1;
          getSnapData();
        },
      };
    };
    async function getSnapData(val) {
      allData.page = val;
      let params = {
        current: allData.page,
        size: allData.pageSize,
        object: {
          cameraIndexCode: allData.cameraCode,
          startTime: formatDate(allData.times1),
          endTime: formatDate(allData.times2),
        },
      };
      let res = await pageQueryCamerPictureInfos(params);
      if (res && res.code == 200) {
        allData.imgData = [];
        let datas = res.data;
        datas.list.map((item) => {
          allData.imgData.push({
            captureId: item.captureId,
            captureUrl: item.captureUrl,
            captureTime: formatDate(item.captureTime),
            cameraName: item.cameraName,
          });
        });
        allData.total = Math.ceil(datas.total / allData.pageSize);
      }
    }
    //获取摄像头列表
    const getVideoList = async () => {
      allData.treesData = [];
      let res = await getCameraTree();
      if (res && res.code == 200) {
        allData.treesData = res.data;
        allData.defaultExpandedKeys.push(res.data[0].key);
      }
    };
    onMounted(() => {
      getVideoList();
      getSnapData();
    });

    return {
      ...toRefs(allData),
      checkCamera,
      getSnapData,
    };
  },
};
</script>

<style lang="less">
.videoSnap {
  #videoBox {
    display: flex;
    #left_listBox {
      width: 300px;
      height: 90vh;
      box-sizing: border-box;
      padding: 20px 10px;
      .TopListSpan {
        line-height: 36px;
      }
      .videoTable {
        margin: 10px 0 10px 0;
        max-height: 680px !important;
        overflow: auto;
        .n-base-icon {
          background: url('@/assets/newImgs/shexiangotu.png') no-repeat center !important;
          transform: rotate(-90deg);
          svg {
            display: none !important;
          }
        }
        .n-tree .n-tree-node-switcher.n-tree-node-switcher--hide {
          visibility: initial !important;
          transform: rotate(90deg);
        }
      }
    }

    #right_videoWindow {
      flex: 1;
      margin-left: 20px;
      overflow: auto;
      .noData {
        margin-top: 20vh;
      }
      .n-pagination {
        justify-content: center;
        margin: 20px auto;
      }
      .snapImg {
        display: flex;
        flex-wrap: wrap;
        .part {
          position: relative;
          margin-right: 10px;
          margin-bottom: 10px;
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 0px;
            bottom: 7px;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
          }
          .n-image {
            width: 180px;
            height: 200px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>