<template>
  <Modal class="mch-create-modal" v-model="dlgShow" :mask-closable="false" title="选择坐标系" width="600">
    <div class="mch-geosys-panel">
      <Search v-model="keywords" style="width: 100%;"/>
      <div>
        <div class="sys-list">
          <Tree :data="treeList" @on-select-change="selectChange"></Tree>
        </div>
        <div class="sys-wkt">
          <div v-if="selectedItem">
            <div class="sys-title">
              {{ selectedItem.title || '' }}
              <span class="epsg" v-if="selectedItem.authCode">{{ selectedItem.authName }}:{{ selectedItem.authCode }}</span>
            </div>
            <textarea name="wkt" v-model="custom_wkt" placeholder="输入WKT字符串" spellcheck="false" v-if="selectedItem.type==='CUSTOM'"></textarea>
            <div class="form" v-else-if="selectedItem.type.includes('LOCAL')">
              <div class="switch abs">自定义原点：<Switch v-model="customOrigin" size="small" @on-change="originTypeChange"/></div>
              <div class="tag">原点</div>
              <div class="auto-text" v-if="!origin">自动</div>
              <div v-else>
                <div class="form-item inline">
                  <span>经度（X）：</span>
                  <Input type="number" v-model="origin[1]" size="small" style="width: 100px;"></Input>
                </div>
                <div class="form-item inline">
                  <span>纬度（Y）：</span>
                  <Input type="number" v-model="origin[0]" size="small" style="width: 100px;"></Input>
                </div>
                <div class="form-item inline">
                  <span>高度（Z）：</span>
                  <Input type="number" v-model="origin[2]" size="small" style="width: 100px;"></Input>
                </div>
              </div>
              <div class="tag" style="margin-top: 5px;">偏移</div>
              <div class="auto-text" v-if="!offset">自动</div>
              <div v-else>
                <div class="form-item inline">
                  <span>经度（X）：</span>
                  <Input type="number" v-model="offset[1]" size="small" style="width: 100px;"></Input>
                </div>
                <div class="form-item inline">
                  <span>纬度（Y）：</span>
                  <Input type="number" v-model="offset[0]" size="small" style="width: 100px;"></Input>
                </div>
                <div class="form-item inline">
                  <span>高度（Z）：</span>
                  <Input type="number" v-model="offset[2]" size="small" style="width: 100px;"></Input>
                </div>
              </div>
            </div>
            <div class="sys-text">{{ selectedItem.wkt || '' }}</div>
          </div>
          <div class="empty-text" v-else>未选择坐标系</div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="footer">
        <Button type="text" @click="cancel">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </template>
  </Modal>
</template>

<script>
import {crsList} from '@mapcatch/util'
import Search from '../search'
import _ from 'lodash'
export default {
  components: {
    Search
  },
  methods: {
    selectChange(nodes) {
      if (!nodes.length) {
        this.selectedItem = null
      } else {
        this.selectedItem = nodes[0]
      }
    },
    show(options) {
      this.options = options
      this.dlgShow = true
    },
    ok() {
      if (!this.selectedItem) {
        this.$Message.warning('未选择坐标系！')
        return
      }
      if (this.selectedItem.type === 'CUSTOM' && !this.custom_wkt) {
        this.$Message.warning('请输入坐标系信息')
        return
      }
      if (this.options?.onOk) {
        let selectedItem = _.cloneDeep(this.selectedItem)
        let {type} = selectedItem
        if (type.includes('LOCAL') && this.customOrigin) {
          selectedItem.origin = this.origin
          selectedItem.offset = this.offset
        } else if (type === 'CUSTOM') {
          selectedItem.wkt = this.custom_wkt
        }
        this.options.onOk(selectedItem)
      }
      this.dlgShow = false
    },
    cancel() {
      if (this.options?.onCancel) {
        this.options.onCancel()
      }
      this.dlgShow = false
    },
    isSearchedItem(text, keywords) {
      for(let i = 0;i < keywords.length;i++) {
        if (!text.includes(keywords[i])) {
          return false
        }
      }
      return true
    },
    originTypeChange() {
      if (this.customOrigin) {
        this.origin = [0, 0, 0]
        this.offset = [0, 0, 0]
      } else {
        this.origin = null
        this.offset = null
      }
    }
  },
  data() {
    return {
      dlgShow: false,
      selectedItem: null,
      keywords: '',
      customOrigin: false,
      origin: null,
      offset: null,
      custom_wkt: ''
    }
  },
  computed: {
    treeList() {
      let list = _.cloneDeep(crsList)
      let keywords = this.keywords.split(' ').map(d => d.trim()).filter(d => !!d)
      if (!keywords.length) {
        return list
      }
      list = list.filter(d => d.children)
      list.forEach(group => {
        group.expand = true
        for(let i = 0;i < group.children.length;i++) {
          if (group.children[i].children) {
            group.children[i].expand = true
            for(let j = 0;j < group.children[i].children.length;j++) {
              let item = group.children[i].children[j]
              let text = `${item.title} ${item.authName}:${item.authCode}`
              if (!this.isSearchedItem(text, keywords)) {
                group.children[i].children.splice(j, 1)
                j--
              }
            }
            if (!group.children[i].children.length) {
              group.children.splice(i, 1)
              i--
            }
          } else {
            let item = group.children[i]
            let text = `${item.title} ${item.authName}:${item.authCode}`
            if (!this.isSearchedItem(text, keywords)) {
              group.children.splice(i, 1)
              i--
            }
          }
        }
      })
      return list.filter(d => d.children.length)
    }
  }
}
</script>
