<template>
  <div class="questionnaire">
    <div class="top">
      <div>
        <img class="ImgCLass" src="../assets/images/wjtc.png" alt="" />
      </div>
      <div class="below">
        <p>
          您好!今年是开封市创建海绵城市建设示范城市的第二年,为进一步了解群众对孝感市海绵城市建设的看法，我们正在进行项关于海绵城市建设群众满意度的调查,希望能够占用您三分钟的时间,填写问卷,您的看法对我们非常重要,数据资料我们将严格保密,结果将作为海绵城市建设绩效评价的参考,希望能够得到您的支持和配合,非常感谢!
        </p>
      </div>
    </div>
    <div class="under">
      <van-form @submit="onSubmitData">
        <div class="ContentView" id="ContentViewRiver">
          <van-cell-group inset>
            <van-field
              v-model="AllData.formData.problemType"
              label="您的姓名"
              placeholder="请输入您的姓名"
              show-word-limit
              required
              :rules="[{ required: true, message: '请输入您的姓名' }]"
              style="display: block"
            />
            <van-field
              v-model="AllData.formData.checkItem"
              label="您的手机号"
              placeholder="请输入您的手机号"
              show-word-limit
              required
              :rules="[{ required: true, message: '请输入您的手机号' }]"
              style="display: block"
            />
            <van-field label="1、您的性别？" name="caseLevel" style="display: block">
              <template #input>
                <van-radio-group v-model="AllData.formData.isRectification" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.Gender" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label="2、您的工作状态" name="caseLevel" style="display: block">
              <template #input>
                <van-radio-group v-model="AllData.formData.isRectification1" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingCondition" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label="3、您是否听说过海绵城市这个概念" name="caseLevel" style="display: block">
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionOne" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.Gender" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              label="4、如果您的居住地通过海绵城市建设,减少内涝积水,改善城市居住品质,您的态度是"
              name="caseLevel"
              style="display: block"
            >
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionA" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingConditionA" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field
              label="5、若您所在的社区或街道开展海绵城市建设,您的看法为"
              name="caseLevel"
              style="display: block"
            >
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionB" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingConditionB" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label="6、海绵城市建设中,您最关注哪一类项目" name="caseLevel" style="display: block">
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionC" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingConditionC" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field
              label="7、据您观察下雨时居民小区内城市两侧十字路口慢车道等区域,与前一年相比,雨天积水改善程度怎么样"
              name="caseLevel"
              style="display: block"
            >
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionD" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingConditionD" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label="8、您觉得目前建设的海绵工程对您的生活有没有改变" name="caseLevel" style="display: block">
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionE" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingConditionE" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field label="9、您对开封市海绵城市建设的整体满意度如何" name="caseLevel" style="display: block">
              <template #input>
                <van-radio-group v-model="AllData.formData.WorkingConditionF" direction="horizontal">
                  <van-radio :name="item.value" v-for="item in AllData.formOptions.WorkingConditionF" :key="item.value">
                    {{ item.label }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field
              v-model="AllData.formData.problemContent"
              rows="2"
              autosize
              label="10、您对本市进一步开展海绵城市建设是否有其他意见和建议？"
              type="textarea"
              maxlength="200"
              placeholder="请输入意见和建议"
              show-word-limit
              style="display: block"
            />
          </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">
const AllData = reactive({
  formData: {
    problemType: '',
    sysFileSaveRequestList: [], //获取的图片数组
    taskName: '',
    checkItem: '',
    isRectification: '',
    problemContent: '',
    patrolTaskId: '',
  },

  formOptions: {
    Gender: [
      {
        value: '1',
        label: '男',
      },
      {
        value: '2',
        label: '女',
      },
    ],
    WorkingCondition: [
      {
        value: '1',
        label: '在职',
      },
      {
        value: '2',
        label: '退休',
      },
      {
        value: '3',
        label: '学生',
      },
    ],
    WorkingConditionOne: [
      {
        value: '1',
        label: '听说过，并且有一定的了解',
      },
      {
        value: '2',
        label: '只是听说过，没有什么了解',
      },
      {
        value: '3',
        label: '完全没听过',
      },
    ],
    WorkingConditionA: [
      {
        value: '1',
        label: '改善环境，支持',
      },
      {
        value: '2',
        label: '无所谓',
      },
      {
        value: '3',
        label: '反对',
      },
    ],
    WorkingConditionB: [
      {
        value: '1',
        label: '很支持',
      },
      {
        value: '2',
        label: '无所谓',
      },
      {
        value: '3',
        label: '反对',
      },
    ],
    WorkingConditionC: [
      {
        value: '1',
        label: '建筑小区',
      },
      {
        value: '2',
        label: '公园湿地',
      },
      {
        value: '3',
        label: '道路广场',
      },
      {
        value: '3',
        label: '排水设施',
      },
    ],
    WorkingConditionD: [
      {
        value: '1',
        label: '有很大改善，积水的地方明显减少  ',
      },
      {
        value: '2',
        label: '有一些改善，仍有小部分地方积水',
      },
      {
        value: '3',
        label: '没有改善，下雨就会积水',
      },
    ],
    WorkingConditionE: [
      {
        value: '1',
        label: '有较大的改变',
      },
      {
        value: '2',
        label: '有改变，但是不明显',
      },
      {
        value: '3',
        label: '没有改变',
      },
    ],
    WorkingConditionF: [
      {
        value: '1',
        label: '非常满意',
      },
      {
        value: '2',
        label: '满意',
      },
      {
        value: '3',
        label: '不满意',
      },
    ],
  },
});

// 提交上报
const onSubmitData = async () => {
  // patrolProblemadd(AllData.formData).then((response) => {
  //   proxy.showSuccessToast('填报成功');
  //   closeDaKa();
  // });
};
</script>

<style lang="less" scoped>
.questionnaire {
  height: 100%;
  overflow: auto;
  background: #f1f1f1;

  .top {
    width: 100%;
    // background: red;
    .ImgCLass {
      margin: auto;
      display: block;
      width: 667px;
      height: 120px;
      position: relative;
      top: 12px;
    }
    .below {
      margin-top: 15px;
      width: 667px;
      margin-left: auto;
      margin-right: auto;
      // background: yellow;
      p {
        text-indent: 2em;
        padding: 0px;
        margin: 0px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 25px;
        color: #121212;
        line-height: 39px;
      }
    }
  }
  .under {
    width: 100%;
    margin-top: 10px;
    .BottomView {
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: space-around;
      margin-bottom: 100px;
      // background: red;
      .BotBtn {
        margin-top: 20px;
        width: 45%;
      }
    }
  }
}
:deep(.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: 30px;
  color: #121212;
  // background: red;
}
</style>