<template>
  <div class="serve-resource lightOrDark1">
    <div class="list">
      <div class="header">
        <a-select v-model:value="data" style="width: 142px; margin-right: 20px">
          <a-select-option value="vector-data">矢量数据</a-select-option>
        </a-select>
        <a-input-search
          style="width: 362px; margin-right: 20px"
          v-model:value="key"
          placeholder="请输入服务关键词"
          enter-button
        />
        <a-select v-model:value="sort" style="width: 142px">
          <a-select-option value="default">默认排序</a-select-option>
          <a-select-option value="servename">服务名称</a-select-option>
          <a-select-option value="servetime">发布时间</a-select-option>
        </a-select>
      </div>
      <div class="content">
        <div class="show-item lightOrDark2" v-for="item in dataList" :key="item.id">
          <div class="info">
            <a-image
              :width="119"
              :height="87"
              style="border-radius: 4px"
              :src="
                item.image
                  ? VITE_GLOB_API_URL_VAR + item.image
                  : 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp'
              "
              :preview="false"
              :fallback="errorImage"
            />
            <div class="show-text">
              <div class="title">服务名称： {{ item.name }}</div>
              <div class="sub-title">服务描述： {{ item.description }}</div>
              <div class="sub-title">创建时间： {{ item.createTime }}</div>
            </div>
          </div>
          <div class="button">
            <a-button type="error" @click="handlerDeleteLayer(item)">
              <template #icon>
                <DeleteOutlined />
              </template>
            </a-button>
            &nbsp;
            <a-button type="primary" @click="handlerEditLayer(item)">
              <template #icon>
                <EditOutlined />
              </template>
            </a-button>
            &nbsp;
            <a-button type="primary" @click="handlerAddToLayerList(item)">
              <template #icon>
                <PlusOutlined />
              </template>
            </a-button>
          </div>
        </div>
      </div>
      <div class="footer">
        <a-pagination
          v-model:current="queryList.page"
          v-model:page-size="queryList.limit"
          :total="total"
          @change="onPageChange"
          :show-total="(total) => `共 ${total} 条`"
        />
        <a-select v-model:value="queryList.limit" style="width: 120px">
          <a-select-option value="5">共5条/页</a-select-option>
          <a-select-option value="10">共10条/页</a-select-option>
          <a-select-option value="20">共20条/页</a-select-option>
          <a-select-option value="50">共50条/页</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="information">
      <div style="margin-bottom: 16px">
        <div style="width: 100%; height: 266px">
          <a-image
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            height="100%"
            width="100%"
          />
        </div>
      </div>
      <div class="show-info lightOrDark2">
        <div class="title">
          <div class="first"></div>
          <div class="last"></div>
        </div>
        <div
          style="
            position: absolute;
            height: 32px;
            top: 24px;
            display: flex;
            align-items: center;
            margin-left: 14px;
          "
        >
          服务基本信息
        </div>
        <div class="serve-text">
          <div style="width: 60%; margin-left: 20px">
            <a-row>
              <a-col :span="6">
                <span>服务URL：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>服务名称：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>服务简介：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>关键字：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>服务类型：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>覆盖范围：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>坐标系：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>投影类型：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>使用权限：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>发布时间：</span>
              </a-col>
              <a-col :span="18"> </a-col>
              <a-col :span="6">
                <span>服务预览：</span>
              </a-col>
              <a-col :span="18"> </a-col>
            </a-row>
          </div>
          <div style="width: 35%">
            <span>预览图：</span>
            <a-image
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              height="100%"
              width="100%"
            />
          </div>
        </div>
        <!-- <a-textarea v-model:value="jsonData" style="height: 240px" /> -->
        <!-- <p class="operate-box">
          <a-button type="primary" @click="handlerRenderLayer">应 用</a-button>
          &nbsp;
          <a-button type="primary" @click="handlerSaveStyle">保 存</a-button>
        </p> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineEmits, reactive, onBeforeMount } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { deleteLayer, getLayerList, updateLayer } from '@/api/sys/layerManagement';
  import { utildata } from './util.ts';

  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');

  const { createMessage } = useMessage();

  const data = ref('vector-data');
  const sort = ref('default');
  const key = ref('');
  const dataList = ref([]);
  const total = ref(0);
  const current = ref();
  const pageSize = ref();
  const jsonData = ref('');
  const queryList = reactive({
    key: null,
    limit: 5,
    page: 1,
    name: null,
  });

  onBeforeMount(() => {
    handlerGetLayerList();
  });

  const onPageChange = (e) => {
    queryList.page = e;
    handlerGetLayerList();
  };

  const handlerGetLayerList = () => {
    // getLayerList(queryList).then((res) => {
    //   //   console.log(dataList.value);
    // });
    dataList.value = utildata;
    total.value = utildata.length;
  };

  const currentLayer = ref();
  const handlerEditLayer = (item) => {};
</script>
<style lang="less" scoped>
  html[data-theme='light'] {
    .lightOrDark1 {
      background-color: #e0e5ed;
    }
    .lightOrDark2 {
      background-color: #ffffff;
    }
  }
  [data-theme='dark'] {
    .lightOrDark1 {
      background-color: #000000;
    }
    .lightOrDark2 {
      background-color: #1f1f1f;
      color: #ffffff;
    }
  }

  .serve-resource {
    display: flex;
    justify-content: space-between;
    padding: 28px 46px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 700px;

    .list {
      width: calc(50% - 19px);
    }
    .header {
      display: flex;
      margin-bottom: 14px;
    }
    .content {
      max-height: 565px;
      overflow: auto;
      margin-bottom: 8px;
      height: 565px;
      .show-item {
        height: 119px;
        border-radius: 4px;
        padding: 16px 30px 16px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
        .info {
          display: flex;
          .show-text {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .title {
              font-size: 14px;
              font-weight: 600;
              margin-bottom: 3px;
            }
            .sub-title {
              font-size: 12px;
            }
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: flex-end;
    }
    .information {
      width: calc(50% - 19px);
      .show-info {
        height: 369px;
        border-radius: 10px;
        padding: 24px 29px;
        position: relative;
        .title {
          display: flex;
          height: 32px;
          margin-bottom: 16px;
          .first {
            width: 3px;
            height: 100%;
            background-color: #0081ff;
          }
          .last {
            background: linear-gradient(270deg, rgba(0, 183, 255, 0) 0%, #0081ff 100%);
            opacity: 0.14;
            flex: 1;
          }
        }
        .serve-text {
          display: flex;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 400;
          font-size: 12px;

          .serve-info {
            width: 60%;
            padding-left: 12px;
            .info-title {
              display: inline-block;
              opacity: 0.41;
              width: 60px;
              min-width: 60px;
            }
            .info-content {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            & > div {
              margin-bottom: 7px;
              display: flex;
            }
          }
          .serve-image {
            width: 40%;
          }
        }
        .operate-box {
          margin: 12px 0px 0px 0px;
          text-align: right;
        }
      }
    }
  }
</style>
