<template>
  <div class="th-model-list full">
    <div class="catalog-list" v-if="mode==='icon' && list.length">
      <CatalogNode v-for="(item,index) in list" :key="item.modelId" 
        icon="model" 
        :hasPopupMenu="true" 
        :smallSize="true"
        :activeRename="renameField === item.modelId" 
        :label="item.name" 
        :selected="selectedId===item.modelId"
        @on-click="selectSource(item)" 
        @on-label-change="rename($event, index, item)">
        <ModelActions :node="item" :isprivate="isprivate" @on-rename="activeRename" @on-update="updateList"/>
      </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>
    <Table class="th-list-view" :columns="columns" :data="list" highlight-row :height="tableHeight" @on-current-change="selectSource"  v-if="mode==='list'">
      <template #name="{row, column, index}">
        <div class="inline icon-small th-icon-model"></div>
        <div class="inline name" :title="row[column.key]">
          <input type="text" :value="row[column.key]" v-focus="renameField === row.modelId" @blur="rename($event, index, row)" v-if="renameField === row.modelId" />
          <span v-else>{{ row[column.key] }}</span>
        </div>
      </template>
      <template #action="{row}">
        <ModelActions :node="row" :isprivate="isprivate" type="spread" @on-rename="activeRename" @on-update="updateList"/>
      </template>
    </Table>
  </div>
</template>

<script>
import config from '../../constants/config'
import {modelUpdate} from '../../libs/request'
import ModelActions from './ModelActions.vue'
import CatalogNode from '../catalog-node'
import util from '../../libs/util'
export default {
  props: ['list', 'mode', 'isprivate'],
  components: {ModelActions,CatalogNode},
  methods: {
    selectSource(item) {
      this.selectedId = item.modelId
      this.$emit('on-select', item)
    },
    activeRename(modelId) {
      this.renameField = modelId
    },
    rename(newName, index, model) {
      let value = newName
      this.renameField = ''
      if (!value) {
        this.$Message.warning('不能为空')
        return
      }
      if (value === model.name) {
        return
      }
      if (this.isNameExist(value)) {
        this.$Message.warning('该名称已存在')
        return
      }
      let ownerId = config.USER
      modelUpdate(ownerId, model.modelId, {name: value})
    },
    isNameExist(value) {
      return !!this.list.find(g => g.name === value)
    },
    updateList() {
      this.$emit('on-update')
    }
  },
  data() {
    return {
      selectedId: '',
      renameField: '',
      columns: [
        {
          title: '名称',
          key: 'name',
          slot: 'name',
          sortable: true
        },
        {
          title: '类型',
          key: 'type',
          sortable: true
        },
        {
          title: '创建时间',
          key: 'createdAt',
          ellipsis: true,
          sortable: true,
          render: (h, params) => {
            return h("span", {
            },util.formatTime(params.row.createdAt));
          }
        },
        {
          title: '操作',
          slot: 'action'
        }
      ]
    }
  },
  computed: {
    tableHeight() {
      if (!this.$el) {
        return
      }
      return this.$el.getBoundingClientRect().height
    }
  },
  watch: {
    list() {
      this.selectedId = ''
      this.$emit('on-select', null)
    }
  }
}
</script>

