<template>
  <div
    class="question-content p-2 pl-4"
    :class="{
      'show-indicator': props.showIndicator,
      'hide-survey-title': props.hideSurveyTitle
    }"
  >
    <template v-if="props.edit || item.edit">
      <div class="row hidden">
        <span>编号：</span>
        <el-input v-model="item.sn" :disabled="!!props.id" class="w-80">
        </el-input>
      </div>
      <div v-if="isChild" class="row">
        <span>属性：</span>
        <el-input v-model="item.attr" :disabled="!!props.id" class="w-80">
          <template #prepend>attr</template>
        </el-input>
      </div>
      <div class="row mb-2">
        <span>题目：</span>
        <el-input v-model="item.title" class="w-80"></el-input>
      </div>
      <div class="row">
        <span>备注：</span>
        <el-input v-model="item.remark" class="w-80"></el-input>
      </div>
    </template>
    <template v-else>
      <!-- <div>{{ item }}</div> -->
      <div class="text-base text-gray-800 mb-2">{{ item.title }}</div>
      <div class="text-gray-400 text-sm">{{ item.remark }}</div>
      <!-- <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="标题">
          <span
            class="cursor-copy"
            @click="emitText(`&quot;${item.title}&quot;`)"
            >{{ item.title }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <span
            class="cursor-copy"
            @click="emitText(`&quot;${item.remark}&quot;`)"
            >{{ item.remark }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item label="编号(sn)">
          <span class="cursor-copy" @click="emitText(`QU${item.sn}`)">{{
            item.sn
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="属性(attr)">
          <span class="cursor-copy" @click="emitText(item.attr)">{{
            item.attr
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="类型">{{
          typeLabel[item.type]
        }}</el-descriptions-item>
        <el-descriptions-item label="其他">
          <el-tag v-if="item.required" class="mr-2">必填</el-tag>
          <el-tag v-if="item.config?.regexRuleName" class="mr-2">{{
            item.config?.regexRuleName
          }}</el-tag>
          <el-tag v-if="item.isRepeat" class="mr-2" type="danger"
            >可多答</el-tag
          >
          <el-tag v-else class="mr-2">不可多答</el-tag>
        </el-descriptions-item>
      </el-descriptions> -->
    </template>
    <!-- 单选 -->
    <template v-if="item.type === 'radio'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
        <div class="row w-full">
          <draggable
            v-model="item.choices"
            handle=".el-icon-rank"
            class="w-full"
          >
            <template #item="{ element: subItem, index: subIndex }">
              <div class="sub-item mb-4">
                <Rank class="inline-block w-4 h-4 el-icon-rank align-middle" />
                <el-input v-model="subItem.label" class="input w-48 mx-3" />
                <Close
                  class="el-icon-close w-4 h-4 inline-block align-middle"
                  @click="item.choices.splice(subIndex, 1)"
                />
                <el-input v-model="subItem.attr" class="hidden input ml-2 w-48">
                  <template slot="prepend">代号</template>
                </el-input>
                <div class="mt-2">
                  <el-checkbox v-model="subItem.isInput" class="ml-4"
                    >是否可输入</el-checkbox
                  >
                  <el-input
                    v-if="subItem.isInput"
                    v-model="subItem.inputPlaceholder"
                    placeholder="输入占位提示"
                    class="ml-2 w-48"
                  ></el-input>
                  <span
                    v-if="subItem.isInput && subItem.regexRuleName"
                    class="ml-2"
                    >{{ subItem.regexRuleName }}</span
                  >
                  <el-button
                    v-if="subItem.isInput"
                    class="ml-2"
                    type="primary"
                    link
                    @click="setRegex(subItem, subIndex)"
                    >设置规则</el-button
                  >
                </div>
              </div>
            </template>
          </draggable>
        </div>
        <div>
          <el-button
            type="primary"
            link
            @click="
              item.choices.push({
                label: '选项' + (item.choices.length + 1),
                value: '',
                isInput: false,
                extra: '',
                inputPlaceholder: '',
                regexRule: '',
                regexRuleName: '',
                attr: randomString(6)
              })
            "
            >+ 新增选项</el-button
          >
        </div>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left padding-top-10 padding-bottom-10">
        <el-radio-group v-model="item.rawValue">
          <div>
            <div
              v-for="(sub, idx) in item.choices"
              :key="idx"
              class="sub-title margin-top-5 hide"
            >
              <el-radio :label="idx" disabled>
                <span
                  class="cursor-copy"
                  @click.stop="emitText(`&quot;${sub.label}&quot;`)"
                  >{{ sub.label }}</span
                >
              </el-radio>
              <!-- <el-tag type="info" class="cursor-copy" @click="emitText(sub.attr)">{{
                sub.attr
              }}</el-tag> -->
              <div v-if="idx == item.rawValue && item.choices[idx]?.isInput" class="text-sm pl-6">
                <span class="text-xs text-gray-500">输入内容：</span>
                <span>{{ item.choices[idx]?.extra }}</span>
              </div>
            </div>
          </div>
        </el-radio-group>
      </div>
    </template>
    <!-- 多选 -->
    <template v-else-if="item.type === 'checkbox'">
      <!-- 编辑状态 -->
      <template v-if="props.edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
        <div class="row w-full">
          <draggable
            v-model="item.choices"
            handle=".el-icon-rank"
            class="w-full"
          >
            <template #item="{ element: subItem, index: subIndex }">
              <div class="sub-item mb-4">
                <Rank
                  class="inline-block align-middle w-4 h-4 el-icon-rank"
                ></Rank>
                <el-input
                  class="input w-40 mx-3"
                  v-model="subItem.label"
                ></el-input>
                <Close
                  class="el-icon-close w-4 h-4 inline-block align-middle"
                  @click="item.choices.splice(subIndex, 1)"
                ></Close>
                <el-input v-model="subItem.attr" class="hidden input ml-2 w-48">
                  <template slot="prepend">代号</template>
                </el-input>

                <div class="mt-2">
                  <el-checkbox v-model="subItem.mutuallyExclusive" class="ml-4"
                    >互斥</el-checkbox
                  >
                  <el-checkbox v-model="subItem.isInput" class="ml-4"
                    >是否可输入</el-checkbox
                  >
                  <el-input
                    v-if="subItem.isInput"
                    v-model="subItem.inputPlaceholder"
                    placeholder="输入占位提示"
                    class="ml-2 w-48"
                  ></el-input>
                  <span
                    v-if="subItem.isInput && subItem.regexRuleName"
                    class="ml-2"
                    >{{ subItem.regexRuleName }}</span
                  >
                  <el-button
                    v-if="subItem.isInput"
                    class="ml-2"
                    type="primary"
                    link
                    @click="setRegex(subItem, subIndex)"
                    >设置规则</el-button
                  >
                </div>
              </div>
            </template>
          </draggable>
        </div>
        <div>
          <el-button
            type="primary"
            link
            @click="
              item.choices.push({
                label: '选项' + (item.choices.length + 1),
                value: '',
                mutuallyExclusive: false,
                isInput: false,
                extra: '',
                inputPlaceholder: '',
                regexRule: '',
                regexRuleName: '',
                attr: randomString(6)
              })
            "
            >+ 新增选项</el-button
          >
        </div>
      </template>
      <!-- 常规显示 -->
      <div class="text-left padding-top-10 padding-bottom-10" v-else>
        <div
          v-for="(sub, idx) in item.choices"
          :key="idx"
          class="sub-title margin-top-5"
        >
          <el-checkbox :checked="(item.rawValue || []).includes(idx)" disabled>
            <span
              class="cursor-copy"
              @click.stop="emitText(`&quot;${sub.label}&quot;`)"
              >{{ sub.label }}</span
            >
          </el-checkbox>

              <div v-if="(item.rawValue || []).includes(idx) && item.choices[idx]?.isInput" class="text-sm pl-6">
                <span class="text-xs text-gray-500">输入内容：</span>
                <span>{{ item.choices[idx]?.extra }}</span>
              </div>
          <!-- <el-tag
            type="info"
            class="cursor-copy ml-4"
            @click="emitText(sub.attr)"
            >{{ sub.attr }}</el-tag
          > -->
        </div>
      </div>
    </template>
    <!-- 单行文本题 -->
    <template v-else-if="item.type === 'input' || item.type === 'textarea'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
          <!-- <el-checkbox v-if="!isChild" v-model="item.isRepeat"
            >允许多填</el-checkbox
          > -->
          <span class="mr-2 ml-4">文本校验</span>
          <span v-if="item.config && item.config?.regexRuleName" class="ml-2">{{
            item.config?.regexRuleName
          }}</span>
          <el-button
            class="ml-2"
            type="primary"
            link
            @click="setRegex(item.config, -1, true)"
            >设置规则</el-button
          >
          <!-- <el-input v-model="item.attr" class="input ml-2 w-180px" >
            <template slot="prepend">代号</template>
          </el-input> -->
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
      </template>
      <!-- 常规显示 -->
      <div class="text-left padding-top-10 padding-bottom-10" v-else>
        <div>
          <el-input
            :model-value="item.rawValue || ''"
            disabled
            :type="item.type === 'textarea' ? 'textarea' : 'text'"
            :rows="3"
          ></el-input>
        </div>
      </div>
    </template>
    <!-- 量表题 -->
    <template v-else-if="item.type === 'scale'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>

        <div class="row my-4">
          <span class="ml-4">最小值：</span>
          <el-input class="w-24" v-model.number="item.min"></el-input>
          <span class="ml-4">最小值文案：</span>
          <el-input class="w-24" v-model="item.choices[0].label"></el-input>
        </div>
        <div class="row">
          <span class="ml-4">最大值：</span>
          <el-input class="w-24" v-model.number="item.max"></el-input>
          <span class="ml-4">最大值文案：</span>
          <el-input class="w-24" v-model="item.choices[1].label"></el-input>
        </div>
        <div class="flex items-center mt-5">
          <div class="flex items-center flex-col">
            <span class="whitespace-nowrap mx-4">{{
              item.choices[0].label
            }}</span>
            <div>{{ item.min }}</div>
          </div>
          <el-slider
            v-model="item.value"
            :min="item.min"
            :max="item.max"
            :step="1"
            disabled
            readonly
          />
          <div class="flex items-center flex-col">
            <span class="whitespace-nowrap mx-4">{{
              item.choices[1].label
            }}</span>
            <div>{{ item.max }}</div>
          </div>
        </div>
      </template>
      <!-- 常规显示 -->
      <div class="text-left padding-top-10 padding-bottom-10" v-else>
        <div class="row pt-4">
          <div class="flex">
            <div class="flex items-center flex-col">
              <span class="whitespace-nowrap mx-4">{{
                item.choices[0].label
              }}</span>
              <div>{{ item.min }}</div>
            </div>
            <el-slider
              :model-value="item.rawValue"
              :show-tooltip="true"
              :min="item.min"
              :max="item.max"
              :step="1"
              disabled
              readonly
            />
            <div class="flex items-center flex-col">
              <span class="whitespace-nowrap mx-4">{{
                item.choices[1].label
              }}</span>
              <div>{{ item.max }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="item.type === 'rating_scale'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
        <div class="row">
          <span>量表类型：</span>
          <el-input class="w-48" v-model="item.choices[0].label"></el-input>
          <span class="margin-0-15">—</span>
          <el-input class="w-48" v-model="item.choices[1].label"></el-input>
        </div>
        <div class="row">
          <span>量表范围：</span>
          <el-input class="w-48" v-model.number="item.max"></el-input>
          <span class="ml-4">起始数值：</span>
          <el-input class="w-48" v-model.number="item.min"></el-input>
        </div>
      </template>
      <!-- 常规显示 -->
      <div class="text-left padding-top-10 padding-bottom-10" v-else>
        <div class="row">
          <span class="mr-4">{{ item.choices[0].label }}</span>
          <el-radio-group>
            <el-radio-button
              :value="false"
              disabled
              v-for="(sub, idx) in item.max"
              :key="idx"
              >{{ idx + item.min }}</el-radio-button
            >
          </el-radio-group>
          <span class="ml-2">{{ item.choices[1].label }}</span>
        </div>
      </div>
    </template>
    <!-- 评分题 -->
    <template v-else-if="item.type === 'rating'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
        <div class="row w-full">
          <draggable
            v-model="item.choices"
            handle=".el-icon-rank"
            class="w-full"
            tag="div"
          >
            <template #item="{ element: subItem, index: subIndex }">
              <div class="sub-item mb-4">
                <Rank
                  class="inline-block align-middle w-4 h-4 el-icon-rank"
                ></Rank>
                <el-input
                  class="input w-40 mx-3"
                  v-model="subItem.label"
                ></el-input>
                <Close
                  class="el-icon-close w-4 h-4 inline-block align-middle"
                  @click="item.choices.splice(subIndex, 1)"
                ></Close>
                <span class="ml-4">分值：</span>
                <el-input
                  class="input w-30 mx-3"
                  v-model="subItem.score"
                ></el-input>
                <el-checkbox
                  v-if="item.isMultiple"
                  v-model="subItem.mutuallyExclusive"
                  class="ml-12"
                  >互斥</el-checkbox
                >
              </div>
            </template>
          </draggable>
        </div>
        <div>
          <el-button
            type="primary"
            link
            @click="
              item.choices.push({
                label: '选项' + (item.choices.length + 1),
                value: '',
                mutuallyExclusive: false
              })
            "
            >+ 新增选项</el-button
          >
        </div>
        <div class="row">
          <el-checkbox
            v-model="item.isMultiple"
            @change="
              v => item.choices.forEach(v2 => (v2.mutuallyExclusive = false))
            "
            >允许多选</el-checkbox
          >
          <span class="ml-4">计分方式：所选选项分值之和</span>
        </div>
      </template>
      <!-- 常规显示 -->
      <div class="text-left py-2" v-else>
        <div v-for="(sub, idx) in item.choices" :key="idx" class="mt-1">
          <template v-if="item.isMultiple">
            <el-checkbox :value="false" disabled
              >{{ sub.label }}({{ sub.score }})</el-checkbox
            >
          </template>
          <template v-else>
            <el-radio :value="false" disabled
              >{{ sub.label }}({{ sub.score }})</el-radio
            >
          </template>
        </div>
      </div>
    </template>
    <!-- 文本描述 -->
    <div class="pt-4 pb-8" v-else-if="item.type === 'text'">
      <el-input
        class="input"
        v-model="item.title"
        v-if="edit || item.edit"
        placeholder="请输入文本"
      ></el-input>
      <p v-else class="text-center">
        <span @click.stop="emitText(`&quot;${item.title}&quot;`)"
          >{{ item.title
          }}<el-tag v-if="item.isRepeat" type="danger" size="mini"
            >可多答</el-tag
          ></span
        >
      </p>
    </div>
    <!-- 时间选择题 -->
    <template v-else-if="item.type === 'date'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
          <!-- <el-checkbox v-if="!isChild" v-model="item.isRepeat"
            >允许多填</el-checkbox
          > -->
        </div>
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-select v-model="item.config.type">
            <el-option label="年月日" value=""></el-option>
            <el-option label="年月" value="year-month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
          <!-- <span class="mr-2 ml-4">值类型</span>
          <el-select v-model="item.config.rule">
            <el-option label="原始值" value=""></el-option>
            <el-option label="年龄" value="age"></el-option>
          </el-select> -->
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left padding-top-10 padding-bottom-10">
        <div class="row">
          <el-date-picker
            :model-value="item.value"
            disabled
            type="date"
            :placeholder="item.remark || '选择时间'"
          />
        </div>
      </div>
    </template>
    <!-- 矩阵题 -->
    <template v-else-if="item.type === 'matrix_checkbox'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
          <el-checkbox v-model="item.isMultiple">允许多选</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>

        <el-row class="row" align="top">
          <el-col :span="12">
            <p>问题管理</p>
            <draggable
              v-model="item.rows"
              handle=".el-icon-rank"
              class="w-full"
            >
              <template #item="{ element: subItem, index: subIndex }">
                <div class="sub-item mb-4">
                  <Rank
                    class="inline-block w-4 h-4 el-icon-rank align-middle"
                  />
                  <el-input v-model="subItem.label" class="input w-48 mx-3" />
                  <Close
                    class="el-icon-close w-4 h-4 inline-block align-middle"
                    @click="
                      item.rows.splice(subIndex, 1);
                      updateMatrix();
                    "
                  />
                  <el-input
                    v-model="subItem.attr"
                    class="hidden input ml-2 w-48"
                  >
                    <template slot="prepend">代号</template>
                  </el-input>
                </div>
              </template>
            </draggable>
            <div>
              <el-button
                type="primary"
                link
                @click="
                  item.rows.push({
                    label: '问题' + (item.rows.length + 1),
                    value: '',
                    attr: randomString(6)
                  });
                  updateMatrix();
                "
                >+ 新增问题</el-button
              >
            </div>
          </el-col>
          <el-col :span="12">
            <p>选项管理</p>

            <draggable
              v-model="item.columns"
              handle=".el-icon-rank"
              class="w-full"
            >
              <template #item="{ element: subItem, index: subIndex }">
                <div class="sub-item mb-4">
                  <Rank
                    class="inline-block w-4 h-4 el-icon-rank align-middle"
                  />
                  <el-input v-model="subItem.label" class="input w-40 mx-3" />
                  <Close
                    class="el-icon-close w-4 h-4 inline-block align-middle"
                    @click="
                      item.columns.splice(subIndex, 1);
                      updateMatrix();
                    "
                  />
                  <!-- <el-input v-model="subItem.attr" class="input ml-2 w-48">
                    <template slot="prepend">代号</template>
                  </el-input> -->
                  <el-checkbox v-model="subItem.mutuallyExclusive" class="ml-12"
                    >互斥</el-checkbox
                  >
                </div>
              </template>
            </draggable>
            <div>
              <el-button
                type="primary"
                link
                @click="
                  item.columns.push({
                    label: '选项' + (item.columns.length + 1),
                    value: '',
                    mutuallyExclusive: false,
                    attr: randomString(6)
                  });
                  updateMatrix();
                "
                >+ 新增选项</el-button
              >
            </div>
          </el-col>
        </el-row>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left py-2">
        <div class="row">
          <el-table :data="item.matrix">
            <!-- <el-table-column>
              <template #default="{ $index }">
                <el-tag
                  type="info"
                  class="q-attr"
                  @click="emitText(`${item.rows[$index].attr}`)"
                >
                  {{ item.rows[$index]?.attr }}
                </el-tag>
              </template>
            </el-table-column> -->
            <el-table-column>
              <template #default="{ $index }">
                <div class="survey-sub-title">
                  {{ item.rows[$index]?.label }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(col, colIdx) in item.columns"
              :key="colIdx"
              :label="col.label"
              align="center"
            >
              <template #header="{ $index }">
                {{ col.label }}
                <!-- <el-tag
                  type="info"
                  class="q-attr"
                  @click="emitText(`${col.attr}`)"
                >
                  {{ col.attr }}
                </el-tag> -->
              </template>
              <template #default="{ $index }">
                <!-- <el-tag
                  type="info"
                  class="q-attr"
                  @click="
                    emitText(
                      `${item.rows[$index]?.attr}${item.columns[colIdx].attr}`
                    )
                  "
                  >{{
                    `${item.rows[$index]?.attr}${item.columns[colIdx].attr}`
                  }}</el-tag
                > -->
                <el-checkbox
                  readonly
                  disabled
                  :checked="
                    (item.value || []).includes(
                      `${item.rows[$index]?.label}${item.columns[colIdx]?.label}`
                    )
                  "
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <!-- 疾病下拉题 -->
    <template v-else-if="item.type === 'disease' || item.type === 'medicine'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
          <el-checkbox v-model="item.isRepeat">允许多填</el-checkbox>
          <el-checkbox v-model="item.config.isInput">可输入其他</el-checkbox>
          <el-input
            v-if="item.config.isInput"
            v-model="item.config.attr"
            class="hidden input ml-2 w-48"
          >
            <template slot="prepend">代号</template>
          </el-input>
        </div>
        <div class="row">
          <span class="mr-2">展示值　</span>
          <el-select
            v-model="item.recommend"
            filterable
            multiple
            placeholder="请输入"
            @change="searchChange"
          >
            <el-option
              v-for="(recommendItem, recommendIndex) in item.searchList"
              :key="recommendIndex"
              :label="recommendItem.name"
              :value="recommendItem.id"
            ></el-option>
          </el-select>
        </div>
        <div class="row">
          <span class="mr-2">系统标签</span>
          <el-select v-model="item.systemTagIds" filterable multiple>
            <el-option
              v-for="(tag, tagIdx) in tags"
              :key="tagIdx"
              :label="tag.name"
              :value="tag.id"
            >
              <div class="flex items-center justify-between">
                <span>{{ tag.name }}</span>
                <el-tag class="ml-4">{{
                  tag.category && tag.category.name
                }}</el-tag>
              </div>
            </el-option>
          </el-select>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left py-2">
        <div class="row">
          <p>推荐展示值</p>
          <div
            v-for="(recommend, recommendIndex) in item.cacheSearchList"
            :key="recommendIndex"
          >
            {{ recommend.name }}({{ recommend.sn }})
          </div>
        </div>
      </div>
    </template>
    <!-- 下拉题 -->
    <template v-else-if="item.type === 'select'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
        </div>
        <div class="row">
          <span>下拉内容来源：</span>
          <el-select v-model="item.config.source">
            <el-option label="知识图谱" value="graph"></el-option>
          </el-select>
        </div>
        <div class="row">
          <span>下拉内容对应的知识图谱节点的标签名称：</span>
          <el-input
            v-model="item.config.sourceTag"
            placeholder="请输入标签名称"
            class="w-fit"
          ></el-input>
        </div>
        <div class="row">
          <el-checkbox v-model="item.config.isAppendNull"
            >允许保存下拉框内没有的内容</el-checkbox
          >
          <el-checkbox v-model="item.config.isMultiple">允许多填</el-checkbox>
        </div>
        <div v-if="item.belongIndicator" class="mb-4 f-s-14">
          所属指标：{{ item.belongIndicator ? item.belongIndicator.name : "" }}
        </div>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left py-2">
        <div class="row">
          <p>推荐展示值</p>
          <div
            v-for="(recommend, recommendIndex) in item.cacheSearchList"
            :key="recommendIndex"
          >
            {{ recommend.name }}({{ recommend.sn }})
          </div>
        </div>
      </div>
    </template>
    <!-- 组合题 -->
    <template v-else-if="item.type === 'group'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
          <el-checkbox v-model="item.config.required">必填</el-checkbox>
          <el-checkbox v-model="item.isRepeat">允许多填</el-checkbox>
        </div>
        <div
          v-for="(sub, subIdx) in item.children"
          :key="subIdx"
          class="template-question-child"
        >
          <CircleClose
            class="el-icon-error w-6 h-6 template-question-child-close"
            @click="item.children.splice(subIdx, 1)"
          />
          <TempQuestionItem
            v-model:info="item.children[subIdx]"
            :indicator="item.belongIndicator"
            :edit="item.edit"
            :is-child="true"
            @text="emitText"
          />
        </div>
        <div>
          <el-select v-model="state.childType">
            <el-option
              v-for="(type, index) in simpleTypes"
              :key="index"
              :label="type.name"
              :value="type.type"
            ></el-option>
          </el-select>
          <el-button type="primary" link class="ml-4" @click="addGroupChild"
            >+ 新增问题</el-button
          >
        </div>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left py-2">
        <div
          v-for="(sub, subIdx) in item.children"
          :key="subIdx"
          class="template-question-child"
        >
          <TempQuestionItem
            :info.sync="item.children[subIdx]"
            :indicator="item.belongIndicator"
            :show-indicator="true"
            :edit="item.edit"
            :is-child="true"
            :target-prefix="targetPrefix"
            @text="emitText"
          />
        </div>
      </div>
    </template>
    <template v-else-if="item.type === 'combination'">
      <!-- 编辑状态 -->
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2">{{ typeLabel[item.type] }}</span>
        </div>

        <div>
          <div v-for="(sub, subIdx) in item.children" :key="subIdx">
            <TempQuestionItem
              :info.sync="item.children[subIdx]"
              :is-child="true"
              :indicator="item.belongIndicator"
              :edit="item.edit"
              @text="emitText"
            />
          </div>
        </div>
      </template>
      <!-- 常规显示 -->
      <div v-else class="text-left py-2">
        <div v-for="(sub, subIdx) in item.children" :key="subIdx">
          <TempQuestionItem
            :info.sync="item.children[subIdx]"
            :indicator="item.belongIndicator"
            :show-indicator="true"
            :edit="item.edit"
            :target-prefix="targetPrefix"
            @text="emitText"
          />
        </div>
      </div>
    </template>
    <template v-else-if="item.type === 'upload'">
      <template v-if="edit || item.edit">
        <div class="row">
          <span class="mr-2 ml-4">文件类型</span>
          <el-select v-model="item.config.fileType">
            <el-option label="所有文件" :value="''"></el-option>
            <el-option label="图片文件" value="image"></el-option>
          </el-select>
        </div>
        <div class="row">
          <span class="mr-2 ml-4">文件大小</span>
          <el-input
            v-model="item.config.fileSizeLimit"
            type="number"
            placeholder="0表示不限制"
            class="w-64"
            :max="50"
            :min="0"
          >
            <template #append>Mb</template>
          </el-input>
        </div>
      </template>
      <template v-else></template>
    </template>
    <ComponentRegex
      v-model:visible="state.regexVisible"
      ref="regexRef"
      @success="onRegexSave"
    />
  </div>
</template>
<script setup>
import { defineOptions, onMounted, computed, reactive, ref } from "vue";
import draggable from "vuedraggable";
import { randomString, request } from "@/utils";
import {
  simpleTypes,
  typeLabelByKey as typeLabel
} from "@/enumerated/questionEnum";

import { copyTextToClipboard } from "@pureadmin/utils";
import { Rank, Close, CircleClose } from "@element-plus/icons-vue";
import ComponentRegex from "@/components/Question/Regex.vue";
defineOptions({
  name: "TempQuestionItem"
});
const props = defineProps([
  "info",
  "id",
  "edit",
  "showIndicator",
  "isChild",
  "hideSurveyTitle",
  "indicator",
  "targetPrefix"
]);
const emits = defineEmits(["update:info", "text"]);
const item = computed({
  get() {
    const info = props.info;
    if (props.showIndicator && props.indicator) {
      info.number = `${props.indicator.var}["${info.attr}"]`;
    } else if (props.showIndicator && info.belongIndicator) {
      info.number = `${info.belongIndicator.var}["${info.attr}"]`;
    }
    return info;
  },
  set(v) {
    emits("update:info", v);
  }
});

const state = reactive({
  regexVisible: false,
  isParentRegex: false,
  subIndex: -1,
  childType: "",
  tags: []
});
const getTags = async (params = {}) => {
  // const { data } = await request.get("/mechanism/systemTag/list", { params });
  // state.tags = data.list;
  // return data.list;
  return [];
};
const searchChange = () => {
  item.value.cacheSearchList = item.value.recommend
    .map(id => {
      return item.value.searchList.find(v => v.id == id);
    })
    .filter(v => v);
};
const searchDiseaseOrMedicine = (key = "") => {
  const urls = {
    disease: "/api/disease/list",
    medicine: "/api/medicine/list"
  };
  const url = urls[props.info.type];
  url &&
    request
      .get(url, {
        params: { key }
      })
      .then(({ data }) => {
        item.value.searchList = data.list;
      });
};
const regexRef = ref();
const setRegex = (subItem, subIndex, flag = false) => {
  console.log(regexRef.value);
  regexRef.value.setTpl(subItem.regexRule);
  if (!flag) {
    state.subIdx = subIndex;
  }
  state.regexVisible = true;
  state.isParentRegex = flag;
};
const onRegexSave = data => {
  console.log(data);
  console.log(state.isParentRegex);
  if (state.isParentRegex) {
    item.value.config.regexRuleName = data.name;
    item.value.config.regexRule = data;
  } else {
    if (item.value.choices[state.subIdx]) {
      item.value.choices[state.subIdx].regexRuleName = data.name;
      item.value.choices[state.subIdx].regexRule = data;
    }
  }
};
const emitText = e => {
  if (!e) return;
  let rText = props.targetPrefix || "tar";
  let str = e.replace(/target/, rText).replace(/\./, "");
  console.log(rText, str);
  copyTextToClipboard(str);
  emits("text", str);
};
const addGroupChild = () => {
  let line = {
    type: state.childType,
    edit: true,
    title: "",
    value: "",
    attr: randomString(5),
    sn: "",
    remark: "",
    combination: "",
    isRepeat: false,
    config: {
      desc: "",
      rule: "",
      type: "",
      regexRule: "",
      regexRuleName: ""
    },
    choices: [],
    children: []
  };
  switch (line.type) {
    case "radio":
      line.choices = [
        {
          label: "选项1",
          isInput: false,
          extra: "",
          inputPlaceholder: "",
          regexRule: "",
          regexRuleName: "",
          attr: randomString(6)
        },
        {
          label: "选项2",
          isInput: false,
          extra: "",
          inputPlaceholder: "",
          regexRule: "",
          regexRuleName: "",
          attr: randomString(6)
        }
      ];
      break;
    case "checkbox":
      line.choices = [
        {
          label: "选项1",
          mutuallyExclusive: false,
          isInput: false,
          extra: "",
          inputPlaceholder: "",
          regexRule: "",
          regexRuleName: "",
          attr: randomString(6)
        },
        {
          label: "选项2",
          mutuallyExclusive: false,
          isInput: false,
          extra: "",
          inputPlaceholder: "",
          regexRule: "",
          regexRuleName: "",
          attr: randomString(6)
        }
      ];
      line.isMultiple = true;
      break;
    case "rating_scale":
      line.min = 1;
      line.max = 5;
      line.choices = [
        {
          label: "不满意"
        },
        {
          label: "非常满意"
        }
      ];
      break;
    case "rating":
      line.choices = [
        {
          label: "选项1",
          score: 0
        },
        {
          label: "选项2",
          score: 0
        }
      ];
      line.isMultiple = false;
      break;
    case "date":
      break;
    case "disease":
    case "medicine":
      line.config.isInput = false;
      line.config.attr = "extra";
      line.recommend = [];
      line.searchList = [];
      line.cacheSearchList = [];
      line.systemTagIds = [];
      break;
    case "matrix_checkbox":
      line.columns = [
        {
          label: "选项1",
          mutuallyExclusive: false
        },
        {
          label: "选项2",
          mutuallyExclusive: false
        }
      ];
      line.rows = [
        {
          label: "问题1"
        },
        {
          label: "问题2"
        }
      ];
      line.matrix = [];
      line.isMultiple = false;
      break;
  }
  item.value.children.push(line);
};
const updateMatrix = () => {
  props.info.matrix = Array(props.info.rows.length)
    .fill(0)
    .map(() => Array(props.info.columns.length).fill(false));
};
onMounted(() => {
  if (
    props.info &&
    (!props.info.matrix ||
      !props.info.matrix.length ||
      props.info.matrix.flat().length !=
        props.info.rows.length * props.info.columns.length) &&
    props.info.type === "matrix_checkbox"
  ) {
    props.info.matrix = Array(props.info.rows.length)
      .fill(0)
      .map(() => Array(props.info.columns.length).fill(false));
  } else if (props.info.type === "group") {
    props.info.children.forEach(v => {
      v.edit = props.info.edit;
    });
  }
  if (props.edit || props.info.edit) {
    searchDiseaseOrMedicine();
    getTags();
  }
});
</script>
<style lang="scss">
.q-attr {
  cursor: copy;
  user-select: none;
  margin-left: 10px;
}
.cursor-copy {
  cursor: copy;
}
.show-indicator {
  .survey-title,
  .sub-title {
    &:before {
      display: none;
      //   cursor: copy;
      //   display: inline-block;
      //   margin-bottom: 6px;
    }
    span {
      display: inline-block;
      margin: 5px auto;
    }
    &.hide {
      &:before {
        display: none;
      }
    }
  }
  .survey-title {
    // left: -60px;
    cursor: copy;

    &:before {
      // font-size: 14px !important;
      // padding: 6px 15px !important;
      // left: 0 !important;
      // top: -3em !important;
      display: none;
    }
  }

  .el-checkbox__input.is-disabled + span.el-checkbox__label {
    cursor: copy;
  }
}
.template-question-child {
  position: relative;
  background: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
  padding-top: 10px;
  .template-question-child-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
  }
}
.hide-survey-title {
  .survey-title {
    &:before {
      display: none;
    }
  }
}
</style>
