<template>
  <div>
    <el-form :model="form" label-width="120px" :inline="false" label-position="right">
      <div class="setting-top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="总分" prop="type" label-width="120px">
              <el-radio-group v-model="form.totalType" size="mini">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
              </el-radio-group>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="naxtBox">
              <el-button v-show="showPreviousBtn" type="primary" size="mini" @click="previousTab()">上一步</el-button>
              <el-button class="" type="primary" size="mini" @click="save">下一步</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div class="setting-content" v-show="form.totalType==1">
      <total-setting
          ref="ts"
          :data.sync="form"
          :factorList="factorList"
          class="setting-content-item">
      </total-setting>
    </div>

  </div>
</template>

<script>
import {
  Form, FormItem, Radio, RadioGroup
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import TotalSetting from './total-setting'
import config from './config'

export default {
  name: 'total',
  components: {
    TotalSetting, Form, FormItem, Radio, RadioGroup,
  },
  props: {
    factorList: [Array, Object],
  },
  data () {
    return {
      rules: {},

      // 通用配置结构
      configName: 'total', // 配置名称
      showPreviousBtn: false,

      form: {
        totalType: '1', // 总分开关
      },
    }
  },
  watch: {
    'form.totalType': {
      handler (type) {
        if (typeof type == 'number') {
          this.form.totalType = String(type)
        }
      }
    }
  },
  methods: {
    loadData () {
      // this.configName = 'total'
      if (config.localGetConclusionList('updateData', this.configName)) {
        this.form = config.localGetConclusionList('updateData', this.configName)
      } else if (config.localGetConclusionList('requestData', this.configName)) {
        this.form = config.localGetConclusionList('requestData', this.configName)
      } else {
        this.form = {
          totalType: '2'
        }
      }
      this.showPreviousBtn = config.permissionIndex(this.configName)

      console.log('加载-总分配置', this.form)
      this.$refs['ts'].init(this.form)
    },
    // 上一步
    previousTab () {
      this.$emit('PreviousTab')
    },
    save () {
      let is_bool = true
      if (this.form.totalType == 1) {
        is_bool = this.$refs['ts'].form_validate()
      }
      if (is_bool) {
        console.log('总分配置保存：', JSON.parse(JSON.stringify(this.form)))
        config.localSetConclusionList('updateData', this.configName, this.form)
        this.$emit('NextTab')
        // 保存接口
        // this.$message.success('保存成功')
      }
    }
  }
}
</script>

<style scoped>
.el-form {
  background: #f0f0f0;
  margin: 0;
}

.setting-top .el-form-item {
  /*margin: 10px;*/
}

.setting-top .el-form-item .button {
  position: absolute;
  right: 50px;
  bottom: 5px;
}

.setting-top {
  background: #FFFFFF;
  padding-top: 20px;
}

.naxtBox {
  position: absolute;
  right: 50px;
}

.setting-content {
  margin: 10px 10px 0px 10px;
  background: #FFFFFF;
  /* height: 600px; */
  /* overflow-y: scroll; */
}

.setting-content-item {
  margin-bottom: 10px;
  background-color: #f7f9fd;
}
</style>
