<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="100px" style="width:500px;">
        <el-form-item label="级别名称">
          <el-input v-model="form.levelName" :disabled="true"></el-input>
        </el-form-item>
        <div style="display: none;">
        <el-form-item label="区数量">
          <el-input v-model="form.locationNum"></el-input>
        </el-form-item>
        <el-form-item label="单区业绩">
          <el-input v-model="form.locationPerf"></el-input>
        </el-form-item>
        <el-form-item label="新增业绩">
          <el-input v-model="form.newPerf"></el-input>
        </el-form-item>
        <el-form-item label="区域内聘级">
          <el-select v-model="form.minEmployLevel" placeholder="请选择">
            <el-option v-for="item in allEmployLevel" :key="item.ID" :label="item.LEVEL_NAME" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="等级排序 ">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        </div>
        <el-form-item label="其他部门PV" v-show="otherPerfShow">
          <el-input v-model="form.otherDepartPerf"></el-input>
        </el-form-item>
        <el-form-item label="图标类型 ">
        <el-radio-group v-model="form.iconType">
          <el-radio :label="0">无</el-radio>
          <el-radio :label="1">心❤️</el-radio>
          <el-radio :label="2">钻💎</el-radio>
          <el-radio :label="3">王冠👑</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="图标个数 ">
          <el-slider
              v-model="form.iconNum"
              :max="maxIconNum"
              show-stops
              show-input
          >
          </el-slider>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'

export default {
  name: 'emp-level-edit',
  created () {

  },
  mounted () {
    if (this.$route.name === 'config_emp-level-edit') {
      network.getData('config/emp-level-edit/' + this.$route.params.id).then(response => {
        this.form.levelName = response.LEVEL_NAME
        this.form.locationNum = response.LOCATION_NUM
        this.form.locationPerf = response.LOCATION_PERF
        this.form.newPerf = response.NEW_PERF
        this.form.minEmployLevel = response.MIN_EMPLOY_LEVEL
        this.form.sort = response.SORT
        this.form.iconType = parseInt(response.ICON_TYPE)
        this.form.iconNum = parseInt(response.ICON_NUM)
        this.form.otherDepartPerf = parseFloat(response.OTHER_DEPART_PERF)
        this.allEmployLevel = response.allLevel
        this.loading = false
        if ( response.SORT === '1' ) {
          this.otherPerfShow = true;
        }
      })
    } else {
      network.getData('config/emp-level-add').then(response => {
        this.allEmployLevel = response
        this.loading = false
      })
    }
  },
  data () {
    return {
      form: {
        levelName: '',
        locationNum: 0,
        locationPerf: 0,
        newPerf: 0,
        minEmployLevel: '',
        sort: 1,
        iconType: 0,
        iconNum: 0,
        otherDepartPerf:0,
      },
      allEmployLevel: [],
      loading: true,
      submitButtonStat: false,
      maxIconNum:10,
      otherPerfShow: false,
    }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let path = 'config/emp-level-add'
      if (this.$route.name === 'config_emp-level-edit') {
        path = 'config/emp-level-edit/' + this.$route.params.id
      }
      network.postData(path, this.form).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.$router.go(-1)
        this.submitButtonStat = false
      }).catch(response => {
        this.submitButtonStat = false
      })
    }
  }
}
</script>

<style scoped>

</style>
