<template>
  <div class='wrap'>
    <h3><i style="margin-right:10px"  class="ivu-icon ivu-icon- iconfont icon-jiantoujinggao"></i>资讯管理</h3>
    <div class="infoContent">
       <i-form :model="form" :label-width="80">
          <Form-item label="标题">
              <i-input v-model="form.ntitle" placeholder="请输入资讯标题"></i-input>
          </Form-item>
          <Form-item label="分类" class="classify" prop='ntypeid'>
              <i-select v-model="form.ntypeid" placeholder="请选择资讯分类">
                  <i-option v-for="item in classifyList" :key="item.ntypeid" :value="item.ntypeid">{{item.ntypename}}</i-option>
              </i-select>
          </Form-item>
           <Form-item label="是否置顶"  class="radio" prop=' nistop'>
              <Radio-group  v-model="form.nistop">
                <Radio label='0'><span>不置顶</span> </Radio>
                <Radio   label='1'><span>置顶</span> </Radio>
              </Radio-group>
          </Form-item>
          <Form-item  v-if="form.nistop==='1'" label="排序" class="radio radioOrder" prop=' norder'>
               <!-- <div class="order"> -->
                  <!-- <div class="btn" @click="calc(-1)"><i  class="ivu-icon ivu-icon- iconfont icon-jianhao"></i></div> -->
            <i-input v-model="form.norder" style="text-align:center"  class="numInput">
               <i-button slot="prepend" @click='calc(-1)' icon='ivu-icon ivu-icon- iconfont icon-jianhao' ></i-button>
               <i-button slot="append" @click='calc(1)' icon='ivu-icon ivu-icon- iconfont  icon-21'></i-button>
            </i-input>
                  <!-- <div class="btn" @click="calc(1)"><i  class="ivu-icon ivu-icon- iconfont icon-21 "></i></div> -->
               <!-- </div> -->
          </Form-item>
          <Form-item label="是否广告位" class="radio" prop='nlevel'>
              <Radio-group v-model="form.nlevel">
                <Radio  label='0'>否</Radio>
                <Radio   label='1'>是</Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="标签" >
            <i-select style="width:460px" :model.sync="form.ntagname" multiple @on-change="updatePermission" >
                <i-option v-for="item in labelList" :key="item.ntagid" :value="item.ntagname" :label='item.ntagname'>{{ item.ntagname }}</i-option>
            </i-select>
              <!-- <i-input :value.sync="form.ntagname" placeholder="请输入标签"></i-input> -->
          </Form-item>
          <Form-item class="labelTop">
            <p style="font-size:12px">资讯内容</p>
            <editor ref="editor" :value="form.ncontent" @on-change="handleChange"/>
          </Form-item>
          <Form-item class="imgVideo labelTop" >
            <p>封面图<span>(建议尺寸：840X400)</span></p>
            <div class="upload">
                <Upload   ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" type="drag" action=''>
                  <div style="width: 200px;height:200px;line-height: 200px;">
                    <i style="color:#3D8EFE" class="ivu-icon ivu-icon- iconfont icon-21"></i>
                  </div>
                </Upload>
                 <img style="height:150px;width:150px" v-if="!flagImg" :src="imgCover" alt="">
            </div>
          </Form-item>
           <Form-item class="imgVideo" style="margin-left:200px">
             <p>视频</p>
            <div class="upload">
                <Upload  ref="upload" :show-upload-list="false" :format="['mp4','avi',]" :max-size="2048" :before-upload="handleBeforeUpload2" :on-format-error="handleFormatError2" :on-exceeded-size="handleMaxSize2" type="drag" action=''>
                  <div style="width: 200px;height:200px;line-height: 200px;">
                    <i  style="color:#3D8EFE" class="ivu-icon ivu-icon- iconfont icon-21"></i>
                  </div>
                </Upload>
                    <div class="videoFile" v-if="!flagVideo" >
                      <img src="../../../assets/img/video.png" alt="">
                    <video style="height:200px;width:200px"  :src="form.nvideo" autoplay alt="" />
                    </div>
            </div>
          </Form-item>
          <Form-item class="submitBtn">
           <Button @click="submit" type="primary" middle>提交</Button>
          </Form-item>
       </i-form>
    </div>
  </div>
</template>

<script>
import Editor from '_c/editor'
// import store from '@/store'

// import Cropper from '@/components/picture/index.vue'
import { addInfo, classify, tagList } from '@/api/info.js'

export default {
  components: {
    Editor
    // Cropper
  },
  data () {
    return {
      classifyList: [],
      imgCover: '',
      labelList: [],
      flagImg: true,
      flagVideo: true,
      userInfo: {},
      form: {
        ntitle: '',
        ncontent: '',
        ncontxt: '',
        ncover: '',
        nvideo: '',
        nvsize: '',
        nvsuffix: '',
        ntypeid: '',
        norder: 1,
        nistop: '0',
        nlevel: '',
        edid: '',
        schoolid: '',
        createid: '',
        ntagname: undefined
      }
    }
  },
  mounted () {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    // console.log(this.userInfo.content)
    this.form.schoolid = this.userInfo.content.schoolid
    this.form.edid = this.userInfo.content.edid
    this.form.nlevel = this.userInfo.content.schoolstate
    this.form.createid = this.userInfo.content.userid
    // console.log(this.form)
    // 获取分类列表
    classify().then(res => {
      // console.log(res.data.obj)
      this.classifyList = res.data.obj
    })
    // 获取标签；列表
    tagList().then(res => {
      // console.log(res.data.obj)

      this.labelList = res.data.obj
    })
  },
  methods: {
    // 将标签内容格式化
    updatePermission (e) {
      // console.log(e)
      this.form.ntagname = JSON.stringify({ ...e })
    },
    // 排序
    calc (num) {
      this.form.norder = Number(this.form.norder) + Number(num)
    },
    // 上传图片
    handleBeforeUpload (file) {
    // 创建一个 FileReader 对象
      let reader = new FileReader()
      // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
      // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
      // 读取文件作为 URL 可访问地址
      reader.readAsDataURL(file)
      this.form.ncover = file.name

      const _this = this
      reader.onloadend = function (e) {
        file.url = reader.result
        // console.log(file.url)
        // console.log(_this.base64ToFile(file, file.url))
        _this.imgCover = file.url
        _this.flagImg = false
      }
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    // 上传视频
    handleBeforeUpload2 (file) {
    // 创建一个 FileReader 对象
      let reader = new FileReader()
      // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
      // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
      // 读取文件作为 URL 可访问地址
      reader.readAsDataURL(file)
      // console.log(file)
      this.form.nvideo = file.name
      this.form.nvsuffix = file.name.split('.')[1]
      // console.log(this.form.nvsuffix[1])
      const _this = this
      reader.onloadend = function (e) {
        file.url = reader.result
        // console.log(file.url)
        // _this.form.nvideo = file.url
        // console.log(_this.extname(file))

        var size = file.size
        _this.form.nvsize = size
        _this.flagVideo = false
        _this.flag = false
      }
    },
    handleFormatError2 (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 mp4 或 avi 格式的图片。'
      })
      this.flagVideo = true
    },
    handleMaxSize2 (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    // 获取资讯内容
    handleChange (e) {
      console.log(e)
      this.form.ncontent = e
      this.form.ncontxt = e.replace(/<[^>]+>/g, '')
    },
    // 添加
    submit () {
      console.log(this.form)
      addInfo(this.form).then(res => {
        console.log(res)
      })
    }
  }

}
</script>

<style lang='less' scoped>
.wrap{
  padding: 0;
  h3{
    background: #ffffff;
    padding: 10px;
    border-bottom: 10px solid #F5F7F9;
    .icon-jiantoujinggao:hover{
      cursor: pointer;
    }
  }
  .infoContent{
    padding: 20px 10px 20px 10px;
    background: white;
    .ivu-input-group .ivu-input, .ivu-input-group .ivu-input-inner-container {
    width: 100%;
    float: left;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
   .ivu-form .ivu-form-item-label {
      font-size: 12px!important;
    }
    .classify{
      display: inline-block;
      width: 300px;
    }
    .submitBtn{
      display: flex;
      justify-content: center;
      margin-top:60px;
    }
    .radioOrder{
      margin-left: -35px;
      margin-right: 20px;
    }
    .radio{
      display: inline-block;
      .ivu-input-group {
        width: 110px;
      }
      .ivu-btn-icon-only{
        height: 34px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        // line-height: 20px;
      }
      // .ivu-input {
      //   height: 35px;
      //   width: 80px!important;
      // }
    }

    .labelTop{
      margin-left: -40px;
    }
    .imgVideo{
      display: inline-block;
      position: relative;
      p{
        font-size: 16px;
        span{
          padding-left: 10px;
          font-size: 12px;
          color: #3D8EFE;
        }
      }
      img{
        position: absolute;
        top: 60px;
        left: 25px;
        z-index: 999;

      }
    }
    .upload{
      height: 200px;
      width: 200px;
      // border:1px solid grey;
      .ivu-upload{
        display: flex;
        justify-content: center;
        align-items: center;
        width:200px!important;
        height: 200px!important;
      }
      .ivu-btn-ghost{
        width: 200px;
        height: 200px;
        color: #3D8EFE;
        font-size: 40px;
        border: none;
      }
      .icon-21:before {
        font-size: 40px;
      }
      .videoFile{
        // border: 1px solid grey;
         height: 200px;
        width: 200px;
        position: relative;
           img{
        height: 120px;
        position: absolute;
        top: -200px;
        left: -55px;
        width: 150px;
        margin-left: 80px;
        margin-top: 40px;
        z-index: 999;
        }

      }
    }

  }
}
</style>
