<template>
  <Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="attackArrow"
    :closeCallback="closeCallback">
    <template #content>
      <span class="custom-divider"></span>
      <div class="div-item">
        <div class="row" style="align-items: flex-start;">
          <div class="col">
            <span class="label">名称</span>
            <input class="input" maxlength="40" type="text" v-model="entityOptions.name">
          </div>
          <div class="col" style="flex: 0 0 60%;">
            <div class="row">
              <div class="col input-select-unit-box">
                <span class="label" style="margin-right: 0px;">投影面积:</span>
                <input class="input input-text" readonly type="text" v-model="area">
                <el-select v-model="areaUnit">
                  <el-option label="平方米" value="m2"></el-option>
                  <el-option label="平方千米" value="km2"></el-option>
                  <el-option label="亩" value="mu"></el-option>
                  <el-option label="公顷" value="ha"></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="label">动画时长</span>
            <div class="input-number input-number-unit-3">
              <input class="input" type="number" title="" min="500" max="9999999" v-model="entityOptions.spreadTime">
              <span class="unit">ms</span>
              <span class="arrow"></span>
            </div>
          </div>
          <div class="col" style="flex: 0 0 60%;">
            <div class="row">
              <div class="col">
                <span class="label">动画</span>
                <input class="btn-switch" type="checkbox" v-model="entityOptions.spreadState">
              </div>
              <div class="col">
                <span class="label">动画重复</span>
                <input class="btn-switch" type="checkbox" v-model="entityOptions.loop">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="div-item">
        <div class="row">
          <el-tabs v-model="activeName">
            <!-- <el-tab-pane label="属性信息" name="1">
              <attribute :entityOptions="entityOptions"></attribute>
            </el-tab-pane> -->
            <el-tab-pane label="空间信息" name="2">
              <div class="row">
                <div class="col height-mode-box">
                  <span class="label" style="flex: 0 0 56px;">高度模式</span>
                  <el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
                    v-model="heightMode" @change="heightModeChange" placeholder="请选择">
                    <el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
                    </el-option>
                  </el-select>
                </div>
                <div class="col">
                  <span class="label">Z值统一增加</span>
                  <div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
                    <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
                    <span class="unit">m</span>
                    <span class="arrow"></span>
                  </div>
                  <button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
                    :disabled="heightMode == 2">应用</button>
                </div>
              </div>
              <div class="row">
                <div class="table spatial-info-table">
                  <div class="table-head">
                    <div class="tr">
                      <div class="th"></div>
                      <div class="th">经度（X）</div>
                      <div class="th">纬度（Y）</div>
                      <div class="th">高度（Z）</div>
                    </div>
                  </div>
                  <div class="table-body">
                    <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
                      <div class="td">{{ i + 1 }}</div>
                      <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
                        <input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
                          v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
                        <span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
                      </div>
                      <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
                        <input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
                          v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
                        <span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
                      </div>
                      <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
                        <input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
                          v-model="entityOptions.height" min="-9999999" max="999999999"
                          v-if="activeTd.index == i && activeTd.name == 'alt'">
                        <span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="面风格" name="3">
              <div class="row">
                <div class="col">
                  <span class="label">面颜色</span>
                  <div class="color" ref="colorRef"></div>
                </div>
                <div class="col">
                  <span class="label">描边颜色</span>
                  <div class="lineColor" ref="lineColorRef"></div>
                </div>
                <div class="col">
                  <span class="label">描边宽度</span>
                  <div class="input-number input-number-unit-2">
                    <input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
                    <span class="unit">px</span>
                    <span class="arrow"></span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="标签风格" name="4">
              <labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <span class="custom-divider"></span>
    </template>
    <template #footer>
      <div style="position: absolute; left: 24px; display: flex;">
        <button @click="nodeEdit"><svg class="icon-edit">
            <use xlink:href="#yj-icon-edit"></use>
          </svg>二次编辑</button>
        <button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
            <use xlink:href="#yj-icon-py"></use>
          </svg>平移</button>
      </div>
      <button @click="remove">删除</button>
      <button @click="confirm">确定</button>
      <button @click="close">关闭</button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { inject } from "vue";
import { updateInfo } from '@/views/largeScreen/components/api';
import Dialog from './baseDialog.vue'
import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue'
import { useTreeNode } from '../treeNode'

const { cusUpdateNode } = useTreeNode()

const title = ref('箭头')
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const options = ref({});
const colorRef = ref(null)
const lineColorRef = ref(null)
// eventBus.on("openPolygonEdit", () => {
//   baseDialog.value?.open()
// });

const area = ref(0)
const areaUnit = ref('m2')
const height = ref(10)
const heightModeData = ref([
  {
    name: '海拔高度',
    value: '海拔高度',
    key: 0
  },
  {
    name: '相对地表',
    value: '相对地表',
    key: 1
  },
  {
    name: '依附模型',
    value: '依附模型',
    key: 2
  }
])

const activeName = ref('2')
const activeTd = ref({
  index: -1,
  name: ''
})
const positions = ref([])
const heightMode = ref(0)
const entityOptions: any = ref({});
let originalOptions: any
let that: any

const open = async (id: any, type: any) => {
  if(type && type === 'pincerArrow') {
    title.value = '双箭头'
  }
  that = window['Earth1'].entityMap.get(id)
  originalOptions = structuredClone(that.options)
  entityOptions.value = that
  heightMode.value = entityOptions.value.heightMode
  area.value = entityOptions.value.areaByMeter
  positions.value = structuredClone(that.options.positions)
  that.areaChangeCallBack = () => {
    switch (areaUnit.value) {
      case 'm2'://平方米
        area.value = entityOptions.value.areaByMeter
        break
      case 'km2'://平方千米
        area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
        break
      case 'mu'://亩
        area.value = Number(
          (entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
        )
        break
      case 'ha'://公顷
        area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
        break
      default:
        area.value = entityOptions.value.areaByMeter
    }
  }
  let spreadState = entityOptions.value.spreadState
  heightModeChange(heightMode.value)
  setTimeout(() => {
    entityOptions.value.spreadState = spreadState
  }, 50);
  baseDialog.value?.open()

  await nextTick()
  let colorPicker = new window['YJColorPicker']({
    el: colorRef.value,
    size: 'mini', //颜色box类型
    alpha: true, //是否开启透明度
    defaultColor: entityOptions.value.color,
    disabled: false, //是否禁止打开颜色选择器
    openPickerAni: 'opacity', //打开颜色选择器动画
    sure: color => {
      entityOptions.value.color = color
    }, //点击确认按钮事件回调
    clear: () => {
      entityOptions.value.color = 'rgba(255,255,255,1)'
    } //点击清空按钮事件回调
  })
  let linecolorPicker = new window['YJColorPicker']({
    el: lineColorRef.value,
    size: 'mini', //颜色box类型
    alpha: true, //是否开启透明度
    defaultColor: entityOptions.value.lineColor,
    disabled: false, //是否禁止打开颜色选择器
    openPickerAni: 'opacity', //打开颜色选择器动画
    sure: color => {
      entityOptions.value.lineColor = color
    }, //点击确认按钮事件回调
    clear: () => {
      entityOptions.value.lineColor = 'rgba(255,255,255,1)'
    } //点击清空按钮事件回调
  })
}

const heightModeChange = (val) => {
  that.heightMode = heightMode.value
}

const heightConfirm = () => {
  if (entityOptions.value.operate.positionEditing) {
    that.positionEditing = false
    entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
  }
  else {
    that.closeNodeEdit(this)
    that.heightMode = that.heightMode
    setTimeout(() => {
      entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
    }, 100);
  }
}
const inputDblclick = async (event, i, anme) => {
  if (heightMode.value == 2) {
    return
  }
  activeTd.value = {
    index: i,
    name: anme
  }
  await nextTick()
  let inputElm = event.target.getElementsByClassName('input')[0]
  if (inputElm) {
    inputElm.focus()
  }
}
const inputBlurCallBack = (event, i, name, digit = 2) => {
  activeTd.value = {
    index: -1,
    name: ''
  }
}

const translate = () => {
  entityOptions.value.spreadState = false
  that.openPositionEditing(() => {
    entityOptions.value.options.positions = structuredClone(that.options.positions)
  })
}

const closeCallback = () => {
  entityOptions.value.originalOptions = structuredClone(originalOptions)
  that.positionEditing = false
  entityOptions.value.closeNodeEdit()
  entityOptions.value.reset()
  // eventBus.emit("destroyComponent")
}

const nodeEdit = () => {
  entityOptions.value.spreadState = false
  that.nodeEdit((e, positions, areaByMeter) => {
    entityOptions.value.options.positions = structuredClone(positions)
  })
}

const confirm = () => {
  originalOptions = structuredClone(that.options)
  let params = structuredClone(that.options)
  baseDialog.value?.close()
  delete params.host
  let params2 = {
    "id": params.id,
    "sourceName": params.name,
    "params": params,
    "isShow": params.show ? 1 : 0,
  }
  updateInfo(params2)
  cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
}
const close = () => {
  baseDialog.value?.close()
}

watch(
  () => areaUnit.value,
  (val) => {
    if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
      that.areaChangeCallBack()
    }
  },
  { immediate: true }
);

const remove = () => {
  that.remove()
  close()
}

defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss"></style>