<template>
  <div class="all">
    <PageHead phName="添加人员"></PageHead>
    <div class="main">
        <el-form :model="personForm" ref="configuration" label-width="140px">
          <el-form-item label="考核人员:">
            <div class="border flex-box-ce">
              <div class="flex-1" v-if="users.length == 0">请选择参与人员</div>
              <div v-else style="width: 180px;" class="font-flex-word">
                <span v-for="(item, index) in users" :key="index">
                  <i v-if="index != 0">,</i>{{ item.name }}
                </span>
              </div>
              <span v-if="users.length >0" class="blue">{{users.length}}人</span>
              <i class="el-icon-arrow-down icon-right" v-else></i>
              <div @click="openSelectUser" class="inputDc"></div>
            </div>
          </el-form-item>
          <el-form-item label="绩效信息:">
              <el-checkbox v-model="isResult">沟通反馈</el-checkbox>
          </el-form-item>
          <el-form-item label="评分信息是否公开:">
              <el-checkbox-group v-model="personForm.type">
                <el-checkbox :label="1">评分人的评分对被考核人可见</el-checkbox>
                <el-checkbox :label="2">评分人的评分意见对被考核人可见</el-checkbox>
              </el-checkbox-group>
          </el-form-item>
          <el-form-item label="评分结果是否公开:">
                <el-radio-group v-model="personForm.type">
                  <el-radio :label="1">考核结束后自动公开</el-radio>
                  <el-radio :label="2">需管理员公式结果</el-radio>
                </el-radio-group>
                <div class="fontColorC" style="position: relative;top: -10px;">设置考核结果何时对被考核人可见</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确定</el-button>
          </el-form-item>
        </el-form>
    </div>

    <!-- 公式结果 -->
    <EmployeeSelector
      :title="'管理公示结果'"
      :is_filtration_creator="false"
      :can_select_employee="true"
      :selected="selected"
      :visible.sync="isResult"
      @confirm="confirmResult"
    />
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import PageHead from '@/components/public/PageHead'; //头部---返回
export default {
  name:'addPersonnel',
  components: {EmployeeSelector,PageHead},
  data() {
    return {
      selected: { dept: [], employee: [] },
      isResult:false,
      users:[],
      personForm:{
        type:1
      },
    };
  },
  watch: {

  },
  created() {

  },
  mounted() {},
  methods: {
    confirmResult(){},
    openSelectUser(){
      this.isResult=true;
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.all {
  position: relative;
  font-size: 14px;
  background-color: #fff;
  padding:40px 20px;
}
.main {
  margin-bottom: 60px;
}
.border {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #C0C4CF;
  font-size: inherit;
  height: auto;
  outline: 0;
  padding: 0 15px;
  width: 250px;
  position: relative;
  cursor: pointer;
}
.border .font-flex-word{
  color: #606266;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  cursor: pointer;
}
</style>
