<template>
  <div class="related">
    <a-button type="text" class="custom-button" @click="openModal">
      <div class="flex-align">
        <img style="margin-top:-2px" :src="require('@/assets/img/guanlianxuanxiang.png')" />
        <span style="margin-left: 6px">{{ title }}</span>
        <span v-if="info.associate.length !== 0">（{{ info.associate.filter((ass) => ass.type === type).length }}）</span>
      </div>
    </a-button>
    <a-modal v-model:visible="visible" width="80%" wrapClassName="custom-modal" style="max-width: 1000px; height: 80%" :destroyOnClose="false" :centered="true" :maskClosable="false" :title="title" @ok="saveRelate" @cancel="closeRelate">
      <div class="related-main">
        <div class="related-main-content">
          <div class="related-main-content-card" v-for="(item, index) in relateds" :key="index">
            <div class="related-main-content-card-ques">
              <div class="related-main-content-card-ques-text">关联</div>
              <a-select
                v-model:value="item.question_index"
                class="custom-select"
                style="flex: 1; margin-right: 12px; max-width: 50%"
                placeholder="请选择问题"
                show-search
                :filterOption="
                  (value, option) => {
                    return filterOptionHandle(value, option, quesList)
                  }
                "
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body
                  }
                "
                @change="selectQuesChange(item, index)">
                <a-select-option v-for="ques in quesList" :key="ques.id" :value="ques.question_index" :disabled="relateds.find((rel) => rel.question_index === ques.question_index)">
                  <div class="relate-html" v-html="`${ques.title}${ques.stem}`"></div>
                </a-select-option>
              </a-select>
              <!-- 选择(单，多)题 -->
              <template v-if="[1, 2].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                  <a-select-option :value="1">选中项</a-select-option>
                  <a-select-option :value="2">未选中项</a-select-option>
                </a-select>
              </template>
              <template v-if="[25].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                  <a-select-option :value="1">选中项</a-select-option>
                  <a-select-option :value="3">未选中项</a-select-option>
                </a-select>
              </template>
              <template v-if="[26].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                  <a-select-option :value="1">喜欢</a-select-option>
                  <a-select-option :value="2">不喜欢</a-select-option>
                  <a-select-option :value="3">未选中项</a-select-option>
                </a-select>
              </template>
              <!-- 矩阵(单，多)题 -->
              <template v-if="[9, 10].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.cite_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择标签"
                  @change="item.relation_type = undefined"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="1">行标签</a-select-option>
                  <a-select-option :value="2">列标签</a-select-option>
                </a-select>
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择选项"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <template v-if="item.cite_type === 1">
                    <a-select-option :value="0">全部项</a-select-option>
                    <a-select-option :value="1">选中项</a-select-option>
                    <a-select-option :value="2">未选中项</a-select-option>
                  </template>
                  <template v-else-if="item.cite_type === 2">
                    <a-select-option :value="0">全部项</a-select-option>
                  </template>
                </a-select>
              </template>
              <!-- 矩阵(打分,填空)题 -->
              <template v-if="[8, 11].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.cite_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择标签"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="1">行标签</a-select-option>
                  <a-select-option :value="2">列标签</a-select-option>
                </a-select>
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择选项"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                </a-select>
              </template>
              <!-- 排序题 -->
              <template v-if="item.quesInfo.question_type === 16">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                </a-select>
              </template>
              <!-- 分类题 -->
              <template v-if="item.quesInfo.question_type === 15">
                <a-select
                  v-model:value="item.cite_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择部分"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="3">分类</a-select-option>
                  <a-select-option :value="0">选项</a-select-option>
                </a-select>
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                </a-select>
              </template>
              <!-- 恒定总和题 -->
              <template v-if="item.quesInfo.question_type === 17">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                </a-select>
              </template>
              <!-- 打分题 -->
              <template v-if="item.quesInfo.question_type === 5">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                </a-select>
              </template>
              <!-- 图片题(单，多) -->
              <template v-if="[13, 14].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                  <a-select-option :value="1">选中项</a-select-option>
                  <a-select-option :value="2">未选中项</a-select-option>
                </a-select>
                <a-select
                  v-model:value="item.picture_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联部分"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">图片</a-select-option>
                  <a-select-option :value="1">文字</a-select-option>
                  <a-select-option :value="2">图文</a-select-option>
                </a-select>
              </template>
              <!-- maxdiff -->
              <template v-if="[105].includes(item.quesInfo.question_type)">
                <a-select
                  v-model:value="item.relation_type"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择关联方式"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option :value="0">全部项</a-select-option>
                  <a-select-option :value="3">相关</a-select-option>
                  <a-select-option :value="4">不相关</a-select-option>
                </a-select>
              </template>
              <div class="related-main-content-card-ques-icon">
                <!-- <i class="iconfont addfont" @click="addRelateHandle(index)"
                  >&#xe6c4;</i
                > -->
                <i class="iconfont addfont" @click="deleteRelatedHandle(index)">&#xe6cd;</i>
              </div>
            </div>
            <div class="related-main-content-card-option">
              <div class="related-main-content-card-option-item" v-if="item.showScope">
                <div class="related-main-content-card-option-item-text">关联范围</div>
                <a-select
                  v-model:value="item.first_scope"
                  class="custom-select"
                  style="flex: 1; margin-right: 5px"
                  placeholder="请选择选项"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option v-for="opt in item.quesInfo.options[0]" :key="opt.id" :value="opt.option_index"> <div class="related-html" v-html="opt.option"></div></a-select-option>
                </a-select>
                <span style="margin-right: 5px"> ~ </span>
                <a-select
                  v-model:value="item.last_scope"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  placeholder="请选择选项"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option v-for="opt in item.quesInfo.options[0]" :key="opt.id" :value="opt.option_index"> <div class="related-html" v-html="opt.option"></div></a-select-option>
                </a-select>
                <i class="iconfont addfont deletefont" style="font-size: 20px" @click="deleteScope(item)">&#xe6c5;</i>
              </div>
              <div class="related-main-content-card-option-item" v-if="item.showOut">
                <div class="related-main-content-card-option-item-text">排除选项</div>
                <a-select
                  v-model:value="item.out_scope"
                  class="custom-select"
                  style="flex: 1; margin-right: 12px"
                  mode="multiple"
                  placeholder="请选择选项"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body
                    }
                  ">
                  <a-select-option v-for="opt in item.quesInfo.options[0]" :key="opt.id" :value="opt.option_index"> <div class="related-html" v-html="opt.option"></div></a-select-option>
                </a-select>
                <i class="iconfont addfont deletefont" style="font-size: 20px" @click="deleteOut(item)">&#xe6c5;</i>
              </div>
              <div class="related-main-content-card-option-item">
                <template v-if="questions_type === 0">
                  <a-button disabled type="text" class="custom-button" @click="addScope(item)">
                    <span style="margin-left: 6px">关联范围</span>
                  </a-button>
                  <a-button disabled type="text" class="custom-button" @click="addOut(item)">
                    <span style="margin-left: 6px">排除选项</span>
                  </a-button>
                </template>
              </div>
            </div>
          </div>
          <!-- 热区题特殊处理只能添加一个关联 -->
          <a-button :disabled="questions_type !== 0 && relateds.length !== 0" type="text" class="custom-button" @click="addRelateHandle(relateds.length - 1)">
            <div class="flex-align">
              <i class="iconfont">&#xe689;</i>
              <span style="margin-left: 6px">添加关联</span>
            </div>
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import { saveQuesApi, nodeHandle } from '../js/util.js'
import { Modal } from 'ant-design-vue'
const commonJson = {
  question_index: undefined, // 问题序号
  type: 0, // 显示类型 0默认 1矩阵行 2矩阵列 3分类(当前题的type)
  cite_type: undefined, // 引用类型 0默认 1矩阵行 2矩阵列 3分类(引用题的type，用于显示关联列表的类型)
  showScope: false, // 开启关联范围
  showOut: false, // 开启排除范围
  quesInfo: {} // 题目信息
}
const json = [
  {
    value: [1, 2, 25, 26, 105], // 选择, 热区, maxDiff
    json: {
      ...commonJson,
      relation_type: undefined, // 关联方式
      first_scope: undefined, // 关联范围首选项
      last_scope: undefined, // 关联范围末选项
      out_scope: [] // 排除选项
    }
  },
  {
    value: [9, 10], // 矩阵-单，多选
    json: {
      ...commonJson,
      relation_type: undefined, // 关联方式
      first_scope: undefined, // 关联范围首选项
      last_scope: undefined, // 关联范围末选项
      out_scope: [] // 排除选项
    }
  },
  {
    value: [8, 11], // 矩阵-填空/打分
    json: {
      ...commonJson,
      relation_type: 0, // 关联方式
      first_scope: undefined, // 关联范围首选项
      last_scope: undefined, // 关联范围末选项
      value: '' // 数值
    }
  },
  {
    value: [16], // 排序题
    json: {
      ...commonJson,
      relation_type: 0, // 关联方式
      first_scope: undefined, // 关联范围首选项
      last_scope: undefined, // 关联范围末选项
      value: '' // 数值
    }
  },
  {
    value: [15], // 分类题
    json: {
      ...commonJson,
      relation_type: 0 // 关联方式
    }
  },
  {
    value: [17], // 恒定总和题
    json: {
      ...commonJson,
      relation_type: 0, // 关联方式
      first_scope: undefined, // 关联范围首选项
      last_scope: undefined // 关联范围末选项
    }
  },
  {
    value: [5], // 打分题
    json: {
      ...commonJson,
      relation_type: 0, // 关联方式
      first_scope: undefined, // 关联范围首选项
      last_scope: undefined // 关联范围末选项
    }
  },
  {
    value: [13, 14], // 图片题
    json: {
      ...commonJson,
      relation_type: undefined, // 关联方式
      picture_type: undefined // 0图片 1文字 2图文
    }
  }
]
export default {
  name: 'RelatedOption',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '关联选项'
    },
    type: {
      // 0默认 1矩阵行 2矩阵列 3分类(当前题的type)
      type: Number,
      default: 0
    },
    questions_type: {
      type: [Number, String],
      default: () => 0
    }
  },
  setup(props, context) {
    const visible = ref(false)
    const store = useStore()
    const relateds = ref([])
    const quesList = ref([])
    const openModal = () => {
      getQuesList()
      relateds.value = JSON.parse(JSON.stringify(props.info.associate))
        .filter((x) => x.type === props.type)
        .map((x) => {
          const quesInfo = JSON.parse(JSON.stringify(store.state.common.questionInfo.questions)).find((ques) => ques.id && ques.question_index === x.question_index)
          const newEle = {
            ...json.find((x) => x.value.includes(quesInfo.question_type)).json,
            quesInfo: quesInfo
          }
          Object.keys(x).forEach((key) => {
            newEle[key] = x[key]
          })
          // 分类题和图片题不处理
          if (![15, 13, 14].includes(quesInfo.question_type)) {
            newEle.first_scope = newEle.first_scope === 0 ? undefined : newEle.first_scope
            newEle.last_scope = newEle.last_scope === 0 ? undefined : newEle.last_scope
          }
          return newEle
        })
      visible.value = true
    }
    /**获取问题列表，包含选择题(单，多)，矩阵(单，多，填空，打分)，排序题，分类题，恒定总和题，图片题(单，多),当前题前面的题 */
    const getQuesList = () => {
      debugger
      quesList.value = []
      const ques = JSON.parse(JSON.stringify(store.state.common.questionInfo.questions.filter((ques) => ques.id)))
      let previousList = []
      for (let index = 0; index < ques.length; index++) {
        const element = ques[index]
        element.stem = nodeHandle(element.stem)
        if (element.id === props.info.id) break
        previousList.push(element)
      }
      //【矩阵关联】同一题内，列标签关联下拉隐掉行标签关联的问题，行标签关联下拉隐掉列标签关联的问题，不同题间的行列标签不互相影响
      if ([8, 9, 10, 11].includes(props.info.question_type)) {
        if (props.type === 1) {
          const colAssociateSelectList = props.info.associate.filter((ass) => ass.type === 2)
          previousList = previousList.filter((q) => {
            const hasQues = colAssociateSelectList.find((ass) => ass.question_index === q.question_index)
            return !hasQues
          })
        }
        if (props.type === 2) {
          const colAssociateSelectList = props.info.associate.filter((ass) => ass.type === 1)
          previousList = previousList.filter((q) => {
            const hasQues = colAssociateSelectList.find((ass) => ass.question_index === q.question_index)
            return !hasQues
          })
        }
      }
      // [1, 2, 5, 8, 9, 10, 11, 15, 16, 17, 13, 14].includes(x.question_type)
      // [1, 2, 5].includes(x.question_type)
      // 热区题特殊处理，只能选择其他热区题
      if (props.questions_type !== 0) {
        console.log(props.questions_type, previousList)
        quesList.value = previousList.filter((x) => x.id && [...props.questions_type.split(',').map((s) => Number.parseInt(s))].includes(x.question_type))
        console.log(quesList.value, previousList)
      } else {
        quesList.value = previousList.filter((x) => x.id && [1, 2, 5, 8, 9, 10, 11, 17, 105].includes(x.question_type))
      }
    }
    /**
     * 问题选中回调
     * */
    const selectQuesChange = (item, index) => {
      item.quesInfo = JSON.parse(JSON.stringify(store.state.common.questionInfo.questions)).find((x) => x.id && x.question_index === item.question_index)
      const newEle = json.find((x) => x.value.includes(item.quesInfo.question_type)).json
      newEle.question_index = item.question_index
      newEle.quesInfo = JSON.parse(JSON.stringify(item.quesInfo))
      newEle.type = props.type
      console.log(json)
      relateds.value = relateds.value.map((x, relIndex) => {
        if (relIndex === index) {
          x = { ...newEle }
        }
        return x
      })
    }
    /**
     * 添加关联
     * */
    const addRelateHandle = (index) => {
      relateds.value.splice(index + 1, 0, {
        question_index: undefined,
        quesInfo: {}
      })
    }
    /**
     * 删除关联
     * */
    const deleteRelatedHandle = (index) => {
      relateds.value.splice(index, 1)
    }
    /**
     * 下拉框筛选
     */
    const filterOptionHandle = (value, option, optionList) => {
      let result = false
      const curOpt = optionList.find((opt) => opt.id === option.key)
      if (`${curOpt.title}${curOpt.stem}`.includes(value)) {
        result = true
      }
      return result
    }
    /**添加关联范围 */
    const addScope = (item) => {
      item.showScope = true
    }
    /**删除关联范围 */
    const deleteScope = (item) => {
      item.first_scope = undefined
      item.last_scope = undefined
      item.showScope = false
    }
    /**添加排除范围 */
    const addOut = (item) => {
      item.showOut = true
    }
    /**删除排除范围 */
    const deleteOut = (item) => {
      item.out_scope = []
      item.showOut = false
    }
    /**保存关联 */
    const saveRelate = () => {
      let copyRelateds = JSON.parse(JSON.stringify(relateds.value))
      const { hasSame, warnStr } = hasSameRelateOption(copyRelateds)
      if (hasSame) {
        closeRelate()
        Modal.warning({
          title: () => '无法操作',
          content: () => warnStr
        })
        return
      }
      copyRelateds.forEach((rel) => {
        rel.cite_type = rel.cite_type === undefined ? 0 : rel.cite_type
        delete rel.quesInfo
        delete rel.showScope
        delete rel.showOut
      })
      copyRelateds = copyRelateds.filter((rel) => rel.question_index)
      const { questionInfo, quesSaveParam, activeQuestion } = JSON.parse(JSON.stringify(store.state.common))
      const filteRelate = activeQuestion.associate.filter((ass) => ass.type !== props.type)
      activeQuestion.associate = filteRelate
      filteRelate.push(...copyRelateds)
      const copyInfo = JSON.parse(JSON.stringify(props.info))
      questionInfo.questions.forEach((x) => {
        if (x.id === props.info.id) {
          x.associate = x.associate.filter((ass) => ass.type !== props.type)
          x.associate.push(...copyRelateds)
          if (x.question_type === 25 || x.question_type === 26) {
            if (copyRelateds.length <= 0) {
              x.options[0] = []
              x.config.img_url = ''
              x.config.img_height = 0
              x.config.img_weight = 0
              return
            }
            const questionMadel = questionInfo.questions.find((s) => s.question_index === copyRelateds[0].question_index)
            x.options[0] = []
            x.config.img_url = questionMadel.config.img_url
            x.config.img_height = questionMadel.config.img_height
            x.config.img_weight = questionMadel.config.img_weight
            copyInfo.config = x.config
            activeQuestion.config = x.config
          }
        }
      })
      store.commit('common/A_COMMON_SET_ACTIVEQUESTION', JSON.stringify(activeQuestion))
      store.commit('common/A_COMMON_SET_QUESTIONINFO', JSON.stringify(questionInfo))

      quesSaveParam.newLogics = questionInfo.logics.filter((logic) => logic.question_id === props.info.id)
      quesSaveParam.newQuestion.push(
        JSON.parse(
          JSON.stringify({
            ...copyInfo,
            associate: filteRelate
          })
        )
      )
      quesSaveParam.newSurvey.pages = questionInfo.survey.pages
      saveQuesApi(quesSaveParam, store)
      closeRelate()
    }
    /**关闭弹框 */
    const closeRelate = () => {
      relateds.value = []
      visible.value = false
    }
    /**
     * 判断添加的关联是否重复
     * 例：一共3道题，Q2添加一个关联至Q1，Q3添加一个关联至Q2,此时是没问题的，然后给Q3再添加一个关联至Q1，此时是不允许添加的
     */
    const hasSameRelateOption = (relateds) => {
      const { questionInfo } = JSON.parse(JSON.stringify(store.state.common))
      const relatedIndex = []
      relateds.forEach((rel) => {
        if (rel.question_index) {
          const ques = questionInfo.questions.find((ques) => ques.question_index === rel.question_index)
          const temp = {
            ques,
            indexs: []
          }
          const func = (info) => {
            temp.indexs.push(info.question_index)
            if (info.associate) {
              info.associate.forEach((ass) => {
                const tempQues = questionInfo.questions.find((ques) => ques.question_index === ass.question_index)
                func(tempQues)
              })
            }
          }
          func(ques)
          relatedIndex.push(temp)
        }
      })
      let hasSame = false
      let warnStr = ''
      for (let indexX = 0; indexX < relatedIndex.length; indexX++) {
        const element1 = relatedIndex[indexX]
        for (let indexY = indexX + 1; indexY < relatedIndex.length; indexY++) {
          const element2 = relatedIndex[indexY]
          element1.indexs.forEach((i) => {
            if (element2.indexs.includes(i)) {
              hasSame = true
              warnStr = `${element1.ques.title}，${element2.ques.title}之间存在重复的关联选项，不能同时关联。`
            }
          })
          if (hasSame) break
        }
        if (hasSame) break
      }
      console.log('index', relatedIndex, warnStr)
      if (!hasSame) {
        for (let index = 0; index < questionInfo.questions.length; index++) {
          const ques = questionInfo.questions[index]
          if (ques.associate) {
            if (ques.associate.find((ass) => ass.question_index === props.info.question_index)) {
              for (let index = 0; index < relateds.length; index++) {
                const rel = relateds[index]
                if (ques.associate.find((ass) => ass.question_index === rel.question_index)) {
                  hasSame = true
                  warnStr = `${rel.quesInfo.title}，${ques.title}之间存在重复的关联选项，不能同时关联。`
                }
                if (hasSame) break
              }
            }
          }
          if (hasSame) break
        }
      }
      return {
        hasSame,
        warnStr
      }
    }
    return {
      relateds,
      quesList,
      visible,
      openModal,
      saveRelate,
      closeRelate,
      addRelateHandle,
      deleteRelatedHandle,
      filterOptionHandle,

      addScope,
      deleteScope,
      addOut,
      deleteOut,
      selectQuesChange
    }
  }
}
</script>

<style lang="scss" scoped>
.related {
  display: inline-block;
  &-main {
    width: 100%;
    padding: 0 24px;
    &-content {
      max-height: 496px;
      min-height: 300px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 74px;
      &-card {
        margin-bottom: 12px;
        &-ques {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          &-text {
            width: 100px;
            min-width: 100px;
            height: 32px;
            background: #fafafa;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            margin-right: 12px;
          }
          &-icon {
            min-width: 48px;
          }
        }
        &-option {
          padding-left: 110px;
          &-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            &-text {
              width: 100px;
              min-width: 100px;
              height: 32px;
              background: #fafafa;
              border-radius: 4px;
              text-align: center;
              line-height: 32px;
              margin-right: 12px;
            }
          }
        }
      }
    }
    .addfont {
      margin-right: 8px;
      cursor: pointer;
      color: #bfbfbf;
      &:hover {
        color: #434343;
      }
    }
    .deletefont {
      min-width: 48px;
      margin-right: 0;
    }
    .custom-button {
      padding-left: 0;
    }
  }
  &-html {
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 400px;
    &::v-deep p {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
  }
}
:deep(.relate-html) {
  overflow: hidden;
}
</style>
