<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData"></main-top>
    <div class="table-interface">
      <div class="top-body">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="问卷名称：" style="width:318px;">
            <el-input v-model="form.name" placeholder="请输入问卷名称"></el-input>
          </el-form-item>
          <el-form-item label="问卷说明：">
            <vue-editor v-model="content" />
          </el-form-item>
          <el-form-item label="问题1：" style="width:408px;">
            <el-input v-model="form.name" placeholder="请输入问题"></el-input>
            <div class="q-item">
              <el-label>问题描述：</el-label>
              <el-radio-group v-model="form.resource">
                <el-radio label="单选"></el-radio>
                <el-radio label="多选"></el-radio>
                <el-radio label="问答"></el-radio>
              </el-radio-group>
              <el-label>必选：</el-label>
              <el-radio-group v-model="form.resource">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
              <el-label>选项：</el-label>
              <div class="slt-item">
                <el-input v-model="form.name" placeholder="选项1（必填）"></el-input>
              </div>
              <div class="slt-item">
                <el-input v-model="form.name" placeholder="选项2（必填）"></el-input>
              </div>
            <el-button>添加选项</el-button>
            </div>
            <el-button>添加问题</el-button>

          </el-form-item>
          <el-form-item label="截止时间：" style="width:518px;">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">发布</el-button>
            <el-button @click="$router.back()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import MainTop from '@/components/main-top'
import SearchBar from '@/components/search-bar'
import { VueEditor } from 'vue2-editor'

const crumbData = [
  {
    name: '消息管理',
    id: 0
  },
  {
    name: '发布资讯',
    id: 0
  }
]

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop,
    VueEditor,
    SearchBar
  },
  data () {
    return {
      crumbData,
      content: '<h1>Some initial content</h1>',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>

<style>
.ql-picker-label {
  line-height: 1;
  overflow: hidden;
}
</style>
