<template>
  <div class="publishArticle block-wrapper main-content">
    <div class="wrapper-left content-wrapper">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form-main">
        <el-form-item class="upload-fa">
          <div class="update-rw">
            <div class="up">
              <h2><span>* </span>上传文章封面图片</h2>
              PNG/JPG/JPEG格式，大小2M以内
            </div>
          </div>
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            ref="uploadLogo"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload" prop="imageUrl">
            <div v-if="ruleForm.imageUrl" :style="{backgroundImage: 'url(' + ruleForm.imageUrl + ')'}" class="avatar"></div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <input type="hidden" v-model="articleId">
        <el-form-item label="文章标题" prop="artTit">
          <el-input v-model="ruleForm.artTit" placeholder="请填写文章标题"></el-input>
        </el-form-item>
        <dynamicTags :tagInfo="tagInfo" :industry="ruleForm.industry" ref="subjectTags" v-on:turnTags="turnTags($event)" :dy="dy" :dynamicTagsLength="5"></dynamicTags>
        <el-form-item label="文章正文">
          <!-- <el-input type="textarea" :rows="4" v-model="ruleForm.artDesc" placeholder="
  请填写详细描述"></el-input> -->
          <UE :id="artUe" :text="ruleForm.artDesc" ref="ueBox"></UE>
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>
    </div>
    <div class="wrapper-right">
      <el-row class="content-wrapper operate-box">
        <el-col :span="8" @click.native="articleAdd('ruleForm')">
          <em class="operateicon icon-issue"></em>
          <p style="color:#28b8fa">发布</p>
        </el-col>
        <el-col :span="8" @click.native="clickTiming('ruleForm')">
          <em class="operateicon icon-timeissue"></em>
          <p>定时发布</p>
        </el-col>
        <el-col :span="8" @click.native="articleDraft('ruleForm', 2)">
          <em class="operateicon icon-preview"></em>
          <p>预览</p>
        </el-col>
        <el-col :span="8" @click.native="articleDraft('ruleForm', 1)">
          <em class="operateicon icon-draft"></em>
          <p>存草稿</p>
        </el-col>
        <el-col :span="8" class="nodelete" v-show="!ifDelete">
          <em class="operateicon icon-delete"></em>
          <p>删除</p>
        </el-col>
        <el-col :span="8" v-show="ifDelete" @click.native="articleDelete">
          <em class="operateicon icon-delete"></em>
          <p>删除</p>
        </el-col>
      </el-row>
    </div>

    <!-- timing -->
    <el-dialog title="文章定时发布" :visible.sync="dialogFormVisible" width="400px">
      <el-form>
        <el-form-item label="请设置文章发布的时间：">
          <el-date-picker
            v-model="timingDate"
            type="datetime"
            default-time="12:00:00"
            :default-value="defaultTime" :placeholder="placeTime" format="yyyy-MM-dd HH:mm:ss" style="width:100%">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="articleTiming">确 定</el-button>
      </div>
    </el-dialog>

    <BackTop></BackTop>
  </div>
</template>

<script type="text/ecmascript-6">
  import Cookies from 'js-cookie';
  import httpUrl from '@/libs/http';
  import util from '@/libs/util';

  import dynamicTags from '../../sub-component/DynamicTags';
  import UE from './editorUE';

  export default {
    data() {
      return {
        dy:'',
        plf_user: '',
        platSource: '',
        tagInfo: {
          lableTit: '关键词',
          placeholder: '请填写相关的关键词，如：腐蚀防护、石墨烯、纳米材料'
        },
        artUe: 'artUeditorId', // uedtior的id
        uploadUrl: httpUrl.kxQurey.cachedFile,
        articleId: '',
        timingDate: '',
        defaultTime: new Date().toISOString(),
        ruleForm: {
          artTit: '',
          artDesc: '',
          industry: '',
          imageUrl: '', // 临时地址
          imgName: '' // 图片的name
        },
        rules: {
          artTit: [
            { required: true, message: '请填写文章标题', trigger: 'blur' }
          ]
        },
        dialogFormVisible: false,
        ifDelete: false
      };
    },
    created() {
      this.articleId = util.urlParse('arId');
      if (this.articleId) {
        this.getArticle();
      }
      this.plf_user = Cookies.get('plf_user');
      this.platSource = Cookies.get('platSource');
      this.ifDelete = true;
      // this.$refs.subjectTags
    },
    computed: {
      placeTime: function() {
        let d = new Date();
        return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().replace('T', ' ').replace(/\..+$/, '');
      }
    },
    methods: {
      getArticle() {
        this.$axios.get(httpUrl.kxQurey.article.query, {
          params: {
            articleId: this.articleId
          }
        }).then((res) => {
          if (res.success) {
            this.ruleForm.artTit = res.data.articleTitle;
            this.ruleForm.imageUrl = util.ImageUrl('article/' + res.data.articleImg, false);
            this.ruleForm.industry = res.data.subject;
            this.dy = res.data.subject;
            this.$refs.ueBox.setUEContent(res.data.articleContent);
          }
        });
      },
      turnTags(msg) {
        this.ruleForm.industry = msg;
      },
      getDataParams(publishTime) {
        this.ruleForm.artDesc = this.$refs.ueBox.getUEContent(); // 调用子组件方法
        let $data = {};
        $data.ownerId = this.plf_user;
        $data.articleType = '3';
        $data.articleTitle = this.ruleForm.artTit;
        $data.articleContent = this.ruleForm.artDesc;
        $data.subject = this.ruleForm.industry;
        $data.articleImg = this.ruleForm.imgName;
        $data.colNum = '7';
        if (this.articleId) {
          $data.articleId = this.articleId;
        };
        if (publishTime !== '') {
          $data.publishTime = publishTime;
        };
        return $data;
      },
      validImgIfVoid() { // 判断图片是否上传
        if (!this.ruleForm.imageUrl) {
          this.$alert('请上传文章封面图片', '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            center: true
          });
          return false;
        }
      },
      articleAdd(formName) { // 发布文章
        this.validImgIfVoid();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let paramsData = this.getDataParams();
            this.$axios.post(httpUrl.kxQurey.article.save, paramsData).then((res) => {
              if (res.success) {
                this.$alert('文章发布成功！', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  center: true
                });
              } else {
                this.$message({
                  message: '需求发布失败，请重新发布！',
                  type: 'warning'
                });
              };
              console.log(res);
            }).catch(error => {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      clickTiming(formName) {
        this.validImgIfVoid();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogFormVisible = true;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      articleTiming() { // 定时发布文章
        let opublishTime = util.dateFormatter(this.placeTime, true, true);
        if (this.timingDate) {
          opublishTime = util.dateFormatter(this.timingDate, true, true);
        }
        let paramsData = this.getDataParams(opublishTime);
        this.$axios.post(httpUrl.kxQurey.article.timing, paramsData).then((res) => {
          if (res.success) {
            this.$alert('文章定时发布时间设置成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success',
              center: true,
              callback: action => {
                this.$router.push({path: '/ContentManagement'});
              }
            });
            this.dialogFormVisible = false;
            this.ifDelete = true;
          };
        });
      },
      articleDraft(formName, num) { // 预览文章/存草稿
        this.validImgIfVoid();
        let paramsData = this.getDataParams();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post(httpUrl.kxQurey.article.draft, paramsData).then((res) => {
              if (res.success) {
                if (num === 1) {
                  this.articleId = res.data;
                  this.$alert('文章已保存草稿', '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                    center: true,
                    callback: action => {
                      this.$router.push({path: '/ContentManagement'});
                    }
                  });
                } else if (num === 2) {
                  this.articleId = res.data;
                  this.$router.push({path: '/PreviewArticle', query: {id: res.data}});
                }
                this.ifDelete = true;
              } else {
                if (res.code === 90) {
                  this.$alert('由于操作时间过久，上传图片已失效，请重新上传。', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true
                  });
                } else {
                  this.$alert('文章保存失败！', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true
                  });
                }
              };
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      articleDelete() { // 删除文章
        this.$confirm('确认删除该文章', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(httpUrl.kxQurey.article.del, {
            params: {
              articleId: this.articleId
            }
          }).then((res) => {
            if (res.success) {
              this.$router.push({path: '/ContentManagement'});
            }
            console.log(res);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // upload img
      handleAvatarSuccess(res, file) {
        this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
        this.ruleForm.imgName = res.data[0].cacheKey;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('请上传PNG/JPG/JPEG格式的图片');
        }
        if (!isLt2M) {
          this.$message.error('上传logo大小不能超过 2MB!');
        }
        return (!isJPG || !isPNG) && isLt2M;
      }
      // upload img
    },
    components: {
      dynamicTags,
      UE
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
.publishArticle
  .form-main
    width:100%
    .form-line
      border-top:1px dashed #ccc
      margin-bottom:20px
  .el-form-item__label
    float:none
  .shortW
    width:300px
  .code-btn
    .el-input-group__append
      padding:0
      overflow:hidden
      img
        width:100px
        height:38px
        cursor: pointer
  .upload-fa
    position:relative
    .avatar-uploader
      .el-upload
        display:flex
        align-items:center
        justify-content:center
        border: 1px dashed #d9d9d9
        border-radius: 6px
        cursor: pointer
        position: relative
        width: 100%
        height: 190px
        overflow: hidden
        &:hover
          border-color: $mainColor
        .avatar-uploader-icon
          font-size: 40px
          color: #8c939d
          width: 100%
          height: 190px
          line-height: 190px
          text-align: center
        .avatar
          width:100%
          height:190px
          background-size:cover
          background-position:center

    .update-rw
      position:absolute
      display:flex
      justify-content:center
      align-items:center
      text-align:center
      line-height:20px
      width:100%
      top:66%
      color:$secondaryFont
      h2
        font-size:16px
        span
          color:#f56c6c

  .operate-box
    border-top:4px solid #28b8fa
    .el-col-8
      text-align:center
      margin-bottom:12px
      cursor:pointer
      color:$commonFont
      .operateicon
        display:inline-block;
        width:18px;
        height:18px;
        &.icon-issue
          bg-image('/static/comimg/g_article_icon_fabu_hig.png')
        &.icon-timeissue
          bg-image('/static/comimg/g_article_icon_dingshi_nor.png')
        &.icon-preview
          bg-image('/static/comimg/g_article_icon_yulan_nor.png')
        &.icon-draft
          bg-image('/static/comimg/g_article_icon_caogao_nor.png')
        &.icon-delete
          bg-image('/static/comimg/g_article_icon_shanchu_nor.png')

      &:hover
        color:#28b8fa
        .icon-timeissue
          bg-image('/static/comimg/g_article_icon_dingshi_hig.png')
        .icon-preview
          bg-image('/static/comimg/g_article_icon_yulan_hig.png')
        .icon-draft
          bg-image('/static/comimg/g_article_icon_caogao_hig.png')
        .icon-delete
          bg-image('/static/comimg/g_article_icon_shanchu_hig.png')
      &.nodelete
        cursor:auto
        opacity:.6
        &:hover
          color:$commonFont
          .icon-delete
            bg-image('/static/comimg/g_article_icon_shanchu_nor.png')
</style>
