<template>
  <div class="dashboard-container">
    <el-form :model="peopleform" ref="peopleform" :rules="rules">
      <el-row>
        <el-col :span="8">
          <div>
            <el-form-item label="权重代码" class="fourLabel" label-width="80px">
              <el-input placeholder="自动生成" :disabled="true" v-model="peopleform.weightCode" clearable>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-form-item label="权重名称" prop="weightName" class="fourLabel" label-width="80px">
              <el-input v-model="peopleform.weightName" clearable>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-form-item label="权重类别" class="fourLabel" label-width="80px" prop="weightType">
              <el-select class="wdh" placeholder="请选择" v-model="peopleform.weightType" clearable @change="chooseType">
                <el-option v-for="item in powerType" :key="item.value" :label="item.priceTypeName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" width="180">
          <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
        </el-table-column>
        <el-table-column prop="indName" label="指标名称" width="180">
        </el-table-column>
        <el-table-column prop="description" label="备注" width="180">
        </el-table-column>
        <el-table-column label="权重值">
          <template slot-scope="scope">
            <el-input v-model='scope.row.weightVal'></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:20px;">
        <el-col :span="8">
          <div>
            <el-form-item label="维护人员" class="fourLabel" label-width="80px">
              <el-input placeholder="自动生成" :disabled="true" v-model="peopleform.createBy" clearable>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-form-item label="维护日期" class="fourLabel" label-width="80px">
              <el-date-picker placeholder="自动生成" :disabled="true" v-model="peopleform.date" type="date">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm('peopleform')" :disabled="isShow">
            <i class="iconfont">&#xe681;</i><span>增加</span>
          </el-button>
          <el-button type="primary" @click="resetForm('peopleform')">
            <i class="iconfont">
              &#xe688;
            </i>
            <span>取消</span>
          </el-button>
        </el-form-item>
      </el-row>

    </el-form>
  </div>
</template>
<script>
import { priceWeghtTypes, updateWeight, getWeightById, weightSave, getWVTypeById, getTableW } from '@/api/indexManage/index'



export default {
  data() {
    return {
      powerType: [],
      status: [{
        dictName: '禁用',
        vaule: '1'
      }, {
        dictName: '应用',
        vaule: '1'
      }],
      isShow: false,
      peopleform: {
        weightValueList: []
      },
      rules: {
        weightName: [
          { required: true, message: '请输入权重名称', trigger: 'blur' },
        ],
        weightType: [
          { required: true, message: '请选择权重类别', trigger: 'change' }
        ]
      },
      tableData: []
    };
  },
  created() {
    if (this.$route.query.state === 'update') {
      getWeightById(this.$route.query.id).then(res => {
        this.peopleform = res.data
        res.data.weightValueList.map(item => {
          this.tableData.push({
            description: item.description,
            indName: item.indName,
            weightCode: item.weightCode,
            weightVal: item.weightVal
          })
        })
      })
      getTableW(this.$route.query.id).then(res => {

      })
    }

    priceWeghtTypes().then(res => {
      this.powerType = res.data
    })
  },
  methods: {
    chooseType(val) {
      this.powerType.map(item => {
        if (item.id === val) {
          console.log(val)
          this.peopleform.weightTypeName = item.priceTypeName
        }
      })
      this.tableData = []
      getWVTypeById(val).then(res => {
        res.data.map(item => {
          this.tableData.push({
            indName: item.indName
          })
        })
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.peopleform.weightValueList = []
          this.tableData.map(item => {
            this.peopleform.weightValueList.push({
              indName: item.indName,
              weightVal: Number(item.weightVal)
            })
          })
          if (this.$route.query.state === 'update') {

            updateWeight(this.peopleform).then(res => {

              this.$message({
                type: "success",
                message: '修改成功'
              })
            })
          } else {


            weightSave(this.peopleform).then(res => {
              if (res.infoCode === 200) {
                this.$message({
                  type: "success",
                  message: '保存成功'
                })
              } else {
                this.$message({
                  type: "error",
                  message: res.data
                })
                this.peopleform = {
                  weightValueList: []
                }
              }
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.$router.go(-1)
    }
  }
}
</script>

