<template>
    <div class="login">
        <div class="top_div"></div>
        <div class="login_ct">
          <el-alert
          title="严禁发布低价欺诈以及图片虚假的信息诱导买家，价格严重偏离正常水平的及图片虚假的信息将被删除"
          type="warning"
           show-icon
          :closable="false">
        </el-alert>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">
              <p>基础信息</p>
              <el-form-item label="标题" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="类别" prop="category">
                <el-select v-model="ruleForm.category" placeholder="请选择活动区域">
                  <el-option v-for="(item, index) in categoryList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上传图片" prop="fileList">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="#"
                  :show-file-list="true"
                  :on-change="fileChange"
                  :file-list="ruleForm.fileList"
                  :on-remove="fileRemove"
                  accept="image/*"
                  :auto-upload="false"
                  >
                  <el-button type="primary">请选择图片</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="信息详情" prop="detail">
                <el-input type="textarea" v-model="ruleForm.detail" placeholder="请输入信息详情介绍"></el-input>
              </el-form-item>
               <p>联系方式</p>
               <el-form-item label="联系电话" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="contact">
                <el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="QQ">
                <el-input v-model="ruleForm.qq" placeholder="请输入QQ"></el-input>
              </el-form-item>
              <el-form-item label="E-mail">
                <el-input v-model="ruleForm.email" placeholder="请输入E-mail"></el-input>
              </el-form-item>
            </el-form>
             <div class="login_btn">
                 <el-button class="right" size="small" type="primary" @click="login('ruleForm')">发布信息</el-button>
             </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
       var checkIdCard = (rule, value, cb) => {
        if (value.length > 0) {
          return cb();
        }
        cb(new Error("请选择图片"));
      };
      return {
        ruleForm: {
          name: '',
          category: 1,
          detail: '',
          phone: '',
          contact: '',
          qq: '',
          email: '',
          imageUrl: '',
          fileList: [],
        },
        rules: {
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          category: [
            { required: true, message: '请选择类别', trigger: 'change' }
          ],
          detail: [
            { required: true, message: '请输入信息详情', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' }
          ],
          contact: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          fileList: [
            { required: true, message: "请选择图片", trigger: ['blur', 'change'] },
            { validator: checkIdCard, trigger: ['blur', 'change'] }
          ]
        },
        categoryList: [
          {
            label: '生活服务',
            value: 1
          },
          {
            label: '同城活动',
            value: 2
          },
          {
            label: '商务服务',
            value: 3
          },
          {
            label: '宠物市场',
            value: 4
          },
          {
            label: '行业市场',
            value: 5
          },
          {
            label: '教育培训',
            value: 6
          },
          {
            label: '跳蚤市场',
            value: 7
          },
          {
            label: '车辆相关',
            value: 8
          },
          {
            label: '房产出售',
            value: 9
          },
          {
            label: '餐饮美食',
            value: 10
          },
          {
            label: '票务卡券',
            value: 11
          },
          {
            label: '宠物市场',
            value: 12
          }
        ]
      };
    },
    methods: {
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              message: '人工审核中',
              type: 'success'
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      goPage(path) {
          if(path) {
             this.$router.push(path);
          }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       /* 只保留最后一次上传的文件 */
      fileChange (file, fileList) {
        if (fileList.length > 0) {
          this.ruleForm.fileList = [fileList[fileList.length - 1]]
        }
      },
      fileRemove(file) {
        this.ruleForm.fileList = []
      }
    }
  }
</script>
<style scoped lang="scss">
    .login {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      .top_div{
        height: 50%;
        width: 100%;
        background: #008ead;
      }
      .login_ct{
        width: 600px;
        margin: -100px auto 0;
        background: #fff;
        padding: 40px 0 0;
        border: 1px solid #e7e7e7;
        position: relative;
        .el-form{
          padding: 0 40px;
          .code{
            width: 90%;
            float: right;
            height: 30px;
            vertical-align: middle;
            border-radius: 5px;
            border: 1px solid #d3d3d3;
            background: #F2FBFE;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
          }
          .login_text{
              font-size: 12px;
              line-height: 20px;
              display: inline-block;
              a{
                  color: #409EFF;
                  font-size: 12px;
                  cursor: pointer;
              }
          }
        }
        .login_btn {
          height: 50px;
          margin-top: 40px;
          border-top: 1px solid #e7e7e7;
          line-height: 50px;
          padding: 10px 40px 0;
          
          .right{
            float: right;
            button{
                margin: 0 10px;
            }
          }
        }
      }
    }
</style>
