<template>
  <el-form class="y-factor-configuration"
           ref="setting"
           :model="form"
           label-width="120px"
           :inline="false"
           :rules="rules"
           label-position="right">
    <slot></slot>
    <el-row>
      <el-col :span="8">
        <el-form-item label="计分规则" class="y-input" prop="totalRules">
          <el-radio-group size="mini" v-model="form.totalRules">
            <el-radio label="1">顺题总分</el-radio>
            <el-radio label="2" :disabled="factorList.length==0">因子总分</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="选择因子" v-if="form.totalRules==2" prop="totalTypes">
      <el-checkbox-group v-model="form.totalTypes">
        <el-checkbox v-for="it in factorList" :label="it.title" :key="it.code">
          <el-tooltip class="item" effect="dark" :content="it.code" placement="top">
            <span :style="{color: it.standardScoreType==='2'?'rgba(139,78,218,0.82)':'#32a7ff'}">{{ it.title }}</span>
          </el-tooltip>
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="因子分来源" prop="factorCallType" v-if="form.totalRules==2">
      <el-radio-group v-model="form.factorCallType">
        <el-radio label="ORIGINAL">原始分</el-radio>
        <el-radio label="STANDARD" :disabled="disabledStandard">标准分</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-row>
      <el-col :span="12">
        <el-form-item label="原始分" prop="ql" class="y-max-input">
          <el-input v-model="form.ql" placeholder="请输入总分计算公式" clearable>
            <el-select class="line-ql-select" v-model="form.qlSuffix" slot="append">
              <el-option label="小数" value="DOUBLE"></el-option>
              <el-option label="整数" value="INTEGER"></el-option>
              <el-option label="字符串" value="STRING" disabled></el-option>
              <el-option label="百分比" value="PERCENTAGE"></el-option>
            </el-select>
          </el-input>
          <a href="javascript:;" style="margin-left: 10px;color: #6268f6;" @click="form.ql='总分'">使用默认</a>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="总标准分计算" class="y-input">
          <el-radio-group v-model="form.totalStandardType" @change="standardTypeClearTotalIntervalCallType">
            <el-radio label="1">有</el-radio>
            <el-radio label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="20px" class="y-input" v-if="form.totalStandardType == 1"
                      prop="totalStandardScoreQl">
          <el-input v-model="form.totalStandardScoreQl" placeholder="请输入总标准分计算公式" clearable>
            <el-select class="line-ql-select" v-model="form.totalStandardSuffix" slot="append">
              <el-option label="小数" value="DOUBLE"></el-option>
              <el-option label="整数" value="INTEGER"></el-option>
              <el-option label="字符串" value="STRING" disabled></el-option>
              <el-option label="百分比" value="PERCENTAGE"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="总均分计算" class="y-input">
          <el-radio-group v-model="form.totalAverageScoreType" @change="averageScoreTypeClearTotalIntervalCallType">
            <el-radio label="1">有</el-radio>
            <el-radio label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="20px" class="y-input" v-if="form.totalAverageScoreType == 1"
                      prop="totalAverageScoreQl">
          <el-input v-model="form.totalAverageScoreQl" placeholder="请输入总均分计算公式" clearable>
            <el-select class="line-ql-select" v-model="form.totalAverageSuffix" slot="append"
                       style="">
              <el-option label="小数" value="DOUBLE"></el-option>
              <el-option label="整数" value="INTEGER"></el-option>
              <el-option label="字符串" value="STRING" disabled></el-option>
              <el-option label="百分比" value="PERCENTAGE"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="总分区间">
      <el-radio-group v-model="form.totalIntervalType">
        <el-radio label="1">有</el-radio>
        <el-radio label="2">无</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="总分调用" v-if="form.totalIntervalType==1" prop="totalIntervalCallType">
      <el-radio-group v-model="form.totalIntervalCallType">
        <el-radio label="ORIGINAL">原始分</el-radio>
        <el-radio label="STANDARD" :disabled="form.totalStandardType==2">标准分</el-radio>
        <el-radio label="AVERAGE" :disabled="form.totalAverageScoreType==2">总均分</el-radio>
      </el-radio-group>
    </el-form-item>


    <!--  因子区间结论配置   -->
    <div class="y-range-conclusion" v-if="form.totalIntervalType==1">
      <score-interval-evaluation
          ref="fie"
          :data.sync="form.rules"/>
    </div>
    <div v-else-if="form.totalIntervalType==2">
      <el-form-item label="测评结果" prop="conclusion" class="y-max-input">
        <el-input v-model="form.conclusion" type="textarea" size="mini"/>
      </el-form-item>
      <el-form-item label="测评建议" prop="suggest" class="y-max-input">
        <el-input v-model="form.suggest" type="textarea" size="mini"/>
      </el-form-item>
    </div>


  </el-form>
</template>

<script>
import Question from './question'
import { validExec, validTotal } from './exec'
import ScoreIntervalEvaluation from './scoreIntervalEvaluation'
import tool from '../../tool'
import { exec } from './exec2'

export default {
  name: 'total-setting',
  components: { ScoreIntervalEvaluation, Question },
  props: {
    data: [Array, Object],
    factorList: [Array, Object],
  },
  data () {
    return {
      factorIndexList: [],
      form: {},
      disabledStandard: false,
      rules: {
        totalIntervalCallType: [
          { required: true, message: '总分调用不能为空', trigger: 'blur' },
        ],
        factorCallType: [
          { required: true, message: '因子分来源不能为空', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '因子名称不能为空', trigger: 'blur' },
        ],
        ql: [
          { required: true, message: '总分计算公式不能为空', trigger: 'blur' },
          { required: true, message: '请检测运算符号', trigger: 'blur', pattern: /^[总分0-9\-\+\*\/\.()\$\s]+$/gm },
          // {
          //   validator: (rule, value, callback) => validExec(value, callback, this.factorIndexList, validTotal),
          //   trigger: 'blur'
          // }
          {
            validator: (rule, value, callback) => {
              let message = exec(value, this.factorIndexList)
              console.log('因子》？', this.factorIndexList, message)
              typeof message == 'boolean' && message ? callback() : callback(new Error(message))
            },
            trigger: 'blur'
          }
        ],
        totalStandardScoreQl: [
          { required: false, message: '总标准分计算公式不能为空', trigger: 'blur' },
          { required: false, message: '请检测运算符号', trigger: 'blur', pattern: /^[总分0-9\-\+\*\/\.()\$\s]+$/gm },
          // {
          //   validator: (rule, value, callback) => validExec(value, callback, this.factorIndexList, validTotal),
          //   trigger: 'blur'
          // }
          {
            validator: (rule, value, callback) => {
              let message = exec(value, this.factorIndexList)
              typeof message == 'boolean' && message ? callback() : callback(new Error(message))
            },
            trigger: 'blur'
          }
        ],
        totalAverageScoreQl: [
          { required: false, message: '总均分计算公式不能为空', trigger: 'blur' },
          { required: false, message: '请检测运算符号', trigger: 'blur', pattern: /^[总分0-9\-\+\*\/\.()\$\s]+$/gm },
          // {
          //   validator: (rule, value, callback) => validExec(value, callback, this.factorIndexList, validTotal),
          //   trigger: 'blur'
          // }
          {
            validator: (rule, value, callback) => {
              let message = exec(value, this.factorIndexList)
              typeof message == 'boolean' && message ? callback() : callback(new Error(message))
            },
            trigger: 'blur'
          }
        ],
        totalTypes: [
          { required: true, message: '请选择因子', trigger: 'blur' },
        ]
      }
    }
  },
  watch: {
    factorList: {
      handler (list) {
        if (list.length > 0) {
          this.factorIndexList = tool.range.rangeNumer(1, list.length, false)
        }
        if (list.length == 0 && this.form.totalRules == 2) {
          this.form.totalRules = ''
        }
      },
      deep: true,
      immediate: true,
    },
    // 计分规则默认处理
    'form.totalRules': {
      handler (val) {
        if (!val) {
          // 空默认处理
          this.form.totalRules = '1'
        }
      },
      immediate: true
    },
    // 总分因子
    'form.totalTypes': {
      handler (val) {
        let currentSelectFactorList = val || this.form.totalTypes
        this.disabledStandard = this.factorList.filter(item => currentSelectFactorList.includes(item.title) && item.standardScoreType === '2').length != 0
        if (this.disabledStandard && this.form.factorCallType === 'STANDARD') {
          this.form.factorCallType = ''
        }
      },
      immediate: true
    },
    form: {
      handler (data) {
        console.log('监听总分配置：', data)
        if (typeof data.totalIntervalType == 'number') {
          this.form.totalIntervalType = String(data.totalIntervalType)
        }
        if (typeof data.totalRules == 'number') {
          this.form.totalRules = String(data.totalRules)
        }
        this.$emit('update:data', data)
      },
      deep: true,
      immediate: false,
    }
  },
  methods: {
    standardTypeClearTotalIntervalCallType (select) {
      if (select === '2' && this.form.totalIntervalCallType == 'STANDARD') {
        this.form.totalIntervalCallType = ''
      }
    },
    averageScoreTypeClearTotalIntervalCallType (select) {
      if (select === '2' && this.form.totalIntervalCallType == 'AVERAGE') {
        this.form.totalIntervalCallType = ''
      }
    },
    init (data) {
      // 合并因子配置数据 默认配置
      this.form = Object.assign({
        // 总原始分 计分规则
        totalRules: '1',
        // 总原始分计算公式 结果类型 DOUBLE、INTEGER、PERCENTAGE
        qlSuffix: 'DOUBLE',
        // 总原始分计算公式
        ql: '',

        // 否计算总标准分  有标准分：1；无标准分：2
        totalStandardType: '2',
        // 总标准分计算公式
        totalStandardScoreQl: '',
        // 总标准分后缀 DOUBLE、INTEGER、PERCENTAGE；2位小数、整数、百分比
        totalStandardSuffix: 'DOUBLE',

        // 总分调用类型 ORIGINAL  : 原始分 ； STANDARD  : 标准分 ； AVERAGE   : 平均分
        totalIntervalCallType: 'ORIGINAL',

        // 因子分来源 ORIGINAL、STANDARD
        factorCallType: 'ORIGINAL',
        // 总分 均分计算
        totalAverageScoreType: '2',
        // 总分 均分计算公式
        totalAverageScoreQl: '',

        // 总均分后缀 DOUBLE、INTEGER、PERCENTAGE；2位小数、整数、百分比
        totalAverageSuffix: 'DOUBLE',
        // 总分区间
        totalIntervalType: '1',
        // 因子标签
        totalTypes: [],
        // 区间配置
        rules: [],
      }, data)
    },
    form_validate () {
      let is_bool = true
      console.log('获取', this.form.totalIntervalType)
      this.$refs['setting'].validate(valid => {
        if (!valid) {
          is_bool = false
        } else if (this.form.totalIntervalType == 1 && !this.$refs['fie'].form_validate()) {
          is_bool = false
          setTimeout(() => {
            this.$message.error('请检查总分区间配置')
          }, 200)
        }
      })
      return is_bool
    },
  }
}
</script>
<style scoped>
::v-deep .y-max-input .el-form-item__content .el-form-item__error {
  margin-left: 30px;
}

.y-factor-configuration {
  padding: 25px 0;
}

.y-range-conclusion {
}

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

.y-input .el-input {
  width: 450px
}

.y-max-input .el-input, .el-textarea {
  width: 620px;
  margin-left: 30px;
}

hr {
  margin: 50px 0;
}

</style>
