<!--  -->
<template>
    <div class="addPerson">
        <small-nav />
        <div class="addPerson-content">
            <el-form ref="form" :model="form" label-width="160px">
              <el-form-item label="考评员工：">
                <div v-if="list.list.length>0">
                 <el-input
                  @focus="handleChoose"
                  style="width:300px;cursor: pointer;"
                  size="small"
                  :value ="list.title + '等' + list.list.length + '个人'"
                  readonly>
                    <i slot="suffix" class="el-input__icon el-icon-edit"></i>
                </el-input>
                <i @click="list.list=[]"  style="margin-left:10px;cursor: pointer;" class="el-icon-delete"></i>
                </div>
                <el-button size="small" icon="el-icon-plus"  plain @click="handleChoose">选人员</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="small" :loading='isLoading' type="primary" @click="handleOnSubmit">确定</el-button>
              </el-form-item>
            </el-form>
        </div>
       <getPersonnel v-if="isSshow" :value.sync='form.staffIds'  :isShow.sync='isSshow' :showDataList.sync='list'/>
    </div>
</template>

<script>
import getPersonnel from '@/components/getPersonnel'
import SmallNav from '@/components/kpi-layout/SmallNav'
import { apiAssessManagerChange } from '@/api/assessment'
export default {
  data () {
    return {
      isLoading: false,
      isSshow: false,
      list: {
        list: []
      },
      form: {}
    }
  },
  components: {
    SmallNav,
    getPersonnel
  },
  computed: {},
  beforeMount () {},
  mounted () {},
  methods: {
    handleChoose () {
      this.isSshow = true
    },
    async handleOnSubmit () {
      const parmas = {
        startId: this.$route.query.id,
        staffIds: this.form.staffIds,
        confirm: 0,
        changeType: 0
      }
      this.isLoading = false
      this.$loadingStart()
      let res = await apiAssessManagerChange(parmas)
      this.isLoading = true
      if (res.code === 503) {
        this.$confirm(res.msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          parmas.confirm = 1
          let res1 = await apiAssessManagerChange(parmas)
          this.$loadingEnd()
          if (res1.code !== 200) return this.$message.error(res1.msg)
          history.go(-1)
        }).catch(() => {
        })
      } else if (res.code !== 200) {
        return this.$message.error(res.msg)
      } else {
        history.go(-1)
      }
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.addPerson{
  &-content{
    margin: 30px 0 10px 0;
    padding: 28px;
    min-height: 400px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
