<template>
  <div class="wrapper" style="padding: 30px">
    <div class="header">
      <div>
        <h1>防疫调查登记问卷</h1>
      </div>
      <div style="position: absolute;padding: 5px 20px;font-size: 15px;color: rgba(0,0,0,0.39);
      right: 10px;top:10px;border: 1px solid rgba(0,0,0,0.39);border-radius: 10px">
        <span>梅陇社区</span>
      </div>
    </div>
    <div class="main">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.userNo" maxlength="11"
                    show-word-limit oninput="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item v-for="(item,index) in queDbList" :label="item.label" :prop="item.prop">
          <el-select style="width: 100%" v-model="form.queResults[index]" placeholder="请选择" clearable>
            <el-option v-for="o in item.resultList" :key="o.id" :label="o.value" :value="o.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submit" :disabled="disabled">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer" style="color: rgba(127,127,127,0.56)">
      <el-row>
        <el-col :span="12">
          <div>
            技术支持：会山科技
          </div>
        </el-col>
        <el-col :span="12">
          <div style="text-align: right">
            hs@willalp.com
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {getQueList, save} from "@/api/yiqing/yiqing";

  export default {
    name: "form",
    data() {
      return {
        queDbList: [],
        disabled: false,
        form: {
          userName: '',
          userNo: '',
          orgNo: 'G00000007',
          orgName: '梅隆社区医院',
          queResults: ['', '', '', '', '', '', ''],
          ques: []
        },
        rules: {
          userName: [
            {required: true, message: "姓名不能为空", trigger: "blur"}
          ],
          userNo: [
            {required: true, message: "手机号不能为空", trigger: "blur"}
          ],
          queResults: [
            {required: true, message: "请答题", trigger: "blur"}
          ],
        }
      }
    },
    created() {
      this.getList()
      debugger
      this.form.userName = localStorage.getItem("nickName")
      this.form.userNo = localStorage.getItem("phone")
      this.form.orgNo = localStorage.getItem("orgInfo").orgNo
      this.form.orgName = localStorage.getItem("phone").orgName
    },
    methods: {
      getList() {
        getQueList().then(re => {
          if (re.code === 200) {
            this.queDbList = re.data
            this.queDbList.forEach((q) => {
              this.form.ques.push(q.id)
            })
          }
        })
      },
      submit() {
        //this.disabled = true
        var message = "";
        var isOk = false;
        var phone = this.form.userNo
        var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
        if (phone == '') {
          // console.log("手机号码不能为空");
          message = "手机号码不能为空！";
          isOk = true;
        } else if (phone.length !== 11) {
          //console.log("请输入11位手机号码！");
          message = "请输入11位手机号码！";
          isOk = true;
        } else if (!myreg.test(phone)) {
          //console.log("请输入有效的手机号码！");
          message = "请输入有效的手机号码！";
          isOk = true;
        }
        if (isOk) {
          this.$modal.msgError(message);
          return;
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            save(this.form).then(re => {
              if (re.code === 200) {
                this.$modal.msgSuccess(re.msg);
                location.reload()
              }
            })
          }
        });
        setTimeout(() => {
          this.disabled = false
        }, 2000)
      }
    }
  }
</script>

<style scoped>
  .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .header {
    flex: 0;
  }

  .main {
    flex: 1;
  }

  .footer {
    flex: 0;
  }
</style>
