<!--  -->
<template>
    <div class="eidt">
         <div class="eidt-header">
            <div @click="handleChangle(1)" :class="{active:active===1}" class="a commonFont" ><span class="eidt-header-circle">1</span>基础设置</div>
            <div @click="handleChangle(2)"  :class="{active:active===2}" class="a commonFont"><span class="eidt-header-circle">2</span>模板设计</div>
            <div @click="handleChangle(3)" :class="{active:active===3}" class="a commonFont"><span class="eidt-header-circle">3</span>流程设计</div>
        </div>
        <div class="eidt-right">
           <el-button type="primary" @click="handSaveBasisc">保 存</el-button>
        </div>
        <div class="eidt-content boderAndRadius">
          <basis :basisForm.sync='basisForm'  v-show="active===1"/>
          <template-set v-show="active===2"/>
          <process v-show="active===3"/>
        </div>
    </div>
</template>

<script>
import basis from './components/basis'
import process from './components/process'
import templateSet from './components/templateSet'
import {saveBaseSet} from '@/api/workbench'

export default {
  data () {
    return {
      active: 1,
      // 基础
      basisForm: {
        id: 8,
        counts: '', // 参与考核人数
        depIds: '', // 参与部门id，逗号隔开
        managerIds: '395', // 绩效管理员ID，system_user,id，逗号隔开
        outIds: '', // 排除人员ids，逗号隔开
        staffIds: '', // 参与考核员工staff_id，逗号隔开.
        name: ''
      }
    }
  },
  components: {
    basis,
    process,
    templateSet
  },
  computed: {},
  beforeMount () {},
  mounted () {

  },
  methods: {
    handleChangle (item) {
      this.active = item
    },
    async handSaveBasisc () {
      console.log('this.basisForm: ', this.basisForm)
      try {
        let res = await saveBaseSet(this.basisForm)
        this.basisForm = res
        console.log('res: ', res)
      } catch (error) {
        this.$message.error(error.msg)
      }
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.eidt{
  position: relative;
  &-right{
    position: absolute;
     z-index: 50;
     top: -(@headerHeight+30px);
    right: 0;
    height: @headerHeight;
    .center()
  }
  &-content{
    height: 600px;
    background: #fff;
    padding: 40px 28px;
    overflow: auto;
  }
  &-header{
    position: absolute;
    z-index: 50;
    width: 420px;
    height: @headerHeight;
    top: -(@headerHeight+30px);
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    >div{
      flex:1;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing:1px
    }
    .active{
      background: @fontBlue;
      color: #fff;
    }
    &-circle{
      margin: 0 4px;
      display: inline-block;
      border: 1px solid #eeeeee;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }
  }
}
</style>
