<template>
  <div class="layout-no-cols right-list-panel-card right-list-toolbar">
      <el-row>
        <el-col :span="14">
          <el-toolbar>
            <el-button @click="add" priv="AdvertiseManage.Add">
              <i class="fa fa-plus"></i>新建版位
            </el-button>
          </el-toolbar>
        </el-col>
        <el-col :span="10" class="search-box-r tool-search-box-r search-bar-advertise">
          <el-input v-model="searchName" placeholder="请输入名称或别名" @keyup.enter.native="search" class="search-bar-algin-toolbar"></el-input>
          <span class="search-icon"><i class="fa fa-search" @click="search" title="查询"></i></span>
        </el-col>
      </el-row>
      <el-list-view ref="advertisePositionList" :data-read-url="getData" :pageSize="10" @selection-change="selectionChange">
        <template slot-scope="row">
          <div class="panel-card">
            <el-row> <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row.ID)">{{row.positionName}}</a> <span class="gray">别名：{{row.code}}</span> </el-row>
            <el-row>
              <el-col :span="6"><span>版位类型：</span> <em>{{row.positionTypeName || '无'}}</em> </el-col>
              <el-col :span="6"><span>关联栏目：</span> <em>{{row.catalogName || '无'}}</em> </el-col>
              <el-col :span="6"><span>版位高度：</span> <em>{{row.positionHeight || 0}} 像素</em> </el-col>
              <el-col :span="6"><span>版位宽度：</span> <em>{{row.positionWidth || 0}} 像素</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="'AdvertiseManage.Publish.'+row.ID">
                  <i class="fa fa-share-square-o"></i>发布
                </el-button>
                <el-button @click.stop="preview(row.ID)" type="text" title="预览" priv="AdvertiseManage" v-show="row.positionType !== 'video'">
                  <i class="fa fa-eye"></i>预览
                </el-button>
                <el-button @click.stop="rebuildIndex(row.ID)" type="text" title="重建索引" :priv="'AdvertiseManage.Edit.'+row.ID">
                  <i class="fa fa-bolt fa-fw"></i>重建索引
                </el-button>
                <el-button @click.stop="gotoDetailPage(row.ID)" type="text" title="编辑"  :priv="'AdvertiseManage.Edit.'+row.ID">
                  <i class="fa fa-edit"></i>编辑
                </el-button>
                <el-button @click.stop="del(row.ID)" type="text" title="删除" :priv="'AdvertiseManage.Delete.'+row.ID">
                  <i class="fa fa-times"></i>删除
                </el-button>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-list-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      positionID: -1, // 传给页面右边部位的版位ID
      createAdvertisePositionModal: false, // 新建/编辑版位弹框控制
      searchName: '', // 根据版位名称搜索版位
      advertisePositionData: [], // 广告版位数据
      selectedRows: [], // 当前选中的版位行
      showDetailPage: false, // 是否显示详细页
      detailDataChange: false // 详细页是否有数据变化
    }
  },
  watch: {
    showDetailPage(val) {
      if (!val && this.detailDataChange) {
        this.search()
      }
    }
  },
  methods: {
    refreshCallback() {
      this.detailDataChange = true
    },
    // 获取版位表格数据
    getData() {
      return [
        '/ui/atverdiseposition',
        {
          params: {
            searchContent: this.searchName
          }
        }
      ]
    },
    // 新建版位
    add() {
      this.$router.push(`${this.$route.path}/new`)
    },
    async del(id) {
      try {
        await this.$confirm('确定要删除版位吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/atverdiseposition/${id}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.search()
        }
      } catch (e) {

      }
    },
    async publish(row) {
      if (row.isNeedAudit) {
        if (row.status !== 'passed' && row.status !== 'published') {
          this.$alert('审核未通过的版位不能发布！', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
      }
      try {
        await this.$confirm('确定要发布版位吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put(`/ui/atverdiseposition/${row.ID}/publish`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.search()
        }
      } catch (e) {

      }
    },
    async rebuildIndex(ID) {
      try {
        await this.$confirm('将重建广告索引，是否重建广告索引？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.put(`/ui/atverdiseposition/${[ID]}/rebuild`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          await util.showProgress(res.data.taskID, '正在重建索引. . .')
        }
      } catch (e) {

      }
    },
    preview(id) {
      if (!id && this.selectedRows.length === 0) {
        this.$alert('请选择需要预览的广告版位', '提示', {
          type: 'info'
        })
        return
      }
      let adpID = id || this.selectedRows[0].ID
      window.open(`preview.html?&ID=${adpID}&type=ADPosition`)
    },
    // 搜索版位
    async search() {
      this.$refs.advertisePositionList && (await this.$refs.advertisePositionList.getData())
      // await this.$refs.dataTable.getData()
      this.detailDataChange = false
    },
    // 改变选中版位触发事件
    selectionChange(selection) {
      let a = selection.slice()
      this.selectedRows = a.concat()
      if (selection.length > 0) {
        this.positionID = selection[0].ID
      }
    },
    // 点击名称进入详情页
    gotoDetailPage(id) {
      this.positionID = id
      this.$router.push(`${this.$route.path}/${id}`)
      // this.showDetailPage = true
    }
  }
}
</script>

<style scoped>

</style>
