<template>
  <div class="th-common-properties">
    <div class="item">
      <div class="name inline">id：</div>
      <div class="value inline" :title="data.tableId || data.modelId || data.tilesetId">
        <input type="text" v-focus="editmode" :value="data.tableId || data.modelId || data.tilesetId" @change="changeId" @blur="changeId" :disabled="!editmode">
        <Icon type="md-create" title="修改id" size="16" color="#3490ff" @click="startEdit" style="cursor: pointer;" v-if="isprivate"/>
      </div>
    </div>
    <div class="item">
      <div class="name inline">名称：</div>
      <div class="value inline" :title="data.name">{{data.name}}</div>
    </div>
    <div class="item">
      <div class="name inline">类型：</div>
      <div class="value inline" :title="data.type">{{data.type}}</div>
    </div>
    <div class="item">
      <div class="name inline">所有者：</div>
      <div class="value inline" :title="data.owner">{{data.owner}}</div>
    </div>
    <div class="item">
      <div class="name inline">描述信息：</div>
      <div class="value inline" :title="data.description">
        <input type="text" :value="data.description" @change="changeDescription">
      </div>
    </div>
    <div class="item">
      <div class="name inline">标签：</div>
      <div class="value inline" :title="data.tags.toString()">
        <input type="text" :value="data.tags.toString()" @change="changeTags">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data', 'isprivate'],
  methods: {
    changeId(e) {
      let value = e.target.value
      let id = this.data.tableId || this.data.modelId || this.data.tilesetId
      if (!value) {
        this.$Modal.error({
          title: '错误',
          content: 'id不能为空'
        })
        e.target.value = id
        this.editmode = false
        return
      }
      if (value !== id) {
        this.$Modal.confirm({
          title: '更改ID存在风险，确定修改吗？',
          content: '<p>修改id后可能会导致引用了该服务的应用无法访问到资源！</p>',
          onOk: () => {
            this.$emit('on-change', {
              property: 'id',
              value
            })
          }
        })
      }
      this.editmode = false
    },
    startEdit() {
      this.editmode = true
    },
    changeDescription(e) {
      this.$emit('on-change', {
        property: 'description',
        value: e.target.value
      })
    },
    changeTags(e) {
      let tags = e.target.value.trim().split(',')
      this.$emit('on-change', {
        property: 'tags',
        value: tags
      })
    }
  },
  data() {
    return {
      editmode: false
    }
  }
}
</script>
