<template>
  <div class="th-source-list list-wrapper full">
    <div class="catalog-list" v-show="mode === 'icon'">
      <CatalogNode
        class="fake"
        :icon="getIcon('catalog')"
        :hasPopupMenu="false"
        :smallSize="true"
        label="上级目录"
        :draggable="false"
        :dropable="true"
        @on-click="backToPre"
        @on-drop="drop($event, null)"
        v-if="paths && paths.length"
      >
      </CatalogNode>
      <CatalogNode
        v-for="(source, index) in list"
        :key="source.catalogId"
        :icon="getIcon(source.type)"
        :smallSize="true"
        :hasPopupMenu="true"
        :activeRename="renameField === source.catalogId"
        :label="source.name"
        :selected="selectedId === source.catalogId"
        :draggable="isprivate"
        :dropable="source.type === 'catalog' && isprivate"
        @on-drag="dragStart($event, source)"
        @on-drop="drop($event, source)"
        @on-click="selectSource(source)"
        @on-label-change="rename($event, index, source)"
      >
        <GroupActions
          :node="source"
          @on-rename="activeRename"
          @on-delete="deleteNode"
          v-if="source.type === 'catalog' && isprivate"
        />
        <SourceActions
          :node="source"
          :isprivate="isprivate"
          @on-rename="activeRename"
          @on-delete="deleteNode"
          v-if="source.type !== 'catalog'"
        />
      </CatalogNode>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </div>
    <div class="th-list-view" v-show="mode === 'list'">
      <Table
        ref="tableData"
        :columns="columns"
        :data="list"
        highlight-row
        :height="tableHeight"
        @on-current-change="selectSource"
      >
        <template #name="{row, column, index}">
          <div class="inline icon-small" :class="`th-icon-${getIcon(row.type)}`"></div>
          <div class="inline name" :title="row[column.key]">
            <input type="text" :value="row[column.key]" v-focus="renameField === row.catalogId" @blur="rename($event, index, row)" v-if="renameField === row.catalogId" />
            <span v-else>{{ row[column.key] }}</span>
          </div>
        </template>
        <template #action="{ row}">
          <GroupActions
            :node="row"
            @on-rename="activeRename"
            @on-delete="deleteNode"
            type="spread"
            v-if="row.type === 'catalog' && isprivate"
          />
          <SourceActions
            :node="row"
            :isprivate="isprivate"
            @on-rename="activeRename"
            @on-delete="deleteNode"
            type="spread"
            v-if="row.type !== 'catalog'"
          />
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import {catalogUpdate, tableUpdate} from '../../libs/request'
import GroupActions from './GroupActions.vue'
import SourceActions from './SourceActions.vue'
import CatalogNode from '../catalog-node'
import util from '../../libs/util'
import config from '../../constants/config'
export default {
  props: ['list', 'mode', 'paths', 'isprivate', 'selectedId'],
  components: { CatalogNode, GroupActions, SourceActions },
  methods: {
    selectSource(item) {
      this.$emit('on-select', item)
    },
    activeRename(catalogId) {
      this.renameField = catalogId
    },
    backToPre() {
      this.$emit('on-back')
    },
    rename(newName, index, source) {
      let value = newName
      this.renameField = ''
      if (!value) {
        this.$Message.warning('不能为空')
        return
      }
      if (value === source.name) {
        return
      }
      if (this.isNameExist(value)) {
        this.$Message.warning('该名称已存在')
        return
      }
      let ownerId = config.USER
      catalogUpdate(ownerId, source.catalogId, { name: value }).then(res => {
        this.$emit('on-update', {catalogId: source.catalogId, data: res.data})
      })
      if (source.type !== 'catalog') {
        tableUpdate(ownerId, source.resId, { name: value })
      }
    },
    isNameExist(value) {
      return !!this.list.find((g) => g.name === value)
    },
    getIcon(type) {
      let icon = 'table'
      switch (type) {
        case 'point':
        case 'multipoint':
          icon = 'point'
          break
        case 'linestring':
        case 'multilinestring':
          icon = 'linestring'
          break
        case 'polygon':
        case 'multipolygon':
          icon = 'polygon'
          break
        case 'geometry':
          icon = 'geometry'
          break
        case 'table':
          icon = 'table'
          break
        case 'catalog':
          icon = 'catalog'
      }
      return icon
    },
    dragStart(e, item) {
      e.dataTransfer.setData('movedTableId', item.catalogId)
    },
    drop(e, item) {
      let sourceId = e.dataTransfer.getData('movedTableId')
      if (item && sourceId === item.catalogId) return
      let targetId = ''
      if (item) {
        targetId = item.catalogId
      } else {
        let targetPath = this.paths[this.paths.length - 2]
        targetId = targetPath ? targetPath.catalogId : null
      }
      let ownerId = config.USER
      catalogUpdate(ownerId, sourceId, { parentId: targetId }).then(res => {
        this.$emit('on-update', {catalogId: sourceId, data: res.data})
      })
    },
    deleteNode(catalogId) {
      this.$emit('on-delete', catalogId)
    }
  },
  data() {
    return {
      renameField: '',
      columns: [
        {
          title: '名称',
          key: 'name',
          slot: 'name',
          sortable: true,
          // width: 400
        },
        {
          title: '类型',
          key: 'type',
          sortable: true,
          // width: 320
        },
        {
          title: '创建日期',
          key: 'createdAt',
          ellipsis: true,
          sortable: true,
          render: (h, params) => {
            return h("span", {
            },util.formatTime(params.row.createdAt));
          }
        },
        {
          title: '操作',
          slot: 'action',
          // width: 200
        },
      ],
    }
  },
  computed: {
    tableHeight() {
      if (this.$el) {
        return this.$el.getBoundingClientRect().height
      } else {
        return 0
      }
    },
  },
  mounted() {
    window.onresize = () => {
      if (this.$refs.tableData) {
        this.$refs.tableData.handleResize()
      }
    }
  },
}
</script>
