<template>
  <div class="big-screen-list-wrap">
    <div class="internal-box">
      <div class="top-search-wrap">
        <BasicUpload
          :max-size="20"
          :max-number="10"
          :empty-hide-preview="true"
          :upload-params="uploadParams"
          :api="uploadApi2"
          class="my-5"
          :accept="['image/*']"
          @change="handleChange"
        />
      </div>
      <div
        v-if="dataList.length !== 0"
        v-loading="loading"
        :style="{
          display: gridComputed ? 'grid' : 'flex',
          justifyContent: gridComputed ? 'space-around' : 'flex-start'
        }"
        class="list-wrap bs-scrollbar"
        element-loading-text="加载中"
      >
        <div
          v-for="screen in dataList"
          :key="screen.id"
          :style="{
            width: gridComputed ? 'auto' : '290px'
          }"
          class="big-screen-card-wrap"
        >
          <div class="big-screen-card-inner">
            <div class="screen-card__hover">
              <div class="screen-card__hover-box">
                <div class="preview">
                  <div class="screen-card__oper-label circle" @click="preview(screen)">
                    <span>预览</span>
                  </div>
                  <div class="circle" @click="downLoad(screen)">
                    <span>下载</span>
                  </div>
                  <div class="circle" @click="del(screen)">
                    <span>删除</span>
                  </div>
                  <div class="circle" @click="copy(screen)">
                    <span>链接</span>
                  </div>
                </div>
              </div>
            </div>
            <el-image :src="getImage(screen.iconUrl, false)" fit="contain" style="width: 100%; height: 100%">
              <slot name="placeholder" class="image-slot"> 加载中··· </slot>
            </el-image>
          </div>
        </div>
      </div>
      <div v-else class="empty"> <Empty style="margin: 273px 0px" /> </div>
      <div class="footer-pagination-wrap">
        <div class="bs-pagination" v-if="dataList.length !== 0">
          <Pagination
            v-model:current="pagination.current"
            size="small"
            :pageSize="pagination.size"
            :total="pagination.totalCount"
            show-quick-jumper
            @change="onChange"
            :show-total="(total) => `共 ${total} 条数据`"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { getImage, onlyMessage } from '@jdlinker/utils';
  import { list, deleteOne, saveFileInfo } from '../service';
  import { ref, watch, computed, onMounted } from 'vue';
  import { BasicUpload, createImgPreview } from '@jdlinker/ui';
  import { uploadApi2 } from '../../../../../api/sys/upload';
  import { getToken, downloadByUrl } from '@jdlinker/func';
  import { Empty, Pagination } from 'ant-design-vue';

  const props = defineProps({
    data: { require: true, type: Object }
  });
  const uploadParams = ref({
    Authorization: `${getToken()}`
  });
  const dataList = ref([]);
  const loading = ref(false);
  const gridComputed = computed(() => dataList.value.length > 3);
  const pagination = ref<any>({
    current: 1,
    size: 12,
    totalCount: 0
  });
  const params = {
    pageIndex: 1,
    pageSize: 16,
    classifyId: undefined
  };
  const getDataList = () => {
    loading.value = true;
    list(params)
      .then((res) => {
        dataList.value = [];
        dataList.value = res.result.records;
        pagination.value = {
          current: res.result.current,
          size: res.result.size,
          totalCount: res.result.total
        };
      })
      .finally(() => {
        loading.value = false;
      });
  };
  const downLoad = (record) => {
    downloadByUrl({
      url: window.location.origin + '/' + record.iconUrl,
      target: '_self'
    });
  };
  const preview = (record) => {
    // 图片
    const imageList: any = [];
    const onImgLoad = ({ index, url, dom }) => {
      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
    };
    imageList.push(window.location.origin + '/' + record.iconUrl);
    createImgPreview({ imageList: imageList, defaultWidth: 400, rememberState: true, onImgLoad });
  };
  const copy = (record) => {
    onlyMessage('复制成功', 'success');
    const transfer = document.createElement('input');
    document.body.appendChild(transfer);
    transfer.value = window.location.origin + '/' + record.iconUrl;
    transfer.focus();
    transfer.select();
    if (document.execCommand('copy')) {
      document.execCommand('copy');
    }
    transfer.blur();
    transfer.style.display = 'none';
  };
  const del = (record) => {
    deleteOne(record.id, handleSuccess);
  };
  const handleSuccess = () => {
    getDataList();
  };
  const onChange = (pageNumber: number) => {
    params.pageIndex = pageNumber;
    handleSuccess();
  };
  const handleChange = async (data) => {
    const res = await saveFileInfo({
      fileList: data,
      classifyId: props.data?.key || 999,
      type: props.data?.type || 'other'
    });
    if (res) {
      handleSuccess();
    }
  };
  onMounted(() => {
    handleSuccess();
  });
  watch(
    () => props.data,
    () => {
      if (props.data) {
        params.classifyId = props.data.key;
      } else {
        params.classifyId = undefined;
      }
      handleSuccess();
    },
    { immediate: true }
  );
</script>

<style lang="less" scoped>
  .big-screen-list-wrap {
    .el-select {
      display: inline-block !important;
      position: relative !important;
      width: auto !important;
    }

    position: relative;
    height: calc(100%);
    min-height: 769px;
    color: #9ea9b2;
    margin-left: 2px;
    background-color: #fff;

    .internal-box {
      //height: calc(100% - 32px);
      padding: 16px 16px 0 16px;
    }

    .top-search-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 12px;

      .el-input {
        width: 200px;
        margin-right: 20px;

        ::v-deep.el-input__inner {
          background-color: #151a26 !important;
        }
      }

      .el-select {
        margin-right: 20px;

        ::v-deep.el-input__inner {
          background-color: #151a26 !important;
        }
      }
    }

    .list-wrap {
      overflow: auto;
      padding-right: 5px;
      // 间隙自适应
      justify-content: space-around;
      max-height: calc(100% - 90px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-gap: 15px;
      padding-bottom: 10px;
      .big-screen-card-wrap {
        position: relative;
        height: 155px;
        cursor: pointer;
        &:hover {
          .screen-card__hover {
            height: 160px;
          }
        }

        .screen-card__hover {
          position: absolute;
          z-index: 999;
          top: 0;
          right: 0;
          left: 0;
          display: flex;
          overflow: hidden;
          align-items: center;
          justify-content: center;
          height: 0;
          transition: height 0.4s;
          background: #00000099;

          .screen-card__hover-box {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000080;
            display: flex;
            overflow: hidden;
            align-items: center;
            justify-content: center;
          }

          .preview {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            width: 100%;
            cursor: pointer;
            color: @primary-color;

            .circle {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              border: 1px solid @primary-color;
              border-radius: 50%;

              &:hover {
                color: #fff;
                background: @primary-color;
              }

              span {
                font-size: 12px;
              }
            }
          }
        }

        .big-screen-card-inner {
          overflow: hidden;
          width: 100%;
          height: 100%;
          cursor: pointer;
          background-color: #232832;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          color: #ffffff;
          //border: 1px solid #151a26;

          &:hover {
            color: #ffffff;
            border: 1px solid @primary-color;
          }

          .add-big-screen-card-text {
            color: @primary-color;
            font-size: 24px;
          }

          .big-screen-card-img {
            width: 100%;
            height: 180px;

            img {
              width: 100%;
              height: 100%;

              object-fit: cover;
            }

            :deep(.image-slot) {
              height: 100%;
              background-color: #232832;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            :deep(.el-image__error) {
              background-color: #1d1d1d;
            }
          }

          .big-screen-bottom {
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            box-sizing: border-box;
            width: 100%;
            padding: 0 10px;
            height: calc(100% - 180px);
            color: #ffffff;
            background-color: #232832;

            .left-bigscreen-title {
              font-size: 14px;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .right-bigscreen-time-title {
              font-size: 14px;
              overflow: hidden;
              width: 140px;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .big-screen-card-text {
            font-size: 14px;
            padding: 10px;
            text-align: center;
            color: #333;
          }
        }

        .big-screen-card-inner-add {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .el-loading-parent--relative {
      position: unset !important;
    }

    .footer-pagination-wrap {
      right: 16px;
      //bottom: 16px;
      position: absolute;
    }
  }

  .bs-pagination {
    :deep(.el-input__inner) {
      width: 110px !important;
      border: none;
      background: var(--bs-el-background-1);
    }
  }

  .empty {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :deep(.my-5) {
    margin: 0;
  }
  :deep(.image-slot) {
    height: 100%;
    background-color: #232832;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-image__error) {
    background-color: #1d1d1d;
  }
</style>
