<template>
  <!-- 提建议 -->
  <div class="propound flex flexc">
    <Header>
      <div class="title" slot="title">我要建议</div>
      <div slot="right" class="back-home flex aic" @click="handleBackHome">
        <img class="mr10" src="../../assets/img/shouye.png" />
        返回首页
      </div>
    </Header>
    <div class="main flex1">
      <el-form ref="form" :model="form" label-width="140px">
        <div class="form-top">
          <el-form-item class="tips-title" label="我要建议">
            <span class="tips"
              >尊敬的用户，您好！感谢您给我们提出宝贵的建议。我们会进行严格保密。您的个人信息绝不会向外公开，请根据您的实际情况或内心真实想法如实填写。</span
            >
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="建议标题" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入建议标题"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="建议类型" prop="form.name">
                <el-radio-group v-model="form.resource">
                  <el-radio label="部门建议"></el-radio>
                  <el-radio label="办事建议"></el-radio>
                  <el-radio label="网站建议"></el-radio>
                  <el-radio label="我要纠错"></el-radio>
                  <el-radio label="我要投诉"></el-radio>
                </el-radio-group> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="真实姓名" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入您的真实姓名"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入您的身份证号"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入您的电话号码"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入您的邮箱账号"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系地址" prop="form.name">
                <el-cascader
                  :options="options"
                  clearable
                  v-model="form.name"
                  placeholder="请选择您的联系地址"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入您的详细地址"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="事件发生地" prop="form.name">
                <el-cascader
                  :options="options"
                  clearable
                  v-model="form.name"
                  placeholder="请选择事项发生地"
                ></el-cascader> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="form.name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入事件发生地详细地址"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
        </div>
        <div class="form-bottom">
          <el-form-item label="活动形式">
            <el-input
              type="textarea"
              v-model="form.desc"
              resize="none"
              placeholder="请输入具体建议内容"
            ></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="是否公开">
                <el-radio-group v-model="form.resource">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否保密" prop="form.name">
                <el-radio-group v-model="form.resource">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group> </el-form-item
            ></el-col>
            <el-col :span="12">
              <div class="tar">
                <el-button class="search-btn"> 我要建议 </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import { regionData } from "element-china-area-data";
export default {
  components: {
    Header,
  },
  data() {
    return {
      options: regionData,
      form: {
        name: "",
      },
    };
  },
  methods: {
    handleBackHome() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.propound {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .back-home {
    font-size: 28px;
    font-family: Source Han Sans CN;
    color: #ffffff;
    cursor: pointer;
  }
}
.main {
  width: 100%;
  padding: 40px;
}
/deep/.el-form-item__label {
  font-size: 24px;
  font-family: Source Han Sans CN;
  color: #333;
}
/deep/.el-radio__label {
  font-size: 24px;
  font-family: Source Han Sans CN;
  color: #333333;
}
/deep/.el-radio__inner {
  width: 27px;
  height: 27px;
  &::after {
    width: 10px;
    height: 10px;
  }
}
.form-top {
  height: 580px;
  padding: 26px;
  background: #ffffff;
  border-radius: 16px;
  /deep/.el-form-item__label {
    font-size: 24px;
    font-family: Source Han Sans CN;
    color: #333;
  }
  .tips-title {
    /deep/.el-form-item__label {
      width: 114px !important;
      margin-left: 20px;
      background: #e6effd;
      border-radius: 8px;
      font-size: 24px;
      font-family: Source Han Sans CN;
      color: var(--main-theme-color1);
    }
  }
  .tips {
    font-size: 18px;
    font-family: Source Han Sans CN;
    color: #99a6b7;
  }
  /deep/.el-input__inner {
    height: 64px;
    background: #f1f7fd;
    border-radius: 8px;
    font-size: 24px;
    font-family: Source Han Sans CN;
  }

  /deep/.el-form-item__content {
    height: 64px;
    display: flex;
    align-items: center;
  }
  /deep/.el-form-item__label {
    line-height: 64px;
  }
  /deep/.el-radio {
    margin-right: 15px;
  }
  /deep/.el-cascader {
    width: 100%;
  }
}
.form-bottom {
  height: 280px;
  margin-top: 30px;
  padding: 26px;
  background: #ffffff;
  border-radius: 16px;
  /deep/.el-textarea__inner {
    height: 144px;
    background: #f1f7fd;
    border-radius: 8px;
    font-size: 24px;
    font-family: Source Han Sans CN;
  }
  .search-btn {
    width: 162px;
    height: 60px;
    background: linear-gradient(
      -90deg,
      var(--main-assist-color1),
      var(--main-theme-color1)
    );
    border-radius: 8px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    color: #ffffff;
  }
}
</style>