<template>
  <div id="app">
		{{DataType}}
    <DataTypeComponent v-model="DataType" />
    <OrderByComponent />
    <el-button type="info" @click="edit" >编辑</el-button>
     <el-button type="info" @click="showData" >show data</el-button>

     <h1>富文本编辑器</h1>
{{RichText}}
     <EditorComponent v-model="RichText"/>
     
     <h1>单选组件</h1>
   <radioSelComponent @mounted="mountedcom" :codenum="10" ref="radioSel"  title="this is a title" />
   <div>
     <h1>多选组件</h1>
        <mutiSelComponent/>
   </div>

   <div>
     <h1>段落组件</h1>
        <ParagraphComponent/>
   </div>
	 
	  <div>
	   <h1>填空组件</h1>
	      <FillBlankComponent/>
	 </div>

   <div>
	   <h1>开放题组件</h1>
	      <OpenQuestionComponent/>
	 </div>

   <div>
	   <h1>矩阵单选组件</h1>
	      <MatrixRadioSelComponent/>
	 </div> 
   <div>
	   <h1>矩阵多选组件</h1>
	      <MatrixMutiSelComponent/>
	 </div>
   <div>
	   <h1>判断矩阵多选组件</h1>
	      <TureFalseMatrixMutiSelComponent/>
	 </div>
   <div>
	   <h1>判断矩阵单选组件</h1>
	      <TureFalseMatrixRadioSelComponent/>
	 </div>

      <div>
	     <h1>矩阵填空组件</h1>
	      <MatrixFillBlankComponent/>
	    </div>

      <div>
	     <h1>排序题</h1>
	      <RankComponent />
	    </div>

       <div>
	     <h1>选择排序题</h1>
	      <RankAfterSelComponent />
	    </div>

        <div>
	     <h1>比重分配题</h1>
	      <ProportionComponent />
	    </div>

       <div>
	     <h1>混合题型</h1>
       <!-- 已添加wangEditor富文本框 -->
	      <MixedQuestionComponent />
	    </div>
        <div>
      	<h1>图片组件</h1>
	      <ImageBase64Componet @HasGotImage="getImage" :param='1'  />
	    </div>

      <div>
      	<h1>图片剪切</h1>
	      <ImageCropper  v-model="ImageSrc" />
        <img :src="ImageSrc" />
      imageSrc:  {{ImageSrc}}
	    </div>

        <div>
      	<h1>树控件</h1>
 
	      <TreeComponent v-model="NodeData"  v-bind:Url="WebApiUrl" typeid=3 >

	      </TreeComponent>
        
	    </div>
      <h1>wangEditor富文本框</h1>
      <span v-html="udata" class="tui"></span>
      <TuiEditor @getText="settext" :title="udata"></TuiEditor>
     </div>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'
import radioSelComponent from './components/radioSelComponent.vue'
import mutiSelComponent from './components/mutiSelComponent.vue'
import EditorComponent from './components/EditorComponent.vue'
import ParagraphComponent from './components/ParagraphComponent.vue'
import DataTypeComponent   from './components/DataTypeComponent.vue'
import OrderByComponent from './components/OderByComponent.vue'
import FillBlankComponent from './components/FillBlankComponent.vue'
import OpenQuestionComponent from './components/OpenQuestionComponent.vue'
import MatrixRadioSelComponent from './components/MatrixRadioSelComponent.vue'
import MatrixMutiSelComponent from './components/MatrixMutiSelComponent.vue'
import TureFalseMatrixMutiSelComponent from './components/TrueFalseMatrixMutiSelComponent.vue'
import TureFalseMatrixRadioSelComponent  from './components/TureFalseMatrixRadioSelComponent.vue'
import MatrixFillBlankComponent from './components/MatrixFillBlankComponent.vue'
import RankComponent from './components/RankComponent.vue'
import RankAfterSelComponent from './components/RankAfterSelComponent.vue'
import ProportionComponent from './components/ProportionComponent.vue'
import MixedQuestionComponent from './components/MixedQuestionComponent.vue'
import ImageBase64Componet from './components/ImageBase64Componet'
import ImageCropper from './components/ImageCropper'
import TreeComponent from './components/CategoryTreeComponent'
import TuiEditor from './components/TuiEditor'


export default {
  name: 'app',
  components: {
    HelloWorld,radioSelComponent,mutiSelComponent,EditorComponent,ParagraphComponent,DataTypeComponent,
    OrderByComponent,FillBlankComponent,OpenQuestionComponent,MatrixRadioSelComponent,MatrixMutiSelComponent
    ,TureFalseMatrixMutiSelComponent,TureFalseMatrixRadioSelComponent,MatrixFillBlankComponent,RankComponent
    ,RankAfterSelComponent,ProportionComponent,MixedQuestionComponent,ImageBase64Componet,ImageCropper,TreeComponent,TuiEditor
  },
  data:function(){
   return {Data:'',DataType:0,ImageSrc:'',WebApiUrl:"http://localhost:23511",NodeData:null,RichText:'富文本',udata:''};
  },
  methods:
  {
    mountedcom:function(obj)
    {
   // alert("mounted emitted!");
      obj.canEdit=false;
    },
    edit:function()
    {
      this.RichText="hello,world";
      
      //this.$refs.radioSel.setEdit();
    },
    showData:function()
    {

      this.Data= this.$refs.radioSel.getQuestionData();
    },
    GetDataType:function(type)
    {
     
    },

   
    getImage:function(param,img)
    {
      this.ImageSrc=img;

      console.log('param:'+param);
      console.log('image source:'+img);
    },
    settext(val){
      this.udata=val;
    }

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;
  margin-top: 60px;
}

.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}


</style>