<template>
  <el-row>
    <!-- <el-col class="hidden-sm-and-down" :md="2" :lg="5" :xl="6" style="height: 1px;"></el-col> -->
    <el-col :xs="24" :sm="24" :md="18" :lg="14" :xl="12">
      <el-form ref="setCarouselform" label-width="100px" :model="setCarousel" :rules="carouselRules">
        <el-form-item label="轮播图标题" prop="title">
          <el-input v-model="setCarousel.title" type="text" placeholder="输入轮播图标题"></el-input>
        </el-form-item>
        <el-form-item label="轮播图片" prop="desc">
          <el-upload action="" ref="uploadwebmasterfile" :auto-upload="false">
            <el-button slot="trigger" size="medium">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片链接" prop="author">
          <el-input v-model="setCarousel.img_url" type="text" placeholder="请输入图片链接"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitsetCarousel">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      setCarousel: {},
      carouselRules: {
        'title': [
          { required: true, message: '请输入轮播图标题', trigger: 'blur' }
        ],
        'img_url': [
          { required: true, message: '请输入图片链接', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) { /* console.log(tab, event) */ },
    onSubmitsetCarousel () {
      this.$refs['setCarouselform'].validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          this.$message.error('请检查输入项，确认无误后，重新提交')
          return false
        }
      })
    }
  }
}
</script>
