<template>
  <div class="app-container">
    <el-row>
      <el-col :span="20" :offset="2">
        <el-form ref="previewForm" :model="previewForm" label-width="80px" label-position="top" disabled>
          <div v-for="(item,index) in answerObj" :key="index">
            <el-form-item :label="item.name" prop="userId" v-show="item.type == 'text'">
              <el-input type="textarea" v-model="previewForm.desc"></el-input>
            </el-form-item>
            <el-form-item :label="item.name" prop="userId" v-show="item.type == 'radio'">
              <el-radio-group v-model="previewForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="item.name" prop="userId" v-show="item.type == 'checkbox'">
              <el-checkbox-group v-model="previewForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="item.name" prop="userId" v-show="item.type == 'upload'">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>

    export default {
        name: "preview",
        data() {
            return {
              answerObj:[
                  {type:'text',name:'文本'},
                  {type:'radio',name:'单选'},
                  {type:'checkbox',name:'多选'},
                  {type:'upload',name:'上传'},
              ],
              previewForm:{
                  type:[],
              },
              dialogImageUrl: '',
              dialogVisible: false
            };
        },
        created() {

        },
        methods: {
            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    };
</script>
<style lang="scss" scoped>
  .addBtn{
    font-size: 18px;
    margin-left: 10px;
    cursor: pointer;
    color: #409eff;
  }
</style>

