<!--
 * @description:
 * @fileName: AuthorityManagement
 * @author: 17076
 * @date: 2024/6/14-下午2:13
 * @version: V1.0.0
-->

<template>
  <div class="auth-content">
    <cs-search :data="searchData" :span="8" direction="row" @getData="onSearch" />
    <div class="content-info">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button>
      <vxe-grid v-bind="gridOptions" style="margin-top: 20px">
        <template #operate="{row}">
          <el-button type="text" @click="handleDetails(row)">详情</el-button>
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
        </template>
      </vxe-grid>
    </div>
    <!--角色编辑-->
    <edit-authority ref="edit" />
  </div>
</template>

<script>

import mixin from '@/views/mixin'
import EditAuthority from '@/views/system/accountManagement/components/EditAuthority.vue'

export default {
  name: 'AuthorityManagement',
  components: { EditAuthority },
  mixins: [mixin],
  data() {
    return {
      searchData: [
        { label: '角色', model: 'role', type: 'input' }
      ],
      gridOptions: {
        ...mixin.data().gridOptions,
        columns: [
          { title: '序号', type: 'seq', width: 80 },
          { title: '角色', field: 'roleName' },
          { title: '关联用户数', field: 'correlationUser' },
          { title: '说明', field: 'remark' },
          { title: '注册时间', field: 'registerTime', sortable: true },
          { title: '操作', slots: { default: 'operate' }, fixed: 'right', width: '150px' }
        ],
        data: [
          { roleName: 'xxx', correlationUser: 10, remark: '测试', registerTime: '2023-12-12' }
        ]
      }
    }
  },
  mounted() {
    this.tableHeight(390)
  },
  methods: {
    // 获取数据
    fetchData() {

    },
    // 新增
    handleAdd() {
      this.$refs.edit.show()
    },
    // 详情
    handleDetails(row) {
      this.$refs.edit.show(row, false)
    },
    // 编辑
    handleEdit(row) {
      this.$refs.edit.show(row, true)
    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('确定要删除吗?', null, async() => {

      })
    },
    // 搜索
    onSearch(data, callback) {
      if (callback) callback(true)
    }
  }
}
</script>

<style scoped lang="scss">
.auth-content {
  height: 100%;
  .content-info {
    margin-top: 10px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
  }
}
::v-deep {
  .header-blue {
    background: #F2F6FA;
  }
}
</style>
