<!--排序题-->
<style>
  .sortingProblemQuestion {
    width: 100%
  }

  .team_tit {
    font-size: 14px;
    color: #A8A8B3;
    padding-bottom: 20px;
  }

  .selectBox {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    position: relative;
    cursor: pointer;
    width: 58px;
    line-height: 24px;
    height: 24px;
    background: #FFFFFF;
    border: 1px solid #E1E1E5;
    border-radius: 4px;
    font-size: 12px;
    color: #181E33;
    margin: 0 20px 14px 0;
  }

  .blue-border {
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 7px 1px #75BAFF;
  }

</style>
<template>
  <div class="sortingProblemQuestion">
    <table v-if="data&&data.length>0">
      <tr v-for="(item,index) in data[0]">
        <td style="width:40px;text-align:center;">
          {{item.Name}}
        </td>
        <td>
          <div class="InpDIV" style="border:0;margin-top:-2px;padding-left:0;" v-html="item.Content"></div>
        </td>
        <td style="width:40px;text-align:center;">
        </td>
      </tr>
    </table>
    <br />
    <table v-if="data&&data.length>0">
      <tr>
        <td>
            <span style="font-weight:bold;">答案：</span>
            <span v-for="(cItem,cIndex) in data[0]">
              {{cItem.Name}}
            </span>
        </td>
      </tr>
    </table>
  </div>  
</template>
<script>
  import {
    getOptionList, //获取选择标签【A,B,C,D....】
  } from '../../api/question/questionconfig'
  import UeEditor from '../editor/UeEditor'
  export default {
    props: {
      questionData: {
        type: Array,
      },
      setOption: {
        type: Object,
      }
    },
    components: {
      UeEditor
    },
    data() {
      return {
        data: this.questionData,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        optionTitleList: [],
        commonIndex: -1,
        clickIndex: -1,
      };
    },
    created() {
      this.initConfig();
    },
    methods: {
      initConfig() {
        this.optionTitleList = getOptionList();
      },
      //删除选项
      deleteOpion(index) {
        this.$q.dialog({
          title: "删除小题",
          message: "确实要删除该选项吗？",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          this.data[0].splice(index, 1);
          this.data[1].splice(index, 1);
          this.commonIndex = -1;
          this.calcOptionTitle();
        });
      },
      //新增选项
      addOption() {
        if (this.data.length < 26) {
          this.data[0].push({
            Name: "",
            Content: "",
          });
          this.data[1].push({
            Name: "A",
            Content: "",
          });
          this.calcOptionTitle();
        } else {
          this.$q.notify({
            type: 'warning',
            position: 'center',
            timeout: 1500,
            message: `最多只能添加26个选项`
          })
          return
        }
      },
      //重新计算选择Title[A,B,C,D....]
      calcOptionTitle() {
        if (this.data && this.data.length > 0) {
          this.data[0].forEach((item, index) => {
            item.Name = this.optionTitleList[index];
          })
        }
      },
      //返回数据到父组件
      returnDataToParent() {
        this.getAnswer();
        this.$emit('getChild', this.data);
      },
      //获取正确答案
      getAnswer() {
        this.setOption.Answer = "";
        if (this.data && this.data.length > 0) {
          var answer = "";
          this.data[1].forEach(item => {
            answer += "," + item.Name;
          })
          if (answer != "") {
            answer = answer.substring(1);
          }
          this.setOption.Answer = answer;
        }
      },
    },
    mounted() {

    },
    watch: {
      data: {
        handler(newValue) {
          this.returnDataToParent();
        },
        deep: true
      },
    }
  };

</script>
