<template>
  <div>
    <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
      <el-form-item
          label="所属分类："
          prop="catid"
      >
      <el-cascader
      v-model="form.catid"
      :options="categoryList"
      :props="{
                checkStrictly: true,
                value:'id',
                label:'name',
                children:'children',
              }" 
      clearable></el-cascader>
      <el-checkbox style="margin-left:10px;" v-model="form.islink"   @change="isLinkOk">外部链接</el-checkbox>
      </el-form-item>
      <el-form-item
          label="资讯标题："
          prop="title"
      >
        <el-input v-model="form.title"  maxlength="50" placeholder="请输入资讯标题"></el-input>
       
      </el-form-item>
      <el-form-item
          label="推荐等级："
          prop="level"
      >
        <el-select v-model="form.level" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="image_url"  >
          <template v-slot:label >
            <span  style="display: inline-block">标题图片：</span>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="建议大小：400px*600px  支持格式：jpg、gif、png"
                placement="top"
            >
              <i class="el-icon-warning"></i>
            </el-tooltip>
            <span  style="display: inline-block">： </span>
          </template>
          <input
              type="file"
              class="inputIcon"
              ref="upfile"
              required
              @change="beforeAvatarUpload"
          />
          <div class="uploadImg" @click="uploadSildeShowClick">
              <div v-if="!form.imgurl" class="uploadImg_warp">
                <div class="uploadImg_img"><img src="@/assets/default_avatar.png"></div>
                <span>点击上传</span>
              </div>
            <div v-else style="width: 100%; height: 100%;"><img :src="form.imgurl" style="width: 100%;height: 100%;"></div>
          </div>
        </el-form-item>
      <el-form-item
          v-if="isLink==true"
          label="链接地址："
          prop="form"
      >
        <el-input v-model="form.linkurl"  maxlength="50" placeholder="请输入链接地址"></el-input>
      </el-form-item>
     <el-form-item  
     v-if="isLink==false"
      label="资讯内容："
      prop="content">
      <Editor @input="handelIncrease" :ContentValue="ContentValue" :value="value"></Editor>
     </el-form-item>

      <el-form-item label="资讯简介：" prop="introduce">
        <el-input  type="textarea" v-model="form.introduce" maxlength="80"
        show-word-limit  placeholder="输入简介" ></el-input>
      </el-form-item>
      <el-form-item
          label="作者："
          prop="author"
      >
        <el-input v-model="form.author"  maxlength="50" placeholder="请输入作者"></el-input>
      </el-form-item>
      <el-form-item
          label="来源："
          prop="copyfrom"
      >
        <el-input v-model="form.copyfrom"  maxlength="50" placeholder="请输入来源"></el-input>
      </el-form-item>
      <el-form-item
          label="来源链接："
          prop="fromurl"
      >
        <el-input v-model="form.fromurl"  maxlength="50" placeholder="请输入来源链接"></el-input>
      </el-form-item>
      <el-form-item
          label="标签："
          prop="tag"
      >
          <el-input
          v-model="tagInput"
          placeholder="输入标签"
          @keyup.enter="addTag"
        ></el-input>
        <el-tag
          v-for="(tag, index) in tags"
          :key="index"
          closable
          :disable-transitions="false"
          @close="removeTag(index)"
        >
          {{ tag }}
        </el-tag>

      </el-form-item>
      <!---1通过，2待审核，3待发 4,拒绝 5删除-->
      <el-form-item
          label="资讯状态："
          prop="status"
      >
      <el-radio-group v-model="form.status">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">待审核</el-radio>
          <el-radio :label="3">待发</el-radio>
          <el-radio :label="4">拒绝</el-radio>
          <el-radio :label="5">删除</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item
          label="浏览次数："
          prop="hits"
      >
        <el-input v-model.number="form.hits"  maxlength="50" placeholder="浏览次数"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loading="isloading">保存</el-button>
          <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Editor from "../../../components/editor/Editor";
export default {
  components: {
        Editor
    },
  props: {
    ArticleDataForm: {
      type: Object,
      default: () => {}
    },
    isloading:{
      type:Boolean,
      default: true
    },
    closeDlg:{
      type:Function
    }
  },
  data() {
    return {
      isLink:false,
      ContentValue:'',
      //级别：1 推荐文章，2：幻灯图片 3：推荐图文 4：头条相关 5：头条推荐 6:6级 7:7级
      options: [{
          value: '0',
          label: '暂无推荐'
        },{
          value: '1',
          label: '推荐文章'
        }, {
          value: '2',
          label: '幻灯图片'
        }, {
          value: '3',
          label: '推荐图文'
        }, {
          value: '4',
          label: '头条相关'
        }, {
          value: '5',
          label: '头条推荐'
        }],
      form: {
        catid:'',//分类ID
        title:'',//标题
        author:'',//作者
        status:1, //状态
        hits:0,//浏览量
        tag:[], //标签
        islink: '',//是否外链
        linkurl:'',//外链链接地址
        content:'',//内容
        imgurl:'',//图片地址
        level:'',//推荐等级
        author:'',//作者
        copyfrom:'',//来源
        fromurl:'',//来源链接
      },
      categoryList: [],
      Isdisabled: false,
      rules: {
        catid: [
          { required: true, message: '请选择所属分类' },
        ],
        title: [
          {  required: true, message: '资讯标题不能为空' },
        ],
        author: [
          {  required: true, message: '作者不能为空' },
        ],
      },
      tagInput: '',
      tags: [],
      value:''
    }
  },
  mounted() {
    if(this.ArticleDataForm) {
      this.form = Object.assign({} , this.ArticleDataForm)
      // this.form.status = 1
      this.tags = this.form.tag
      this.ContentValue = this.form.content
      console.log("内容:",this.ContentValue)
      this.isLink = this.form.islink
    }
    this.getRecursionCategory()
  },
  methods: {
    isLinkOk(o){
        console.log(o)
        if(o==true){
            this.isLink = true
        }else{
          this.isLink = false
        }
    },
    handelIncrease(step) {
          console.log("step====:",step)
          this.form.content = step
    },
    closeDlg() {
      console.log("edit提交")
      this.$emit('closeDlg',1)
    },
    onSubmit() {
      let that = this
      
      that.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.tag = that.tags
          this.$emit('ArticleSubmitClick', this.form)
        }
      })
    },
    getRecursionCategory(){
      let _t= this
      let parames = {}
      this.$api.news.categoryList(parames).then(res=>{
                if(res.code==200){
                  _t.categoryList = res.data
                }else{
                    this.$message.error("查询失败")
                }
            })
    },
    uploadSildeShowClick() {
      this.$refs.upfile.value = ''
      this.$refs.upfile.click()
    },
    beforeAvatarUpload(e) {
      let than = this
      let files = e.target.files[0]
      let suffixName = files.name.substring(files.name.lastIndexOf('.') + 1);   /* 得到文件后缀名 */
      if (suffixName !== 'jpg' && suffixName !== 'png' && suffixName !== 'jpeg' && suffixName !== 'gif' ) {
        this.$message.warning("上传文件只能是 jpg、png、jpeg、gif 格式!");
        // this.ishowFile = true
        return;
      }
      this.verificationPicFile(files, () => this.fileAdd(files))
    },
    fileAdd(files) {
      let formData = new FormData();
      // 组装post提交的数据
      formData.append("file", files);
      this.$api.publicApi.uploadFile(formData).then( res => {
        console.log(res)
        if( res.code == '200') {
          this.$message({
            type: 'success',
            message: '上传成功'
          })
          // this.avatarUrl =  res.data.imgUrl
          this.form.imgurl = res.data.imgUrl
        }else{
          this.$message({
            type: 'error',
            message: '上传失败'
          })
        }
      })
    },
    verificationPicFile(file, callback) {
      const that = this
      //读取图片数据
      var filePic = file;
      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        //加载图片获取图片真实宽度和高度
        var image = new Image();
        image.onload=function(){
          var width = image.width;
          var height = image.height;
          if (width >= 100 && height >= 100){
            callback()
          } else {
            // that.ishowFile = true
            that.from.avatar = ''
            that.$message.error('上传图片建议200*200px！')
          }
        };
        image.src= data;
      };
      reader.readAsDataURL(filePic);
    },
    addTag() {
      if (this.tagInput.trim()) {
        this.tags.push(this.tagInput.trim());
        
        this.tagInput = '';
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
}
</script>
<style>
.el-cascader-node>.el-radio{
  margin-top:25px;
}
</style>

<style lang="less" scoped>

.uploadImg {
  width: 110px;
  height: 100px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  cursor:pointer;
  position: absolute;
  top: 0;
}
.inputIcon {
  width: 110px;
  height: 100px;
  position: relative;
  opacity: 0;
}
.uploadImg_warp {
  width: 100%;
  height: 100%;
  display:flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.uploadImg_img {
  height: 32px;
}
.footerBotton {
  text-align: center;
}
.avatar-uploader {
  width: 110px;
  height: 110px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  position: relative;
}
.el-icon-plus {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-icon-plus-icon {
  display: block;
  margin-bottom: 15px;
}
.el-icon-plus-up {
  color: #222222;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}
/deep/ .el-radio {
  line-height: 40px;
}
</style>


