<template>
  <div class="editPage">
    <el-form
      :model="editForm"
      :loading="loading"
      ref="editForm"
      label-position="right"
      label-width="auto"
      style="padding-right: 30px"
      v-loading="loading"
      element-loading-text="操作中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.9)"
    >
      <el-form-item label="类型">
        <el-select v-model="editForm.type" placeholder="请选择类型">
          <el-option key="0" label="文章" :value="0"></el-option>
          <el-option key="1" label="外链" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="所属分类"
        prop="classifyCodes"
        :rules="{ required: true, message: '所属分类不能为空', trigger: 'change' }"
      >
        <el-select class="maxItem" v-model="editForm.classifyCodes" placeholder="请选择所属分类" multiple>
          <el-option
            v-for="item in classifyList"
            :key="item.classifyCode"
            :label="item.classifyName"
            :value="item.classifyCode"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="标题"
        prop="articleTitle"
        :rules="{ required: true, message: '标题不能为空', trigger: 'blur' }"
      >
        <el-input v-model="editForm.articleTitle" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item v-if="editForm.type == 1" label="外部链接" prop="outerLink">
        <el-input v-model="editForm.outerLink" placeholder="请输入外部链接"></el-input>
      </el-form-item>

      <template v-else-if="editForm.type == 0">
        <el-form-item
          label="内容"
          prop="content"
          :rules="{ required: true, message: '内容不能为空', trigger: 'blur' }"
        >
          <WangEditor v-model="editForm.content" :subPath="subPath" />
        </el-form-item>

        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            :onSuccess="successFile"
            :onRemove="removeFile"
            :file-list="editForm.attachments"
            drag
            action="https://api.k.wxpai.cn/bizproxy/tianbaoServiceApi/common/upload"
            multiple
            :data="extraData"
            accept="application/pdf"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">*只能上传pdf文件</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="排序值">
          <el-input-number v-model="editForm.orderId" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否在线" prop="onlineStatus">
          <el-switch v-model="editForm.onlineStatus" inactive-color="rgb(234,236,240)"></el-switch>
        </el-form-item>
        <el-form-item label="是否置顶" prop="inTop">
          <el-switch v-model="editForm.inTop" inactive-color="rgb(234,236,240)"></el-switch>
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer" style="padding-right:30px">
      <el-button @click="componentClose">取 消</el-button>
      <el-button type="primary" @click="componentSubmit" :disabled="loading" :loading="loading">确定</el-button>
    </div>
  </div>
</template>


<script>
import UploadImg from "@/components/UploadImg/index.vue";
import WangEditor from "@/components/WangEditor/index.vue";

export default {
  props: [],
  components: {
    UploadImg,
    WangEditor
  },
  data() {
    return {
      loading: false,
      subPath: "article",
      editForm: {
        articleCode: null,
        classifyCodes: [],
        articleTitle: null,
        articleThumb: 0,
        author: null,
        content: "",
        createTime: 0,
        orderId: 0,
        onlineStatus: true,
        inTop: false,
        attachments: [],
        outerLink: "",
        type: 0
      },
      classifyList: [],
      extraData: {
        subPath: "articleFile"
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.editForm.articleCode = this.$route.query.articleCode;
      if (this.editForm.articleCode != null) {
        this.getDetail();
      }
      this.getClassifyList();
    },
    getDetail() {
      app
        .get({
          url: app.api.getArticleDetail,
          data: {
            articleCode: this.editForm.articleCode
          }
        })
        .then(res => {
          res.inTop = res.inTop == 1 ? true : false;
          res.onlineStatus = res.onlineStatus == 1 ? true : false;
          res.classifyCodes = res.classifyCodes.split(",");

          if (res.attachments) {
            res.attachments = JSON.parse(res.attachments);
          } else {
            res.attachments = [];
          }
          
          if (res.outerLink) {
            res.type = 1;
          } else {
            res.type = 0;
          }
          this.editForm = res;
        });
    },
    getClassifyList() {
      app
        .get({ url: app.api.getArticleClassify, data: null })
        .then(res => {
          this.classifyList = res.list;
        })
        .catch(e => {});
    },

    componentSubmit() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          let editForm = JSON.parse(JSON.stringify(this.editForm));
          editForm.inTop = this.editForm.inTop ? 1 : 0;
          editForm.onlineStatus = this.editForm.onlineStatus ? 1 : 0;
          editForm.createTime = new Date(this.editForm.createTime).getTime();
          if (this.editForm.attachments.length > 0) {
            editForm.attachments = JSON.stringify(this.editForm.attachments);
          } else {
            editForm.attachments = "";
          }
          editForm.classifyCodes = editForm.classifyCodes.join(",");

          console.log("this.editForm", editForm);
          app
            .post({ url: app.api.setArticle, data: editForm })
            .then(res => {
              this.loading = false;
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success"
              });
              this.$router.go(-1);
            })
            .catch(e => {
              this.loading = false;
            });
        }
      });
    },
    componentClose() {
      this.$router.go(-1);
    },

    successFile(res, file) {
      if (res.code == 200) {
        this.editForm.attachments.push({
          name: file.name,
          path: res.content
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: res.errMsg
        });
      }
    },

    removeFile(file, fileList) {
      this.editForm.attachments.forEach((item, index) => {
        if (item.name == file.name) {
          this.attachments.attachments.splice(index, 1);
        }
      });
    }
  }
};
</script>
<style  lang="scss" scoped>
.tablePage {
  margin: 0 auto;
}

.el-upload__tip {
  color: rgb(190, 190, 190);
}
</style>