<template>
<!-- 权限配置 -->
  <div class="dashboard-container" style="padding:20px">
    <el-container>
        <!-- 左侧内容 -->
        <el-aside width="250px">
          <div>
              <el-input
              
              placeholder="搜索"
              v-model="filterText">
            </el-input>
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all

              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree">
            </el-tree>
          </div>
          
        </el-aside>
        <!-- 右侧内容 -->
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAdd()">新增</el-button>
        <el-main style="padding:10px">
          <div style="">
            <div style="width: 180px;float: left;">
              <div class="tabletop" style="width:180px;border: 1px solid #DCDFE6;padding: 5px;height: 48px;padding: 12px 0;font-weight: 500;text-overflow: ellipsis;text-align: left;color: #909399;font-size: 14px;padding-left: 10px;">主菜单</div>
              <div style="width:180px;border: 1px solid #DCDFE6;padding: 5px;">
                <el-checkbox-group v-model="menu">
                  <el-checkbox style="margin-bottom:3px" label="绩效考核" name="type"></el-checkbox>
                  <el-checkbox style="margin-bottom:3px" label="hr系统" name="type"></el-checkbox>
                  <el-checkbox style="margin-bottom:3px" label="基础信息" name="type"></el-checkbox>
                  <el-checkbox style="margin-bottom:3px" label="数据提报" name="type"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div style="width: 180px;float: left;">
              <div class="tabletop" style="width:180px;border: 1px solid #DCDFE6;padding: 5px;height: 48px;padding: 12px 0;font-weight: 500;text-overflow: ellipsis;text-align: left;color: #909399;font-size: 14px;padding-left: 10px;">
                <el-checkbox v-model="checked">全选</el-checkbox>
              </div>
              <div v-for="(iteam,index) in tableData" style="width:180px;border: 0.5px solid #DCDFE6;height: 104px;font-weight: 500;text-overflow: ellipsis;text-align: left;font-size: 14px;padding-left: 10px;padding: 12px 5px;line-height: 4.15;padding-left: 10px;">
                <el-checkbox v-model="checked">{{iteam.name}}</el-checkbox>
              </div>
            </div>
            <el-table
              :data="tableData"
              border
              style="width:1000px">
              <el-table-column
                prop="date"
                label="表单权限">
                <template slot-scope="scope">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="列表权限">
                <template slot-scope="scope">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="iteam in listQuan" :label="iteam" :key="iteam">{{iteam}}</el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="数据权限">
                <template slot-scope="scope">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">本人</el-radio>
                    <el-radio :label="6">服务部门</el-radio>
                    <el-radio :label="9">全部</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
    </el-container>
    <!-- 新增弹框 -->
    <el-dialog :visible.sync="dialogFormVisible" :before-close="closeDialog" title="新增应用系统" width="20%">
      <el-form ref="addForm" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="别名" prop="title">
          <el-input v-model="form.coder" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer"> 
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ['暂存', '提交', '打印', '删除'];
import { dutieslist,positionlist } from '@/api/personnel/post'
import { add_system } from '@/api/duty/quanXian'
import { dutyclasslist,statedutyclass,eitedutyclassinfo,getdutyclassinfo,adddutyclass } from '@/api/duty/dimension'
export default {
  name: 'Dashboard',
  data() {
    return {
      form:"",
      dialogFormVisible:false,
      radio:'',
      checkAll: false,
        checkedCities: ['暂存', '提交', '打印'],
        cities: cityOptions,
        listQuan:['新增','导入','导出','删除','打印二维码'],
        isIndeterminate: true,
      checked:'',
      tableData: [{
          date: '2016-05-02',
          name: '期初向导',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '初始设置',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '编码规则',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '清除数据',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      menu:'',
      // 职务列表
      dutiesList:[],
      positionList:[],
      // 查询详情的数据
      editFrom:{},
       filterText: '',
        data: [{
          id: 1,
          name: '角色',
          children: [{
            id: 4,
            name: '超级管理员',
          },{
            id: 66,
            name: '管理员',
          }]
        }, {
          id: 2,
          name: '职务',
          children: []
        }, {
          id: 3,
          name: '岗位',
          children: []
        }],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
    }
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  created() {
    console.log(this.$store.state.user.token)
    if (this.$store.state.user.token=='') {
      this.$router.push('/login')
    }
    // 页面渲染时获取初始数据
    // this.getDataList()
    this.getDutiesList()
    this.getPositionlistList()
  },
  methods: {
    // 点击添加按钮
    showAdd(){
      this.dialogFormVisible=true;
    },
    // 添加框关闭
    closeDialog() {
      this.dialogFormVisible = false
    },
    // 提交按钮
    async enterDialog(){
      const res = await add_system(this.form)
      if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '添加成功',
                showClose: true
              })
            }
      this.getDataList();
      this.closeDialog();
        
    },
    // 点击左侧树回调函数
    treeClick(val){
      console.log("val")
      console.log(val)
    },
    handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
    // el 自带过滤函数
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    // 获取职务列表数据
    async getDutiesList() {
      const searchInfo = {
        page: 1, //分页页码，数字类型
        pagesize: 1000000, //每页显示多少条数据
      }
      const res = await dutieslist(searchInfo)
      this.dutiesList = res.data.list
      this.data[1].children=this.dutiesList
    },
    // 获取岗位列表数据
    async getPositionlistList() {

      const searchInfo = {
        page: 1, //分页页码，数字类型
        pagesize: 1000000, //每页显示多少条数据
      }
      const res = await positionlist(searchInfo)
      this.positionList = res.data.list
      this.data[2].children=this.positionList
    },
    // 获取初始数据
    // async getDataList() {
    //   const res = await dutyclasslist(this.searchInfo)
    //   this.tableData = res.data.list
    //   this.total = res.data.total
    //   this.searchInfo.page = res.data.page
    //   this.searchInfo.pagesize = res.data.pageSize
    // }
  }
}
</script>

<style lang="scss" scoped>
.el-table__header .el-table-column--selection .cell .el-checkbox:after {
  color: #333;
  content: "全选" !important;
  font-size: 16px;
  margin-left: 12px;
  font-weight: bold;
}
.tabletop{
  padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}
// .el-aside::-webkit-scrollbar {
//      display: none;
// }
// .el-input {
//     width: 200px;
//   }
// .el-header, .el-footer {
//     background-color: #B3C0D1;
//     color: #333;
//     text-align: center;
//     line-height: 60px;
//   }
  
//   .el-aside {
//     background-color: #D3DCE6;
//     color: #333;
//     text-align: center;
//     line-height: 200px;
//   }
  
//   .el-main {
//     background-color: #E9EEF3;
//     color: #333;
//     text-align: center;
//     line-height: 160px;
//   }
  
//   body > .el-container {
//     margin-bottom: 40px;
//   }
  
//   .el-container:nth-child(5) .el-aside,
//   .el-container:nth-child(6) .el-aside {
//     line-height: 260px;
//   }
  
//   .el-container:nth-child(7) .el-aside {
//     line-height: 320px;
//   }
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
</style>
