<template>
  <el-form :inline="true" ref="form" label-width="0px">
    <el-form-item label=" ">
      <div
        :style="{
          'padding-top':
            [QUESTION_TYPE_CHECKBOX, QUESTION_TYPE_RATING].includes(
              item?.type
            ) &&
            (child || !item.isAnswered)
              ? '25px'
              : '',
          'min-width': [
            QUESTION_TYPE_RADIO,
            QUESTION_TYPE_CHECKBOX,
            QUESTION_TYPE_RATING
          ].includes(item?.type)
            ? '200px'
            : ''
        }"
      >
        <p v-if="item?.type !== QUESTION_TYPE_TEXT" class="survey-title">
          {{
            item?.number && item?.number?.includes("target") ? "" : item?.number
          }}
          {{ item?.title }}
        </p>
        <div
          v-else-if="item.isHtml"
          class="survey-title"
          v-html="item.title"
        ></div>
        <p v-else class="survey-title">{{ item.title }}</p>
        <!-- 临时选项 -->
        <template v-if="item?.type === QUESTION_TYPE_TEMP_CHECK">
          <!-- 常规显示 -->
          <div class="text-left">
            <p class="survey-desc">{{ item.config.desc }}</p>
            <template v-if="child || !item.isAnswered">
              <transition name="slide">
                <div class="text-right padding-top-10">
                  <Button
                    color="#4B72F6"
                    class="i-h-34px confirm-input-btn"
                    @click="check(item, true)"
                    >是</Button
                  >

                  <Button
                    class="i-h-34px confirm-input-btn"
                    @click="check(item, false)"
                    >否</Button
                  >
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 单选 -->
        <template v-else-if="item?.type === QUESTION_TYPE_RADIO">
          <!-- 常规显示 -->
          <div class="text-left">
            <p class="survey-desc">{{ item.config.desc }}</p>
            <template v-if="child || !item.isAnswered">
              <transition name="slide">
                <div>
                  <div
                    v-if="
                      item.title.includes('性别') &&
                      /男|女/.test(item.choices.map(v => v.label).join(''))
                    "
                    class="gender-select"
                  >
                    <div v-for="(sub, idx) in item.choices" :key="idx">
                      <div
                        v-if="!hideList.includes(sub.number)"
                        :data-topic="item.number"
                        class="gender-item"
                        :class="{
                          active: item.value === idx
                        }"
                        :disabled="!child && item.isAnswered"
                        :value="idx"
                        @click="reply(item, sub, idx)"
                      >
                        <img
                          v-if="sub.label.includes('男')"
                          :src="iconMan"
                          alt=""
                          mode="cover"
                        />
                        <img
                          v-if="sub.label.includes('女')"
                          :src="iconWoman"
                          alt=""
                          mode="cover"
                        />
                        <span>{{ sub.label }}</span>
                      </div>
                    </div>
                  </div>
                  <template v-else>
                    <div v-for="(sub, idx) in item.choices" :key="idx">
                      <div
                        v-if="!hideList.includes(sub.number)"
                        :data-topic="item.number"
                        class="sub-title mt-2"
                      >
                        <div
                          class="text-left answer-btn"
                          :class="{
                            active: item.value === idx
                          }"
                          :disabled="(!child && item.isAnswered) || disable"
                          :value="idx"
                          @click="reply(item, sub, idx)"
                        >
                          {{ sub.label }}
                        </div>
                      </div>
                      <!-- <Field
                      v-if="sub.isInput && item.value === idx"
                      v-model="sub.extra"
                      type="textarea"
                      :disabled="disable"
                      autosize
                      class="border-1 border-radius-5 margin-top-10"
                      placeholder="请输入"
                    /> -->

                      <el-input
                        v-if="sub.isInput && item.value === idx"
                        v-model="sub.extra"
                        class="margin-top-10"
                        :disabled="disable"
                        :autosize="{ minRows: 3, maxRows: 5 }"
                        type="textarea"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                  </template>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 多选 -->
        <template v-else-if="item?.type === QUESTION_TYPE_CHECKBOX">
          <!-- 常规显示 -->
          <div class="text-left">
            <!-- v-if="!child || !item.isAnswered" -->
            <div>
              <div>
                <p class="survey-desc">
                  <!-- {{ item.config && item.config.desc }} -->
                </p>
                <span class="survey-tag">可多选</span>
                <div v-for="(sub, idx) in item.choices" :key="idx">
                  <div
                    v-if="!hideList.includes(sub.number)"
                    :key="idx"
                    :data-topic="item.number"
                    class="mt-2 sub-title"
                  >
                    <div
                      class="text-left answer-btn"
                      :class="{
                        active: item.value && item.value.includes(idx)
                      }"
                      :disabled="!child && item.isAnswered"
                      :value="idx"
                      @click="reply(item, sub, idx, true)"
                    >
                      {{ sub.label }}
                    </div>
                    <el-input
                      v-if="
                        sub.isInput && item.value && item.value.includes(idx)
                      "
                      v-model="sub.extra"
                      class="margin-top-10"
                      :disabled="disable"
                      :autosize="{ minRows: 3, maxRows: 5 }"
                      type="textarea"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 单行文本题 -->
        <template v-else-if="item?.type === QUESTION_TYPE_INPUT">
          <!-- 常规显示 -->
          <div class="text-left">
            <template v-if="child || !item.isAnswered">
              <transition name="slide">
                <div>
                  <p class="survey-desc">{{ item.config.desc }}</p>
                  <!-- v-if="item.value !== null && item.value !== undefined" -->
                  <div class="margin-bottom-20 margin-top-10 flex-center-v">
                    <!-- <Field
                    v-model="item.value"
                    placeholder="请输入"
                    :type="inputType(item.config.rule)"
                    autosize
                    :style="{
                      width: !child ? '150px' : '100%'
                    }"
                    class="w-150px margin-right-10"
                    @keyup.enter="reply(item)"
                    /> -->
                    <el-input
                      v-model="item.value"
                      :type="inputType(item.config.rule)"
                      :style="{
                        width: !child ? '150px' : '100%'
                      }"
                      clearable
                      class="w-150px margin-right-10"
                      @keyup.enter="reply(item)"
                      :disabled="disable"
                      placeholder="请输入"
                    >
                    </el-input>
                    <!-- <input
                    v-model="item.value"
                    placeholder="请输入"
                    class="w-150px margin-right-10 confirm-input"
                    :style="{
                      width: !child ? '150px' : '100%'
                    }"
                    :disabled="!child && item.isAnswered"
                    :type="inputType(item.config.rule)"
                    @keyup.enter="reply(item)"
                    @blur="inputBlur()"
                  /> -->
                    <!-- <Button
                    v-if="!child"
                    :disabled="item.isAnswered"
                    color="#4B72F6"
                    class="i-h-34px confirm-input-btn"
                    @click="reply(item)"
                  >确定222</Button> -->
                  </div>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 量表题 -->
        <template v-else-if="item?.type === QUESTION_TYPE_RATING_SCALE">
          <!-- 常规显示 -->
          <div class="text-left">
            <template v-if="child || !item?.isAnswered">
              <transition name="slide">
                <div>
                  <p class="survey-desc">{{ item.config.desc }}</p>
                  <div class="row">
                    <div class="between margin-bottom-10">
                      <span class="margin-right-20">{{
                        item.choices[0].label
                      }}</span>
                      <span class="margin-left-10">{{
                        item.choices[1].label
                      }}</span>
                    </div>

                    <Button
                      v-for="(sub, idx) in item.rating"
                      :key="idx"
                      :disabled="!child && item?.isAnswered"
                      :style="{
                        marginLeft: idx ? '-1px' : ''
                      }"
                      :type="item.value === sub ? 'primary' : 'default'"
                      :value="idx"
                      @click="reply(item, sub, idx)"
                      >{{ sub }}</Button
                    >
                  </div>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 评分题 -->
        <template v-else-if="item?.type === QUESTION_TYPE_RATING">
          <!-- 常规显示 -->
          <div class="text-left">
            <template v-if="child || !item?.isAnswered">
              <transition name="slide">
                <div>
                  <p class="survey-desc">{{ item.config.desc }}</p>
                  <span class="survey-tag">可多选</span>
                  <div v-for="(sub, idx) in item.choices" :key="idx">
                    <div
                      v-if="!hideList.includes(sub.number)"
                      :key="idx"
                      :data-topic="item.number"
                      class="mt-2 sub-title"
                    >
                      <template v-if="item?.isMultiple">
                        <div
                          class="text-left answer-btn"
                          :class="{
                            active: item.value && item.value.includes(idx)
                          }"
                          :disabled="!child && item?.isAnswered"
                          :value="idx"
                          @click="reply(item, sub, idx, true)"
                        >
                          {{ sub.label }}
                        </div>
                      </template>
                      <template v-else>
                        <div
                          class="text-left answer-btn"
                          :class="{
                            active: item.value && item.value.includes(idx)
                          }"
                          :disabled="!child && item?.isAnswered"
                          :value="idx"
                          @click="reply(item, sub, idx)"
                        >
                          {{ sub.label }}
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 时间题 -->
        <template v-else-if="item?.type === QUESTION_TYPE_DATE">
          <!-- 常规显示 -->
          <div class="text-left">
            <template v-if="child || !item?.isAnswered">
              <transition name="slide">
                <div>
                  <p class="survey-desc">{{ item.config.desc }}</p>

                  <EditDatetimeCell
                    :disable="disable"
                    v-model:value="item.value"
                    :type="item.config.type"
                    :label="item.title"
                    :placeholder="item.config.desc"
                  />
                  <div class="padding-top-15 text-right">
                    <!-- <Button
                    v-if="!child"
                    :disabled="!child && item.isAnswered"
                    color="#4B72F6"
                    class="i-h-34px confirm-input-btn"
                    @click="reply(item)"
                  >确定333</Button> -->
                  </div>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 矩阵矢量题 -->
        <template v-else-if="item?.type === QUESTION_TYPE_MATRIX">
          <!-- 常规显示 -->
          <div class="text-left">
            <template v-if="child || !item?.isAnswered">
              <transition name="slide">
                <div>
                  <p class="survey-desc">{{ item.config.desc }}</p>
                  <div class="survey-matrix-container">
                    <table class="survey-matrix">
                      <tr>
                        <th></th>
                        <th
                          v-for="(subTh, subThIdx) in item.columns"
                          :key="subThIdx"
                        >
                          {{ subTh.label }}
                        </th>
                      </tr>
                      <tr v-for="(row, rowIdx) in item.rows" :key="rowIdx">
                        <td>{{ row.label }}</td>
                        <td
                          v-for="(col, colIdx) in item.columns"
                          :key="colIdx"
                          @click="checkMatrix(rowIdx, colIdx)"
                        >
                          <div class="flex-center">
                            <!-- <Icon :name="item.matrix[rowIdx][colIdx] ? 'checked' : 'circle'" color="#4B72F6" size="20" /> -->
                            <!-- <span >选中</span>
                            <span v-else>未选中</span> -->
                            <el-icon
                              :size="20"
                              color="#4b72f6"
                              v-if="item.matrix[rowIdx][colIdx]"
                            >
                              <CircleCheckFilled />
                            </el-icon>
                            <el-icon :size="20" v-else>
                              <CircleCheck />
                            </el-icon>
                            <!-- <i
                              v-if="item.matrix[rowIdx][colIdx]"
                              class="el-icon-circle-check"
                              style="color: #409eff"
                            ></i>
                            <i v-else class="el-icon-circle-check"></i> -->
                          </div>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div class="padding-top-15 text-right">
                    <!-- <Button
                    v-if="!child"
                    :disabled="!child && item.isAnswered"
                    color="#4B72F6"
                    class="i-h-34px confirm-input-btn"
                    @click="reply(item)"
                  >确定444</Button> -->
                  </div>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <!-- 组合题 -->
        <template v-else-if="item?.type === QUESTION_TYPE_COMBINATION">
          <!-- 常规显示 -->
          <div class="text-left">
            <template v-if="child || !item?.isAnswered">
              <transition name="slide">
                <div>
                  <p class="survey-desc">{{ item.config.desc }}</p>
                  <div
                    v-for="(sub, subIdx) in item.children"
                    :key="subIdx"
                    class="padding-top-15"
                  >
                    <QuestionItem
                      :info="sub"
                      :child="true"
                      class="w-100"
                      @skip="skip"
                      @back="back"
                    />
                  </div>
                  <div class="padding-top-15 text-right">
                    <!-- <Button
                    :disabled="!child && item.isAnswered"
                    color="#4B72F6"
                    class="i-h-34px confirm-input-btn"
                    @click="reply(item)"
                  >确定555</Button> -->
                  </div>
                </div>
              </transition>
            </template>
          </div>
        </template>
        <template v-if="!child">
          <!-- <p
          v-if="!item.isAnswered && !item.config.required"
          class="link text-center"
          @click="skip(item)"
        >
          跳过该题
        </p> -->
          <!-- <p
          v-if="!item.isAnswered && item.isRepeat && !item.noLast"
          class="link text-center"
          @click="repeat(item)"
        >
          <Icon name="plus" />
          新增
        </p> -->
          <div v-if="!item?.isAnswered && item?.isMultiple" class="flex-center">
            <!-- <Button
            type="primary" round
            class="link text-center confirm-btn"
            size="small"
            @click="reply(item, null, undefined)"
          >确定111<span v-if="item.value.length">({{ item.value.length }}个)</span>  </Button> -->
          </div>
          <!-- <p
          v-if="repeatAnswer"
          class="link text-center"
          @click="back(item)"
        >
          重答该题
        </p> -->
        </template>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
// import { Button, Icon, Notify, Field, Image, FieldType } from 'vant'
// import { formatAge, inputBlur } from '@/utils/index';
import EditDatetimeCell from "./EditDatetimeCell.vue";
import { CircleCheck, CircleCheckFilled } from "@element-plus/icons-vue";
import { Tools } from "@element-plus/icons-vue";
import iconMan from "@/assets/icon-man.png";
import iconWoman from "@/assets/icon-woman.png";

// import ExtendsQuestionItem from './ExtendsQuestionItem.vue';
// import M from "minimatch";

export default {
  name: "QuestionItem",
  data() {
    return {
      iconMan,
      iconWoman,
      QUESTION_TYPE_TEMP_CHECK: "temp_check", // 单选 => Q1A1
      QUESTION_TYPE_INPUT: "input", // 输入 => Q1
      QUESTION_TYPE_TEXT: "text", // 输入 => Q1
      QUESTION_TYPE_CHECKBOX: "checkbox", // 多选 => Q1A1
      QUESTION_TYPE_RADIO: "radio", // 单选 => Q1A1
      QUESTION_TYPE_RATING_SCALE: "rating_scale", // 量表(一排的radio选择指定) => Q1
      QUESTION_TYPE_RATING: "rating", // 评分题(选项后面有分值) => Q1A1
      QUESTION_TYPE_DATE: "date", // 时间题
      QUESTION_TYPE_MATRIX: "matrix_checkbox", // 矢量题
      QUESTION_TYPE_COMBINATION: "group", // 组合题
      replyLock: false
    };
  },
  components: {
    // ExtendsQuestionItem,
    EditDatetimeCell,
    Tools,
    CircleCheck,
    CircleCheckFilled
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    hideList: {
      type: Array,
      default: () => []
    },
    repeatAnswer: {
      type: Boolean,
      default: false
    },
    child: {
      type: Boolean,
      default: false
    },
    disable: {
      type: Boolean,
      default: false
    },
    answerResult: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    item: {
      get() {
        return this.initData();
      },
      set(value) {
        this.$emit("update:info", value);
      }
    }
  },
  watch: {
    info: {
      handler(n, o) {},
      deep: true
    }
  },
  mounted() {
    // this.init();
  },
  methods: {
    initData() {
      let info = this.info;
      if (!this.answerResult) return info;
      if (Object.keys(this.answerResult).includes(info.sn)) {
        if (info.type == this.QUESTION_TYPE_COMBINATION) {
          let groupAnswers = this.answerResult[info.sn].groupAnswers;
          info.children = info.children.map(v => {
            let test = groupAnswers
              .find(vv => vv.find(vvv => v.sn === vvv.questionNo))
              .find(vvvv => v.sn == vvvv.questionNo);
            return this.formatAnswer(v, test);
          });
          console.log("多选题", info);
        }
        return this.formatAnswer(info, this.answerResult[info.sn]);
      } else {
        return this.info;
      }
    },

    formatAnswer(item, currentAnswer) {
      let info = item;
      if (!this.answerResult) return info;
      // let currentAnswer = answerResult[info.sn];

      // 单选
      if (info.type == this.QUESTION_TYPE_RADIO) {
        info.value = info.choices.findIndex(
          v => v.attr == currentAnswer?.answer?.key
        );
      } else if (info.type == this.QUESTION_TYPE_MATRIX) {
        let row = info.rows;
        let columns = info.columns;
        let matrix = [];

        for (let i = 0; i < row.length; i++) {
          let colArr = [];
          for (let j = 0; j < columns.length; j++) {
            colArr.push(false);
            currentAnswer.matrixAnswers.map(v => {
              if (v.xKey == row[i]["attr"] && v.yKey == columns[j]["attr"]) {
                console.log(i, j);
                colArr[j] = true;
              }
            });
          }
          matrix.push(colArr);
        }
        info.matrix = matrix;
      } else if (info.type == this.QUESTION_TYPE_CHECKBOX) {
        let checkBoxValue = currentAnswer.checkboxAnswers.map(v => {
          return info.choices.findIndex(vv => vv.attr == v.key);
        });
        info.value = checkBoxValue;
      } else if (info.type == this.QUESTION_TYPE_INPUT) {
        info.value = currentAnswer.inputAnswers.value[0];
      } else {
        info.value = currentAnswer?.answer?.value;
      }
      return info;
    },
    init() {
      console.log("初始化成功");
      // if (this.item?.type === this.QUESTION_TYPE_MATRIX) {
      //   console.log("测试", this.item);

      //   this.item.matrix = Array(this.item.rows.length)
      //     .fill(0)
      //     .map(() => Array(this.item.columns.length).fill(false))
      //     .map((rows, rowIdx) => {
      //       rows = rows.map((col, colIdx) => {
      //         if (this.item.value && Array.isArray(this.item.value)) {
      //           return this.item.value.includes(
      //             this.item.rows[rowIdx].label + this.item.columns[colIdx].label
      //           );
      //         }
      //         return col;
      //       });
      //       return rows;
      //     });
      // }
      // console.log(this.item.matrix);
    },

    inputType(rule) {
      switch (rule) {
        case "number":
          return rule;
        case "phone":
          return "tel";
        default:
          return "text";
      }
    },
    // 矩阵题选择
    checkMatrix(rowIdx, colIdx) {
      if (this.disable) true;
      console.log(rowIdx, colIdx);
      // console.log(this.item);
      // console.log(this.item.matrix)
      let curState = this.item.matrix[rowIdx][colIdx];
      let isMultiple = this.item.isMultiple;
      let mutuallyExclusive = this.item.columns[colIdx].mutuallyExclusive;
      // 单选
      if (!isMultiple) {
        this.item.matrix[rowIdx].forEach((v, k) => {
          this.item.matrix[rowIdx][k] = k === colIdx ? !curState : false;
          // this.$set(
          //   this.item.matrix[rowIdx],
          //   k,
          //   k === colIdx ? !curState : false
          // );
        });
      } else {
        // 多选
        // 该列有互斥
        if (mutuallyExclusive) {
          if (curState) {
            this.item.matrix[rowIdx][colIdx] = !curState;
            // this.$set(this.item.matrix[rowIdx], colIdx, !curState);
          } else {
            this.item.matrix[rowIdx].forEach((v, k) => {
              item.value.matrix[rowIdx][k] = k === colIdx;
              // this.$set(this.item.matrix[rowIdx], k, k === colIdx);
            });
          }
        } else {
          this.item.matrix[rowIdx].forEach((v, k) => {
            if (this.item.columns[k].mutuallyExclusive) {
              this.item.matrix[rowIdx][k] = false;
              // this.$set(this.item.matrix[rowIdx], k, false);
            }
          });
          this.item.matrix[rowIdx][colIdx] = !this.item.matrix[rowIdx][colIdx];
          // this.$set(
          //   this.item.matrix[rowIdx],
          //   colIdx,
          //   !this.item.matrix[rowIdx][colIdx]
          // );
        }
      }
      console.log(this.item.matrix);
    },
    skip(item) {
      this.item = null;
      this.$emit("skip", item);
    },
    back(item) {
      this.$emit("back", item);
    },
    check(item, flag) {
      if (this.disable) return;
      this.$emit("check", item, flag);
    },
    checkReply(item) {
      if (item?.type === this.QUESTION_TYPE_MATRIX) {
        return true;
      } else if (item["choices"].length) {
        if (
          (!item.value && item.value !== 0) ||
          (Array.isArray(item.value) && !item.value.length)
        ) {
          Notify({ type: "danger", message: "请选择" });
          replyLock.value = false;
          return false;
        }
      } else {
        if (!item.value && item.value !== 0) {
          // Notify(item.value)
          Notify({
            type: "danger",
            message: `请${
              item?.type === this.QUESTION_TYPE_DATE ? "选择" : "填写正确内容"
            }后提交`
          });
          replyLock.value = false;
          return false;
        }
      }
      return true;
    },
    reply(item, sub, idx, skip = false) {
      if (this.disable) return;
      if (this.replyLock) return;
      console.log("执行reply", item, sub, skip);

      this.replyLock = true;
      let text = "";
      if (item?.type === this.QUESTION_TYPE_INPUT) {
        if (!this.checkReply(item)) return;
        if (item.config.rule) {
          let reg = null;
          let errMsg = "";
          switch (item.config.rule) {
            case "number":
              reg = /^\d+(\d+|\.\d+)?$/;
              errMsg = "请输入数字";
              break;
            case "phone":
              reg = /^(?:(?:\+|00)86)?1\d{10}$/;
              errMsg = "请输入手机号码";
              break;
          }
          if (reg && !new RegExp(reg).test(item.value)) {
            Notify({ type: "danger", message: errMsg });
            this.replyLock = false;
            return;
          }
        }
        text = item.value;
      } else if (
        item?.type === this.QUESTION_TYPE_CHECKBOX ||
        (item?.type !== this.QUESTION_TYPE_MATRIX && item.isMultiple)
      ) {
        if (skip) {
          // let temp = [] as Array<number>
          if (
            typeof item.value === "string" ||
            (!item.value && item.value !== 0)
          ) {
            item.value = [idx];
          } else {
            if (sub.mutuallyExclusive) {
              item.value = [idx];
            } else {
              item.value = item.value.filter(
                v => !item.choices[v].mutuallyExclusive
              );
              if (item.value.includes(idx)) {
                item.value.splice(item.value.indexOf(idx), 1);
              } else {
                item.value = [...new Set([...item.value, idx])];
              }
            }
          }
          this.replyLock = false;
          return;
        } else {
          if (item.isMultiple) {
            if (!this.checkReply(item)) return;
            if (Array.isArray(item.value)) {
              text = [];
              item.value.map(v => {
                text.push(item.choices[v].label);
              });
              text = text.join();
            }
          } else {
            text = idx;
          }
        }
      } else if (item?.type === this.QUESTION_TYPE_COMBINATION) {
        let val = [];
        let t = [];
        for (const child of item.children) {
          console.log("组合题执行到这里来了", !this.checkReply(child));

          if (!this.checkReply(child)) return;
          if (child.type === this.QUESTION_TYPE_MATRIX) {
            let res = [];
            child.matrix.forEach((cols, k1) => {
              cols.forEach((c, k2) => {
                c &&
                  res.push(child.rows[k1].label + "" + child.columns[k2].label);
              });
            });
            if (res.length) {
              t.push(res.join(","));
              val.push(res);
            } else {
              t.push("无");
              val.push(["无"]);
            }
          } else if (child["choices"].length) {
            t.push(
              Array.isArray(child.value)
                ? child.value.map(c => child["choices"][c].label).join(",")
                : child["choices"][child.value].label
            );
            val.push(child.value);
          } else {
            t.push(child.value);
            val.push(child.value);
          }
        }
        text = t.join(",");
      } else if (item?.type === this.QUESTION_TYPE_RATING_SCALE) {
        item.value = sub;
        text = sub;
      } else if (item?.type === this.QUESTION_TYPE_DATE) {
        if (!this.checkReply(item)) return;
        item.value = item.value || "";
        text = item.config.rule === "age" ? formatAge(item.value) : item.value;
      } else if (item?.type === this.QUESTION_TYPE_MATRIX) {
        let res = [];
        item.matrix.forEach((cols, k1) => {
          cols.forEach((c, k2) => {
            c && res.push(item.rows[k1].label + "" + item.columns[k2].label);
          });
        });
        item.value = res && res.length ? res : ["无"];
        text = res && res.length ? res.join(",") : "无";
      } else {
        console.log(`执行到else来了 ${item?.type}`);

        item.value = idx;
        text = item.choices[idx].label;
      }
      item.isAnswered = false;
      this.replyLock = false;
      this.$emit("reply", item, text);
    }
  }
};
// const emits = defineEmits(['update:info', 'skip', 'back', 'check', 'reply' ])
// console.log(info);
</script>

<style lang="scss" scoped>
.survey-matrix-container {
  overflow-x: auto;
  padding: 10px 0;
  .survey-matrix {
    font-size: 12px;
    border-collapse: collapse;
    margin: 0 auto;
    min-width: 100%;
    th,
    td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }
    th {
      white-space: nowrap;
    }
    tr {
      td:first-of-type {
        font-weight: blod;
        white-space: nowrap;
      }
    }
  }
}
.confirm-input-btn {
  cursor: pointer;
  &:not(:last-of-type) {
    margin-right: 10px;
  }
}
</style>
