<template>
  <div>
    <el-toolbar align="right">
      <el-input v-model="searchName" placeholder="请输入名称或别名" @keyup.enter.native="search" style="width:270px;">
        <el-button slot="append" icon="search" @click="search" title="查询"></el-button>
      </el-input>
    </el-toolbar>
    <!-- 表单表格 -->
    <el-table ref="dataTable" :data="advertisePositionData" :data-read-url="getData" paginationLayout="total, sizes, ->, prev, next"
      :page-size="10" :auto-get-data="false" tooltip-effect="dark" @selection-change="selectionChange">
      <el-table-column type="selection" width="36" align="center"></el-table-column>
      <el-table-column prop="positionName" label="版位名称"></el-table-column>
      <el-table-column prop="code" label="版位别名"></el-table-column>
      <el-table-column prop="statusName" label="状态"></el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <el-button @click.stop="preview(scope.row.ID)" type="text" title="预览">
            <i class="fa fa-search f16"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchName: '', // 根据版位名称搜索版位
      advertisePositionData: [], // 广告版位数据
      selectedRows: [] // 当前选中的版位行
    }
  },
  methods: {
    init() {
      this.searchName = ''
      this.search()
    },
    // 获取版位表格数据
    getData() {
      return [
        '/ui/atverdiseposition',
        {
          params: {
            searchContent: this.searchName,
            type: 'PUBLISHED'
          }
        }
      ]
    },
    preview(ID) {
      window.open(`preview.html?&ID=${ID}&type=ADPosition`)
    },
    // 搜索版位
    async search() {
      await this.$refs.dataTable.getData()
    },
    selectionChange(selection) {
      this.selectedRows = selection
    },
    confirm() {
      if (!this.selectedRows || this.selectedRows.length === 0) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      let html = ''
      var prefix = window.parent.app.prefix || ''
      this.selectedRows.forEach(row => {
        if (row) {
          html += '<p style="text-align: center;"><span id="' + row.ID + '" jspath="' + row.advJSPath + '" _id="' + row.ID + '" prefix="' + prefix + '" ztype="zatverdise" jsonpath="' + row.advJSONPath + '" class="edui-faked-ap"></span></p>'
        }
      })
      window.editor.execCommand('insertHTML', html)
      window.dialog.close(false)
    }
  }
}
</script>

<style scoped>
  .el-toolbar .el-button {
    padding: 10px;
  }
</style>
