<template>
    <div class="app-container">
        <div class="naive-select-wrap">
            <NConfigProvider :locale="zhCN">
                <NSelect
                        v-model:value="queryParams.query"
                        :options="projectList"
                        label-field="PRONAME"
                        placeholder="请选择项目"
                        value-field="PROID"
                        @update:value="projectClicked"
                />
            </NConfigProvider>
        </div>
        <div v-if="queryParams.query" class="naive-tabs">
            <NTabs type="segment">
                <NTabPane name="camera" tab="摄像头列表">
                    <!-- v-if="queryParams.query && activeIndex == 0" -->
                    <div ref="cameraListRef" class="camera-list">
                        <camera
                                v-for="(item, index) in cameraList"
                                :key="index"
                                :name="item.address"
                                :source="item.flvUrl"
                        ></camera>
                        <div v-if="!cameraList.length" class="empty">
                            <img alt="" src="../assets/empty.png"/>
                            摄像头列表为空
                        </div>
                    </div>
                </NTabPane>
                <NTabPane name="image" tab="图片列表">
                    <!-- v-else-if="queryParams.query && activeIndex == 1" -->
                    <div class="image-list">
                        <div v-for="item in imageList" :key="item.PIC" class="image-item">
                            <!-- <img :src="`${protocol}//${host}/portal/r/${item}`" alt="" /> -->
                            <!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> -->
                            <!-- TODO:test -->
                            <!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" -->
                            <!--                :src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"-->
                            <NImage
                                    :previewed-img-props="{
                  draggable: true,
                  style: { border: 'none' },
                }"
                                    :src="`${protocol}//${host}/portal/r/${item.PIC}`"
                                    class="n-image-item"
                            ></NImage>
                            <div class="uplode-time">{{ item.CREATEDATE }}</div>
                        </div>
                        <div v-if="!imageList.length" class="empty">
                            <img alt="" src="../assets/empty.png"/>
                            图片列表为空
                        </div>
                    </div>
                </NTabPane>
            </NTabs>
        </div>
        <div v-else class="empty">
            <img alt="" src="../assets/empty.png"/>
            请选择项目
        </div>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import axios from "axios";
import {NConfigProvider, NImage, NSelect, NTabPane, NTabs, zhCN,} from "naive-ui";
import Camera from "./CameraItem.vue";

const cameraLoading = ref(true);
const projectList = ref([
    // {
    //   PROID: "123123",
    //   PRONAME: "项目12",
    // },
]);
const cameraList = ref([]);
const imageList = ref([]);
const total = ref(0);
const protocol = ref("");
protocol.value = location.protocol;
const host = ref("");
host.value = location.host;
const queryParams = reactive({
    cmd: "com.awspaas.user.apps.cmp_camera_list",
    pageNum: 1,
    pageSize: 10,
    sid: sid,
    // TODO:test
    // sid: "b9e99f78-2f6e-4d1c-aea9-4364f4191d30",
    query: undefined,
});
// const activeIndex = ref(0);
const loadProjectList = async () => {
    // const resp = await axios.get(`http://localhost:3000/project-list`);
    // TODO:test
    // const resp = await axios.get(
    //   "/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30"
    // );
    //   const resp = {
    //     data: [{
    //       "SUPERVISORID": "",
    //       "MAP": "40.763291,111.971932",
    //       "PROID": "HT6YXM-202303232023030010",
    //       "PROTYPE": "",
    //       "UPDATEDATE": 1679559863000,
    //       "SUPERVISOR": "",
    //       "DESIGNERID": "",
    //       "STCV": 800000,
    //       "PROOWNER": "六院本部/资产运营部/",
    //       "SURVEY": "",
    //       "UPDATEUSER": "13088880001",
    //       "SURVEYID": "",
    //       "APPENDIX": "",
    //       "PROCOST": 800000,
    //       "PRICELEADERID": "13088880004",
    //       "PRODEPTLEADERID": "13088880003",
    //       "PROLEADERID": "13088880002",
    //       "PROLEADER": "建设单位项目管理人员",
    //       "CONTRACTOR": "",
    //       "FLOORAREA": 2000,
    //       "CREATEUSER": "13088880001",
    //       "ISEND": 0,
    //       "RSTATUS": "1",
    //       "LEADERID": "13088880007",
    //       "PRICELEADER": "工程造价主管部门领导",
    //       "PROSTATUS": "1",
    //       "CBDATE": 1677600000000,
    //       "CONTRACTORID": "",
    //       "LEADER": "主要领导",
    //       "PRODEPTLEADER": "建设单位项目管理部门领导",
    //       "PRONAME": "A区科创园",
    //       "ASSETLEADER": "固定资产投资主管领导",
    //       "BINDID": "47856a34-afa4-4a9b-ae28-ba450a4ab798",
    //       "ORGID": "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
    //       "PROADDRESS": "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
    //       "DESIGNER": "",
    //       "PROCESSDEFID": "obj_a48ef53d7a2f4492bf440174e32bef3a",
    //       "PROPIC": "",
    //       "CREATEDATE": 1679559863000,
    //       "ASSETLEADERID": "13088880005",
    //       "CEDATE": 1703260800000,
    //       "PROFILE": "",
    //       "ACCDATE": 1703260800000,
    //       "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"
    //     }]
    //   }
    const resp = await axios.get(
        "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
    );
    return resp.data;
};

const projectClicked = () => {
    // activeIndex.value = index;
    // const proid = ;
    // queryParams.query = proid;
    queryParams.pageNum = 1;
    loadCameraList();
    loadImageList();
};

const loadCameraList = async () => {
    cameraLoading.value = true;
    // TODO:test
    // const resp = await axios(`/api/portal/r/jd`, {
    //   params: queryParams,
    // });
    // const resp = {
    //     data: {
    //       "code": 0,
    //       "rows": [{
    //         "address": "A区-科创园南门内",
    //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
    //         "id": "2e627e9a-afe8-4065-9196-423467396401",
    //         "projectId": "HT6YXM-202303232023030010",
    //         "projectName": "A区科创园"
    //       }, {
    //         "address": "A区科创园东门内",
    //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
    //         "id": "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
    //         "projectId": "HT6YXM-202303232023030010",
    //         "projectName": "A区科创园"
    //       }, {
    //         "address": "A区科创园东塔吊东北角球机",
    //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
    //         "id": "e410e322-cceb-40b9-899b-4f3d2e8215eb",
    //         "projectId": "HT6YXM-202303232023030010",
    //         "projectName": "A区科创园"
    //       }, {
    //         "address": "A区科创园东塔吊西南角球机",
    //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
    //         "id": "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
    //         "projectId": "HT6YXM-202303232023030010",
    //         "projectName": "A区科创园"
    //       }],
    //       "total": 4
    //     }
    //   }
    const resp = await axios.get("./jd", {
        params: queryParams,
    });
    cameraList.value = resp.data.rows;
    total.value = resp.data.total;
    cameraLoading.value = false;
};

const loadImageList = async () => {
    // const resp = await axios.get(
    //   `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
    // ); // 摄像头列表为空时,获取图片列表
    // TODO:test
    const resp = await axios.get(
        `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
    ); // 摄像头列表为空时,获取图片列表
    imageList.value = resp.data;
};
const cameraListRef = ref();
// 滚动操作
const handleScroll = (e) => {
    // console.log(e);
    if (!cameraListRef.value) return;
    let dom = document.documentElement;
    //文档内容实际高度（包括超出视窗的溢出部分）
    let scrollHeight = Math.max(dom.scrollHeight, dom.scrollHeight);
    //滚动条滚动距离
    let scrollTop = dom.scrollTop;
    //窗口可视范围高度
    let clientHeight =
        dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight);
    // console.log(clientHeight, scrollTop, scrollHeight);
    if (clientHeight + scrollTop >= scrollHeight) {
        if (queryParams.pageSize * queryParams.pageNum > total.value) return;
        if (cameraLoading.value) return;
        queryParams.pageNum++;
        loadCameraList();
        console.log("到底了");
    }
};

window.addEventListener("scroll", handleScroll, true);

loadProjectList().then((data) => {
    projectList.value = data;
    if (projectList.value.length) return projectList.value[0].PROID;
});
</script>
<style>
/* body {
  background-color: #f6f6f6;
} */
</style>
<style lang="scss" scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

.naive-select-wrap {
  width: 750px;
  padding: 20px 20px 0px;
}

.naive-tabs {
  padding: 20px 20px 0;
}

.nav-bar {
  width: 750px;
  height: 88px;
  background: linear-gradient(to top right, #496df6, #2e9ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  position: fixed;
}

.switch {
  width: 686px;
  height: 76px;
  background: #e4e4e4;
  border-radius: 8px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;

  .switch-item {
    width: 331px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active {
      background-color: #fff;
    }
  }
}

.camera-list {
  //   margin-top: 108px;
  // padding: 0px 20px 0px;
}

.image-list {
  // padding: 0px 20px 0px;
  .image-item {
    margin-bottom: 20px;
    position: relative;

    .uplode-time {
      color: indianred;
      position: absolute;
      font-weight: bold;
      right: 20px;
      bottom: 20px;
      background-color: rgba(255, 255, 255, 0.4);
      // backdrop-filter: blur(14px) saturate(150%);
      border-radius: 999px;
      padding: 0px 10px;
    }

    // border-radius: 10px;
    // overflow: hidden;
    :deep(.n-image-item) {
      img {
        // width: 100%;
        width: 710px;
        height: 420px;
        object-fit: cover;
        border-radius: 10px;
      }
    }

    // img {
    // object-fit: cover;
    //   border-radius: 10px;
    //   height: 420px;
    //   width: 710px;
    // }
  }
}

#proj-select {
  border: none;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  height: 10vw;
  border-radius: 1vw;
  margin: 2vw 2vw 5vw 2vw;
  outline: none;
}

.empty {
  // flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 80%;
  }

  // height:80vh;
}
</style>
