<template>
  <div class="authority commonFont">
    <div>
      <div class="authority-main line-space">
        <div class="authority-main-header">
          <div class="comonTitle">智能绩效主管理员</div>
          <el-button
            type="primary"
            size="small"
            @click="handleChangeDirector"
          >更换智能绩效主管理员</el-button>
        </div>
        <div class="comonPrompt">绩效应用的主管理员，可由钉钉主管理员设置，绩效主管理员具有应用所有权限，且可以设置智能绩效应用子管理员</div>
        <div class="authority-main-info">
          <el-image :src="url"></el-image>
          <div class="authority-main-info-name">阿三来了</div>
        </div>
      </div>
      <div class="authority-sub line-space">
        <div class="authority-sub-header">
          <div class="comonTitle">智能绩效子管理员</div>
          <el-button
            type="primary"
            size="small"
            @click="handleSubAdd"
            icon="el-icon-plus"
            plain
          >添加</el-button>
        </div>
        <div class="comonPrompt line-space">可把绩效应用的日常管理工作交给绩效子管理员，绩效子管理员可由绩效主管理员设置</div>
        <el-table
          :data="tableDataList"
          :header-cell-style="handleSubGetTableStyle"
        >
          <el-table-column label="姓名"></el-table-column>
          <el-table-column label="功能模块"></el-table-column>
          <el-table-column label="管理范围"></el-table-column>
          <el-table-column label="是否可见考核结果"></el-table-column>
          <el-table-column label="菜单权限"></el-table-column>
          <el-table-column label="管理考评组"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
      </div>
      <div class="authority-ceo line-space">
        <div class="comonTitle line-space">企业负责人</div>
        <div class="comonPrompt">企业负责人可以看到全公司的绩效数据，可由钉钉主管理员在通讯录设置</div>
      </div>
      <div class="authority-department line-space">
        <div class="comonTitle line-space">部门主管</div>
        <div class="comonPrompt">部门主管可看到管理部门的绩效数据，可由钉钉管理员在钉钉通讯录设置</div>
      </div>
      <div class="authority-employee line-space">
        <div class="comonTitle line-space">员工</div>
        <div class="comonPrompt">员工仅可见自己的绩效数据</div>
      </div>
    </div>

    <dialog-depart
      v-if="showDialogDepart"
      :value.sync='depIds'
      :isShow.sync='showDialogDepart'
      :showDataList.sync='showData'
    />
    <popup-right
      v-if="showPopupAddSub"
      @cancel="hundlePopupAddSubHide"
      @submit="handlePopupAddSubSubmit"
      title="智能绩效子管理员设置"
      class="popup"
    ></popup-right>
  </div>
</template>

<script>
import dialogDepart from '@/components/getDepart'
import popupRight from '@/components/PopupRight'

export default {
  components: {
    dialogDepart,
    popupRight
  },
  data () {
    return {
      url: '',
      showDialogDepart: false,
      tableDataList: [],
      showData: {},
      depIds: '22',
      showPopupAddSub: false // 显示添加子管理员

    }
  },
  methods: {
    handleSubGetTableStyle () {
      return { 'background-color': '#f5f4f5', 'text-align': 'center' }
    },
    handleChangeDirector () {
      // 更换主管
      this.showDialogDepart = true
    },
    handleSubAdd () {

    }
  }
}
</script>
<style lang="less" scoped>
.authority {
  background-color: white;
  padding-top: 40px;
  .line-space {
    margin-bottom: 18px;
  }
  .el-image {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
  }
  &-main {
    &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
    &-info {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 72px;
      width: 100%;
      line-height: 72px;
      &-name {
        margin-left: 10px;
      }
    }
  }
  &-sub {
    &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
  }
}
</style>
