<template>
  <div class="app-container">
    <div class="tab-list">
      <div
        class="tab-item"
        v-for="(dict, index) in jc_item_type"
        :key="dict.value"
        :style="activeStyle(index)"
        @click="changeIndex(dict, index)"
      >
        {{ dict.label }}
      </div>
    </div>
    <div class="line-item"></div>
    <div class="list-container" v-loading="loading">
      <div class="list-item" v-for="item in list" :key="item.id">
        <div class="item-title-row" :style="{ backgroundColor: theme }">
          <div class="title">{{ item.title }}</div>
          <div class="item-tags">
            <el-tag type="primary" v-for="tags in item.technology" :key="tags">
              <dict-tag :options="jc_technology" :value="tags" />
            </el-tag>
            <el-tag type="danger" v-show="item.isClose == 'Y'">
              后台关闭
            </el-tag>
          </div>
        </div>
        <div class="item-block">
          <div
            class="block-item"
            v-for="blockItem in item.itemJson"
            :key="blockItem.id"
            @click="goLink(blockItem.link)"
          >
            <div class="is-private" v-show="blockItem.isPrivate == 1">内网</div>
            <img :src="baseUrl + blockItem.cover" alt="" />
            <div class="video-icon">
              <div class="port-type">{{ blockItem.name }}</div>
              <!-- <el-link
                :type="blockItem.video ? 'primary' : 'danger'"
                @click.stop="goLink(blockItem.video, 1)"
                target="_blank"
                >视频链接</el-link
              > -->
            </div>

            <div class="user-pass" v-for="user in blockItem.userData">
              <span>用户名:{{ user.userName }}</span>
              <span>密码:{{ user.passWord }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="list.length == 0" class="no-data">
        <el-empty description="瞅啥？没看见无数据吗？还看！！！" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import useSettingsStore from "@/store/modules/settings";
import { getList, getInfo } from "@/api/jichuang/model.js";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { jc_technology, jc_item_type, sys_yes_no } = proxy.useDict(
  "jc_item_type",
  "jc_technology",
  "sys_yes_no"
);
const loading = ref(true);
let currentIndex = ref(0);
let list = ref([]);
let queryParams = ref({
  itemType: 1,
});
const theme = computed(() => useSettingsStore().theme);

onMounted(() => {
  getListData();
});

const changeIndex = (item, index) => {
  if (currentIndex.value == index) return;
  queryParams.value.itemType = item.value;
  currentIndex.value = index;
  getListData();
};

const goLink = (url, type) => {
  if (!url) {
    proxy.$modal.msgError(`该链接暂无空！请联系运维人员！`);
    return;
  }
  if (type) {
    url = baseUrl + url;
  }
  window.open(url);
};

const getListData = async () => {
  loading.value = true;
  const response = await getList(queryParams.value);
  list.value = response.rows.map((item) => {
    item.technology = item.technology.split(",");
    item.itemJson = JSON.parse(item.itemJson);
    return item;
  });
  loading.value = false;
};

const activeStyle = (index) => {
  if (currentIndex.value == index) {
    return {
      "background-color": theme.value,
      "border-color": theme.value,
      color: "#fff",
    };
  }
};
</script>
<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  & > div {
    height: 100%;
    overflow-y: auto;
  }
  .tab-list {
    .tab-item {
      border: 1px solid #d8dce5;
      font-size: 14px;
      margin-bottom: 10px;
      padding: 6px 8px;
      cursor: pointer;
    }
    & > .tab-item:last-child {
      margin-bottom: 0;
    }
  }
  .line-item {
    height: 100%;
    width: 1px;
    border-left: 1px solid #e6e6e6;
    margin: 0 10px;
  }
  .list-container {
    position: relative;
    flex: 1;

    .no-data {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
    .list-item {
      margin-bottom: 15px;
      .item-title-row {
        padding: 6px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 16px;
          color: #fff;
        }
        .item-tags span {
          margin-left: 6px;
          border-radius: 0;
        }
      }
      .item-block {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(
          5,
          1fr
        ); /* 定义四列，每列宽度相等，占可用空间的1/4 */
        grid-gap: 25px; /* 设置网格元素之间的行间距和列间距均为10px */
        .block-item {
          position: relative;
          cursor: pointer;
          padding: 10px;
          // background: #ffffff;
          border: 1px solid #e6e6e6;
          box-shadow: 0px 5px 10px 0px #dadeeb;
          overflow: hidden;
          & > div {
            margin-top: 6px;
          }
          .is-private {
            margin: 0;
            position: absolute;
            top: 0;
            right: 0;

            background-color: red;
            font-size: 12px;
            color: #fff;
            padding: 3px;
          }
          .video-icon {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          img {
            display: block;
            width: 100%;
            height: 150px;
            object-fit: contain;
          }
          .port-type {
            font-weight: 550;
            font-size: 15px;
          }
          .user-pass {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            color: #909399;
          }
        }
      }
    }
    & > .list-item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
