<template>
  <div class="data-list">


      <el-table :data="dataList" style="width: 100%" header-row-class-name="headerBg" empty-text="没有角色信息">
        <el-table-column prop="id" label="ID" align="center" width="80"/>
        <el-table-column prop="code" label="权限编码" align="left" width="180"/>
        <el-table-column prop="name" label="权限名称" align="left" width="180"/>
        <!-- <el-table-column prop="path" label="权限路径" align="left" width="180"/>
        <el-table-column prop="file_path" label="文件路径" align="left" width="180"/> -->
        <el-table-column prop="sort" label="排序" align="center" min-width="150"/>
        <el-table-column prop="type" label="类型" align="center" width="150">
            <template #default="scope">
                <div v-if="scope.row.type==1">项目管理</div>
                <div v-if="scope.row.type==2">客户管理</div>
                <div v-if="scope.row.type==3">产品管理</div>
                <div v-if="scope.row.type==4">文档管理</div>
                <div v-if="scope.row.type==5">系统设置</div>
                <div v-if="scope.row.type==99">其它页面</div>
                <div v-if="scope.row.type==999">操作权限</div>
            </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center" width="150"/>
        <el-table-column prop="status" label="角色状态" align="center" width="150">
            <template #default="scope">
                <div v-if="scope.row.status==5">启用</div>
                <div v-if="scope.row.status==6">禁用</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="180">
          <template #default="scope">
            <div class="btns">
                <el-button type="primary" size="small" @click="btnEdit(scope.row.id)"><svg-icon icon-class="edit"/>编辑</el-button>
                <el-button type="danger" size="small" @click="btnRemove(scope.row.id)"><svg-icon icon-class="edit"/>删除</el-button>
             </div>
          </template>
        </el-table-column>
      </el-table>



      <div class="page-info">
      	<el-pagination
      	:currentPage="queryForm.page"
      	:page-size="queryForm.pageSize"
      	:total="recordCount"
      	:page-count="pageTotal"
      	 background
      	 layout="prev, pager, next"
      	 @current-change="ChangePage"
      	 >
      	 </el-pagination>
      </div>

     <el-dialog :visible.sync="dialogVisible" append-to-body v-el-drag-dialog  width="50%" custom-class="prod-verify" title="创建项目信息">

          <dataInfo :id="dataId" @onClose="onClose"></dataInfo>
      </el-dialog>

  </div>


</template>

<script>
  import{searchAdminPage,deleteAdminAuth} from'@/api/AdminAuth';
  import dataInfo from './dataInfo.vue';
  import elDragDialog from '@/directive/el-drag-dialog'
  export default{
    components:{
      dataInfo,
    },
    directives: { elDragDialog },
    props:{
      queryForm:{
        type:Object,
        default:()=>{
          return {
           page:1,
           pageSize:10,
           code:'',
           name:'',
           status:''
          }
        }
      }
    },
    watch:{

        'queryForm': {
          handler: function(val) {

            this.search();
          },
          // immediate: true,//立即执行
          deep: true

        },
    },
    data(){
      return{
        dialogVisible:false,//控制产品审核
        dataId:0,
        recordCount:0,
        pageTotal:1,
        dataList:[],
        currentData:{},
      }
    },
    mounted() {
      this.search();
    },
    methods:{

      btnRemove(e){
        let _this=this;
        let par={
          id:e,
        }
        _this.$confirm("您是否确认删除该记录？","提示",{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then((res)=>{
          // console.log("AAA")
             deleteAdminAuth(par).then(res=>{
               _this.search();
             })
        }).catch(()=>{
        })
      },

      onChangeVal(e){
        let _this=this;
        let par={
          id:_this.currentDataId,
          val:e,
        };

      },

      onClose(){
        let _this=this;
        _this.dialogVisible=false;
        _this.search();
      },


      //编辑
      btnEdit(e){
        let _this=this;
        _this.dataId=e;
        _this.dialogVisible=true;
      },

      handleClose(){
        let _this=this;
        _this.dataId=0;
        _this.dialogVisible=false;
      },

      //搜索
      search(){
        let _this=this;
        searchAdminPage(_this.queryForm).then(res=>{
          if(!res)return;
          _this.dataList=res.data.data;
          _this.recordCount=res.data.page;
          _this.pageTotal=res.data.total;
        })
      },
      //修改分页
      ChangePage(e){
      	let _this=this;
      	_this.queryForm.page=e;
      	_this.search();
      },
    }
  }
</script>

<style lang="scss">
@import './dataList.scss';
</style>
