<template>
<!-- 岗位设置 -->
  <div class="dashboard-container">
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="名称">
          <el-input
            placeholder="请输入名称"
            v-model="searchInfo.name"
            clearable>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="考核维度状态">
          <el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
            <el-option :value=1 label="正常">正常</el-option>
            <el-option :value=2 label="禁止">禁止</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAdd()">新增</el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column align="left" label="编号" min-width="100" prop="number" />
        <el-table-column align="left" label="职务名称" prop="name" />
        <el-table-column align="left" label="归属行政组织名称">
          <template #default="scope">
            {{scope.row.departmentname}} / {{scope.row.aoname}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="归属职务类别" prop="jobname" />
        <el-table-column align="left" label="权限设置" prop="jobname">
          <template #default="scope">
                <el-button icon="el-icon-s-tools" @click="setting(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column align="left" label="状态" min-width="140" prop="authorityName">
          <template #default="scope">
                <el-switch
                    inline-prompt 
                    active-text="正常" 
                    inactive-text="禁止"
                    v-model="scope.row.state"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value=1
                    :inactive-value=2
                    @change="changeVal($event,scope.row.id)"
                    />
             </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="300">
          <template #default="scope">
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="addSonMenu(scope.row)"
            >添加子菜单</el-button> -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="editMenu(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteMenu(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      </div>
      <!-- 新增弹框 -->
      <el-dialog :visible.sync="dialogFormVisible" :before-close="closeDialog" :close-on-click-modal="false" title="新增" width="20%">
        <el-form ref="addForm" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="岗位名称">
            <el-input v-model="form.name"/>
          </el-form-item>
          <!-- <el-form-item label="所属栏目">
            <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable></el-cascader>
          </el-form-item> -->
          <el-form-item label="岗位编号">
            <el-input v-model="form.number"/>
          </el-form-item>
          <el-form-item label="负责人">
            <el-select v-model="form.incharge" clearable placeholder="请选择状态">
                <el-option :value=1 label="是">是</el-option>
                <el-option :value=2 label="否">否</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务">
            <el-select v-model="form.duties" filterable clearable placeholder="请选择职务">
                <el-option
                v-for="item in JobTitleList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组织机构">
            <!-- <el-cascader clearable v-model="form.organization" :options="GovthreeList" :show-all-levels="false" :props="userProps"></el-cascader> -->
            <el-cascader
              filterable
              :show-all-levels="false"
              v-model="form.organization"
              :options="GovthreeList"
              :props="userProps"
              clearable></el-cascader>
          </el-form-item>
          <el-form-item label="部门">
            <!-- <el-cascader clearable v-model="form.organization" :options="GovthreeList" :show-all-levels="false" :props="userProps"></el-cascader> -->
            <el-cascader
              filterable
              :show-all-levels="false"
              v-model="form.department"
              :options="BuMenthreeList"
              :props="userProps1"
              @change="departmentSelect"
              clearable></el-cascader>
          </el-form-item>
           <el-form-item label="上级职务">
            <el-select filterable v-model="form.superior" clearable placeholder="请选择职务">
                <el-option :value=1 label="总经理">总经理</el-option>
                <el-option
                v-for="item in PostList"
                :key="item.id"
                :label="item.name+item.number"
                :value="item.id">
                </el-option>

            </el-select>
          </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>
      <!-- 新增子菜单弹框 -->
      <el-dialog :visible.sync="addSonShow" :before-close="closeSonDialog" title="新增子菜单" width="20%">
        <el-form :model="addSonMenuData" label-width="150px">
          <el-form-item label="栏目名称">
            <el-input v-model="addSonMenuData.title"/>
          </el-form-item>
          <!-- <el-form-item label="所属栏目">
            <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable></el-cascader>
          </el-form-item> -->

          <el-form-item label="栏目路径">
            <el-input v-model="addSonMenuData.menuurl"/>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="addSonMenuData.sort"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="closeSonDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="enterSonDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog :visible.sync="editDialogFormVisible" :before-close="editCloseDialog" title="修改" width="20%">
        <el-form ref="editForm" :model="editAdd" :rules="editRules" label-width="150px">
          <el-form-item label="栏目名称">
            <el-input v-model="editAdd.title"/>
          </el-form-item>
          <!-- <el-form-item label="所属栏目">
            <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable></el-cascader>
          </el-form-item> -->

          <el-form-item label="栏目路径">
            <el-input v-model="editAdd.apiUrl"/>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="editAdd.sort"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="editCloseDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="editEnterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 权限设置弹窗 -->
      <el-dialog :visible.sync="settingTree" title="权限配置" width="40%">
        <el-form ref="editForm" :model="editAdd" :rules="editRules" label-width="150px">
          
        </el-form>
        <el-tree
          :data="positionroleList"
          check-strictly=true
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          :default-checked-keys="checkList"
          highlight-current
          :props="defaultProps">
        </el-tree>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="editCloseDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="settingFrom">确 定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import { dutyclasslist,statedutyclass,eitedutyclassinfo,getdutyclassinfo,adddutyclass } from '@/api/duty/dimension'
import { systemmenulist,addmenu,eitemenu,delmenu,addmenuoperation,delmenuperation } from '@/api/user'
import { getpositionrole,positionlist,addpositioncont,getpositioncont,eitepositionstateordel,eitepositioncont,dutieslist,govthree,positionallotment } from '@/api/personnel/post'

export default {
  name: 'Dashboard',
  data() {
    return {
      // 回显选中
      checkList:[],
      // 权限树配置
      defaultProps:{
        children: 'child',
        label: 'title',
        
      },
      // 权限树
      positionroleList:[],
      // 权限设置弹窗布尔
      settingTree:false,
      // 职务列表
      PostList:[],
      // 多级选择配置
      userProps: {
        value: "id",
        label: "name",
        children: "child",
        checkStrictly: true,
        emitPath:false,
      },
      // 多级选择配置
      userProps1: {
        value: "id",
        label: "name",
        children: "child",
        checkStrictly: true,
        emitPath:false,
      },
      // 部门树
      BuMenthreeList:[],
      // 行政组织树
      GovthreeList:[],
    //   职务列表数据
    JobTitleList:[],
      // 查询详情的数据
      editFrom:{},
      // 修改状态提交数据
      switchFrom:{},
      // 删除数据提交
      deleFrom:{},
      // 编辑时数据
      editAdd:{
        
      },
      assessList:{},
      // 添加数据
      form:{
        type:1,
      },
      settingId:'',
      // 弹窗变量
      dialogFormVisible:false,
      addSonMenuData:{},
      // 修改弹窗
      editDialogFormVisible:false,
      // 添加子菜单弹窗
      addSonShow:false,
      total: 0,
      tableData:[],
      // 条件查询变量
      searchInfo: {
        page: 1,
        pagesize: 10
      },
      // 条件查询变量
      abc:{
        aaa:"111",
        bbb:"222"
      },
      // 添加时验证规则
      rules: {
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      editRules:{
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      }
    }
  },
  created() {
    console.log(this.$store.state.user.token)
    if (this.$store.state.user.token=='') {
      this.$router.push('/login')
    }
    // 页面渲染时获取初始数据
    this.getPostList()
    this.getDataList()
    this.getJobTitleList()
    this.getGovthree()
    this.getBuMenthree()
  },
  methods: {
    // 权限设置提交
    async settingFrom(){
      const from = {
          id: this.settingId.toString(), //岗位（职位） ID
          menupermit: this.$refs.tree.getCheckedKeys(), //菜单权限
          buttonpermit: [] //按钮权限
      }
      
      const res = await positionallotment(from)
      if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '设置成功!'
            })
            
             this.getDataList()
          }
       this.settingTree = false
      console.log();
      
    },
    // 获取权限设置树
    async setting(row){
      const from = {
        id: row.id, //二者必填一个
      }
      this.settingId=row.id
      const res = await getpositionrole(from)
      this.positionroleList = res.data
      this.setName(this.positionroleList)
      console.log(this.checkList)
      this.settingTree = true
      
    },
    setName(datas){ //遍历树  获取id数组
      for(var i in datas){
        if (i.istrue==true) {
          console.log("456")
          this.checkList.push(i.id) 
        }
        console.log("setName")
         // 遍历项目满足条件后的操作
        if(datas[i].child){  //存在子节点就递归
          this.setName(datas[i].child);
        }
      }
    },
    // 树形结构递归
    digui (item) {

  	  // 一层一层往下面执行，循环，直到不满足情况的条件下，会自动跳出这个递归方法，然后又到上面方法的源头处，开始执行下一个对象。。。
      if (item.child != []) {
        
          // 因为三级联动的数据格式是value和label,所以需要自己手动添加，没有的忽略。
          item.child.forEach(ff => {
            if (ff.istrue==true) {
            this.checkList.push(ff.id) 
          }
          	  // 这里就是判断他的children下面还有没有值，有的话我就要往下挖，就又开始自己调用自己了
              this.digui(ff)
          })
      }  else {
      	   // 这里就是判断，如果我这一层的children下面没有东西的时候该做什么操作 
           // 要添加value和label,否则会看不到标签名字和值
          // --------------------------分割线---------------------------------
          if (item.istrue==true) {
            this.checkList.push(item.id) 
          }
          // item.govlist=item.child
          
      }
      // 到这里为止，不能在这里打印数据，不然数据就是个断层的，因为在这里打印的数据是当前循环的这一层的数据，如果想看完整数据效果，那么就需要在递归方法第一次调用的地方打印需要递归的值，即上一个方法中。
  },
    //   获取行政组织树
    async getGovthree(){
      const searchData = {
          
      }
      const res = await govthree()
      this.GovthreeList = res.data
    },
    //   获取部门组织树
    async getBuMenthree(){
      const searchData = {
          level:4
      }
      const res = await govthree(searchData)
      this.BuMenthreeList = res.data
    },
    //   获取职务列表
    async getJobTitleList(){
      const searchData = {
          page: 1, //分页页码，数字类型
          pagesize: 10000, //每页显示多少条数据
      }
      const res = await dutieslist(searchData)
      this.JobTitleList = res.data.list
    },
    // 添加子菜单
    addSonMenu(row){
      this.addSonMenuData.parentId=row.id
      this.addSonShow=true
    },
    //删除操作
    async deleteMenu(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.deleFrom.state=3;
          this.deleFrom.id=row.id;
          const res = await eitepositionstateordel(this.deleFrom)
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            
             this.getDataList()
          }
        })
    },
    // 新增按钮
    showAdd(){
      this.dialogFormVisible=true;
      console.log(this.dialogFormVisible)
    },
    // 编辑按钮
    async editMenu(row){
      // this.editFrom=row
      // const res = await getdutyclassinfo(this.editFrom)
      this.editAdd = row
      // this.editAdd.menuurl=row.apiUrl
      this.editDialogFormVisible=true;

    },
    // 开关状态监听
   async changeVal(val,id){
       console.log(val)
      this.switchFrom.id=id
      if (val==1) {
        this.switchFrom.state=1;
        const res = await eitepositionstateordel(this.switchFrom)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '修改状态成功',
                    showClose: true
                  })
                  this.getDataList()
                }
      } else {
        this.switchFrom.state=2;
        const res = await eitepositionstateordel(this.switchFrom)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '修改状态成功',
                    showClose: true
                  })
                  this.getDataList()
                }
      }
    },
    // 重置搜索条件
    onReset() {
      this.searchInfo = {}
    },
    // 条件搜索m
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getDataList()
    },
    // 日期时间戳转日期格式
    formatDate(nS) {     
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
    },
   
    // 提交按钮
    async enterDialog(){
      const fromCopy=JSON.parse(JSON.stringify(this.form))
      fromCopy.duties=fromCopy.duties.toString()
      fromCopy.organization=fromCopy.organization.toString()
      fromCopy.superior=fromCopy.superior.toString()
      fromCopy.department=fromCopy.department.toString()
      // this.form.parentId=0
      // this.form.sort=parseInt(this.form.sort)
      const res = await addpositioncont(fromCopy)
      if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '添加成功',
                showClose: true
              })
            }
      this.getDataList();
      this.closeDialog();
        
    },
    // 提交子菜单按钮
    async enterSonDialog(){
      
      
      this.addSonMenuData.sort=parseInt(this.addSonMenuData.sort)
      const res = await addmenu(this.addSonMenuData)
      if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '添加成功',
                showClose: true
              })
            }
      this.getDataList();
      this.closeSonDialog();
        
    },
    // 编辑提交按钮
    async editEnterDialog(){
          this.editAdd.menuurl=this.editAdd.apiUrl
          const res = await eitemenu(this.editAdd)
          if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '编辑成功',
                    showClose: true
                  })
                }
          this.getDataList();
          this.editCloseDialog();
        
    },
    // 添加框关闭
    closeDialog() {
      console.log("closeDialog")
      this.initForm()
      this.dialogFormVisible = false
    },
    // 添加子框关闭
    closeSonDialog() {
      this.addSonMenuData={}
      this.addSonShow = false
    },
    // 修改框关闭
    editCloseDialog() {
      this.editInitForm()
      this.editDialogFormVisible = false
    },
    // 添加重置表单
    initForm() {
      this.$refs.addForm.resetFields()
      this.form = {}
      console.log(this.form)
    },
    // 修改重置表单
    editInitForm() {
      this.$refs.editForm.resetFields()
      this.editAdd = {}
    },
    // 改变pageSize
    handleSizeChange(val) {
      this.searchInfo.pagesize=val
      this.getDataList(this.searchInfo)
    },
    // 改变page
    handleCurrentChange(val) {
      this.searchInfo.page=val
      this.getDataList(this.searchInfo)
    },
    // 获取初始数据
    async getDataList() {
      const res = await positionlist(this.searchInfo)
      this.tableData = res.data.list
      this.total = res.data.total
      this.searchInfo.page = res.data.page
      this.searchInfo.pagesize = res.data.pageSize
    },
    async departmentSelect(val){
      const searchInfo={
        page: 1, //分页页码，数字类型
        pagesize: 100000, //每页显示数量
        department:val.toString()
      }
      const res = await positionlist(searchInfo)
      this.PostList = res.data.list
    },
    // 获取职务数据
    async getPostList() {
      const searchInfo={
        page: 1, //分页页码，数字类型
        pagesize: 100000, //每页显示数量
      }
      const res = await positionlist(searchInfo)
      this.PostList = res.data.list
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
