<template>

    <el-row  id="AddRoom">

        <el-col :span="5">.</el-col>

            <el-col :span="14">

                <el-card class="box-card">

                      <div slot="header" class="clearfix">

                        <el-breadcrumb separator-class="el-icon-arrow-right">

                              <el-breadcrumb-item :to="{ path: '/' }">找室友信息</el-breadcrumb-item>

                              <el-breadcrumb-item>{{action}}</el-breadcrumb-item>

                        </el-breadcrumb>

                      </div>

                        <div class="text item">

                          <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                            <el-form-item label="位置"  required>

                              <el-col :span="10">

                              <el-form-item prop="areaname">

                              <el-select v-model="form.areaname" placeholder="所在区(如朝阳)" >

                                <el-option label="建邺" value="建邺"></el-option>

                                <el-option label="玄武" value="玄武"></el-option>

                                <el-option label="江宁" value="江宁"></el-option>

                              </el-select>

                              </el-form-item>

                             </el-col>

                              <el-col :span="4"><el-form-item label="位置" required></el-form-item></el-col>

                              <el-col :span="10">

                              <el-form-item prop="courtname">

                              <el-input v-model="form.courtname" placeholder="输入期待租房位置(如万达附近)" ></el-input>

                              </el-form-item>

                              </el-col>

                            </el-form-item>

                            <el-form-item label="标签"  required>

                            <el-col :span="7">

                              <el-form-item prop="tag1">

                              <el-input v-model="form.tag1"   placeholder="可输年龄信息(如80后、90后)"></el-input>

                              </el-form-item>

                            </el-col>

                              <el-col :span="1">.</el-col>

                              <el-col :span="7">

                              <el-form-item prop="tag2">

                              <el-input v-model="form.tag2"  placeholder="可输职业信息(如it、金融等)"></el-input>

                              </el-form-item>

                              </el-col>

                              <el-col :span="1">.</el-col>

                              <el-col :span="8">

                              <el-form-item prop="tag3">

                              <el-input v-model="form.tag3"  placeholder="其他标签"></el-input>

                              </el-form-item>

                              </el-col>

                            </el-form-item>

                            </el-form-item>

                            <el-form-item label="小区周边" require prop="surroundinginfo">

                             <el-radio-group v-model="form.identification">

                                <el-radio  label="0">无房共同找</el-radio>

                                <el-radio  label="1">有房求室友</el-radio>

                             </el-radio-group>

                            </el-form-item>

                            <el-form-item label="正文" require prop="roominfo">

                              <el-input type="textarea" placeholder="介绍一下自己和期待租房的价位、位置、装修、室友要求等..." v-model="form.roominfo"></el-input>

                              <div id="editorElem" style="text-align:left"></div>

                              <button v-on:click="getContent">查看内容</button>

                            </el-form-item>

                              <el-form-item>

                              <el-button type="primary" @click="submitForm('form')">{{gonext}}</el-button>

                              <el-button @click="resetForm('form')">重置</el-button>

                            </el-form-item>

                          </el-form>

                      </div>

                </el-card>

            </el-col>

        <el-col :span="5">.</el-col>

    </el-row>

</template>

<style>

  .text {

    font-size: 14px;

  }

  .item {

    margin-bottom: 18px;

  }

  .clearfix:before,

  .clearfix:after {

    display: table;

    content: "";

  }

  .clearfix:after {

    clear: both

  }

  .box-card{

    margin-top:30px;

  }

  #AddRoom {

    text-align: left;

  }

</style>

<script>

  import E from 'wangeditor'

  var editor = new E('#editorElem')

export default {

    data() {

      return {

        editorContent: '',

        radio: '1',

        action:"添加",

        gonext:"立即创建",

        form: {

          areaname:'',

          courtname:'',

          tag1:'',

          tag2:'',

          tag3:'',

          identification:'0',

          surroundinginfo:'',

        },

        rules: {

          courtname: [

            { required: true, message: '请输入位置', trigger: 'blur' },

            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }

          ],

          areaname: [

            { required: true, message: '请选择所在区', trigger: 'change' }

          ],

          tag1: [

            {  required: true, message: '请输入标签', trigger: 'change' }

          ],

          tag2: [

            {  required: true, message: '请输入标签', trigger: 'change' }

          ],

          tag3: [

            {  required: true, message: '请输入标签', trigger: 'change' }

          ],

          identification: [

            {  required: true, message: '请选择', trigger: 'change' }

          ],

          roominfo: [

            { required: true, message: '请输入正文', trigger: 'blur' }

          ]

        }

      }

    },

    mounted:function () {

      editor.customConfig.onchange = (html) => {

        this.editorContent = html

      }

      editor.create()

      if(this.$route.params.id)

          this.getRoom();

      },

    methods: {

      getContent: function () {

        alert(this.editorContent)

      },

      cancelForm(){

        this.$router.push("/postrooms");

      },

      resetForm(formName) {

        this.$refs[formName].resetFields();

      },

      getRoom(){

            var id=this.$route.params.id;

            //alert(id);

            //alert(this.dynamicSegment);

           this.editorContent='111';

            var gvue=this;

            this.$ajax({

                  method: 'get',

                  url: 'api/room/'+id+'?time='+new Date().getTime(),

                  changeOrigin:true,

                }).then(function (response) {

                  console.log(response.data);

                  gvue.form=response.data[0];

                  gvue.form.identification=response.data[0].identification+'';

                  gvue.action="编辑 (房间号:"+id+")";

                  gvue.gonext="立即修改";

                  gvue.editorContent=response.data[0].roominfo;

              editor.txt.html(response.data[0].roominfo);

                })

                .catch(function (error) {

                  console.log(error);

                });

          },

      submitForm(form) {//2表示是求组

        console.log('submit!');

        this.$refs[form].validate((valid) => {

          if (valid) {

              //alert('submit!');

              var url = 'api/roommate/add?time='+new Date().getTime();

              if(this.$route.params.id)

                 url = 'api/room/edit?time='+new Date().getTime();

              var gvue=this;

             this.form.roominfo=this.editorContent;

              this.$ajax({

                  method: 'post',

                  url:url ,

                  changeOrigin:true,

                  data: this.form//"courtname="+this.form.courtname+"&areaname="+this.form.areaname

               }).then(function (response) {

                  console.log(response);

                  if(response.data.ret_code===0){

                      gvue.$message({

                        showClose: true,

                        message: response.data.ret_msg+'，操作成功1',

                        type: 'success'

                      });

                      //gvue.$router.push("/addroom2/"+response.data.ret_roomid);

                      gvue.$router.push("/postrooms");

                  }

                })

                .catch(function (error) {

                  console.log(error);

                });

          } else {

                  console.log('error submit!!');

                  return false;

          }

        });

      }

    }

  }

</script>