<template>
  <div class="mch-card rel inline">
    <div class="card-item" v-if="type==='card'">
      <!-- 缩略图 -->
      <div class="thumb cursor"
        :style="`background-image:url(${item.thumbnail || './imgs/no_pic.png'});`" @click="defaultClick">
      </div>
      <!-- 标题及时间信息 -->
      <div class="meta">
        <input type="text" v-focus="activeRename" :value="item.name" @blur="nameChange" v-if="activeRename">
        <div class="name" v-else>{{ item.name }}</div>
        <div class="date">
          <span :title="sortBy==='createdAt'?createTime.title:updateTime.title" class="date-show">
            <slot></slot>
            {{sortBy==='createdAt'?createTime.fromNow:updateTime.fromNow}}{{sortBy==='createdAt'?'创建': '更新'}}
          </span>
        </div>
      </div>
      <Dropdown class="mch-card-actions abs" transfer @on-click="actionClick" v-if="!isReadOnly">
        <div class="cursor">
          <Icon type="md-more" size="20"></Icon>
        </div>
        <template #list>
          <DropdownMenu>
            <DropdownItem name="rename">
              <Icon class="mch-card-actions-icon" custom="iconfont icon-edit" size="20"/>
              <span>重命名</span>
            </DropdownItem>
            <DropdownItem name="tags">
              <Icon class="mch-card-actions-icon" type="ios-pricetags-outline" size="18"/>
              <span>标签管理</span>
            </DropdownItem>
            <DropdownItem class="delete" name="delete">
              <Icon class="mch-card-actions-icon" custom="iconfont icon-delete" size="20"/>
              <span>删除</span>
            </DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
      <Tips class="abs" :tips="item.tips || []" :isReadOnly="isReadOnly"/>
    </div>
    
    <div class="list-item flex-between" v-else>
      <div class="prefix flex-between">
        <div class="thumb cursor" :style="`background-image:url(${item.thumbnail || './imgs/no_pic.png'});`" @click="defaultClick"></div>
        <input type="text" v-focus="activeRename" :value="item.name" @blur="nameChange" v-if="activeRename">
        <div class="name cursor" @click="defaultClick" v-else>{{ item.name }}</div>
      </div>
      <Tips :tips="item.tips || []" :isReadOnly="isReadOnly"/>
      <div class="date">
        <span :title="createTime.title" class="date-show">
          <slot></slot>
          {{createTime.fromNow}}创建
        </span>
      </div>
      <div class="date">
        <span :title="updateTime.title" class="date-show">
          <slot></slot>
          {{updateTime.fromNow}}更新
        </span>
      </div>
      <div class="actions flex-around">
        <div class="btn cursor" @click="defaultClick">查看</div>
        <div class="btn cursor" @click="actionClick('rename')" v-if="!isReadOnly">重命名</div>
        <div class="btn cursor" @click="actionClick('tags')" v-if="!isReadOnly">标签管理</div>
        <div class="btn cursor delete" @click="actionClick('delete')" v-if="!isReadOnly">删除</div>
      </div>
    </div>
    <Modal v-model="dlgShow" :mask-closable="false" title="标签管理" width="400" @on-ok="tagOk" @on-cancel="tagCancel">
      <Tag v-for="(tag, index) in localTags" :key="tag" :name="tag" closable @on-close="deleteTag(tag, index)">{{tag}}</Tag>
      <Input class="inline" size="small" v-focus="true" @on-blur="addTagEnd" style="width: 100px;" v-if="tagEditMode"></Input>
      <Button icon="ios-add" type="primary" size="small" @click="addTag" v-else>添加标签</Button>
    </Modal>
  </div>
</template>

<script>
import _ from 'lodash'
import moment from 'moment'
import 'moment/dist/locale/zh-cn'
import Tips from './Tips.vue'
export default {
  props: {
    type: {
      type: String,
      default: 'card'
    },
    item: {
      type: Object,
      default: () => ({})
    },
    isReadOnly: {
      type: Boolean,
      default: false
    },
    sortBy: {
      type: String,
      default: 'updatedAt'
    }
  },
  components: {
    Tips
  },
  methods: {
    defaultClick() {
      this.$emit('on-click', this.item)
    },
    deleteProject() {
      this.$Modal.confirm({
        title: '删除项目',
        content: '是否确认删除该项目？',
        onOk: () => {
          this.$emit('on-delete', this.item)
        }
      })
    },
    actionClick(name) {
      if (name === 'delete') {
        this.deleteProject()
      } else if (name === 'rename') {
        this.activeRename = true
      } else if (name === 'tags') {
        this.dlgShow = true
      }
    },
    nameChange(e) {
      let newName = e.target.value
      if (!newName) {
        this.$Message.warning('项目名称不能为空')
        return
      }
      let fileNamepatn = /\||<|>|\?|\*|:|\/|\\|"/
      if(fileNamepatn.test(newName) ){
        this.$Message.warning('名称不能包含特殊字符')
        return
      }
      if (newName === this.item.name) {
        this.activeRename = false
        return
      }
      this.activeRename = false
      let {project_id} = this.item
      this.item.name = newName
      this.$emit('on-rename', {project_id, name: newName})
    },
    tagOk() {
      let {project_id} = this.item
      this.$emit('on-tags', {
        project_id,
        tags: this.localTags
      })
    },
    tagCancel() {
      this.localTags = _.cloneDeep(this.item.tags) || []
    },
    addTag() {
      this.tagEditMode = true
    },
    addTagEnd(e) {
      let value = e.target.value
      if (value) {
        this.localTags.push(value)
      }
      this.tagEditMode = false
    },
    deleteTag(tag, index) {
      this.localTags.splice(index, 1)
    }
  },
  mounted() {
    if (this.item?.tags) {
      this.localTags = _.cloneDeep(this.item.tags)
    }
  },
  data() {
    return {
      activeRename: false,
      dlgShow: false,
      localTags:[],
      tagEditMode: false
    }
  },
  computed: {
    createTime() {
      const date = moment(this.item.createdAt)
      return {
        fromNow: date.fromNow(),
        title: date.format('YYYY-M-D H:m')
      }
    },
    updateTime() {
      const date = moment(this.item.updatedAt)
      return {
        fromNow: date.fromNow(),
        title: date.format('YYYY-M-D H:m')
      }
    }
  },
  watch: {
    item() {
      this.localTags = _.cloneDeep(this.item.tags) || []
    }
  }
}
</script>
