<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar>
      <el-button @click="goBack"><i class="fa fa-reply"></i>返回上一页</el-button>
    </el-toolbar>
    <div class="">
      <el-table ref="refMaterialTable"
        :data-read-url="materialData"
        class="dimensionality-table"
        :page-size="20"
        tooltip-effect="dark">
       <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
        <el-table-column label="素材标题" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                <div class="tooltips-block">
                  素材标题：{{scope.row.contentTitle}}<br/>素材ID：{{scope.row.mediaID}}
                </div>
              </div>
              <span>{{scope.row.contentTitle}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="素材类型" align="center">
          <template slot-scope="scope">
            {{scope.row.typeName}}
          </template>
        </el-table-column>
        <el-table-column prop="mediaURL" label="素材URL" align="center">
          <template slot-scope="scope">
            <a :href="scope.row.mediaURL" target="_blank" title="单击在新窗口中查看" class="line2">{{scope.row.mediaURL}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="uploadDate" label="上传时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="delMaterial(scope.row.ID)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      accountID: this.$route.query.accountID,
      mediaTypes: [
        {pcode: 'SinaWeiBo', pname: '新浪微博'},
        {pcode: 'WeChatAccount', pname: '微信公众平台'},
        {pcode: 'WeChatMedia', pname: '微信开放平台'}
      ]
    }
  },
  methods: {
    decodeMediaType(pcode) {
      let type = this.mediaTypes.find(val => val.pcode === pcode)
      if (type) {
        return type.pname
      } else {
        return pcode
      }
    },
    // 返回上一页
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    },
    async delMaterial(materialID) {
      try {
        await this.$confirm('删除后无法恢复,是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let res = await axios.delete('/ui/weixinmaterials', {params: {weChatID: materialID, accountID: this.accountID}})
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.$refs.refMaterialTable.getData()
        }
      } catch (e) {

      }
    },
    materialData() {
      return ['/ui/weixinmaterials', {params: {ID: this.accountID}}]
    }
  }
}
</script>
<style scoped>
.tooltips-block{
  line-height:165%;
}
.line2{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
