<template>
  <el-dialog title="维度编辑" :visible.sync="dialogFormVisible" @closed="dialogFormVisible = false" width="75%">
    <el-form :model="data">
      <el-form-item label="名称">
        <el-input v-model="data.ClassificationName"></el-input>
      </el-form-item>

      <el-form-item label="规则">
        <div style="padding:10px  5px 0px 5px">
          <el-table v-if="data.rules" :data="data.rules" style="width: 100%;">
            <el-table-column align="left" label="状态">
              <template slot-scope="{row}">
                <div style="display: flex;">
                  <el-input placeholder="请输入标题" v-model="row.DimensionTitle"></el-input>
                  <div style="width:60px;margin-left:5px;padding-top:3px">
                    <el-button type="text" style="font-size:16px" size="mini" icon="el-icon-circle-plus-outline"
                      @click="addtablerow(row.sort,data)"></el-button>
                    <el-button type="text" style="font-size:16px;margin-left:5px" size="mini"
                      icon="el-icon-remove-outline" @click="deltablerow(row.sort,data)"></el-button>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" label="计分规则">
              <template slot-scope="{row}">
                <el-select style="width:16%;margin-right:1%" v-model="row.ScoreType" placeholder="计分类型" clearable>
                  <el-option :value="1" label="按照总分"> 按照总分 </el-option>
                  <el-option :value="2" label="按照平均分"> </el-option>
                </el-select>

                <el-select style="width:18%;margin-right:1%" v-model="row.StartFormula" placeholder="规则" clearable>
                  <el-option v-for="item in ruleOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-input style="width:20%;margin-right:1%" type="number" v-model="row.StartScore"
                  :placeholder="'开始分值'">
                </el-input>
                <el-select style="width:18%;margin-right:1%" v-model="row.EndFormula" placeholder="规则" clearable>
                  <el-option v-for="item in ruleOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-input style="width:22%" v-model="row.EndScore" type="number" :placeholder="'结束分值'"></el-input>



              </template>
            </el-table-column>
            <el-table-column align="center" width="50" label="排序">
              <template slot-scope="{row}">
                <el-button v-if="row.sort > 0" type="text" size="small" icon="el-icon-top"
                  @click="tablesort(0,row.sort,data)">
                </el-button>
                <el-button v-if="row.sort < (data.rules.length-1) && data.rules.length >1" type="text" size="small"
                  icon="el-icon-bottom" @click="tablesort(1,row.sort,data)"></el-button>
              </template>
            </el-table-column>
          </el-table>

          <div>
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item v-for="(citem,index) in data.rules" :title="citem.DimensionTitle" :name="index"
                :key="index">

                <div>
                  <div style="width:100%;margin-top:10px;color:#409EFF;">
                    分值解析
                  </div>
                  <div style="display: flex;">
                    <div style="width:50%">

                      <tinymce ref="content" v-model="citem.DimensionContent" :height="650" />
                    </div>
                    <div style="width:50%;padding:0px 20px" v-html="citem.DimensionContent">

                    </div>
                  </div>
                </div>

              </el-collapse-item>
            </el-collapse>

          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

  import Tinymce from '@/components/Tinymce'

  import {
    EditQuestionClass,
    getQuestionClass,

  } from "@/api/QuestionClass";


  export default {
    components: {
      Tinymce
    },
    props: {
      model: {
        type: Object,
        default() {
          return {};
        }
      },
    },

    data() {
      return {
        data: {
          scoring_type: 0
        },
        activeName: '',
        dialogFormVisible: false,
        form: {},
     
        ruleOptions: [
          { label: '大于', value: '>' },
          { label: '小于', value: '<' },
          { label: '大于等于', value: '>=' },
          { label: '小于等于', value: '<=' },
          { label: '等于', value: '=' },
        ],
        evalutionRules: [
          {
            id: '',
            QuestionClassId: 0,
            DimensionTitle: '',
            DimensionContent: '',
            StartScore: '',
            StartFormula: '',
            EndScore: '',
            EndFormula: '',
            ScoreType: 1
          }
        ],
      };
    },
    watch: {
      model: {
        deep: true,
        handler(val) {
          this.form = val;
        }
      }

    },
    created() {
      // this.show();
    },
    methods: {
      handleSave() {
        if (!this.data.ClassificationName) {
          this.$message.warning('请填写名称！', "消息");
          return;
        }
        this.data.ClassType = 2;//默认维度
        EditQuestionClass(this.data).then(res => {
          if (res.data.code == 200) {
            this.$message.success('保存成功！', "消息");
            this.dialogFormVisible = false;
            this.data = { 
            rules: [
              {
                QuestionClassId: 0,
                DimensionTitle: '',
                DimensionContent: '',
                StartScore: '',
                StartFormula: '',
                EndScore: '',
                EndFormula: '',
                ScoreType: 1,
                sort: 0
              }
            ]
          };
          }
          else {
            this.$message.error('保存失败！', "消息");
          }
        });

      },
      addtablerow(index, row) {
        row.rules.splice(index + 1, 0, { sort: index + 1, id: (new Date().valueOf() + 1).toString(), ScoreType: 1 })
        this.sortdata(index + 1)
      },
      deltablerow(index, row) {
        if (row.rules.length <= 1) return;

        row.rules.splice(index, 1)
        var sort = index - 1;
        if (sort < 0) sort = 0;

        this.sortdata(sort)

      },
      tablesort(type, index, row) {
        if (type == 0) { //- 
          var prevsort = row.rules[index - 1].sort;
          row.rules[index - 1].sort = row.rules[index].sort;
          row.rules[index].sort = prevsort;
          row.rules = row.rules.sort((a, b) => {
            return a.sort - b.sort;
          });
        }
        else { //+

          var prevsort = row.rules[index + 1].sort;
          row.rules[index + 1].sort = row.rules[index].sort;
          row.rules[index].sort = prevsort;
          row.rules = row.rules.sort((a, b) => {
            return a.sort - b.sort;
          });
        }
      },
      sortdata(index) {
        try {

          var tmp = index;
          var data = this.tableData;
          data = data.forEach((e, itemindex) => {
            if (itemindex > index) {
              tmp++;
              e.sort = tmp;
            }
          });
          this.tableData = tmpdata
        } catch (e) { }
      },
      show(id) {
        this.data = {
            // id: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999),
            // key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999),
            rules: [
              {
                QuestionClassId: 0,
                DimensionTitle: '',
                DimensionContent: '',
                StartScore: '',
                StartFormula: '',
                EndScore: '',
                EndFormula: '',
                ScoreType: 1,
                sort: 0
              }
            ]
          };
        if (id) {
         
          this.dialogFormVisible = true;
          getQuestionClass({ id }).then(res => {

            if (res) {
              var data = res.data.data;
              if (!data.rules) {
                data.rules = [
                  {
                    QuestionClassId: 0,
                    DimensionTitle: '',
                    DimensionContent: '',
                    StartScore: '',
                    StartFormula: '',
                    EndScore: '',
                    EndFormula: '',
                    ScoreType: 1,
                    sort: 0
                  }
                ];
              }

              this.data = data;
            }
          });
        }


      }
    }
  }
</script>