<template>
  <div class="container">
    <van-cell class="question-title">
      <template #extra>
        <div class="title-left">
          <div class="flex" :class="titleActive ? 'line-border' : ''">
            <!--问卷标题-->
            <contenteditable
              v-model="questionInfo.survey.title"
              className="content-title"
              :active="titleActive"
              id="content-title"
              placeholder="请输入问卷标题"
              ref="contentTitle"
              @blur="saveTitle"
            >
            </contenteditable>
            <div class="right-action">
              <van-icon
                class-prefix="mobilefont"
                name="Edit"
                v-if="!titleActive"
                @click="titleActive = true"
              ></van-icon>
              <van-icon
                class-prefix="mobilefont"
                name="del1"
                v-else
                @click.stop="closeActive"
              ></van-icon>
            </div>
          </div>

          <!--          问卷标注-->
          <contenteditable
            v-model="questionInfo.survey.introduction"
            className="introduction"
            :active="true"
            placeholder="请输入问卷标注"
            @blur="saveTitle"
          ></contenteditable>
        </div>
        <!--      <van-cell-group inset class="result-cell">-->
        <!--        <div>-->
        <!--          <div>-->
        <!--           -->
        <!--          </div>-->
        <!--          <div>-->
        <!--        -->
        <!--          </div>-->

        <!--        </div>-->
        <!--      </van-cell-group>-->
        <div class="title-right">
          <div class="right-icon"></div>
        </div>
      </template>
    </van-cell>

    <div class="ques">
      <!--      题目-->
      <Design
        :activeId="activeId"
        class="design"
        :filterGap="true"
        @get-active-question="getActiveQuestion"
      >
        <template #button="{ item }">
          <div v-if="activeId === item.id" class="design-button">
            <van-button size="small" @click="show = true"> + 添加题目</van-button>
          </div>
        </template>

        <template #empty>
          <div v-if="questionInfo.questions.length === 0" class="empty">
            <div>
              <img :src="emptyImage" alt="" class="empty-image" />
            </div>
            <van-button class="theme-background" size="small" @click="show = true">
              + 添加题目
            </van-button>
          </div>
        </template>
      </Design>
      <div v-if="!activeId && questionInfo.questions.length > 0" class="design-button">
        <van-button size="small" class="theme-background" @click="show = true">
          + 添加题目
        </van-button>
      </div>
      <!--      <van-button @click="show = true">添加题目</van-button>-->
      <!--   弹出的新增题目弹窗-->
      <van-popup
        v-model:show="show"
        round
        :closeable="true"
        position="bottom"
        :style="{ maxHeight: '50%' }"
        title="添加题目"
      >
        <van-row class="ques_title">
          <van-col :span="6">添加题目</van-col>
        </van-row>

        <div class="ques_list flex align-center" style="flex-wrap: wrap">
          <div
            class="icon-item"
            v-for="item in quesList"
            :key="item.type"
            @click="questionEvent(item)"
          >
            <img :src="item.icon" alt="" />
            <p>{{ item.name }}</p>
            <!--            <template #icon>-->

            <!--              <span class="mobilefont grid-icon" v-html="item.icon"></span>-->
            <!--            </template>-->
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 底部功能性按钮 -->
    <div class="survey-action">
      <!--      <div class="survey-action_setting" @click="openSettingAction">-->
      <!--        <van-icon name="setting" size="18" class="grid-icon" />-->
      <!--        <span>投放设置</span>-->
      <!--      </div>-->
      <div class="survey-action_btn">
        <van-button
          :key="1"
          size="small"
          class="primary-button"
          plain
          type="primary"
          :disabled="activeActionButton"
          @click="() => saveAs()"
        >
          保存
        </van-button>
        <van-button
          size="small"
          plain
          type="primary"
          class="primary-button"
          :disabled="activeActionButton"
          @click="previewQuestion"
        >
          预览
        </van-button>
        <van-button size="small" plain type="success" @click="openSettingAction">
          投放设置
        </van-button>
        <van-button
          size="small"
          icon="send"
          icon-prefix="mobilefont"
          :disabled="activeActionButton"
          @click="publishQuestion"
        >
          开启投放
        </van-button>
      </div>
    </div>
  </div>

  <!--  投放设置-->

  <van-action-sheet v-model:show="showSetting" title="" style="background-color: #f2f2f2">
    <div class="van-action-sheet-title flex flex-start">投放设置</div>
    <van-cell-group :border="false" class="round-group br12">
      <van-cell title="每页一题" :border="false" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.is_one_page_one_question"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveIsOnePage"
          ></van-switch>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group :border="false" class="round-group br12">
      <van-cell title="投放数量" class="setting_block" :border="false" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.is_publish_number"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSetting('is_publish_number', ['publish_number'], 'number')"
          ></van-switch>
        </template>
      </van-cell>
      <van-cell-group
        v-if="questionInfo.survey.is_publish_number === 1"
        class="child-group setting_block"
        :border="false"
      >
        <van-field
          v-model="questionInfo.survey.publish_number"
          label="投放数量最大为"
          input-align="right"
          type="digit"
          :min="1"
          @blur="saveSetting"
        >
          <template #right-icon> 份</template>
        </van-field>
      </van-cell-group>
    </van-cell-group>

    <van-cell-group :border="false" class="round-group br12">
      <van-cell title="有效期" class="border-top" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.is_time"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSetting('is_time', ['start_time', 'end_time'])"
          ></van-switch>
        </template>
      </van-cell>
      <!--有效期-->
      <van-cell-group v-if="questionInfo.survey.is_time === 1" class="child-group" :border="false">
        <van-field
          v-model="questionInfo.survey.start_time"
          is-link
          label="起始时间"
          input-align="right"
          readonly
          @click="showTimePicker('start', questionInfo.survey.startTime)"
        >
        </van-field>
        <van-field
          v-model="questionInfo.survey.end_time"
          is-link
          label="截至时间"
          input-align="right"
          readonly
          @click="showTimePicker('end', questionInfo.survey.endTime)"
        >
        </van-field>
      </van-cell-group>

      <van-cell title="断点续答" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.is_breakpoint"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSetting"
          ></van-switch>
        </template>
      </van-cell>

      <van-cell
        title="企微身份获取"
        label="开启后仅支持私有化企微环境作答"
        class="border-bottom"
        label-align="left"
      >
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.wework_status"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSetting"
          ></van-switch>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="round-group br12" :border="false">
      <van-cell title="IP答题次数限制" class="border-top" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.is_ip_number"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSetting('is_ip_number', ['ip_number'])"
          ></van-switch>
        </template>
      </van-cell>
      <van-cell-group
        v-if="questionInfo.survey.is_ip_number === 1"
        :border="false"
        class="child-group"
      >
        <van-field
          v-model="questionInfo.survey.ip_number"
          label="同一个IP地址只能作答"
          :border="false"
          :min="1"
          type="digit"
          input-align="right"
          @blur="saveSetting"
        >
          <template #right-icon> 次</template>
        </van-field>
      </van-cell-group>
      <van-cell title="设备答题次数限制" class="border-bottom" :border="false" label-align="left">
        <template #right-icon>
          <van-switch
            v-model="questionInfo.survey.is_browser_number"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
            @change="saveSetting('is_browser_number', ['browser_number'])"
          ></van-switch>
        </template>
      </van-cell>
      <van-cell-group
        v-if="questionInfo.survey.is_browser_number === 1"
        class="child-group"
        :border="false"
      >
        <van-field
          v-model="questionInfo.survey.browser_number"
          label="同一个浏览器只能作答"
          :border="false"
          :min="1"
          type="digit"
          input-align="right"
          @blur="saveSetting"
        >
          <template #right-icon> 次</template>
        </van-field>
      </van-cell-group>
    </van-cell-group>
  </van-action-sheet>

  <!--时间选择-->
  <van-popup v-model:show="timePickerModel" position="bottom" round>
    <YLPicker
      title=""
      :showPicker="timePickerModel"
      :values="currentDate"
      format="YYYY-MM-DD HH:mm:ss"
      :units="['年', '月', '日', '时', '分', '秒']"
      @cancel="timePickerModel = false"
      @confirm="onConfirmDate"
    ></YLPicker>
  </van-popup>

  <!-- 结束语选择-->
  <!--  <van-popup v-model:show="textModel" position="bottom" round>-->
  <!--    <van-picker :columns="columns" @confirm="onConfirm"></van-picker>-->
  <!--  </van-popup>-->
</template>

<script setup lang="ts">
import emptyImage from '@/assets/img/empty.png';
import { computed, onBeforeMount, onMounted, ref, watch } from 'vue';
import * as Base64 from 'js-base64';
import {
  changeStatus,
  getSetting,
  getSurveysDetail,
  saveProjectName,
  saveQuestion,
  saveQuestions,
  saveSettings,
  snQuestions,
  sync
} from '@/api/design/index';
import { getFormattedTime } from '@/utils/utils';
import Design from '@/views/Design/Index.vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import { v4 as uuidv4 } from 'uuid';
import { basicQuesTypeList } from '@/utils/common';
import { useRoute, useRouter } from 'vue-router';
import YLPicker from '@/components/YLPicker.vue';
import { getPages } from '@/utils/public';
import { showConfirmDialog, showFailToast, showToast } from 'vant';
import { Position } from '@element-plus/icons-vue';

// 获取 Store 实例
const counterStore = useCounterStore();
const store = storeToRefs(counterStore);

const chooseQuestionId = ref('');
const activeQuestionIndex = ref(-1);
const currentDate = ref();
const currentType = ref();
const route = useRoute();
const router = useRouter();
const show = ref(false);
// const textModel = ref(false);
const activeId = ref(0);
const contentTitle = ref(null);

// 标题是否可编辑
const titleActive = ref(false);
const closeActive = (e) => {
  // 阻止浏览器 失焦 以及默认操作
  e.preventDefault();
  e.stopPropagation();
  let contentTitle = document.getElementById('content-title');
  questionInfo.value.survey.title = contentTitle.children[0].children[0].innerHTML;
  setTimeout(() => {
    questionInfo.value.survey.title = '<br/>';
  }, 10);
  // contentTitle.value.focus()
};

const showSetting = ref(false);
const timePickerModel = ref(false);

const activeActionButton = computed<boolean>(() => {
  return questionInfo.value.questions.length === 0 || !questionInfo.value.survey.title;
});
const openSettingAction = () => {
  showSetting.value = true;
};

const showTimePicker = (type, value) => {
  timePickerModel.value = true;
  currentType.value = type;
  currentDate.value = value;
};

const onConfirmDate = (e) => {
  if (currentType.value === 'start') {
    questionInfo.value.survey.start_time = e;
  } else {
    questionInfo.value.survey.end_time = e;
  }
  timePickerModel.value = false;
  saveSetting();
};

// 获取选中的题目
const getActiveQuestion = (activeQues) => {
  activeQuestionIndex.value = questionInfo.value.questions.length - 1;
  chooseQuestionId.value = activeQues.id;
  activeId.value = activeQues.id;
  // 在questions 里 查找index 给 activeQuestionIndex
  questionInfo.value.questions.forEach((item, index) => {
    if (item.id === activeQues.id) {
      activeQuestionIndex.value = index;
    }
  });
};

const saveTitle = () => {
  let sn = sessionStorage.getItem('sn');

  if (!questionInfo.value.survey.title || questionInfo.value.survey.title === '<br/>') {
    showToast('问卷标题不能为空');
    return false;
  }
  titleActive.value = false;
  saveQuestions({
    sn: sn,
    title: questionInfo.value.survey.title,
    introduction: questionInfo.value.survey.introduction
  }).then((res) => {
    if (res.data) {
      // questionInfo.value.survey.title 富文本转为html获取innertext
      let title = questionInfo.value.survey.title.replace(/<[^>]*>/g, '');
      saveProjectName(sn, { project_name: title });
    }
  });
};

const quesList = ref(basicQuesTypeList);

const questionEvent = (item) => {
  // 更新坐标
  let index = questionInfo.value.questions.length + 1;
  if (activeId.value) {
    let filterIndex = questionInfo.value.questions.findIndex((item) => {
      return item.id === activeId.value;
    });
    index = filterIndex + 2;
  }
  let questionJson = {};
  const id = uuidv4();
  questionJson = JSON.parse(
    JSON.stringify({
      ...item.json,
      id,
      title: index,
      question_type: Number(item.question_type),
      question_index: questionInfo.value.survey.last_question_index + 1,
      options:
        item.json.options.length > 0
          ? item.json.options.map((item) => {
              return item.map((it) => {
                return {
                  ...it,
                  // 主键生成
                  id: uuidv4()
                };
              });
            })
          : []
    })
  );

  // 给store 装数据 判断是 push  还是  splice
  if (activeQuestionIndex.value === -1) {
    questionInfo.value.questions.splice(questionInfo.value.questions.length + 1, 0, questionJson);
  } else {
    questionInfo.value.questions.splice(activeQuestionIndex.value + 1, 0, questionJson);
  }
  // 更新题目索引
  questionInfo.value.survey.last_question_index += 1;
  activeId.value = id;
  show.value = false;
  saveQuestionItem(questionJson);
};

// 新增保存增加的一个
const saveQuestionItem = (questionJson) => {
  let sn = sessionStorage.getItem('sn');
  const query = {
    sn: sn,

    data: {
      logics: questionInfo.value.logics,
      questions: [questionJson],
      survey: {
        local_pages: [],
        pages: getPages(
          questionInfo.value.questions,
          questionInfo.value.survey.is_one_page_one_question
        ),
        version: Base64.encode(`${new Date().getTime()}`)
      }
    }
  };
  saveQuestion(query).then(() => {
    sync({ sn: query.sn });
  });
};

// 保存设置
const saveSetting = (parentKey, childKeys, type) => {
  const query = {};
  // 当有效期开关打开时设置默认时间
  if (parentKey === 'is_time' && questionInfo.value.survey.is_time === 1) {
    // 设置起始时间为当前时间
    questionInfo.value.survey.start_time = getFormattedTime('now');
    // 设置截止时间为今天23:59:59
    questionInfo.value.survey.end_time = getFormattedTime('endOfDay');
  }
  if (parentKey === 'is_publish_number' && questionInfo.value.survey.is_publish_number === 1) {
    questionInfo.value.survey.publish_number = questionInfo.value.survey.publish_number
      ? questionInfo.value.survey.publish_number
      : 1;
  }

  function changeValueType(type, value) {
    if (type) {
      switch (type) {
        case 'number':
          return Number(value);
        default:
          return value;
      }
    } else {
      return value;
    }
  }

  settingList.map((item) => {
    if (item === 'access_password') {
      query[item] = JSON.stringify(questionInfo.value.survey[item]);
    } else {
      query[item] = questionInfo.value.survey[item];
      if (item === 'is_time' && query[item] === 0) {
        delete query['start_time'];
        delete query['end_time'];
      }
    }
  });
  //  增删 修改 数据结构
  if (childKeys) {
    childKeys.map((key) => {
      query[key] = query[parentKey] === 1 ? changeValueType(type, query[key]) : 0;
      if (parentKey === 'is_time' && query[parentKey] === 0) {
        delete query[key];
      }
    });
  }
  let publish_number = Number(questionInfo.value.survey['publish_number']);
  if (questionInfo.value.survey.is_publish_number === 1) {
    if (publish_number == '' || publish_number === 0) {
      showFailToast('投放数量需要大于1');
      return false;
    }
  } else {
    // delete query['is_publish_number'];
    delete query['publish_number'];
  }
  let sn = sessionStorage.getItem('sn');
  saveSettings({
    sn: sn,
    ...query
  });
};

// 保存是否每页一题
const saveIsOnePage = () => {
  let sn = sessionStorage.getItem('sn');
  saveQuestions({
    sn: sn,
    is_one_page_one_question: questionInfo.value.survey.is_one_page_one_question
  });
};
const init = () => {
  // event.detail 为当前输入的值
  show.value = true;
};
defineExpose({ init });

// 定义setting 接口返回的数据集和  调用put接口时对比以下

let settingList = [];

// 获取题目相亲
const getQuestionDetail = () => {
  let sn = sessionStorage.getItem('sn');
  if (sn) {
    snQuestions({ sn: sn }).then((res) => {
      if (res.data) {
        questionInfo.value.survey = Object.assign({}, res.data.data.survey);
        questionInfo.value.questions = res.data.data.questions.map((item, index) => {
          return {
            ...item,
            title: index + 1
          };
        });
        questionInfo.value.logics = res.data.data.logics.map((item) => {
          return {
            ...item
          };
        });

        getSetting({ sn: sn }).then((setting) => {
          if (setting.data) {
            // 获取所有的key
            settingList = Object.keys(setting.data.data);
            questionInfo.value.survey = Object.assign(questionInfo.value.survey, setting.data.data);
          }
        });
      }
    });
  }
};
const questionInfo = computed(() => store.questionsInfo.value);

/**
 * todo: 下面是监控投放设置的一些逻辑
 */

/**
 * 监控日期截止有效期
 */
watch(
  () => questionInfo.value.survey.end_time,
  (_, oldValue) => {
    // 如果 不是开启，不做处理
    if (!questionInfo.value.survey.is_time) return;
    const startTime = Date.parse(questionInfo.value.survey.start_time);
    const endTime = Date.parse(questionInfo.value.survey.end_time);

    // 如果起始时间大于截止时间，重置时间
    if (startTime < endTime) return;
    // showToast({
    //   message: '起始时间不能大于截止时间',
    //   position: 'bottom',
    //   duration: 1000
    // });
    questionInfo.value.survey.end_time = oldValue;
  }
);

/**
 * 监控日期起始有效期
 */
watch(
  () => questionInfo.value.survey.start_time,
  (_, oldValue) => {
    // 如果 不是开启，不做处理
    if (!questionInfo.value.survey.is_time) return;
    const startTime = Date.parse(questionInfo.value.survey.start_time);
    const endTime = Date.parse(questionInfo.value.survey.end_time);
    // 如果起始时间大于截止时间，重置时间
    if (startTime < endTime) return;
    // showToast({
    //   message: '起始时间不能大于截止时间',
    //   position: 'bottom',
    //   duration: 1000
    // });
    questionInfo.value.survey.start_time = oldValue;
  }
);

// 监听投放数量， 投放数量最少为1
watch(
  () => questionInfo.value.survey.publish_number,
  (newValue, oldValue) => {
    // 投放数量校验需要和是否开启投放数量一起
    if (!questionInfo.value.survey.is_publish_number) return;
    if (newValue < 1) {
      showToast({
        message: '投放数量最少为1'
        // position: 'bottom',
      });
      questionInfo.value.survey.publish_number = oldValue;
    }
  }
);

// watch(
//   () => questionInfo.value.survey.is_time,
//   (newValue, oldValue) => {
//     // 如果 不是开启，不做处理
//     if (!questionInfo.value.survey.is_time) return;
//     // 设置起始时间为当前时间
//     questionInfo.value.survey.start_time = getFormattedTime('now');
//     // 设置截止时间为今天23:59:59
//     questionInfo.value.survey.end_time = getFormattedTime('endOfDay');
//   }
// );

// 监听设备答题次数
watch(
  () => questionInfo.value.survey.browser_number,
  (newValue, oldValue) => {
    // 如果 不是开启，不做处理
    if (!questionInfo.value.survey.is_browser_number) return;
    if (newValue) {
      if (newValue < 1) {
        /*  showToast({
          message: '设备答题次数最少为1',
          position: 'bottom',
          duration: 1000
        });*/
        questionInfo.value.survey.browser_number = oldValue < 1 ? 1 : oldValue;
      }
    }
  }
);
if (route.query.sn) {
  sessionStorage.setItem('sn', route.query.sn);
}
// 监听ip数量
watch(
  () => questionInfo.value.survey.ip_number,
  (newValue, oldValue) => {
    // 如果 不是开启，不做处理
    if (!questionInfo.value.survey.is_ip_number) return;
    if (newValue && newValue < 1) {
      // showToast({
      //   message: 'IP答题次数最少为1',
      //   position: 'bottom',
      //   duration: 1000
      // });
      questionInfo.value.survey.ip_number = oldValue < 1 ? 1 : oldValue;
    }
  }
);

watch(
  () => questionInfo.value.questions,
  () => {
    // questionInfo.value.questions = newVal;
  },
  { deep: true }
);

// 保存   目前没有任何逻辑可以执行所有保存
const saveAs = (back) => {
  let sn = sessionStorage.getItem('sn');
  let questions = JSON.parse(JSON.stringify(questionInfo.value.questions));
  questions = questions.map((item, index) => {
    return {
      ...item,
      title: index + 1
    };
  });

  let query = {
    sn: sn,

    data: {
      logics: questionInfo.value.logics,
      questions: questions,
      survey: {
        local_pages: [],
        pages: getPages(
          questionInfo.value.questions,
          questionInfo.value.survey.is_one_page_one_question
        ),
        version: Base64.encode(`${new Date().getTime()}`)
      }
    }
  };
  saveQuestion(query).then(() => {
    sync({ sn: sn }).then(() => {
      if (back) {
        back();
      } else {
        //   保存所有
        showConfirmDialog({
          message: '问卷保存成功',
          showCancelButton: false
        });
      }
    });
  });
};
// 投放
const publishQuestion = () => {
  saveAs(() => {
    // 问卷编辑页面会自动把问卷取消投放  所以  跳转到投放页面时 替换当前路由
    router.replace({ name: 'publish', query: { ...route.query } });
  });
};
// 预览
const previewQuestion = () => {
  saveAs(() => {
    setTimeout(() => {
      router.push({ name: 'preview', query: { ...route.query } });
    }, 500);
  });
};

const surveyDetailFun = (back) => {
  let sn = sessionStorage.getItem('sn');
  getSurveysDetail(sn).then((res) => {
    if (res.data) {
      // 投放中
      if (res.data.data.status === 1) {
        changeStatus({ sn: sn, status: 0 });
      }
    }
  });
};

onMounted(() => {
  getQuestionDetail();

  surveyDetailFun();
});

// 在进入问卷编辑之后，可能会需要重置画布状态
onBeforeMount(() => {
  if (localStorage.getItem('is_page_refresh')) {
    //   清除页面刷新标记
    sessionStorage.setItem('is_page_refresh', '1');
  }
});
</script>

<style scoped lang="scss">
@use '@/assets/css/theme';
@import '@/assets/css/theme';

.container {
  & .question-title {
    border-radius: theme.$card-radius;
    padding: 0 20px;
    background-color: transparent !important;

    & .title-left {
      //max-height: 200px;
      color: #fff;

      :deep(.content-title) {
        //overflow: auto;
        max-width: 170px !important;
        min-width: 140px !important;
        width: unset;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        //height: 30px;

        div {
          font-size: 18px;
        }
      }

      & .right-action {
        height: 30px;
        line-height: 30px;
      }

      :deep(.introduction) {
        //overflow: auto;
        width: 230px;
        //height: 45px;
        margin-top: 5px;

        & div {
          font-size: 13px;
        }
      }
    }

    & .title-right {
      position: relative;
      flex: 1;
      width: 65px;
      /* 根据实际图片大小调整 */
      height: 50px;
      margin-right: 40px;
      margin-left: 30px;
      padding-top: 30px;

      & .right-icon {
        position: absolute;
        bottom: -70px;
        left: -10px;
        width: 65px;
        /* 根据实际图片大小调整 */
        height: 140px;
        /* 根据实际图片大小调整 */
        background: url('@/assets/img/create-right-back.png') no-repeat center center;
        background-size: cover;
      }
    }
  }
}

.container {
  //height: 100vh;
  background-color: #f5f5f5;

  button {
    padding: 3px 20px;
    border: none;
    border-radius: 10px;
    background-color: #70b937;
    color: #fff;

    //font-weight: bold;
  }
}

:deep(.van-popup--bottom.van-popup--round) {
  background-color: #f2f2f2;
}

.setting_title {
  color: #000;
  font-weight: bold;
  font-style: normal;
  font-size: 19px;
  font-family: PingFangSC, 'PingFang SC';
  line-height: 26px;
  text-align: left;
}

.setting_group {
  padding: 10px;
  background-color: #f2f2f2;
}

.setting_block {
  border-radius: 12px;
}

.border-top {
  border-radius: 12px 12px 0 0;
}

.border-bottom {
  border-radius: 0 0 12px 12px;
}

.result-cell {
  margin: 10px 5px;
  padding: 5px;

  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.thanks-cell {
  //display: flex;
  //align-items: center;
  //justify-content: center;
  //height: 70px;
  margin: 10px 5px;
}

.grid-icon {
  color: #70b936;
  font-size: 25px;
}

.ques {
  min-height: 70vh;
  padding-bottom: 85px;

  .design-button {
    margin-top: 10px;
    text-align: center;

    & > button {
      padding: 0.5rem;
      border-radius: 8px;
      background: rgba(240, 248, 235, 1);
      color: $theme-color;
    }
  }

  .empty {
    overflow: hidden;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    text-align: center;

    & .empty-image {
      width: 175px;
      height: 110px;
      margin-top: 10px;
    }

    & > button {
      margin-top: 25px;
      padding: 0.5rem;
      font-weight: 600;
      border-radius: 5px;
      background: rgba(240, 248, 235, 1);
      color: $theme-color;

      //opacity: 0.1;
    }
  }

  .ques_title {
    margin: 20px 0 10px 20px;
    font-weight: bold;
    font-size: 19px;
    & div {
      font-size: 19px;
    }
  }

  .ques_list {
    gap: 10px;
    margin: 20px 12px 30px 12px;
    .icon-item {
      flex: 1 1 calc(25% - 7.5px); // 每个元素占25%，减去间隙的一半（10px / 2 = 5px）
      min-width: calc(25% - 7.5px);
      max-width: calc(25% - 7.5px);
      text-align: center;
      position: relative;
      height: 88px;
      & p {
        width: 100%;
        position: absolute;
        bottom: 11px;
        font-size: 14px;
        text-align: center;
        color: #000000;
        font-weight: 500;
      }
    }
  }
}

.child-group {
  & :deep(.van-field__label) {
    width: 140px;
    color: #bfbfbf;
    font-size: 12px;
  }

  & :deep(.van-cell__title) {
    width: 140px;
    color: #bfbfbf;
    font-size: 12px;
  }
}

:deep(.van-button--plain.van-button--primary) {
  padding: 13px 15px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  background-color: #fff;
  color: #4b4b59;
  font-weight: bold;
}

:deep(.van-button--plain.van-button--success) {
  padding: 13px 15px;
  border: 1px solid #70b937;
  border-radius: 10px;
  background-color: #fff;
  color: #70b937;
  font-weight: bold;
}

:deep(.van-cell) {
  padding: 8px;
}

.line-border {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #f0f0f0;
    width: 85%;
    transform: scaleY(0.5);
  }
}

.icon-item {
  width: 76px;
  height: 88px;
  img {
    width: 100%;
    height: 100%;
  }
}

.survey-action {
  position: fixed;
  z-index: 1;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  border-radius: 10px 10px 0 0;

  //margin: 0 10px;
  background-color: white;

  .survey-action_setting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 10px;

    //width: 10%;
  }

  .survey-action_btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 8px;

    & .van-button + .van-button {
      margin-left: 10px;
    }

    button {
      height: 45px;
    }
  }
}
</style>
