<template>
  <div class="changmo-setting-content">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" label-position='right' class="demo-dynamic">
      <div class="setting-top">
        <el-row :gutter="20" style="padding-right: 40px">
          <el-col :span="8">
            <el-form-item label="总分常模" prop="totalScore">
              <el-radio-group
                  v-model="dynamicValidateForm.totalScore"
                  size="mini"
                  @change='totalScoreChange()'
              >
                <el-radio :label="'1'" :disabled="totalScoreType==='2'">有</el-radio>
                <el-radio :label="'2'">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dynamicValidateForm.totalScore === '1'">
            <el-form-item
                label="常模"
                prop="totalNorm"
                :rules="{
                required: true, message: '常模不能为空', trigger: 'blur'
              }"
            >
              <el-input v-model="dynamicValidateForm.totalNorm"></el-input>
            </el-form-item>
          </el-col>
          <div class="naxtBox">
            <el-button v-show="showPreviousBtn" type="primary" size="mini" @click="previousTab()">上一步</el-button>
            <el-button type="primary" size="mini" @click="submitForm('dynamicValidateForm')">下一步</el-button>
          </div>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="因子常模" prop="rulesType"
            >
              <el-radio-group
                  v-model="dynamicValidateForm.rulesType"
                  size="mini" @change='rulesTypeChange()'
              >
                <el-radio :label="'1'" :disabled='factorList.length === 0'>有</el-radio>
                <el-radio :label="'2'">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
      </div>
      <div class="reliabilityBox" v-if="dynamicValidateForm.rulesType === '1'">
        <el-row class="reliabilityItem" :gutter="20" v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
          <el-col :span="8">
            <el-form-item
                :label="'因子'"
            >
              <el-select v-model="domain.uid" disabled placeholder="请选择条件">
                <el-option
                    v-for="item in factorList"
                    :key="item.uid"
                    :label="item.title"
                    :value="item.uid">
                </el-option>
              </el-select>
              <!-- <el-input v-model="domain.factor" :disabled='true'></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
                label="常模"
                :prop="'domains.' + index + '.norm'"
                :rules="{
                required: true, message: '常模不能为空', trigger: 'blur'
              }"
            >
              <el-input v-model="domain.norm"></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="4">-->
          <!--            <i class="el-icon-error deleteIcon" @click.prevent="removeDomain(domain)"></i>-->
          <!--          </el-col>-->
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import config from './config'

export default {
  name: 'changmo',
  props: {
    factorList: [Array, Object],
  },
  data () {
    return {
      configName: 'changmo', // 配置名称
      showPreviousBtn: false,
      totalScoreType: '', // ‘1’有总分，‘2’无

      // config,
      dynamicValidateForm: {
        rulesType: '2',
        totalScore: '2',
        totalNorm: '',
        domains: [
          // {
          //   factor: '',
          //   uid: '',
          //   norm: '',
          // },
          // {
          //   factor: '',
          //   uid: '',
          //   norm: '',
          // },
        ],
      },
      factorListAll: [],

    }
  },
  methods: {
    loadData () {
      this.totalType()
      console.log('加载-总分配置,config', this.factorList)
      if (config.localGetConclusionList('updateData', this.configName)) {
        this.dynamicValidateForm = config.localGetConclusionList('updateData', this.configName)
      } else if (config.localGetConclusionList('requestData', this.configName)) {
        this.dynamicValidateForm = config.localGetConclusionList('requestData', this.configName)
      } else {
        this.dynamicValidateForm = {
          rulesType: '2',
          totalScore: '2',
          totalNorm: '',
          domains: []
        }
      }

      this.factorListContrast()
      this.showPreviousBtn = config.permissionIndex(this.configName)
    },
    //因子对比
    factorListContrast () {
      // 无总分
      if (this.totalScoreType === '2') {
        this.dynamicValidateForm.totalScore = '2'
        this.dynamicValidateForm.totalNorm = ''
      }
      // 无因子
      if (this.factorList.length === 0) {
        this.dynamicValidateForm.rulesType = '2'
        this.dynamicValidateForm.domains = []
      }

      // 旧数据兼容，添加保存uid
      for (let i = this.dynamicValidateForm.domains.length - 1; i >= 0; i--) {
        if (!this.dynamicValidateForm.domains[i].uid) {
          // console.log('无uid',this.dynamicValidateForm.domains[i].uid,i)
          let index = this.factorList.findIndex(item => {
            return item.code === this.dynamicValidateForm.domains[i].factor
          })
          if (index != -1) {
            this.dynamicValidateForm.domains[i].uid = this.factorList[index].uid
          }
        } else {
          // 有uid，更新code
          let index = this.factorList.findIndex(item => {
            return item.uid === this.dynamicValidateForm.domains[i].uid
          })
          if (index != -1) {
            this.dynamicValidateForm.domains[i].factor = this.factorList[index].code
          }
        }
      }
      // 因子对比
      if (this.dynamicValidateForm.rulesType !== '2') {
        for (let i = this.dynamicValidateForm.domains.length - 1; i >= 0; i--) {
          let index = this.factorList.findIndex(item => {
            return item.uid === this.dynamicValidateForm.domains[i].uid
          })
          // console.log('this.dynamicValidateForm.domains[i].uid',this.dynamicValidateForm.domains[i].uid,index)
          if (index === -1) {
            // console.log('删除因子',i,this.factorList[i].code)
            this.dynamicValidateForm.domains.splice(i, 1)
          }
        }
        for (let i = 0; i < this.factorList.length; i++) {
          let index = this.dynamicValidateForm.domains.findIndex(item => {
            return item.uid === this.factorList[i].uid
          })
          if (index === -1) {
            let item = {
              factor: this.factorList[i].code,
              uid: this.factorList[i].uid,
              norm: '',
            }
            this.dynamicValidateForm.domains.push(item)
          }
        }
      }
    },
    // 总分
    totalType () {
      this.totalScoreType = config.localGetConclusionList('updateData', 'total').totalType
    },
    //配置因子常模
    rulesTypeChange () {
      // console.log('rulesType',this.dynamicValidateForm.rulesType)
      this.dynamicValidateForm.domains = []
      if (this.dynamicValidateForm.rulesType === '1') {
        this.addDomain()
      }
    },
    //配置总分常模
    totalScoreChange () {
      // console.log('rulesType',this.dynamicValidateForm.rulesType)
      if (this.dynamicValidateForm.totalScore === '2') {
        this.dynamicValidateForm.totalNorm = ''
      }
    },
    // 上一步
    previousTab () {
      this.$emit('PreviousTab')
    },
    // 提交表单验证
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          config.localSetConclusionList('updateData', this.configName, this.dynamicValidateForm)
          this.$emit('NextTab')
          // 保存接口
        } else {
          this.$message.error('请检查常模配置')
          // console.log('error submit!!');
          return false
        }
      })
    },
    // 清空
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 删除
    removeDomain (item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    // 添加
    addDomain () {
      // console.log('this.factorList',this.factorList)
      for (let i = 0; i < this.factorList.length; i++) {
        let item = {
          factor: this.factorList[i].code,
          uid: this.factorList[i].uid,
          norm: '',
          // key: this.factorList[i].code
        }
        this.dynamicValidateForm.domains.push(item)
      }
    }
  }
}
</script>

<style scoped>
.changmo-setting-content {
  padding: 0 20px;
  padding-top: 70px;
  position: relative;
}

.setting-top {
  /* width: calc(100% - 40px) !important; */
  padding-top: 20px;
}

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

.deleteIcon {
  font-size: 24px;
  margin: 6px;
  color: #FF0000;
}

.reliabilityBox {
  /* height: 600px; */
  /* overflow: auto; */
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .el-input--suffix {
  width: 100% !important;
}

.reliabilityItem {
}
</style>
