<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-user" @keyup.enter="getData()">
        <el-input v-model="memberCode" size="small" style="width:400px;">
          <template slot="prepend">Member Code</template>
        </el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getData()">Confirm<!-- 确定 --></el-button>
      </div>

      <div style="margin-top: 25px;" v-show="show">
        <el-row>
          <el-col :span="16">
            <div class="grid-content bg-purple" style="width: 100%">
              <el-card class="box-card" shadow="hover">
                <el-form :model="perfForm" status-icon ref="perfForm" label-width="250px" width="100%" class="demo-ruleForm">
                  <el-form-item label="Member Code" prop="USER_NAME" v-show="false">
                    <el-input type="text" size="small" v-model="perfForm.USER_ID"></el-input>
                    <el-input type="text" size="small" v-model="perfForm.USER_NAME"></el-input>
                  </el-form-item>

                  <el-divider><span style="font-weight: bold;">L. Market Balance Performance</span></el-divider>
                  <el-form-item label="Member Code" prop="SURPLUS_1L_USER_NAME"><!--会员编号-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_1L_USER_NAME" autocomplete="off" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="Balance Performance" prop="SURPLUS_1L"><!--综合结余业绩-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_1L" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="Entry Balance Performance" prop="SURPLUS_1L_ZC"><!--首单结余业绩-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_1L_ZC" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="Reconditioning Balance Performance" prop="SURPLUS_1L_FX"><!--复消结余业绩-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_1L_FX" autocomplete="off"></el-input>
                  </el-form-item>

                  <el-divider><span style="font-weight: bold;">R. Market Balance Performance</span></el-divider>
                  <el-form-item label="Member Code" prop="SURPLUS_2L_USER_NAME"><!--会员编号-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_2L_USER_NAME" autocomplete="off" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="Balance Performance" prop="SURPLUS_2L"><!--综合结余业绩-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_2L" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="Entry Balance Performance" prop="SURPLUS_2L_ZC">
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_2L_ZC" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="Reconditioning Balance Performance" prop="SURPLUS_2L_FX"><!--复消结余业绩-->
                    <el-input type="text" size="small" v-model="perfForm.SURPLUS_2L_FX" autocomplete="off"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" size="small" @click="handlePerfAdjustment('perfForm')">Save</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import network from '@/utils/network'

export default {
  name: 'bonus-perf-adjustment',
  data() {
    return {
      loading: false,
      memberCode: '',
      show: false,
      perfForm: {
        USER_ID: '',
        USER_NAME: '',
        SURPLUS_1L: '',
        SURPLUS_1L_ZC: '',
        SURPLUS_1L_FX: '',
        SURPLUS_21L_USER_NAME: '',
        SURPLUS_2L: '',
        SURPLUS_2L_ZC: '',
        SURPLUS_2L_FX: '',
        SURPLUS_2L_USER_NAME: '',
      },
    }
  },
  methods: {
    // 查询安置网的下级会员和业绩
    getData() {
      if (!this.memberCode.length) {
        this.$message({
          message: 'Please enter member code',
          type: 'info'
        });
        return false;
      }

      // 清除上一次的填充结果
      this.$refs['perfForm'].resetFields();
      this.show = false;

      return network.getData(`bonus/perf-adjustment`, { memberCode : this.memberCode }).then(response => {
        this.perfForm = response.allData;
        this.show = true;
        this.loading = false;
      }).catch(error => {
        this.$message({
          message: error,
          type: 'warning'
        });

        this.loading = false;
      })
    },
    // 修改会员业绩
    handlePerfAdjustment(formName) {
      this.$confirm('Confirm and revise member performance?', 'Hits', { // 确认修改会员业绩
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        return network.postData(`bonus/perf-adjustment`, this.perfForm).then(response => {
          this.$message({
            message: response,
            type: 'success'
          });
          this.loading = false;

          // 刷新数据
          this.getData();
        }).catch(error => {
          this.$message({
            message: error,
            type: 'warning'
          });
          this.loading = false;
        });
      })
    },
  }
}
</script>

<style>
  .filter-user { font-size: 14px; margin-bottom: 20px; }
  .filter-user:after { content: ''; display: table;  clear: both; }
</style>
