<template>
  <!-- 问卷调查 -->
  <div class="questionnaire">
    <div class="top">
      <img class="ImgCLass" src="@/assets/images/wjtc.png" alt="" />
      <div class="below">
        您好!今年是开封市创建海绵城市建设示范城市的第二年,为进一步了解群众对孝感市海绵城市建设的看法，我们正在进行项关于海绵城市建设群众满意度的调查,
        希望能够占用您三分钟的时间,填写问卷,您的看法对我们非常重要,数据资料我们将严格保密,结果将作为海绵城市建设绩效评价的参考,
        希望能够得到您的支持和配合,非常感谢!
      </div>
    </div>
    <div class="under">
      <van-form @submit="onSubmitData">
        <div class="ContentView">
          <van-cell-group inset>
            <van-field
              v-model="AllData.formData.name"
              label="您的姓名"
              placeholder="请输入您的姓名"
              required
              :rules="[{ required: true, message: '请输入您的姓名' }]"
              style="display: block"
            />
            <van-field
              v-model="AllData.formData.telephone"
              label="您的手机号"
              placeholder="请输入您的手机号"
              required
              :rules="[{ required: true, message: '请输入您的手机号' }]"
              style="display: block"
            />

            <div v-for="(item, index) in AllData.problemConfigListA" :key="index">
              <!-- 单选 -->
              <van-field :label="index + 1 + ',' + item.problemName" v-if="item.problemType == 'radio'">
                <template #input>
                  <van-radio-group v-model="AllData.formData.problemResultList[index].answersResult">
                    <van-radio v-for="(item2, index2) in item.problemOptionList" :name="item2.id" :key="item2.id">
                      {{ item2.optionName }}
                    </van-radio>
                  </van-radio-group>
                </template>
              </van-field>

              <!--  multiple 多选 -->
              <!-- <van-field :label="index + 1 + ',' + item.problemName" v-if="item.problemType == 'checkbox'">
                <template #input>
                  <van-radio-group v-model="AllData.formData.problemResultList[index].answersResult">
                    <van-radio v-for="(item2, index2) in item.problemOptionList" :name="item2.id" :key="item2.id">
                      {{ item2.optionName }}
                    </van-radio>
                  </van-radio-group>
                </template>
              </van-field> -->
              <!-- 简答题 -->
              <van-field
                v-model="AllData.formData.problemResultList[index].answersResult"
                rows="2"
                autosize
                :label="AllData.problemConfigListA.length + ',' + item.problemName"
                type="textarea"
                maxlength="200"
                placeholder="请输入意见和建议"
                show-word-limit
                v-if="item.problemType == 'answers'"
              />
            </div>
          </van-cell-group>
        </div>
        <div class="BottomView">
          <van-button native-type="submit" class="BotBtn" type="primary"> 提交调查问卷 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup name="questionnaire">
import { executingQuestionnaireList, publicServiceAdd } from '@/api/PublicAdvice.js';
const { proxy } = getCurrentInstance();
const AllData = reactive({
  problemConfigListA: [],
  formData: {
    name: '',
    telephone: '',
    problemResultList: [],
  },

  formOptions: {},
});

// 提交上报
const onSubmitData = async () => {
  let pattrens = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
  if (!pattrens.test(AllData.formData.telephone)) {
    proxy.showFailToast('手机号格式不正确');
  }
  // console.log(AllData.formData.problemResultList, 'AllData.formData');
  AllData.formData.problemResultList.forEach((item) => {
    // console.log(item, 'element.problemType');
    if (item.problemType == 'radio') {
      console.log('radio');
      item.problemOptionList = [];
      item.problemOptionList.push({
        optionId: item.answersResult,
      });
    }
  });
  let params = JSON.parse(JSON.stringify(AllData.formData));
  // console.log(params, 'params---');

  // 多选转换格式为string，方便后端接收

  console.log(params, 'params');
  // params.problemResultList.map((item) => {
  //   if (item.problemType == 'checkbox') {
  //     item.answersResult = item.answersResult.join(',');
  //   }
  // });
  publicServiceAdd(params).then((response) => {
    proxy.showSuccessToast('填报成功');
    AllData.formData.name = '';
    AllData.formData.telephone = '';
    AllData.formData.problemResultList = [];
    getData();
  });
};

// 获取数据
const getData = async () => {
  let res = await executingQuestionnaireList();
  AllData.problemConfigListA = res.data.problemConfigList;
  AllData.formData.questionnaireId = res.data.id;
  res.data.problemConfigList.map((item) => {
    AllData.formData.problemResultList.push({
      answersResult: item.problemType == 'checkbox' ? [] : '',
      problemType: item.problemType,
      problemId: item.id,
    });
  });
};
getData();
</script>

<style lang="less">
.questionnaire {
  height: calc(100% - 95px);
  overflow: auto;
  background: #f6f6f6;
  // background: red;
  padding: 30px;

  .top {
    width: 100%;
    .ImgCLass {
      margin: 20px 0px;
      width: 100%;
      height: 120px;
    }
    .below {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24px;
      color: #121212;
      line-height: 39px;
      text-indent: 45px;
    }
  }
  .under {
    width: 100%;
    margin-top: 20px;
    .ContentView {
      .van-cell-group--inset {
        margin: 0px !important;
      }
      .van-field__label {
        flex: none;
        box-sizing: border-box;
        width: var(--van-field-label-width);
        margin-right: var(--van-field-label-margin-right);
        color: var(--van-field-label-color);
        text-align: left;
        word-wrap: break-word;
        width: 100%;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 28px;
        color: #121212;
      }
      .van-radio {
        margin-top: 10px;
        .van-radio__icon .van-icon {
          width: 30px;
          height: 30px;
          position: relative;
          top: 3px;
        }
        .van-icon-success:before {
          content: '' !important;
        }
      }
    }
    .BottomView {
      width: 100%;
      display: flex;
      justify-content: space-around;
      // margin-bottom: 50px;
      .BotBtn {
        margin-top: 20px;
        width: 45%;
        height: 62px;
        border-radius: 31px;
      }
    }
  }
}
</style>