<template>
  <div>
    <div class="content">
      <div v-if="!beforeSave" style="padding-top: 7px;">
        <div class="title">
          标绘资源{{ selectPlot? `(${selectPlot})`: '' }}
          <Icon v-if="selectPlot" :icon="`tabler:arrow-back`" size="24px" style="cursor: pointer;" @click="selectPlotItem('')"/>
        </div>
        <div class="item-list" v-if="!selectPlot">
          <div class="item" @click="selectPlotItem('二维平面类')">
            <div class="item-icon icon-2d"></div>
            <div class="item-inteval"></div>
            <div class="item-span">二维平面类</div>
            <div class="item-number">{{ plotList['二维平面类']?.length || 0 }}</div>
          </div>
          <!-- <div class="item" @click="selectPlotItem('三维立体类')">
            <div class="item-icon icon-3d"></div>
            <div class="item-inteval"></div>
            <div class="item-span">三维立体类</div>
            <div class="item-number">{{ plotList['三维立体类']?.length || 0 }}</div>
          </div> -->
          <div class="item" @click="selectPlotItem('军事标绘')">
            <div class="item-icon icon-military"></div>
            <div class="item-inteval"></div>
            <div class="item-span">军事标绘</div>
            <div class="item-number">{{ plotList['军事标绘']?.length || 0 }}</div>
          </div>
          <!-- <div class="item" @click="selectPlotItem('防火专题图标')">
            <div class="item-icon icon-fireproof"></div>
            <div class="item-inteval"></div>
            <div class="item-span">防火专题图标</div>
            <div class="item-number">{{ plotList['防火专题图标']?.length || 0 }}</div>
          </div>
          <div class="item" @click="selectPlotItem('小模型')">
            <div class="item-icon icon-model"></div>
            <div class="item-inteval"></div>
            <div class="item-span">小模型</div>
            <div class="item-number">{{ plotList['小模型']?.length || 0 }}</div>
          </div> -->
        </div>
        <div class="item-list" v-else>
          <div class="secondary-item" v-for="item in selectPlotList" :title="item.name" @click="plot(item)">
            <a-image
              :width="53"
              :height="53"
              :preview="false"
              :src="`/public/components/MapPlot/list/${item.image}`"
            />
          </div>
        </div>
        <div class="save-button-div" @click="saveJson">
          <div class="save-button">保存</div>
        </div>
      </div>
      <div v-else style="padding-right: 13px;">
        <div class="before-title">
          <div class="before-title-content">
            <div class="before-title-icon"></div>
            <div class="before-title-span">标绘资源</div>
          </div>
          <div class="before-back-button" @click="beforeBack">
            <div class="before-back-icon"></div>
            <div class="before-back-span">返回</div>
          </div>
        </div>
        <div class="before-inteval"></div>
        <a-textarea class="before-textarea"
          v-model:value="beforeSaveName"
          placeholder="请输入相关数据字段"
          style="height: 293px;margin-bottom: 21px;"
        />
        <div class="before-button-div">
          <div class="before-clear-button" @click="clearFunction">清除</div>
          <div class="before-save-button" @click="fetchSave">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, PropType, nextTick, h } from 'vue'
import { message } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { mapFun } from '@/hooks/ceshiFun.hook';
import { Modal } from 'ant-design-vue';

const ceshiFunction = mapFun();
const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object,
    required: true
  }
})
const plotList = props.chartConfig.option.dataset
const selectPlot = ref('')
const labelPlot = ref('')
const beforeSave = ref(false)
const beforeSaveName = ref('')
const selectPlotList = computed(() => {
  if(selectPlot.value){
    return plotList[selectPlot.value].map(item => {
      return {...item, image:item.image?.replace('{plotPath}/img/','')}
    })
  }
  return []
})
const selectPlotItem = (type) => {
  selectPlot.value = type
}
const plot = (item) => {
  if(window.drawGraphicLayer){
    if(item.type == 'label'){
      Modal.confirm({
        title: '请输入文字标记内容',
        content: h('input',{
          class: 'map-plot-label-input',
          onChange: (e) => labelPlot.value = e.target.value
        }),
        onOk: () => {
          item.style.text = labelPlot.value
          ceshiFunction.handlerMapPlot(item)
        },
        onCancel() {
          labelPlot.value = ''
        },
      })
      return
    }
    ceshiFunction.handlerMapPlot(item)
  }else{
    message.warning('未检测到地图组件无法绘制')
  }
}
const saveJson = () => {
  beforeSave.value = true
  ceshiFunction.saveMapPlotJson()
}
const beforeBack = () => {
  beforeSave.value = false
  beforeSaveName.value = ''
}
const fetchSave = () => {
  let name = beforeSaveName.value.trim()
  if(name.length <= 0){
    message.warning('请输入相关描述')
    return
  }
  let params = {
    name: beforeSaveName.value,
    data: ceshiFunction.saveMapPlotJson()
  }
  // TODO 走接口将数据保存到后端
  console.log('params',params)
}
const clearFunction = () => {
  // ceshiFunction.clearMapPlot()
  beforeSaveName.value = ''
}

console.log('props',props,plotList,ceshiFunction)
</script>
<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100%;
  background: #113825;
  border: 1px solid #00611A;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 7px;
  position: relative;
  .title{
    font-family: 'PingFangSC-Medium';
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 22px;
    user-select: none;
    margin-bottom: 17px;
    display: flex;
    justify-content: space-between;
  }
  .item-list{
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    max-height: calc(100% - 117px);
    scrollbar-width: none; 
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .item{
      width: 104px;
      height: 136px;
      background-image: url('/public/components/MapPlot/plot_item_background.png');
      background-size: 100% 100%;
      padding-top: 16px;
      padding-left: 13px;
      padding-right: 13px;
      margin-right: 13px;
      margin-bottom: 14px;
      cursor: pointer;
      .item-icon{
        width: 60px;
        height: 60px;
        background-size: 100% 100%;
        margin: auto;
        margin-bottom: 7px;
      }
      .icon-2d{
        background-image: url('/public/components/MapPlot/2d_icon.png');
      }
      .icon-3d{
        background-image: url('/public/components/MapPlot/3d_icon.png');
      }
      .icon-fireproof{
        background-image: url('/public/components/MapPlot/fireproof_icon.png');
      }
      .icon-military{
        background-image: url('/public/components/MapPlot/military_icon.png');
      }
      .icon-model{
        background-image: url('/public/components/MapPlot/model_icon.png');
      }
      .item-inteval{
        width: 80px;
        height: 2px;
        background: linear-gradient( 90deg, #05954F 0%, rgba(12,199,135,0) 100%);
        margin-bottom: 6px;
      }
      .item-span{
        height: 17px;
        font-family: 'PingFangSC-Medium';
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 17px;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .item-number{
        height: 18px;
        font-family: 'DINProMedium';
        font-weight: 500;
        font-size: 14px;
        color: #58FF95;
        line-height: 18px;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .secondary-item{
      width: 55px;
      height: 55px;
      border: 1px solid #113825;
      margin-right: 3px;
      margin-bottom: 3px;
      cursor: pointer;
    }
  }
  .save-button-div{
    position: absolute;
    bottom: 36px;
    right: 20px;
    display: flex;
    justify-content: end;
    cursor: pointer;
    user-select: none;
    .save-button{
      width: 140px;
      height: 43px;
      background-image: url('/public/components/FeatureMenu/save_button.png');
      background-size: 100% 100%;
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 22px;
      letter-spacing: 1px;
      text-shadow: 0px 1px 2px rgba(27,55,76,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .before-title{
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    .before-title-content{
      display: flex;
      align-items: center;
      .before-title-icon{
        width: 18px;
        height: 18px;
        background-image: url('/public/components/MapPlot/before_title_icon.png');
        background-size: 100% 100%;
        margin-right: 5px;
      }
      .before-title-span{
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 22px;
        user-select: none;
      }
    }
    .before-back-button{
      width: 81px;
      height: 30px;
      background: #0C2411;
      border-radius: 2px;
      border: 1px solid #00611A;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .before-back-icon{
        width: 14px;
        height: 13px;
        background-image: url('/public/components/MapPlot/before_back_icon.png');
        background-size: 100% 100%;
        margin-right: 5px;
      }
      .before-back-span{
        font-family: PingFangSC-Medium;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 13px;
        text-shadow: 0px 0px 13px rgba(0,207,44,0.5);
        user-select: none;
      }
    }
  }
  .before-inteval{
    height: 1px;
    background: linear-gradient( 90deg, #005516 0%, #0A392A 100%);
    margin-left: -20px;
    margin-bottom: 13px;
  }
  .before-textarea{
    background: #0C2411;
    border: 1px solid #00611A;
    height: 293px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    text-shadow: 0px 0px 13px rgba(0,207,44,0.5);
    font-style: normal;
    padding-top: 13px 19px;
  }
  .before-textarea::placeholder {
  color: #fff !important;
  opacity: 0.5;
}
  .before-button-div{
    display: flex;
    justify-content: end;
    user-select: none;
    .before-clear-button{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 121px;
      height: 44px;
      background-image: url('/public/components/MapPlot/before_clear_button.png');
      background-size: 100% 100%;
      margin-right: 10px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 22px;
      letter-spacing: 1px;
      text-shadow: 0px 1px 2px rgba(27,55,76,0.5);
      cursor: pointer;
    }
    .before-save-button{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 121px;
      height: 44px;
      background-image: url('/public/components/MapPlot/before_save_button.png');
      background-size: 100% 100%;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 22px;
      letter-spacing: 1px;
      text-shadow: 0px 1px 2px rgba(27,55,76,0.5);
      cursor: pointer;
    }
  }
}

</style>
<style lang="scss">
.map-plot-label-input{
  border: 1px solid;
  width: 100%;
  height: 35px;
  border-radius: 5px;
  padding: 0px 10px;
  border-color: #000;
  transition: 0.2s;
  &:focus{
    border-color: #6db8ff;
  }
}
</style>
