<template>
  <div class="approve">
    <el-row>
      <el-col :offset="1" :span="22">
        <div class="context">
          <div class="title">{{ article.title }}</div>
          <div class="text" v-html="article.content"></div>
        </div>
      </el-col>
    </el-row>
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否新闻">
            <el-radio-group v-model="article.isTop" disabled>
              <el-radio-button v-for="(item, index) in isTopOptions" :key="index"
                               :label="item.dictValue">{{ item.dictLabel }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!--<el-col :span="6">-->
        <!--  <el-form-item label="是否显示">-->
        <!--    <el-radio-group v-model="article.isView" disabled>-->
        <!--      <el-radio-button v-for="(item, index) in isViewOptions" :key="index"-->
        <!--                       :label="item.dictValue">{{ item.dictLabel }}-->
        <!--      </el-radio-button>-->
        <!--    </el-radio-group>-->
        <!--  </el-form-item>-->
        <!--</el-col>-->
        <!--<el-col :span="6">-->
        <!--  <el-form-item label="是否英语">-->
        <!--    <el-radio-group v-model="article.isEnglish" disabled>-->
        <!--      <el-radio-button v-for="(item, index) in isEnglishOptions" :key="index"-->
        <!--                       :label="item.dictValue">{{ item.dictLabel }}-->
        <!--      </el-radio-button>-->
        <!--    </el-radio-group>-->
        <!--  </el-form-item>-->
        <!--</el-col>-->
        <el-col :span="6">
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="publishTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="submitForm">
          <el-form-item size="large">
            <el-button type="success" plain @click="submitForm('approve')">批准</el-button>
            <el-button type="danger" plain @click="submitForm('rejected')">驳回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {approve, getArticle, rejected} from "@/api/sist/article";
import Editor from '@/views/utils/Editor'
import {parseTime} from "@/utils/hcy";
 export default {
  components: {
    Editor
  },
  name: "approve",
  data() {
    return {
      article: {
        id: null,
        title: null,
      },
      fromData: null,
      publishTime: null,
      isTopOptions: [],
      isViewOptions: [],
      isEnglishOptions: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  created() {
    this.article.id = this.$route.params && this.$route.params.articleId;
    getArticle(this.article.id).then(response => {
      this.article = response.data
    })
    this.getDicts("is_top").then(response => {
      this.isTopOptions = response.data;
    });
    this.getDicts("is_view").then(response => {
      this.isViewOptions = response.data;
    });
    this.getDicts("is_english").then(response => {
      this.isEnglishOptions = response.data;
    });
  },
   methods: {
    submitForm(type) {
      let that = this
      if (type === "approve") {
        if (this.publishTime === null) {
          this.$confirm('您未选择发布时间,是否将现在作为发布时间,并批准发布?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            that.publishTime = that.parseTime(new Date())
            that.toApprove()
          })
        } else {
          this.$confirm('您确认批准发布?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            that.toApprove()
          })
        }
      } else if (type === "rejected") {
        this.$confirm('您确认驳回此文章?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          that.toRejected()
        })
      }
      // TODO 提交表单
    },

    toApprove() {
      this.fromData = {
        id: this.article.id,
        publishTime: this.publishTime,
      }
      approve(this.fromData).then(res => {
        if (res.code==200){
          this.msgSuccess("审批通过")
          this.close();
        }
      })
    },
     close() {
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.push({ path: "/SIST/article/", query: { t: Date.now()}})
     },
    toRejected() {
      rejected(this.article.id).then(res => {
        if (res.code==200){
          this.msgSuccess("驳回成功并以邮件告知!")
          this.close();
        }
      })
    },


    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}
</script>

<style scoped lang="scss">
.article {
  margin-top: 20px;
}

.submitForm {
  margin-top: 20px;
  text-align: center;
}

.context {
  margin: 3rem 4rem;

  .title {
    font-size: 2.4rem;
    font-weight: 500;
    color: #1956BC;
    text-align: center;
  }

  .text {
    margin-top: 2rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: #3C3C3C;
  }
}
</style>
