<template>
    <el-form :rules="rules" :model="data" ref="form" class="sub-form">
            <p class="line"></p>
            <el-input v-model="data.orderNo" :value="index" type="hidden"></el-input>
            <el-form-item label="是否属于诊断：" prop="isReason" @change="emitVal">
                <el-select v-model="data.isReason" placeholder="请选择" :disabled="isEdit">
                    <el-option label="否" :value="0"></el-option>
                    <el-option label="是" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示位置：" prop="position" label-width="130px">
                <el-checkbox-group v-model="data.position" @change="emitVal" :disabled="isEdit">
                    <el-checkbox v-for="it in positions" :key="it.key" :label="it.key">{{it.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="标题" prop="title" label-width="130px">
                <el-input v-model="data.title" @change="emitVal"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content" label-width="130px">
                <InfoUeditor v-model="data.content" :config="config"></InfoUeditor>
            </el-form-item>
            <el-form-item label-width="130px">
                <el-button @click="addEmit">添加段落</el-button >
                <el-button @click="delEmit" type="info">删除本段落</el-button>
            </el-form-item>
    </el-form>
</template>

<script>
  import InfoUeditor from 'vue-ueditor-wrap';
  export default{
    props:['data','index','isEdit'],
    name:'InfoParagraph',
    components:{
      InfoUeditor
    },
    data(){
        return {
          config:{
            initialFrameWidth: null,
            initialFrameHeight: 350,
            imageUrlPrefix:"http://192.168.2.236:82",
            serverUrl: '/api/icssman/file/uploadImage',
            UEDITOR_HOME_URL: '/UEditor/',        //静态文件路径
            toolbars:[['source','undo','redo','bold','italic','underline','fontborder','strikethrough','superscript','subscript','removeformat','formatmatch','autotypeset','blockquote',
              'pasteplain','forecolor','backcolor','insertorderedlist','insertunorderedlist','selectall',
              'cleardoc','rowspacingtop','rowspacingbottom','lineheight','customstyle','paragraph',
              'fontfamily','fontsize','directionalityltr','directionalityrtl','indent','justifyleft',
              'justifycenter','justifyright','justifyjustify','touppercase','tolowercase','link','simpleupload','insertimage','horizontal',
              'date','time','spechars','fullscreen']]      //自定义工具
          },
          form:{},
          positions:[],               //位置列表
          rules:{
            isReason: [
              { required: true, message: '请选择是否属于诊断', trigger: 'change' }
            ],
            position: [
              { required: true, message: '请选择显示位置', trigger: 'change' }
            ],
            title: [
              { required: true, message: '请输入段落标题', trigger: 'change' }
            ],
            content: [
              { required: true, message: '请输入段落内容', trigger: 'change' }
            ],
          }
        }
    },
    watch:{
      'data.content':{          //content改变时传值
        handler(newVal,oldVal){
          this.emitVal();
        }
      }
    },
    created(){
      //显示位置枚举列表
      const pos = localStorage.getItem("icssEnumsData");
      this.positions = JSON.parse(pos)&&JSON.parse(pos).introducePositionEnum;
      this.form = this.data;console.log(this.isEdit)
    },
    methods:{
      addEmit(){
        this.$emit("add");
      },
      delEmit(){
        this.$emit("del",this.index);
      },
      emitVal(){
        let data = Object.assign({},this.data);
        data =   Object.assign({},data,{position:this.data.position?this.data.position.join(","):''});
        this.$emit("change",this.index,data);
      }
    }
  }
</script>

<style lang="less">
   .is-error .el-form-item__error{
        top:auto;
    }

</style>