<template>
    <div>
      <div class="layout-col-list" v-show="!!catalogId">
         <el-toolbar>
           <el-button @click="publishCatalog()" :priv="'com.zving.cms.Catalog.Content.Publish.'+ catalogId">
              <i class="fa fa-send-o"></i>发布
            </el-button>
         </el-toolbar>
        <el-list-view ref="multipleTable"  :data-read-url="getContentList" :pageSize="10">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row :gutter="16">
                <el-col :span="4" class="item-logo-ct">
                    <div class="logoFile" :style="{backgroundImage:'url('+(!row.listLogo?'':row.listLogo)+'),url(assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png)'}"></div>
                </el-col>
                <el-col :span="20" class="item-info-ct">
                    <a class="list-card-title" @click.stop="preview(row)"><i :class="row.contentTypeID | fixContentTypeIcon" style="font-size:17px"></i>&nbsp;{{row.title|getchars(60)}}</a>
                    <div>
                      <p class="summary" v-if="!row.bodyText">{{row.summary|getchars(110)}}</p>
                      <p class="summary" v-else>{{row.bodyText|getchars(110)}}</p>
                    </div>
                    <div class="datetime absolute">{{row.publishDate | fixDateTime}}</div>
                    <el-row>
                      <el-col :span="10" class="item-status">
                        <el-tag size="small">{{row.statusName}}</el-tag>
                        <span style="color: #28b06e;" v-for="(value,key) in row.checkedAttrs" :key="key" :title="value"><i :class="key | fixIcon"></i></span>
                      </el-col>
                      <el-col :span="14" class="item-buttons">
                        <el-button @click.stop="publish(row.ID,'pub')" type="text" title="发布">
                          <i class="fa fa-send-o"></i>发布
                        </el-button>
                        <content-sort-button :content-ids="row.ID" :catalog-ids="catalogId" @refresh-content="updateList" button-type='text'></content-sort-button>
                      </el-col>
                    </el-row>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
      </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import ContentSortButton from '../contentcore/components/ContentSortButton.vue'

export default {
  components: {
    'content-sort-button': ContentSortButton
  },
  filters: {
    fixContentTypeIcon: function(val) {
      switch (val) {
        case 'Image':
          return 'fa fa-image'
        case 'Audio':
          return 'fa fa-music'
        case 'Video':
          return 'fa fa-video-camera'
        case 'File':
          return 'fa fa-file-archive-o'
        case 'VideoGroup':
          return 'fa fa-film'
        case 'Special':
          return 'fa fa-id-card-o'
        default:
          return 'fa fa-file-text-o'
      }
    },

    fixIcon: function(val) {
      switch (val) {
        case 'attach':
          return 'fa fa-paperclip'
        case 'contribute':
          return 'fa fa-pencil-square-o'
        case 'copy':
          return 'fa fa-copy'
        case 'copySource':
          return 'fa fa-copy'
        case 'copyout':
          return 'fa fa-clipboard'
        case 'hot':
          return 'fa fa-fire'
        case 'image':
          return 'fa fa-image'
        case 'notation':
          return 'fa fa-file'
        case 'recommend':
          return 'fa fa-thumbs-up'
        case 'refer':
          return 'fa fa-external-link'
        case 'top':
          return 'fa fa-arrow-up'
        case 'video':
          return 'fa fa-film'
        default:
          return ''
      }
    },
    getchars: function(summary, len) {
      len = len > 60 ? 300 : 60
      return summary ? summary.slice(0, len) : ''
    },
    fixDateTime: function(val) {
      return val ? util.formatDate(val, 'yyyy-MM-dd HH:mm') : '　'
    }
  },
  props: {
    catalogId: {
      type: [Number, String],
      required: true
    },
    contentType: {
      type: String
    }
  },
  data() {
    return {
      prefix: this.$root.prefix
    }
  },
  watch: {
    catalogId() {
      this.updateList()
    }
  },
  methods: {
    getContentList() {
      let params = {
        catalogID: this.catalogId
      }
      return ['/ui/contentadv/virtualcontents', {params}]
    },
    async publish(id, type) {
      let resp = await axios.put(`/ui/contentcore/contentpublish/${id}/${type}`, {catalogID: this.catalogId})
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.updateList()
      }
    },
    // 刷新列表
    updateList() {
      this.$refs.multipleTable.getData()
    },
    preview(row) {
      let currentLink = `preview.html?id=${row.ID}&type=content`
      if (row.contentTypeID === 'Special') {
        let dataID = row.ID
        if (row.copyID && (row.copyType === 2 || row.copyType === 3 || row.copyType === 4)) {
          dataID = row.copyID
        }
        currentLink = `preview.html?id=${dataID}&type=special&pageType=Special`
      }
      window.open(currentLink)
    },
    async publishCatalog(){
      let publish = {
        publishChild: false,
        publishDetail: false,
        publishStatus: 30
      }
      try {
        this.submitLoading = true
        let resp = await axios.put(`/ui/contentcore/catalogpublisher/${this.catalogId}`, publish)
        util.showResponseMessage(resp.data)
      } catch (e) {
        util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style scoped>
.content-input-wrap {
  color: #999;
  font-size: 13px;
  display: inline-block;
  vertical-align: middle;
}

.summary{
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 15px;
  color: #999;
  height: 45px;
  margin-bottom: 6px;
}

.datetime{
  text-align: right;
  color: #bbb;
  right: 10px;
  top: -2px;
}
.el-list-view.grid .item-logo-ct, .el-list-view.grid .item-info-ct{
  float: none;
  width: 100%;
}
.el-list-view.grid .item-info-ct{
  padding:5px 15px !important;
}
.el-list-view.list .item-buttons{
  text-align: right;
}
.el-list-view.grid .item-status, .el-list-view.grid .item-buttons{
  float: none;
  width: 100%;
}
.logoFile {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    margin-top: 2px;
    margin-bottom: 2px;
}
.absolute{
  position: absolute;
}
</style>
