<template>
  <div class="th-actions">
    <div v-if="type==='spread'">
      <div class="inline th-btn-text" @click="copyModel">复制</div>
      <div class="inline th-btn-text" @click="replaceModel">替换</div>
      <div class="inline th-btn-text" @click="activeRename">重命名</div>
      <div class="inline th-btn-text" @click="showProperties">属性</div>
      <div class="inline th-btn-text th-error" @click="deleteModel">删除</div>
    </div>
    <HoverPopup ref="popupMenu" icon="ios-more" color="gray" :width="100" v-else>
      <ThMenuItem width="60" name="复制" icon="copy" @on-click="copyModel" v-if="isprivate"/>
      <ThMenuItem width="60" name="替换" icon="relativity" @on-click="replaceModel" v-if="isprivate"/>
      <ThMenuItem width="60" name="重命名" icon="edit-1" @on-click="activeRename" v-if="isprivate"/>
      <ThMenuItem width="60" name="属性" icon="ios-list-box" @on-click="showProperties"/>
      <ThMenuItem width="60" name="删除" icon="delete" color="#F65450" @on-click="deleteModel" v-if="isprivate"/>
    </HoverPopup>
    <input ref="uploadControl" type="file" accept=".json" @click.stop="" @change="onReplaceChange" style="display: none;">
    <Modal v-model="propertiesDlg" title="属性" width="440" @on-close="hideProperties" :mask-closable="false">
      <div class="properties">
        <div v-if="activeProperties">
          <ModelProperties :data="activeProperties" :isprivate="isprivate"/>
        </div>
        <div v-else>loading</div>
      </div>
      <template #footer>
        <Button type="primary" @on-click="hideProperties">确定</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
import util from '../../libs/util'
import {modelLoad, modelCreate, modelDelete} from '../../libs/request'
import HoverPopup from '../hover-popup'
import ThMenuItem from '../th-menu-item'
import ModelProperties from './ModelProperties.vue'
export default {
  props: ['node', 'isprivate', 'type'],
  components: { HoverPopup, ThMenuItem, ModelProperties },
  methods: {
    activeRename() {
      this.$emit('on-rename', this.node.modelId)
      this.$refs.popupMenu.hidePopup()
    },
    copyModel() {
      let ownerId =  this.node.owner 
      let modelId = this.node.modelId
      modelLoad(ownerId, modelId).then(res => {
        let data = res.data
        data.name = data.name + '_副本'
        modelCreate(ownerId, util.generateId(), data).then(() => {
          this.$emit('on-update')
          this.$Notice.success({
            title: '复制成功',
            duration: 3
          })
        })
      })
    },
    replaceModel() {
      this.$refs.uploadControl.click()
    },
    onReplaceChange(e) {
      const files = e.target.files
      let file = files[0]
      if (!file) {
        return
      }
      if (file.name.endsWith('.json')) {
        util.readFile(file).then(result => {
          let config = JSON.parse(result)
          config.name = this.node.name
          modelCreate(this.node.owner, this.node.modelId, config).then(() => {
            this.$Notice.success({
              title: '替换成功',
              duration: 3
            })
          })
          this.$refs.uploadControl.value = null
        }).catch(error => {
          this.$Modal.error({
            title: '发生错误',
            content: error.message
          })
          this.$refs.uploadControl.value = null
        })
      } else {
        this.$Modal.error({
          title: '错误',
          content: '不支持的文件格式!'
        })
        return
      }
    },
    deleteModel() {
      this.$Modal.confirm({
        title: `确定要删除【${this.node.name}】吗？`,
        content: '<p>该操作无法恢复，请谨慎操作！</p>',
        onOk: () => {
          modelDelete(this.node.owner, this.node.modelId).then(() => {
            this.$emit('on-update')
            this.$Notice.success({
              title: '删除成功',
              duration: 3
            })
          })
        }
      })
    },
    async showProperties() {
      this.propertiesDlg = true
      if (this.activeProperties && this.activeProperties.modelId === this.node.modelId) {
        return
      }
      this.activeProperties = null
      let {owner, modelId} = this.node
      let response = await modelLoad(owner, modelId)
      this.activeProperties = response.data
    },
    hideProperties() {
      this.propertiesDlg = false
    }
  },
  data() {
    return {
      activeProperties: null,
      propertiesDlg: false
    }
  }
}  
</script>
