<template>
  <div>
    <Form label-position="left" :label-width="40">
        <FormItem label="标题">
            <Input></Input>
        </FormItem>
        <FormItem label="分类">
          <Select v-model="select" style="width:180px">
              <Option v-for="(item,index) in selectList" :value="item.id" :key="index">{{ item.title }}</Option>
          </Select>
          <div class="istop">
            <FormItem label="是否置顶"  :label-width="60">
              <RadioGroup v-model="radio">
                  <Radio label="notop">不置顶</Radio>
                  <Radio label="istop">置顶</Radio>
              </RadioGroup>
            </FormItem>
          </div>
          <div class="istop">
            <FormItem label="是否广告位"  :label-width="80" inline>
              <RadioGroup v-model="poster">
                  <Radio label="noPoster">否</Radio>
                  <Radio label="isPoster">是</Radio>
              </RadioGroup>
            </FormItem>
          </div>
        </FormItem>
        <FormItem label="标签">
            <Input  style="width:420px"></Input>
        </FormItem>
    </Form>
    <div>
      <div>
        <div>咨讯内容</div>
          <paste-editor></paste-editor>
      </div>
    </div>
    <div class="upLoad">
      <div class="upLoad-div">
        <span>封面图<span class="upLoad-size">(建议图片尺寸:840 x 400)</span></span>
        <Upload class="upLoad-border" :before-upload="handleUpload" action="//jsonplaceholder.typicode.com/posts/" >
            <div>
              <Icon type="md-add" size="52" style="color: #3399ff"></Icon>
            </div>
        </Upload>
      </div>
      <div class="upLoad-div">
        <span>视频</span>
        <Upload class="upLoad-border" action="//jsonplaceholder.typicode.com/posts/">
            <div>
              <Icon type="md-add" size="52" style="color: #3399ff"></Icon>
            </div>
        </Upload>
      </div>
    </div>
    <Button size="large" type="primary">完成</Button>
    <img :src="logoPreview" alt="">
  </div>
</template>
<script>
import pasteEditor from "../../components/editor/editor.vue"
export default {
  name: 'info',
  components:{
    pasteEditor
  },
  data(){
    return {
      selectList:[
        {id:1,title:"时事"},
        {id:2,title:"最新"},
        {id:3,title:"国家"},
        {id:4,title:"教育"}
      ],
      select:"",
      radio:"notop",
      poster:"noPoster",
      logoPreview:''
    }
  },
  methods:{
    handleUpload(file){
      this.file = file
      const reader = new FileReader()
      reader.readAsDataURL(file)
        reader.onload = () => {
          const _base64 = reader.result
          this.logoPreview = _base64
        }
      return false;
    }
  }
}
</script>
<style lang="less">
  @import './info.less';
</style>

