<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <!-- 链接分组导航栏 -->
    <el-toolbar>
      <el-col :span="14">
        <el-button @click="addLinksGroup" priv="LinkManage.Add"><i class="fa fa-plus"></i>新建分组</el-button>
          <!-- <el-button @click="deleteLinksGroup(selectedRows)" :disabled="selectedRows.length === 0">
            <i class="fa fa-remove"></i>删除</el-button> -->
      </el-col>
      <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="searchValue" placeholder="请输入名称或别名" @keyup.enter.native="searchLinksGroup" class="search-bar-algin-toolbar"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchLinksGroup" title="查询"></i></span>
      </el-col>
    </el-toolbar>
    <!-- 链接分组表格 -->
    <el-list-view ref="datatable" :data="linksGroupData" :data-read-url="getData" :pageSize="10" @selection-change="selectionChange">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row>
            <el-col :span="18">
              <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row.ID)">{{row.name}}</a>
              <span class="gray">别名：{{row.code}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><span>添加人：</span> <em>{{row.addUser || '无'}}</em> </el-col>
            <el-col :span="7"><span>添加时间：</span> <em>{{row.addTime | fixDateTime}}</em> </el-col>
            <el-col :span="5"><span>最近修改人：</span> <em>{{row.modifyUser || '无'}}</em> </el-col>
            <el-col :span="7"><span>最近修改时间：</span> <em>{{row.modifyTime | fixDateTime}}</em> </el-col>
          </el-row>
          <el-row class="list-card-buttons">
            <el-col :span="24" class="tar">
              <el-button @click.stop="editLinksGroup(row)" type="text" title="编辑" :priv="'com.zving.cms.Link.Edit.'+ row.ID">
                <i class="fa fa-edit"></i>编辑</el-button>
              <el-button @click.stop="deleteLinksGroup([row])" type="text" title="删除" :priv="'com.zving.cms.Link.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 {
  filters: {
    fixDateTime: function(val) {
      if (val) {
        return util.formatDate(val, 'yyyy-MM-dd HH:mm')
      } else {
        return '无'
      }
    }
  },
  data() {
    return {
      searchValue: '', // 查询链接分组对应的值
      groupID: 0, // 传给分组弹框的ID值
      linksGroupData: [], // 链接分组数据
      showAddOrEditPage: false, // 新建/编辑分组弹框显示
      selectedRows: [] // 选中的链接分组
    }
  },

  methods: {
    gotoDetailPage(id) {
      this.$router.push({path: `/plugins/links/${id}/list`})
    },

    getData() {
      return [
        '/ui/links', {
          params: {
            searchValue: encodeURIComponent(this.searchValue)
          }
        }
      ]
    },

    // 获取链接分组数据
    async loadingLinksGroupData() {
      this.$refs.datatable.getData()
    },

    // 关闭弹框回调，清空数据
    refresh() {
      this.loadingLinksGroupData()
    },

    // 改变选中分组触发事件
    selectionChange(selection) {
      this.selectedRows = selection
    },

    // 搜索链接分组点击事件
    searchLinksGroup() {
      this.loadingLinksGroupData()
    },

    // 新建分组按钮事件
    addLinksGroup() {
      this.$router.push({path: '/plugins/links/new'})
    },

    // 编辑分组按钮事件
    editLinksGroup(row) {
      this.groupID = row.ID
      this.$router.push({path: `/plugins/links/${this.groupID}`})
    },

    // 删除分组按钮事件
    async deleteLinksGroup(rows) {
      // 判断当前是否有选中的分组
      if (rows.length === 0) {
        this.$alert('请先选择需要删除的链接组', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }

      let rowIds = []
      rows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      if (!rowIds.length) {
        return
      }
      let strIds = rowIds.join(',')
      let res = await axios.delete(`/ui/links/${strIds}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.loadingLinksGroupData()
      }
    }
  }
}
</script>

<style scoped>

.padding-top-bottom .search-bar {
  padding-bottom: 5px;
}

</style>
