<template>
  <div class="th-asset-list">
    <div class="asset-list" @click="unselectAsset">
      <ThCard
        size="small"
        v-for="(item, index) in assetSortList"
        :key="item.assetId"
        :info="item"
        :nameEditable="assetScope==='private'"
        @on-name-change="labelChange($event, item)"
        @on-default-click="selectAsset($event,item,index)"
        :class="activeIndex === index ? 'activeStyle' : ''"
      >
        <template #action>
          <AssetAction :asset="item" :index="index" @on-rename="rename" @on-delete="deleteAsset" :assetScope="assetScope" @on-replace="replaceAssets" :selectedMenu="selectedMenu" :accept="accept"/>
        </template>
      </ThCard>
      <li></li><li></li><li></li><li></li><li></li>
    </div>
  </div>
</template>

<script>
import {assetUpdate} from '../../libs/request'
import config from '../../constants/config'
import AssetAction from './AssetAction.vue'
import comparators from '../../libs/comparators'
import _ from 'lodash'
import ThCard from '../th-card'
export default {
  components: { AssetAction,ThCard },
  props: {
    value: String,
    type: String,
    keyword: String,
    assetFilterList: {
      type: Array,
      default: () => {
        return []
      },
    },
    selectedMenu: String,
    editByUrl:Boolean,
    assetScope:String,
    assetTitle:String,
    accept: String,
    hideChange:Boolean
  },
  methods: {
    selectAsset(e,item,index) {
      this.activeIndex=index
      e.stopPropagation()
      this.$emit('on-select', item)
    },
    selectEmpty(e){
      e.stopPropagation()
      this.activeIndex=-2
      this.$emit('on-select', 'empty')
    },
    labelChange(name, asset) {
      let ownerId = config.USER
      assetUpdate(ownerId,asset.assetId,{ name }).then(res => {
        this.$emit('on-update', {assetId: asset.assetId, data: res.data})
      })
      this.activeIndex = -1
    },
    unselectAsset() {
      this.activeIndex = -1
      this.activeRenameIndex=-1
      this.$emit('on-select', null)
    },
    rename(asset) {
      this.activeRenameIndex = asset.index
    },
    deleteAsset(assetId){
      this.$emit('on-delete', assetId)
    },
    replaceAssets(data){
      this.$emit('on-replace',data)
    }
  },
  mounted() {},
  data() {
    return {
      popupPosition: {
        left: 0,
        bottom: 0,
      },
      showUpload: false,
      previewUrl: '',
      previewShow: false,
      currentTab: 'thumbnail',
      columns: [
        {
          title: '名称',
          key: 'name',
          width: 240,
          ellipsis: true,
          sortable: true,
        },
        {
          title: '类型',
          key: 'type',
          width: 80,
          sortable: true,
        },
        {
          title: '修改日期',
          key: 'createdAt',
          width: 170,
          sortable: true,
        },
        {
          title: '操作',
          slot: 'action',
          width: 120,
          align: 'center',
        },
      ],
      renameStatus: false,
      activeIndex: -1,
      activeRenameIndex:-1
    }
  },
  computed: {
    assetSortList() {
      return _.cloneDeep(this.assetFilterList).sort(comparators['name'])
    },
  },
  watch: {
    selectedMenu() {
      this.activeIndex=-1
      this.activeRenameIndex=-1
    },
    editByUrl(val){
      if (val) {
         this.activeIndex=-1
         this.activeRenameIndex=-1
      }
    },
    hideChange(val){
      if (val) {
         this.activeIndex=-1
         this.activeRenameIndex=-1
      }
    }
  },
}
</script>
