<template>
  <div class="layout-no-flex">
    <!-- 链接导航栏 -->
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button @click="addLinkClickHandler" :priv="'com.zving.cms.Link.Edit.'+ID">
        <i class="fa fa-plus"></i>新建链接
      </el-button>
      <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="searchLinksValue" @keyup.enter.native="searchLinks" placeholder="请输入链接名称" size="medium"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchLinks" title="查询"></i></span>
      </el-col>
    </el-toolbar>
    <div>
      <!-- 链接表格 -->
      <div class="">
      <el-table :data="linksData" ref="datatable" :data-read-url="getData" :page-size="10" tooltip-effect="dark">
        <el-table-column label="链接图片">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :priv="'com.zving.cms.Link.Edit.'+ID" @click.stop="editLinkClickHandler(scope.row.ID)">
              <img :src="scope.row.imageSrc" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" class="linktable-img" />
            </el-button>
          </template>

        </el-table-column>
        <el-table-column label="链接名称">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.name" :priv="'com.zving.cms.Link.Edit.'+ID" @click.stop="editLinkClickHandler(scope.row.ID)">{{scope.row.name}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="URL" label="链接URL"></el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editLinkClickHandler(scope.row.ID)" type="text" title="编辑" :priv="'com.zving.cms.Link.Edit.'+ID">
             <i class="fa fa-edit f16"></i></el-button>
            <sort-button :ref="'sortbutton'+scope.row.ID" :priv="'com.zving.cms.Link.Delete.'+ID" @callback="sort" :ID="scope.row.ID"></sort-button>
            <el-button @click.stop="deleteLinkClickHandler([scope.row])" type="text" title="删除" :priv="'com.zving.cms.Link.Delete.'+ID">
              <i class="fa fa-times f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import sortButton from './sortButton.vue'
export default {
  components: {
    'sort-button': sortButton
  },
  props: {
    ID: {
      required: true
    }
  },

  data() {
    return {
      searchLinksValue: '', // 根据链接名称查询链接值
      linkID: null, // 链接ID
      linksData: [], // 链接数据
      selectedRows: [], // 选中的链接
      createLinkModal: false // 新建/编辑链接弹框显示
    }
  },

  methods: {
    getData() {
      return [
        `/ui/links/${this.ID}/items`,
        {
          params: {
            searchName: encodeURIComponent(this.searchLinksValue)
          }
        }
      ]
    },

    // 获取链接表格数据
    async loadingLinksData() {
      this.$refs.datatable.getData()
    },

    // 关闭弹框回调，清空数据
    dialogClose(changeData) {
      this.createLinkModal = false
      if (changeData) {
        this.loadingLinksData()
      }
    },

    // 改变选中链接触发事件
    onLinksSelectionChange(selection) {
      let a = selection
      this.selectedRows = a.concat()
    },

    // 新建链接按钮点击事件
    addLinkClickHandler() {
      // 判断当前是否有选中的分组
      if (this.ID === 0) {
        this.$alert('请先选择需要添加链接的链接分组', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.$router.push({path: `/plugins/links/${this.ID}/items/new`})
      }
    },

    // 编辑链接按钮点击事件
    editLinkClickHandler(linkID) {
      this.$router.push({path: `/plugins/links/${this.ID}/items/${linkID}`})
    },

    // 删除链接按钮点击事件
    async deleteLinkClickHandler(rows) {
      // 判断当前是否有选中的链接
      if (rows.length === 0) {
        this.$alert('请选择需要删除的链接', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        try {
          await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (e) {
          return
        }

        let rowIds = []
        rows.forEach(function(row) {
          rowIds.push(row.ID)
        })
        let res = await axios.delete(`/ui/links/${this.ID}/items/${rowIds}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.loadingLinksData()
        }
      }
    },

    // 根据链接名称查询对应链接
    searchLinks() {
      if (this.ID === 0) {
        this.$alert('请先选择一个链接分组', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.loadingLinksData()
      }
    },
    async sort(data) {
      let res = await axios.post(`/ui/links/${this.ID}/items/sort`, {
        linkID: data.ID,
        num: data.num
      })
      var btn = this.$refs['sortbutton' + data.ID]
      btn.submitLoading = false
      if (res.data.status === 1) {
        btn.isShowModal = false
        util.showSuccess('排序成功')
        this.loadingLinksData()
      } else {
        util.showResponseMessage(res.data.message)
      }
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

.padding-top-bottom .search-bar {
  /* padding-bottom: 5px; */
  text-align:right;
}

.linktable-img {
  max-width: 120px;
  max-height: 80px;
}

.search-icon {
    top: 2px;
    right: 8px;
  }
</style>
