<template>
  <div class="container">
    <el-form ref="form"
             :model="form"
             :rules="rules"
             class="y-factor-interval-evaluation"
             label-width="80px"
             label-position="right">

      <template v-for="(it,index) in form.config">
        <el-row>
          <el-col :span="20">
            <el-row :gutter="14" class="y-factor-interval-evaluation-item">
              <!-- <el-col :span="10" class="y-factor-left y-input-range">
                <el-form-item class="y-form-inline"
                              :label="(index+1)+'、'"
                              label-width="50px"
                              :prop="'config.'+index+'.start'"
                              :rules="rules.start">
                  <el-input v-model="it.start" size="mini" placeholder="请输入最小值"  @input="$refs.form.validateField('config.'+index+'.end')"/>
                </el-form-item>
                ~
                <el-form-item class="y-form-inline"
                              label-width="0"
                              :prop="'config.'+index+'.end'"
                              :rules="rules.end">
                  <el-input v-model="it.end" size="mini" placeholder="请输入最大值" @input="$refs.form.validateField('config.'+index+'.start')"/>
                </el-form-item>
              </el-col> -->
              <div class="y-factor-left y-input-range y-factor-indexBox">
                <el-form-item class="y-form-inline"
                              :label="(index+1)+'、'"
                              label-width="50px"
                              :rules="rules.start">
                </el-form-item>
              </div>
              <el-col :xs="8" :sm="6" :md="4" class="y-factor-left y-input-range">
                <el-form-item class="y-form-inline"
                              label-width="0px"
                              :prop="'config.'+index+'.start'"

                              :rules="rules.start">
                  <el-input v-model="it.start" size="mini" placeholder="请输入最小值"  @input="$refs.form.validateField('config.'+index+'.end')"/>
                </el-form-item>
              </el-col>
              <el-col :span="1" class="y-factor-left y-input-range" style="text-align:center;line-height: 38px;">
                  ~
              </el-col>
              <el-col :xs="8" :sm="6" :md="4" class="y-factor-left y-input-range">
                <el-form-item class="y-form-inline"
                              label-width="0"
                              :prop="'config.'+index+'.end'"
                              :rules="rules.end">
                  <el-input v-model="it.end" size="mini" placeholder="请输入最大值" @input="$refs.form.validateField('config.'+index+'.start')"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="13" class="y-factor-right">
                <el-form-item label="测评结果"
                              :prop="'config.'+index+'.conclusion'"
                              :rules="rules.conclusion">
                  <el-input v-model="it.conclusion" type="textarea" size="mini" placeholder="请输入测评结果"/>
                </el-form-item>

                <el-form-item label="测评建议"
                              :prop="'config.'+index+'.suggest'"
                              :rules="rules.suggest">
                  <el-input v-model="it.suggest" type="textarea" size="mini" placeholder="请输入测评建议"/>
                </el-form-item>

                <el-form-item label="症状表现"
                              :prop="'config.'+index+'.symptom'"
                              :rules="rules.symptom">
                  <el-input v-model="it.symptom" type="textarea" size="mini" placeholder="请输入症状表现"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="2" :offset="0" class="iconBox">
            <i class="el-icon-error deleteIcon" @click="del(index)"
               v-if="form.config.length>1&&buts.includes('isDel')"></i>
            <i class="el-icon-circle-plus-outline addIcon" @click="add"
               v-if="form.config.length-1==index&&buts.includes('isAdd')"></i>
          </el-col>
        </el-row>
      </template>

    </el-form>
  </div>
</template>

<script>
import { validateCurrentComparedMax, validateCurrentComparedMin } from '../../../static/js/tool/xy.tool.valid'
import JsonPath from 'object-path'
import tool from '../../tool'

export default {
  name: 'scoreIntervalEvaluation',
  props: {
    data: [Array, Object],
  },
  watch: {
    data: {
      handler (obj) {
        if (obj == undefined || obj.length == 0) {
          this.form.config = [{
            start: '',
            end: '',
            conclusion: '',
            suggest: '',
          }]
        } else {
          this.form.config = obj
        }
        this.$emit('update:data', this.form.config)
      },
      deep: true,
      immediate: true,
    }
  },
  data () {
    return {
      buts: ['isAdd', 'isDel'],
      rules: {
        start: [
          { required: true, message: '最小值不能为空', trigger: 'blur' },
          { required: true, message: '最小值只能输入数字', trigger: 'blur', pattern: /^-?\d+(\.\d{1,2})*$/ },
          {
            validator: (rule, value, callback) => {
              let xpath = rule.field.replace('start', 'end')
              validateCurrentComparedMin(rule, value, callback,
                  JsonPath.get(this.form, xpath),
                  this.$refs['form'], xpath
              )
            }, trigger: 'blur'
          }
        ],
        end: [
          { required: true, message: '最大值不能为空', trigger: 'blur' },
          { required: true, message: '最大值只能输入数字', trigger: 'blur', pattern: /^-?\d+(\.\d{1,2})*$/ },
          {
            validator: (rule, value, callback) => {
              let xpath = rule.field.replace('end', 'start')
              validateCurrentComparedMax(rule, value, callback,
                  JsonPath.get(this.form, xpath),
                  this.$refs['form'], xpath)
            }, trigger: 'blur'
          }
        ],
        conclusion: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        suggest: [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
        symptom: [
          { required: false, message: '不能为空', trigger: 'blur' }
        ],
      },
      form: {
        config: [{ start: '', end: '', conclusion: '', suggest: '', }]
      }
    }
  },
  methods: {
    add () {
      this.form.config.push({
        start: '',
        end: '',
        conclusion: '',
        suggest: '',
      })
    },
    del (index) {
      this.form.config.splice(index, 1)
    },
    form_validate () {
      let valid_bool = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 验证分值相交范围值
          let total_range_list_all = []
          this.form.config.forEach((item, index) => {
            let current_rangeNumber = tool.range.rangeNumer(item.start, item.end, true)
            let intersectNumber = tool.array.intersectNumber(total_range_list_all, current_rangeNumber)
            if (intersectNumber.length > 0) {
              valid_bool = false
              let mess = `请检查因子${index + 1}配置中的因子区间与其它出现[${intersectNumber[0]}~${intersectNumber[intersectNumber.length - 1]}]的交集分`
              this.$message.error(mess)
              throw new Error(mess)
            }
            total_range_list_all = total_range_list_all.concat(current_rangeNumber)
          })
        } else {
          valid_bool = false
        }
      })
      // 移动至错误form位置
      if (!valid_bool) {
        this.$refs['form'].$el.scrollIntoView({
          //滚动到指定节点
          block: 'center', //值有start,center,end，nearest，当前显示在视图区域中间
          behavior: 'smooth', //值有auto、instant,smooth，缓动动画（当前是慢速的）
        })
        throw new Error(`请检查区间配置`)
      }
      console.log('form_validate：------', valid_bool)
      return valid_bool
    }
  }
}
</script>

<style scoped>
.container {
  /* max-width: 1300px; */
  /* min-width: 1115px; */
}

.y-factor-interval-evaluation {
  padding: 10px;
}

.y-factor-interval-evaluation-item {
  /* min-width: 800px; */
  /* width: 100%; */
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #e7f3fd;
  min-height: 143px;
}


.y-form-inline {
  width: 100%;
  display: inline-block;
}

.y-factor-left, .y-factor-right {
  vertical-align: top;
  /*margin-top: 20px;*/
  display: inline-block;
}

.y-factor-left {
  /* text-align: right; */
  /*min-width: 320px;*/
  top: 10px;
}
.y-factor-indexBox{
  float: left;
}
.y-factor-right {
  /*min-width: 460px;*/
}

.y-input-range {
  display: inline-block;
}

.y-input-range .el-input {
  /* width: 120px; */
}

.iconBox {
  padding-left: 20px;
  min-width: 36px;
  display: inline;
  z-index: 1111;
}

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

.addIcon {
  font-size: 24px;
  margin: 6px;
  color: #1989FA;
}


/* 按钮 */
/*.y-btn-puls {*/
/*  margin: 0px 5px;*/
/*  padding: 2px;*/
/*  border-radius: 1.9rem;*/
/*  border: 1px #3a8ee6 solid;*/
/*  background-color: white;*/
/*}*/

/*.y-btn-del {*/
/*  margin: 0px 5px;*/
/*  padding: 2px;*/
/*  border-radius: 1.9rem;*/
/*  border: 1px #d70000 solid;*/
/*  background-color: white;*/
/*}*/

/*.y-btn-puls i {*/
/*  color: #3a8ee6;*/
/*  font-size: 18px;*/
/*}*/

/*.y-btn-del i {*/
/*  color: #d70000;*/
/*  font-size: 18px;*/
/*}*/
</style>
