<template>
  <div>
    <el-button  size="small" type="text" @click="onShow(dialogTableVisible = true)">编 辑</el-button>
    <el-dialog title="编辑人员目标" append-to-body :visible.sync="dialogTableVisible" width="90%" top="20px">
      <el-row :gutter="40">
        <el-form :model="form" :disabled="date.year > year" label-position="left" label-width="80px" size="small">
          <el-col :span="6">
            <el-form-item label="年度">
              <el-input v-model="year" disabled autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="基本目标">
              <el-input v-model="form['y1l']" disabled autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挑战目标">
              <el-input v-model="form['y1h']" disabled autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位">
              <p>万元</p>
            </el-form-item>
          </el-col>

          <div v-for="(i,index) in 4" :key="index">
            <el-col :span="24"><p class="normal-margin normal-title">第{{index+1===1?'一':index+1===2?'二':index+1===3?'三':'四'}}季度</p></el-col>
            <el-col :span="8">
              <el-form-item label="基本目标">
                <el-input v-model="form[`s${index+1}l`]" disabled autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="挑战目标">
                <el-input v-model="form[`s${index+1}l`]" disabled autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24"></el-col>
            <el-col :span="8" class="normal-margin">{{index+1===1?'一月':index+1===2?'四月':index+1===3?'七月':'十月'}}:</el-col>
            <el-col :span="8" class="normal-margin">{{index+1===1?'二月':index+1===2?'五月':index+1===3?'八月':'十一月'}}:</el-col>
            <el-col :span="8" class="normal-margin">{{index+1===1?'三月':index+1===2?'六月':index+1===3?'九月':'十二月'}}:</el-col>
            <el-col :span="8">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="基本目标">
                    <el-input type="number" v-model="form[`m${1+index * 3}l`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="挑战目标">
                    <el-input type="number" v-model="form[`m${1+index * 3}h`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="基本目标">
                    <el-input type="number" v-model="form[`m${2+index * 3}l`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="挑战目标">
                    <el-input type="number" v-model="form[`m${2+index * 3}h`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="基本目标">
                    <el-input type="number" v-model="form[`m${3+index * 3}l`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="挑战目标">
                    <el-input type="number" v-model="form[`m${3+index * 3}h`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['data','year'],
  data () {
    return {
      dialogTableVisible:false,
      form:{
        name:'123'
      },
      date:{
        year:'',
        month:''
      }
    }
  },
  methods:{
    onShow () {
      this.form = Object.assign({},this.form,this.data)
      this.form.sa_salestargetbillid = this.$route.query.id
      let date = new Date()
      this.date = {
        year:date.getFullYear(),
        month:date.getMonth() + 1
      }
    },
    async onSubmit () {
      for (var i = 0 ; i< 4 ; i++) {
        this.form[`s${i + 1}l`] = this.form[`m${1 + i*3}l`] + this.form[`m${2 + i*3}l`] + this.form[`m${3 + i*3}l`]
        this.form[`s${i + 1}h`] = this.form[`m${1 + i*3}h`] + this.form[`m${2 + i*3}h`] + this.form[`m${3 + i*3}h`]
      }
      this.form.y1l = this.form.s1l + this.form.s2l + this.form.s3l + this.form.s4l
      this.form.y1h = this.form.s1h + this.form.s2h + this.form.s3h + this.form.s4h
      const res = await this.$api.requested({
        "id": 20220902162902,
        "content": this.form
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
        this.dialogTableVisible = false
      })
    }
  }
}

</script>
<style>
</style>