<script setup lang="ts">
import { ElRow, ElCol, ElButton, ElScrollbar } from 'element-plus'
import { reactive, ref, defineEmits } from 'vue'
import { ICONTYPE } from './type'
import vMove from './hooks/mouseMove.directive'
const props = defineProps<{ drawList: any[] }>()
console.log(props)

let type = ref<Number>(1)

let listData = reactive<{
  list: any
}>({
  list: []
})

const iconList: ICONTYPE[] = [
  {
    iconUrl: 'icon1.svg',
    text: '图标1',
    type: 'Icon',
    category: 'point'
  },
  {
    iconUrl: 'icon2.svg',
    text: '图标2',
    type: 'Icon',
    category: 'point'
  },
  {
    iconUrl: 'icon3.svg',
    text: '图标3',
    type: 'Icon',
    category: 'point'
  },
  {
    iconUrl: 'icon4.svg',
    text: '图标4',
    type: 'Icon',
    category: 'point'
  },
  {
    iconUrl: 'icon5.svg',
    text: '图标5',
    type: 'Icon',
    category: 'point'
  },
  {
    iconUrl: 'icon6.svg',
    text: '图标6',
    type: 'Icon',
    category: 'point'
  },
  {
    iconUrl: 'icon7.svg',
    text: '图标7',
    type: 'Icon',
    category: 'point'
  }
]
listData.list = iconList

function clickType(item: Number): void {
  type.value = item
  if (item === 4) {
    console.log(props.drawList)
  } else if (item === 3) {
    let arr: { groupName: string; list: ICONTYPE[] }[] = [
      {
        groupName: '线状',
        list: [
          {
            iconUrl: 'polyline.png',
            text: '折线',
            type: 'Polyline',
            category: 'polyline'
          },
          {
            iconUrl: 'arc.png',
            text: '曲线',
            type: 'Curve',
            category: 'polyline'
          },
          {
            iconUrl: 'free-line.png',
            text: '自由曲线',
            type: 'FreehandLine',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot16.png',
            text: '弧线',
            type: 'ArcLine',
            category: 'polyline'
          }
        ]
      },
      {
        groupName: '面状',
        list: [
          {
            iconUrl: 'eMap-plot17.png',
            text: '多边形',
            type: 'Polygon',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot18.png',
            text: '圆',
            type: 'Circle',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot19.png',
            text: '矩形',
            type: 'Rectangle',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot20.png',
            text: '椭圆',
            type: 'Ellipse',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot21.png',
            text: '扇形',
            type: 'Sector',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot23.png',
            text: '封闭曲线',
            type: 'CurvedSurface',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot23.png',
            text: '自由绘面',
            type: 'FreehandPolygon',
            category: 'polygon'
          }
        ]
      },
      {
        groupName: '箭头',
        list: [
          {
            iconUrl: 'eMap-plot24.png',
            text: '双箭头',
            type: 'PincerArrow',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot25.png',
            text: '燕尾箭头',
            type: 'SwallowtailArrow',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot26.png',
            text: '多箭头',
            type: 'ThreeArrow',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot27.png',
            text: '细直箭头',
            type: 'StraightLineArrow',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot28.png',
            text: '单曲箭头',
            type: 'CurveLineArrow',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot29.png',
            text: '单箭头',
            type: 'SingleArrow',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot30.png',
            text: '直箭头',
            type: 'FineArrow',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot31.png',
            text: '突击方向',
            type: 'AttackArrow',
            category: 'polygon'
          }
        ]
      },
      {
        groupName: '行进路线',
        list: [
          {
            iconUrl: 'eMap-plot32.png',
            text: '武警',
            type: 'PolicePath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot33.png',
            text: '专家',
            type: 'ProfessorPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot34.png',
            text: '工程',
            type: 'EngineeringPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot35.png',
            text: '军队',
            type: 'ArmyPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot36.png',
            text: '消防',
            type: 'FirefightPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot37.png',
            text: '医疗',
            type: 'MedicalPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot38.png',
            text: '电力抢修',
            type: 'ElectricPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot39.png',
            text: 'CMLDEF',
            type: 'CMLDEFPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot40.png',
            text: '专业救援',
            type: 'RescuePath',
            category: 'polyline'
          }
        ]
      },
      {
        groupName: '复杂线路',
        list: [
          {
            iconUrl: 'eMap-plot41.png',
            text: '空中运输',
            type: 'AirTransportationPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot42.png',
            text: '炮弹路线',
            type: 'CannonballPath',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot43.png',
            text: '空中机动',
            type: 'AirMobilePath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot44.png',
            text: '高射炮兵营地',
            type: 'AntiaircraftArtilleryGunBattalion',
            category: 'polygon'
          },
          {
            iconUrl: 'eMap-plot45.png',
            text: '摩托化行军纵队',
            type: 'MotorizedMarchingColumnPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot46.png',
            text: '防空兵行军纵队',
            type: 'AirDefenseTroopsMarchingColumnPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot47.png',
            text: '坦克及步战车进攻队形',
            type: 'TankAandInfantryFightingVehicleAssaultFormationPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot48.png',
            text: '进攻队形',
            type: 'AttackFormationPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot49.png',
            text: '由进攻转为防守2',
            type: 'ShiftFromOffenseToDefense2',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot50.png',
            text: '由进攻转为防守1',
            type: 'ShiftFromOffenseToDefense1',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot51.png',
            text: '炮兵行军纵队',
            type: '"ArtilleryMarchingColumnPath"',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot52.png',
            text: '侦查搜索',
            type: 'ReconnaissanceAndSearchPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot53.png',
            text: '流动哨',
            type: 'PatrolPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot54.png',
            text: '坦克营进攻队形',
            type: 'TankBattalionAttackFormationPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot55.png',
            text: '步兵战斗车连',
            type: 'InfantryCombatVehicleCompanyPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot56.png',
            text: '水上救援潜艇',
            type: 'SurfaceRescueSubmarinePath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot57.png',
            text: '救援车辆纵队',
            type: 'ColumnOfRescueVehiclesPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot58.png',
            text: '输油管',
            type: 'OilConveyingPipePath',
            category: 'polyline'
          },
          { iconUrl: 'eMap-plot59.png', text: '水下救援船', type: 'SubmarineRescueShipPath', category: 'polyline' },
          {
            iconUrl: 'eMap-plot60.png',
            text: '水下救援',
            type: 'SubmarineRescuePath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot61.png',
            text: '水下搜救',
            type: 'SubmarineSearchPath',
            category: 'polyline'
          },
          { iconUrl: 'eMap-plot62.png', text: '水下搜救', type: 'SubmarineSearchPath', category: 'polyline' },
          {
            iconUrl: 'eMap-plot63.png',
            text: '水下搜救',
            type: 'SubmarineSearchPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot64.png',
            text: '水下搜救',
            type: 'SubmarineSearchPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot65.png',
            text: '水下搜救',
            type: 'SubmarineSearchPath',
            category: 'polyline'
          },
          {
            iconUrl: 'eMap-plot66.png',
            text: '水下搜救',
            type: 'SubmarineSearchPath',
            category: 'polyline'
          }
        ]
      }
    ]
    listData.list = arr
  } else {
    listData.list = iconList
  }
}

function loadImg(url: string | undefined) {
  return new URL(`./icon/${url}`, import.meta.url).href
}
defineEmits(['selectType', 'toggle', 'delete'])
</script>

<template>
  <div class="select-type" v-move>
    <div class="select-type_left">
      <div :class="{ selected: type === 1 }" @click.stop="clickType(1)">常用标绘</div>
      <div :class="{ selected: type === 2 }" @click.stop="clickType(2)">应急标绘符号</div>
      <div :class="{ selected: type === 3 }" @click.stop="clickType(3)">标绘工具箱</div>
      <div :class="{ selected: type === 4 }" @click.stop="clickType(4)">管理标绘</div>
    </div>
    <ElScrollbar class="select-type_content">
      <template v-if="type === 1 || type === 2">
        <el-row :gutter="16" justify="start" align="middle">
          <el-col
            class="icon-item"
            :span="8"
            v-for="(item, index) in listData.list"
            :key="index"
            @click..prevent="$emit('selectType', item)"
          >
            <img :src="loadImg(item.iconUrl)" />
            <div>{{ item.text }}</div>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="type == 3">
        <div v-for="(group, index) in listData.list">
          <div class="group-title">{{ group.groupName }}</div>
          <el-row :gutter="16" justify="start" align="middle">
            <el-col
              class="icon-item"
              :span="8"
              v-for="(item, index) in group.list"
              :key="index"
              @click..prevent="$emit('selectType', item)"
            >
              <img :src="loadImg(item.iconUrl)" />
              <div>{{ item.text }}</div>
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-else>
        <el-row v-for="(item, index) in props.drawList" :key="item.id">
          <el-col :span="8">
            <el-button text type="primary" @click.stop="$emit('toggle', item)">{{
              item.entity && !item?.entity.show ? '显示' : '隐藏'
            }}</el-button>
          </el-col>

          <el-col :span="8"
            ><span>符号--{{ index + 1 }}</span></el-col
          >
          <el-col :span="8">
            <el-button text type="danger" @click.stop="$emit('delete', item)">删除</el-button>
          </el-col>
        </el-row>
      </template>
    </ElScrollbar>
  </div>
</template>

<style scoped>
.select-type {
  background-color: #fff;
  width: 320px;
  height: 500px;
  border-radius: 20px;
  border: 1px solid #dedede;
  display: flex;
  overflow: hidden;
}
.select-type_left {
  width: 40px;
  height: 100%;
  overflow: hidden;
}
.select-type_left div {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px 0 0 5px;
  /* height: 54px;
  line-height: 54px; */
}
.selected {
  cursor: auto;
  background-color: #dedede;
}
.select-type_content {
  flex: 1;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-left: 1px solid #dedede;
}
.group-title {
  padding: 8px 0;
  text-align: left;
  border: 1px solid #ddd;
  background: white;
  border-left: none;
  border-right: none;
  font-weight: bold;
  margin: 8px 0;
}
.icon-item:hover {
  border-radius: 5px;
  border: 1px solid #0092ff;
  cursor: pointer;
}
</style>
