<template>
  <div>
    <div class="right-list-toolbar right-list-panel-card">
      <el-toolbar>
        <el-col :span="10">
          <el-dropdown @command="add" >
            <el-button priv="AdvertiseManage.Add||ImagePlayerManage.Add||VoteManage.Add">
              <i class="fa fa-plus" aria-hidden="true"></i>新建
              <i class="fa fa-caret-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in types" :key="item.ID" :command="item.addURL">
                <i :class='item.icon' v-if='!!item.icon'></i> 新建：{{item.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="14" class="right">
          <el-select v-model="typeValue" clearable placeholder="页面部件类型" @change="onTypeChange" style="width:50%;">
            <el-option v-for="item in types" :key="item.ID" :label="item.name" :value="item.ID">
            </el-option>
          </el-select>
        </el-col>
      </el-toolbar>
      <el-list-view ref="pageWidgetsTable" :data="pageWidgets" :data-read-url="getData" :page-size="10">
        <template slot-scope="row">
          <div class="panel-card">
            <el-row>
              <i class="fa fa-picture-o" v-if="row.type === 'ImagePlayer'"></i>
              <i class="fa fa-pie-chart" v-else-if="row.type === 'Vote'"></i>
              <i class="fa fa-file-archive-o" v-else-if="row.type === 'ADPosition'"></i>
              <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row)">{{row.name}}</a>
              <i title="属于当前栏目" v-if="row.currentCatalog" class="fa fa-gg" aria-hidden="true"></i>
              <span class="gray">别名：{{row.alias}}</span>
            </el-row>
            <el-row>
              <el-col :span="8">
                <span>部件类型：</span>
                <em>{{row.typeName || '无'}}</em>
              </el-col>
              <el-col :span="8">
                <span>关联栏目：</span>
                <em>{{row.catalogName || '无'}}</em>
              </el-col>
              <el-col :span="8">
                <span>添加时间：</span>
                <em>{{ row.addTime | fixDateTime  }}</em>
              </el-col>
            </el-row>
            <el-row class="list-card-buttons">
              <el-col :span="10">
                <el-tag size="small">{{row.statusName}}</el-tag>
              </el-col>
              <el-col :span="14" class="tar">
                <el-button @click.stop="publish(row)" type="text" title="发布" :priv="row.type === 'ImagePlayer'?`ImagePlayerManage.Publish.${row.ID}`:row.type === 'Vote'?`VoteManage.Publish.${row.ID}`:`AdvertiseManage.Publish.${row.ID}`">
                  <i class="fa fa-share-square-o f16"></i> 发布
                </el-button>
                <el-button @click.stop="preview(row)" type="text" title="预览" priv="ContentCore.EditWorkSpace.Widget">
                  <i class="fa fa-search f16"></i> 预览
                </el-button>
                <el-button @click.stop="edit(row)" type="text" title="编辑" :priv="row.type === 'ImagePlayer'?`ImagePlayerManage.Edit.${row.ID}`:row.type === 'Vote'?`VoteManage.Edit.${row.ID}`:`AdvertiseManage.Edit.${row.ID}`">
                  <i class="fa fa-edit f16"></i> 编辑
                </el-button>
                <el-button @click.stop="deleted(row)" type="text" title="删除" :priv="row.type === 'ImagePlayer'?`ImagePlayerManage.Delete.${row.ID}`:row.type === 'Vote'?`VoteManage.Delete.${row.ID}`:`AdvertiseManage.Delete.${row.ID}`">
                  <i class="fa fa-times f16"></i> 删除
                </el-button>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-list-view>
    </div>
  </div>
</template>

<script>

import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      types: [],
      typeValue: '',
      pageWidgets: [],
      editPath: {
        'Vote': '/vote/{ID}',
        'ImagePlayer': '/imageplayer/{ID}',
        'ADPosition': '/advertise/{ID}'
      },
      detailPath: {
        'Vote': '/vote/{ID}',
        'ImagePlayer': '/imageplayer/{ID}',
        'ADPosition': '/advertise/{ID}'
      }
    }
  },
  watch: {
    catalogId(val) {
      this.loadingData()
    }
  },
  methods: {
    loadingData() {
      this.$refs.pageWidgetsTable.getData()
    },
    getData() {
      return [
        '/ui/pagewidget', {
          params: {
            widgetType: this.typeValue,
            catalogID: this.catalogId
          }
        }
      ]
    },
    // 点击名称进入详情页
    gotoDetailPage(row) {
      let detailURL = this.detailPath[row.type].replace(`{ID}`, row.ID)
      this.$router.push({
        path: `${this.$route.path + detailURL}`
      })
    },
    // 类型列表选择改变事件
    onTypeChange(type) {
      this.typeValue = type
      this.loadingData()
    },
    // 新建
    add(command) {
      this.$router.push({
        path: `${this.$route.path + command}`
      })
    },
    // 编辑
    edit(row) {
      let editURL = this.editPath[row.type].replace(`{ID}`, row.ID)
      this.$router.push({
        path: `${this.$route.path + editURL}`
      })
    },
    // 发布
    async publish(row) {
      let publishMethod = row.publishMethod.replace('{IDs}', row.ID)

      let res = await axios.put(publishMethod)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.loadingData()
      }
    },
    // 预览
    preview(row) {
      window.open(`preview.html?ID=${row.ID}&type=${row.type.toLowerCase()}`)
    },
    // 删除
    async deleted(row) {
      try {
        await this.$confirm('确定删除这些部件吗？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let deleteMethod = row.deleteMethod.replace('{IDs}', row.ID)

      let res = await axios.delete(deleteMethod)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.loadingData()
      }
    }
  },
  async created() {
    // 类型列表
    let res = await axios.get('/ui/pagewidget/type')
    this.types = res.data.data
    this.types.forEach(val => {
      if (val.ID === 'ADPosition') {
        Vue.set(val, 'addURL', '/advertise/new')
      } else if (val.ID === 'Vote') {
        Vue.set(val, 'addURL', '/vote/new')
      } else if (val.ID === 'ImagePlayer') {
        Vue.set(val, 'addURL', '/imageplayer/new')
      }
    })
  },
  props: ['catalogId']
}
</script>
