<script setup lang="ts">
import { useTemplateRef, type Directive } from 'vue';

const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');

// 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
// 类型 AI 生成 切勿盲目相信，以实际为准
const { element } = defineProps<{ element: MatrixSurveyQuestion }>();

/**
 * input 类型映射，里面自行处理逻辑返回对应类型
 * // remark: 填空内容 question_type 8
 * // remark: 单选打分矩阵 question_type 9
 * // remark: 多选矩阵内容 question_type 10
 * @default 'radio'
 */
const tableInputTypeMapping = (/** regx?: any */) => {
  switch (element.question_type) {
    case 8:
      return 'text';
    case 9:
      return 'radio';
    case 10:
      return 'checkbox';
    default:
      return 'radio';
  }
};

/**
 * 自定义指令，用于在元素挂载后自动获取焦点
 */
const vFocus: Directive = {
  mounted(el: HTMLInputElement) {
    el.focus();
  }
};
</script>

<template>
  <van-cell>
    <!-- 使用 title 插槽来自定义标题 -->
    <template #title>
      <span>
        <span v-if="element?.config?.is_required">*</span>
        <span v-html="element.title"></span>
        <span v-html="element.stem"></span>
      </span>
    </template>

    <!-- 使用 label 插槽来自定义标题 -->
    <template #label>
      <table class="martrix-table">
        <thead>
          <tr>
            <!-- 第一行内容为空 -->
            <th></th>
            <!-- 第二行内容开始填充 -->
            <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
              <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
              <input
                v-if="col.editor"
                v-model="col.option"
                v-focus
                type="text"
                @focusout="col.editor = false"
              />
              <span v-else @click="col.editor = true" v-html="col.option"></span>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in element.options[0]" :key="row.option">
            <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
            <td>
              <input
                v-if="row.editor"
                v-model="row.option"
                v-focus
                type="text"
                @focusout="row.editor = false"
              />
              <span v-else @click="row.editor = true" v-html="row.option"></span>
            </td>
            <td v-for="col in element.options[1]" :key="col.option">
              <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
              <input :id="col.option" :type="tableInputTypeMapping()" :name="row.option" />
            </td>
          </tr>
        </tbody>
      </table>
    </template>
  </van-cell>
</template>
<style scoped lang="scss">
.martrix-table {
  width: 100%;
  border-collapse: collapse;
  color: black;

  th,
  td {
    padding: 8px;
    border: 1px solid #ddd;
    border-width: 0 0 1px;
    text-align: left;
  }
}

input[type='text'] {
  width: 85%;
}

.martrix-table-action {
  margin-top: 10px;

  .van-icon {
    color: lightgreen;
    font-size: 12px;
  }

  .martrix-table-action-tool {
    display: flex;
    justify-content: flex-end;

    & > span {
      margin-right: 6px;
      font-size: 16px;
    }
  }
}
</style>
