<template>
  <div class="question-page">
    <h3 ref="titleRef">{{ questionObj.title }}</h3>
    <div class="tip" ref="tipRef">{{ questionObj.description }}</div>
    <van-form @submit="onSubmit" :class="[formClassName]">
      <template v-for="(item, index) in questionObj.titleVOList" :key="index">
        <van-field
          :border="false"
          required
          :rules="[{ required: true, message: `请选择${item.title}` }]"
          v-if="item.type === 1"
        >
          <template #input>
            <div>
              <h4>
                <i>{{ index + 1 }}，{{ item.title }}</i
                ><span class="radio">单选</span>
              </h4>
              <van-radio-group v-model="item.answer">
                <van-radio
                  :name="String.fromCharCode(64 + oItem.option)"
                  v-for="(oItem, oIndex) in item.optionVOList"
                  :key="oIndex"
                >
                  {{ oItem.optionDesc }}
                  <template #icon="props">
                    <img
                      class="img-icon"
                      :src="props.checked ? iconObj.radioActive : iconObj.radio"
                    />
                  </template>
                </van-radio>
              </van-radio-group>
            </div>
          </template>
        </van-field>
        <van-field
          :border="false"
          required
          :rules="[{ required: true, message: `请选择${item.title}` }]"
          v-else-if="item.type === 2"
        >
          <template #input>
            <div>
              <h4>
                <i>{{ index + 1 }}，{{ item.title }}</i
                ><span class="checkbox">多选</span>
              </h4>
              <van-checkbox-group v-model="item.answer" checked-color="#F02E18">
                <van-checkbox
                  :name="String.fromCharCode(64 + oItem.option)"
                  v-for="(oItem, oIndex) in item.optionVOList"
                  :key="oIndex"
                  shape="square"
                  icon-size="0.37333rem"
                >
                  {{ oItem.optionDesc }}
                  <template #icon="props">
                    <img
                      class="img-icon"
                      :src="
                        props.checked
                          ? iconObj.checkboxActive
                          : iconObj.checkbox
                      "
                    />
                  </template>
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </template>
        </van-field>
        <van-field
          :border="false"
          required
          :rules="[{ required: true, message: `请选择${item.title}` }]"
          v-else-if="item.type === 3"
        >
          <template #input>
            <div>
              <h4>
                <i>{{ index + 1 }}，{{ item.title }}</i
                ><span class="radio">单选</span>
              </h4>
              <van-radio-group
                v-model="item.answer"
                checked-color="#F02E18"
                direction="horizontal"
              >
                <van-radio
                  :name="String.fromCharCode(64 + oItem.option)"
                  v-for="(oItem, oIndex) in item.optionVOList"
                  :key="oIndex"
                  shape="square"
                  icon-size="0.37333rem"
                >
                  <img class="img" :src="oItem.imgUrl" alt="" srcset="" />
                  <p>{{ oItem.optionDesc }}</p>
                  <template #icon="props">
                    <img
                      class="img-icon"
                      :src="props.checked ? iconObj.radioActive : iconObj.radio"
                    />
                    <p :class="[props.checked ? 'red' : '']">
                      {{ props.checked ? "已选" : "选择" }}
                    </p>
                  </template>
                </van-radio>
              </van-radio-group>
            </div>
          </template>
        </van-field>
        <van-field
          :border="false"
          required
          v-else-if="item.type === 4"
          :rules="[{ required: true, message: `请选择${item.title}` }]"
        >
          <template #input>
            <div>
              <h4>
                <i>{{ index + 1 }}，{{ item.title }}</i
                ><span class="checkbox">多选</span>
              </h4>
              <van-checkbox-group
                v-model="item.answer"
                checked-color="#F02E18"
                direction="horizontal"
              >
                <van-checkbox
                  :name="String.fromCharCode(64 + oItem.option)"
                  v-for="(oItem, oIndex) in item.optionVOList"
                  :key="oIndex"
                  shape="square"
                  icon-size="0.37333rem"
                >
                  <img class="img" :src="oItem.imgUrl" alt="" srcset="" />
                  <p>{{ oItem.optionDesc }}</p>
                  <template #icon="props">
                    <img
                      class="img-icon"
                      :src="
                        props.checked
                          ? iconObj.checkboxActive
                          : iconObj.checkbox
                      "
                    />
                    <p :class="[props.checked ? 'red' : '']">
                      {{ props.checked ? "已选" : "选择" }}
                    </p>
                  </template>
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </template>
        </van-field>
        <div v-else-if="item.type === 5">
          <h4>{{ index + 1 }}，{{ item.title }}</h4>
          <van-field
            required
            :border="false"
            v-model="item.answer"
            :rules="[{ required: true, message: `请填写${item.title}` }]"
            clearable
            type="textarea"
            rows="3"
            maxlength="200"
            show-word-limit
            :name="item.id"
            placeholder="请填写"
          />
        </div>
      </template>
      <div class="submit-buttom">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :disabled="disabled"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  defineProps,
  defineExpose,
  defineEmits,
  nextTick,
} from "vue";
import { questionAnswer, queryQuestionDetail } from "@/api/video";
import dayjs from "dayjs";
import { showToast } from "vant";
import useDisableScroll from "@/hooks/useDisableScroll";
const { addScrollEvent } = useDisableScroll();

defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
});

const iconObj = reactive({
  radio: require("@/assets/images/radio.png"),
  radioActive: require("@/assets/images/radio-active.png"),
  checkbox: require("@/assets/images/checkbox.png"),
  checkboxActive: require("@/assets/images/checkbox-active.png"),
});

const questionObj = ref({
  titleVOList: [],
});

const tipRef = ref();
const titleRef = ref();
const formClassName = ref(`van-form-${new Date().getTime()}`);
const getQuestionDetail = async (questionId) => {
  let ret = await queryQuestionDetail({ questionId });
  if (ret.code === 0) {
    questionObj.value = ret.data;
    nextTick(() => {
      let tipH = tipRef.value.getBoundingClientRect().height;
      let titleH = titleRef.value.getBoundingClientRect().height;
      document.querySelector(
        `.${formClassName.value}`
      ).style.height = `calc(100% - ${tipH + titleH}px)`;
      console.log(
        'document.querySelector(".van-form")',
        document.querySelector(".van-form").style.height
      );
      nextTick(() => {
        addScrollEvent(`.${formClassName.value}`);
      });
    });
  }
};

const startTime = ref(dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"));

const emit = defineEmits(["submitCallBack"]);
const onSubmit = async () => {
  const ret = await questionAnswer({
    endTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
    questionId: questionObj.value.id,
    startTime: startTime.value,
    titleQueryList: questionObj.value.titleVOList.map((item) => {
      return {
        answers:
          typeof item.answer === "string" ? [item.answer] : item.answer.sort(),
        titleId: item.id,
      };
    }),
  });
  if (ret.code === 0) {
    showToast("提交成功！");
    emit("submitCallBack");
  }
};

defineExpose({
  getQuestionDetail,
});
</script>
<style scoped lang="scss">
.question-page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
h3 {
  color: rgb(27, 35, 48);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 80px;
  height: 120px;
}
.tip {
  color: #b3b3b3;
  font-size: 28px;
  padding: 0 20px;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 36px;
  text-align: left;
}
.van-form {
  position: relative;
  text-align: left;
  padding: 20px 32px 140px;
  height: calc(100% - 340px);
  overflow-y: scroll;
  word-break: break-all;
  .van-field__control > div {
    width: 100%;
  }
  .li {
    margin-bottom: 40px;
  }
  h4 {
    // display: flex;
    // align-items: center;
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 48px;
    &:before {
      margin-right: 0.05333rem;
      color: var(--van-field-required-mark-color);
      content: "*";
    }
    span {
      // display: flex;
      // align-items: center;
      font-size: 20px;
      padding: 5px 12px;
      margin-left: 10px;
      vertical-align: top;
      word-break: keep-all;
    }
    .radio {
      background: rgba(46, 120, 250, 0.15);
      color: #2e78fa;
    }
    .checkbox {
      background: rgba(240, 46, 24, 0.15);
      color: #f02e18;
    }
  }
  .van-radio,
  .van-checkbox {
    padding: 10px 0;
  }
  .van-radio__label,
  .van-checkbox__label {
    font-size: 28px;
  }
  ::v-deep .van-checkbox__icon,
  ::v-deep .van-radio__icon {
    display: flex;
    align-items: center;
    .img-icon {
      width: 28px;
      height: auto;
    }
  }
  ::v-deep .van-checkbox__icon--checked + span.van-checkbox__label,
  ::v-deep .van-radio__icon--checked + span.van-radio__label {
    color: #f02e18;
  }

  ::v-deep .van-checkbox-group--horizontal,
  ::v-deep .van-radio-group--horizontal {
    flex-wrap: wrap;
    & > div:nth-child(odd) {
      margin-right: 20px;
    }
    & > div:nth-child(even) {
      margin-left: 20px;
      margin-right: 0;
    }
    .van-checkbox--horizontal,
    .van-radio--horizontal {
      flex-direction: column-reverse;
      width: calc(50% - 20px);
      text-align: center;
      justify-content: space-between;
      .img {
        width: 100%;
        height: 260px;
      }
    }
    .van-checkbox__label,
    .van-radio__label {
      display: flex;
      flex-direction: column;
      margin-left: 0;
      p {
        color: #000 !important;
        line-height: 40px;
        word-wrap: break-word;
        margin-bottom: 20px;
        word-break: break-all;
      }
    }
    .van-checkbox__icon,
    .van-radio__icon {
      display: flex;
    }
    .img-icon {
      width: 28px;
      height: auto;
      margin-right: 10px;
    }
    .red {
      color: #f02e18;
    }
  }
  .van-cell {
    padding: 20px 0;
  }
  .submit-buttom {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: auto;
    padding: 20px 30px;
    background: #fff;
    box-sizing: border-box;
  }
}
</style>
