<template>
    <div class="main-content__div">
      <div class="table-box__div" v-cloak v-loading="loadingFlag">
        <el-form  class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input
              placeholder="角色名称"
              v-model="keyword"
              style="width:150px;"
              size="small"
              >
            </el-input>
          </el-form-item>
          
          <!-- 搜索按钮 -->
          <el-form-item>
            <el-button type="primary" size="small" @click="searchFrom()">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <div class="table-box__div" v-cloak v-loading="loadingFlag">
        <!-- 查询表单 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" size="small" @click="addClick">添加站点角色</el-button>
          </el-form-item>
        
        </el-form>
        <el-table
          size="mini"
          :data="tableData"
          :empty-text="tableDataLoadingText"
          style="width: 100%;font-size: 15px;"
          :header-cell-style="{background:'#FAFAFA'}"
        >
          <el-table-column label="编号" width="250" prop="website_role_id"></el-table-column>
          <el-table-column label="角色名称" prop="role_name" width="350"></el-table-column>
          <el-table-column label="角色备注" prop="remark" width="300"></el-table-column>
          <el-table-column label="操作时间" prop="updated_at" width="200"></el-table-column>
          <el-table-column label="排序" prop="sort" width="200"></el-table-column>
          <el-table-column   prop="" label="操作" align="center"  fixed="right" width="200">
                  <template v-slot="scope">
                    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;" >
                      <span class="btn"  @click="addUser(scope.row)">添加用户</span>
                      <span class="btn"  @click="deleteAuthority(scope.row,scope.$index)">删除</span>
                    </div>
                  </template>
                </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" v-show="pagination" style="margin-top: 10px;float: right;">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(tableCount)">
          </el-pagination>
        </div>
      </div>
    </div>
  <Dialog title="温馨提示" content="您确认要删除该角色吗？"
          @close="DialogShow = false"
          @submitSureClick="submitSureClickDel"
          @DialogFalse="DialogShow = false"
          :innerVisible="DialogShow">
  </Dialog>
  <DialogSlot
      title="添加"
      @close="roleDialogShow = false"
      @DialogClose="roleDialogShow = false"
      :innerVisible="roleDialogShow"
      @colesClick="roleDialogShow  = false"
  >
    <editFrom
        @colesClick="roleDialogShow = false"
        :roleDataForm="roleDataForm"
         :isloading="isloading"
        @roleSubmitClick="roleSubmitClick"
        @closeDlg="closeDlg"
        >
    </editFrom>
  </DialogSlot>


  </template>
  <script>
  import Dialog from "../../components/dialog";
  import editFrom from "./components/edit";
  import DialogSlot from "../../components/DialogSlot";
  export default {
    components: {
      Dialog,
      editFrom,
      DialogSlot
    },
    data() {
      return {
        value:"1",
        //  菜单列表数据
        tableData: [],
        //  加载中数据提示
        tableDataLoadingText:"拼命加载中······",
        //  是否显示分页
        pagination:false,
        //  每页显示的条数
        pageSize:10,
        //  当前页
        currentPage:1,
        //  菜单列表数据总条数
        tableCount:0,
  
        loadingFlag: false,
        isShowSource: false, // 是否显示来源列
        id:0,
        DialogShow: false, //控制删除弹窗
        websiteRoleId:'',
        roleRowIndex:'',
        roleDataForm: {},
        roleTableData: [],
        isloading:false, //提交按钮状态
        roleDialogShow: false, // 控制保存弹窗


        authorityDialogShow:false,
        authorityDataForm: {},
        keyword:'',
        websiteId:''
      }
    },
    mounted() {},
    methods: {
      // 获取菜单信息列表
      getList:function(){
        let _t = this;
        _t.loadingFlag = true;
        let parames = {
            'page':this.currentPage,
            'pageSize':this.pageSize,
            'keyword':this.keyword,
            'id':this.websiteId
        }
        this.$api.website.getWebsiteRoleList(parames).then(res=>{
                _t.loadingFlag = false;
                if(res.code==200){
                  if(res.data.rows.length==0){
                    this.$message.error("没找到该角色！！！")
                    return
                  }
                    _t.tableData = res.data.rows;
                    _t.tableCount = res.data.count;
                     //  总条数大于每页显示的条数时显示分页
                    if( _t.tableCount > _t.pageSize ){
                     _t.pagination = true;
                    }
                    if( _t.tableData.length==0 ){
                     _t.tableDataLoadingText = "暂无数据";
                    }
                }else{
                    this.$message.error("查询失败")
                }
            })
      },
      // 点击翻页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      // 查看下一级
      nextClick( id ){
        let _t = this;
        _t.id = id
        _t.currentPage = 1
        _t.pageSize = 10
       this.getList()
      },
      addClick(){
        this.roleDataForm = {}
        this.roleDialogShow = true
      },
      closeDlg(val){
          this.roleDialogShow = false
          this.isloading = false
          this.authorityDialogShow = false
      },
      roleSubmitClick(data){
        let _t = this
        console.log("提交数据",data)
        let parames = {
          role_id:data.role_id,
          type:1,
          website_id:this.websiteId
        }
        _t.isloading = true
        this.$api.website.createWebsiteRole(parames).then(res=>{
              _t.loadingFlag = false;
              if(res.code==200){
                    console.log("创建成功")
                    this.getList()
              }else{
                  this.$message.error(res.message)
              }
              this.roleDialogShow = false
              this.isloading = false
          })
      },
   
      //删除站点角色
      deleteAuthority(row, index) {
        this.websiteRoleId = row.website_role_id
        this.roleRowIndex = index
        this.DialogShow = true
      },
      submitSureClickDel(row,index){
        let parames = {
          'id':this.websiteRoleId
        }
        this.$api.website.delWebsiteRole(parames).then(res=>{
          if(res.code==200){
            this.DialogShow = false
            this.getList()
          }else{
            this.$message.error("删除失败")
          }
        })
      },
      searchFrom(){
        this.currentPage = 1
        this.pageSize = 10
        this.getList()
      },
      addUser(row){
        console.log("角色id：：",row.role_id)
          this.$router.push('/left/websiteRoleUser/'+row.website_id+'/'+row.role_id);
      }
    },
    created() {
        //赋值站点id
        this.websiteId = this.$route.params.Id;
        console.log("接收参数：",this.$route.params.Id);
        this.getList();
  
    }
  }
  </script>

  
<style >
.demo-form-inline{
   display: flex;
}
.demo-form-inline .el-form-item{
 margin: 0 20px;
}
</style>
