<script setup lang="ts">
import { type Component, defineModel } from 'vue';
import { Io5EllipsisVerticalSharp } from 'vue-icons-plus/io5';
import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.vue';
import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
import MatrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';

// 添加激活 action 的选项
interface _questionOptionType extends questionOptionType {
  showAction?: boolean;
}

// 题目
const element = defineModel<question>('element', {
  type: Object,
  default: () => {
    return {};
  }
});
// table 宽度
const tableWidth = defineModel<number>('tableWidth', { required: false, default: 110 });
// 行记录(相关答案的记录)
const rowRecord = defineModel<unknown[]>('rowRecord', { required: false, default: () => [] });
// 是否是预览状态
const isPreview = defineModel<boolean>('isPreview', { required: false, default: false });
// 行标签
const rows = defineModel<_questionOptionType[]>('rows', { required: false, default: () => [] });
// 列标签
const cols = defineModel<_questionOptionType[]>('cols', { required: false, default: () => [] });
// 题的序号
const index = defineModel<number>('index', { required: false, default: 0 });
// 是否是编辑状态
const active = defineModel<boolean>('active', { required: false, default: false });

const emit = defineEmits(['update:element']);
// 更新题
const emitValue = () => {
  // console.log(question.value);
  emit('update:element', element.value);
};

// 组件选择
const activeComponent = selectActiveComponent();
function selectActiveComponent(): Component {
  console.log(`question_type`, element.value.question_type);
  switch (element.value.question_type) {
    case 8:
      return MatrixText;
    case 9:
      return MatrixRadio;
    case 10:
      return MatrixCheckbox;
    default:
      return MatrixText;
  }
}

console.log(`active component`, activeComponent);
// 增加 popover 的 actions
const popoverActions = [
  {
    text: '删除'
  }
  // 置底功能暂时屏蔽
  // {
  //   text: '置底'
  // }
];

/**
 * popover 被选中的事件
 * @param action { text: string }
 * @param axi { option: string, showAction: boolean }
 * @param type { 'row' | 'col' }
 */
function handleActionSelect(action: { text: string }, axi: any, type: 'row' | 'col') {
  const data = type === 'row' ? rows : cols;
  const index = data.value.indexOf(axi);
  if (index < 0) return;
  switch (action.text) {
    case '删除':
      data.value.splice(index, 1);
      break;

    case '置底':
      data.value.push(data.value.splice(index, 1)[0]);
      break;
  }
}

addShowActionOption();
/**
 * 给行或者列选项 添加 showAction 选项
 */
function addShowActionOption() {
  rows.value.forEach((row) => {
    row.showAction = true;
  });
  cols.value.forEach((col) => {
    col.showAction = true;
  });
}

const errorMessage = defineModel('errorMessage', {
  type: String,
  default: ''
});
</script>

<template>
  <van-field
    v-model="element.stem"
    :label="element.stem"
    :required="element.config?.is_required === 1"
    label-align="top"
    class="contenteditable-question-title"
  >
    <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
    <!-- 使用 title 插槽来自定义标题 -->
    <template #label>
      <contenteditable
        v-model="element.stem"
        :active="active"
        @blur="emitValue"
        :errorMessage="errorMessage"
      />
    </template>

    <template #input>
      <el-table :data="rows" style="width: 90vw" border stripe>
        <el-table-column :width="tableWidth">
          <template #header></template>
          <template #default="{ row /*, column, $index*/ }">
            <div style="position: relative">
              <el-text truncated :style="{ width: `${tableWidth}px` }">
                <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
              </el-text>
              <van-popover
                v-model="row.showAction"
                placement="left-end"
                trigger="click"
                :actions="popoverActions"
                @select="handleActionSelect($event, row, 'row')"
              >
                <template #reference>
                  <div v-if="active" class="icon">
                    <Io5EllipsisVerticalSharp />
                  </div>
                </template>
              </van-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="(col, colIndex) in cols" :key="col.option" :width="tableWidth">
          <template #header>
            <div style="position: relative">
              <el-text truncated :style="{ width: `${tableWidth}px` }">
                <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
              </el-text>
              <van-popover
                v-model="col.showAction"
                placement="left-end"
                trigger="click"
                :actions="popoverActions"
                @select="handleActionSelect($event, col, 'col')"
              >
                <template #reference>
                  <div v-if="active" class="icon">
                    <Io5EllipsisVerticalSharp />
                  </div>
                </template>
              </van-popover>
            </div>
          </template>
          <template #default="{ /*row, column, */ $index: rowIndex }">
            <div>
              <component
                :is="activeComponent"
                :element="element"
                :rowIndex="rowIndex"
                :colIndex="colIndex"
                v-model:rowRecord="rowRecord"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </van-field>
</template>
<style lang="scss" scoped>
@import '@/assets/css/theme';

.matrix-table {
  text-align: left;
}
input[type='text'] {
  width: 70%;
  padding: 0 5px;
  border: none;
  border-radius: 4px;
  outline: 1px solid #f4f4f4;

  &:focus {
    outline: 1px solid $theme-color;
  }
}
.matrix-radio {
  position: relative;
  overflow: hidden;
  width: 15px;
  height: 15px;
  border: 1px solid #f4f4f4;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  appearance: none; /* 去除默认样式 */
  //transition: border-color 0.3s;
}

.matrix-radio:checked {
  border-color: transparent; /* 选中时边框颜色 */
}
.matrix-radio:checked::before {
  content: '\e728';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: $theme-color; /* 选中颜色 */
  color: #fff;
  line-height: 15px;
  text-align: center;
}

.icon {
  position: absolute;
  top: 3px;
  right: -10px;

  & > svg {
    height: 15px;
  }
}
</style>
