<template>
  <div class="thirdServe">
    <div class="thirdServe-div">
      <a-row>
        <a-col :span="24" style="margin-top: 10px">
          <span class="spanTitle">服务名称</span>
        </a-col>
        <a-col :span="24">
          <a-input v-modal:value="thirdServe.serveName" placeholder="请输入服务名称" size="large" />
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <span class="spanTitle">服务类型</span>
        </a-col>
        <a-col :span="24">
          <a-select
            allowClear
            v-modal:value="thirdServe.serveType"
            style="width: 300px"
            :options="serveTypeOptions"
            placeholder="请选择服务类型"
            size="large"
          />
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <span class="spanTitle">服务地址</span>
        </a-col>
        <a-col :span="24">
          <a-textarea
            v-modal:value="thirdServe.serveAddress"
            :rows="4"
            placeholder="请输入服务地址"
            size="large"
          />
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <span class="spanTitle">要素类型</span>
        </a-col>
        <a-col :span="24">
          <a-input
            v-modal:value="thirdServe.elementType"
            placeholder="请输入要素类型"
            size="large"
          />
        </a-col>
        <a-col :span="24" style="margin-top: 50px">
          <div style="position: absolute; right: 0px">
            <a-button style="width: 80px; margin-right: 20px" @click="serveCancle"> 取消 </a-button>
            <a-button type="primary" style="width: 80px" @click="thirdServeSubmit">确认</a-button>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, defineEmits, ref, onMounted } from 'vue';
  import { cloneDeep } from 'lodash-es';

  const emit = defineEmits(['serveCancle']);
  const thirdServe = {
    serveName: null,
    serveType: null,
    serveAddress: null,
    elementType: null,
  };
  const thirdServeForm = ref({});

  const serveTypeOptions = [
    {
      value: 0,
      label: 'WMTS OGC Web服务',
    },
    {
      value: 1,
      label: 'WMS OGC Web服务',
    },
    {
      value: 2,
      label: 'ArcGIS REST服务',
    },
    {
      value: 3,
      label: '矢量瓦片服务（Mapbox）',
    },
    {
      value: 4,
      label: 'X，Y，Z瓦片服务',
    },
  ];

  function thirdServeSubmit() {}

  function serveCancle() {
    emit('serveCancle');
  }

  onMounted(() => {
    thirdServeForm.value = cloneDeep(thirdServe);
  });
</script>
<style lang="less">
  .thirdServe {
    display: flex;
    justify-content: center;
    height: 700px;
  }

  .thirdServe-div {
    margin-top: 30px;
    width: calc(50%);
  }

  .spanTitle {
    margin-top: 25px;
    font-size: 16px;
  }
</style>
