<template>
  <div>
    <Form label-position="left" :label-width="40">
        <FormItem label="标题">
            <Input v-model="ntitle"></Input>
        </FormItem>
        <FormItem label="分类">
          <Select v-model="selectInfo" style="width:180px">
              <Option v-for="(info,index) in infoList" :value="info.ntypeid" :key="index">{{ info.ntypename }}</Option>
          </Select>
          <div class="istop">
            <FormItem label="是否置顶"  :label-width="60">
              <RadioGroup v-model="radio">
                  <Radio label="0">不置顶</Radio>
                  <Radio label="1">置顶</Radio>
              </RadioGroup>
            </FormItem>
          </div>
          <!-- <span v-if="radio==1" class="sort">
            <FormItem label="排序"  :label-width="40">
              <Input v-model="sort">
                <Button @click="sortcut"  slot="prepend">-</Button>
                <Button @click="sortadd" slot="append">+</Button>
              </Input>
            </FormItem>
          </span> -->
          <div v-show="radio==1" class="sort">
            <div class="sort-div">
              <span>排序</span>
              <Input v-model="sort" type="text" style="width:130px">
                <Button @click="sortcut"  slot="prepend">-</Button>
                <Button @click="sortadd" slot="append">+</Button>
              </Input>
            </div>
          </div>
          <div class="istop">
            <FormItem label="是否广告位"  :label-width="80" inline>
              <RadioGroup v-model="poster">
                  <Radio label="0">否</Radio>
                  <Radio label="1">是</Radio>
              </RadioGroup>
            </FormItem>
          </div>
        </FormItem>
        <FormItem label="标签">
            <!-- <Input  style="width:420px"></Input> -->
          <Select v-model="selectLabel" multiple :max-tag-count="3" :max-tag-placeholder="maxTagPlaceholder" style="width:420px">
              <Option v-for="(label,i) in labelList" :value="label.ntagname" :key="i">{{ label.ntagname }}</Option>
          </Select>
        </FormItem>
    </Form>
    <div>
      <div>
        <div>咨讯内容</div>
          <paste-editor @func="getObjFormSon"></paste-editor>
      </div>
    </div>
    <div class="upLoad">
      <div class="upLoad-div">
        <span>封面图<span class="upLoad-size">(建议图片尺寸:840 x 400)</span></span>
        <Upload  
          :before-upload="handleImgUpload" 
          action="//jsonplaceholder.typicode.com/posts/"
          class="upLoad-border" >
            <div>
              <img v-if="imgAcitve" :src="imgAcitve.result" class="imgActive">
              <Icon v-else type="md-add" size="52" style="color: #3399ff"></Icon>
            </div>
        </Upload>
      </div>
      <div class="upLoad-div">
        <span>视频</span>
        <Upload 
          :before-upload="handleVideoUpload" 
          :format="['mp4']"
          action="//jsonplaceholder.typicode.com/posts/"
          class="upLoad-border" >
          <div v-if="videoName" class="video-div">
            <img src="../../../assets/viedo.jpg">
            <span>{{videoName}}</span>
          </div>
          <Icon v-else type="md-add" size="52" style="color: #3399ff"></Icon>
        </Upload>
      </div>
    </div>
    <Button size="large" @click="submit" type="primary">完成</Button>
  </div>
</template>
<script>
import { getInfoList,getLabelList,newsAdd } from '@/api/data'
import pasteEditor from "../../components/editor/editor.vue"
export default {
  name: 'info',
  components:{
    pasteEditor
  },
  data(){
    return {
      infoList:[], // 分类列表
      selectInfo:"", // 选中分类
      labelList:[],  //标签列表
      selectLabel: [],  // 选中标签
      radio:"0",  // 是否置顶
      poster:"0",  // 是否广告
      sort:9999,  // 置顶排序
      imgAcitve:'',  // 预览图片路径
      videoAcitve:'',  // 选中视频信息
      videoName:'',  // 选中视频名
      ntitle:'',  // 标题
      oldActiveImg:'',
      objFormSon:{}
    }
  },
  watch:{
    selectLabel(){
      this.selectLabel.toString()
    }
  },
  created(){
    // 获取分类列表
    getInfoList().then(res=>{
      if(res.status==200){
        this.infoList=res.data.obj;
      }
    }),
    // 获取标签列表
    getLabelList().then(res=>{
      if(res.status==200){
        this.labelList=res.data.obj;
      }
    })
  },
  methods:{
    getObjFormSon(data){
      this.objFormSon = data
      console.log(this.objFormSon)
    },
    // 提交咨讯添加
    submit(){
      var ntitle=this.ntitle;
      var ntypeid=this.selectInfo;
      var nistop=this.radio;
      var norder=nistop==1?this.sort:'';
      var ntagname="{"+this.selectLabel.toString()+"}";
      var ncover=this.oldActiveImg.name;
      var nvideo=this.videoAcitve.name;
      var nvsize=this.videoAcitve.size;
      var nvsuffix=this.videoAcitve.type;
      var ncontent=this.objFormSon.html;
      var ncontxt=this.objFormSon.text;
      var {token,userid,edid,schoolid,createid}=this.$store.state.user.$userList;
      var device="web"
      // var {edid,schoolid,createid}=userList;
      // console.log(edid,schoolid,createid)+

      var params={device,userid,token,ntitle,ntypeid,nistop,norder,ntagname,ncover,nvideo,nvsize,nvsuffix,ncontent,ncontxt,edid,schoolid,createid};
      console.log(params)
      if(params){
        newsAdd(params).then(res=>{
          console.log(res.data)
          if(res.status==200){
            this.labelList=res.data.obj;
          }
        })
      }
      // console.log(ntitle,ntypeid,nistop,norder,ntagname,ncover,nvideo,nvsize,nvsuffix,ncontent,ncontxt,edid,schoolid,createid)
    },
    // 标签隐藏
    maxTagPlaceholder (num) {
      return 'more '+ num;
    },
    // 选中图片文件
    handleImgUpload(file){
      this.oldActiveImg = file
      // console.log(this.oldActiveImg)
      const reader = new FileReader()
      reader.readAsDataURL(file)
        reader.onload = () => {
          const _base64 = reader;
          this.imgAcitve = _base64;
        }
      return false;
    },
    // 选中视频文件
    handleVideoUpload(file){
      this.videoAcitve=file;
      console.log(file)
      this.videoName=file.name;
      return false;
    },
    // 置顶排序 +
    sortadd(){
      var sort=this.sort+1;
      if(sort<9999){
        this.sort=sort;
      }else{
        this.sort=9999
      }
    },
    // 置顶排序 -
    sortcut(){
      var sort=this.sort-1;
      if(sort>1){
        this.sort=sort;
      }else{
        this.sort=1;
      }
    }
  }
}
</script>
<style lang="less">
  @import './info.less';
</style>

