<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <el-toolbar>
      <el-col :span="14">
        <el-button @click="addMetaClickHandler" priv="BrowsePrivGroupManage.Add"><i class="fa fa-plus"></i>新建</el-button>
          <!-- <el-button :disabled="selectedRows.length === 0" @click="deleteClickHandler(selectedRows)">
            <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="search.name" @keyup.enter.native="searchClickHandler" placeholder="请输入名称或别名" class="search-bar-algin-toolbar"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="查询"></i></span>
      </el-col>
    </el-toolbar>

    <el-list-view ref="privGroupList" :data-read-url="getData" :pageSize="10" :auto-get-data="false" @selection-change="onSelectionChange">
      <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.name}}</a> <span class="gray">别名：{{row.code}}</span> </el-row>
          <el-row>
            <el-col :span="6"><span>添加人：</span> <em>{{row.addUser || '无'}}</em> </el-col>
            <el-col :span="6"><span>添加时间：</span> <em>{{row.addTime | fixDateTime}}</em> </el-col>
            <el-col :span="6"><span>最近修改人：</span> <em>{{row.modifyUser || '无'}}</em> </el-col>
            <el-col :span="6"><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="gotoDetailPage(row.ID)" type="text" priv="BrowsePrivGroupManage.Add" title="编辑">
                <i class="fa fa-edit"></i>编辑
              </el-button>
              <el-button @click.stop="deleteClickHandler([row])" priv="BrowsePrivGroupManage.Delete" type="text" title="删除">
                <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 '无'
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      selectedRows: [], // 勾选行
      privGroup: [], // 浏览权限列表
      search: {
        name: ''
      }, // 查询条件
      createPrivDataModal: false, // 新建页面是否显示
      confirmLoading: false, // 添加时的按钮加载
      detailDataChange: false
    }
  },
  methods: {
    refreshCallback() {
      this.detailDataChange = true
    },
    // 点击创建显示添加框
    addMetaClickHandler() {
      this.$router.push(`${this.$route.path}/new`)
      this.createPrivDataModal = true
    },
    // 删除浏览权限data
    async deleteClickHandler(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录！', '提示', {
          type: 'info'
        })
        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/browsepriv/${strIds}`, {})
      if (res.data.status === 1) {
        // 删除后重新加载列表
        this.loadListData()
      }
      util.showResponseMessage(res.data)
    },
    // 条件查询
    searchClickHandler() {
      this.loadListData()
    },
    // 选中一条浏览权限data
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 点击名称进入详情页
    gotoDetailPage(ID) {
      this.$router.push(`${this.$route.path}/${ID}`)
    },
    getData() {
      return [
        '/ui/browsepriv',
        {
          params: {
            searchContent: encodeURI(this.search.name)
          }
        }
      ]
    },
    // 初始化方法
    async loadListData() {
      this.$refs.privGroupList && (await this.$refs.privGroupList.getData())
      // await this.$refs.dataTable.getData()
      // 将查询到的conditions中剔除无用数据
      this.privGroup.forEach(row => {
        if (row.conditions) {
          row.conditions.condition[0] = row.conditions.condition[0].filter(val => val.operator !== '(' && val.operator !== ')')
        }
      })
      this.detailDataChange = false
    }
  },
  mounted() {
    this.loadListData()
  }
}
</script>

<style scoped>
.padding-top-bottom .search-bar {
  padding-bottom: 5px;
}
</style>
