<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="分类管理" name="first">
      <div style="float: right;margin-right:2%;">
        <el-button
          style="margin: 10px 0;"
          :disabled="!isAuth('materialsList:add')"
          size="mini"
          type="primary"
          icon="document"
          @click="addNotice"
          >添加分类</el-button
        >
      </div>
      <el-table v-loading="tableDataLoading" :data="tableData">
        <el-table-column fixed prop="id" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="classifyName" label="分类名称">
        </el-table-column>
        <!-- <el-table-column
			 prop="remark"
			 label="备注">
		   </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="!isAuth('materialsList:update')"
              @click="updates(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              :disabled="!isAuth('materialsList:delete')"
              @click="deletes(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加弹框 -->
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible" center>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;"
            >分类名称：</span
          >
          <el-input
            style="width:50%;"
            v-model="classifyName"
            placeholder="请输入分类名称"
          ></el-input>
        </div>
        <!-- <div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">备注：</span>
				<el-input style="width: 50%;" v-model="remark" placeholder="请输入备注"></el-input>
			</div> -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改弹框 -->
      <el-dialog title="修改分类" :visible.sync="dialogFormVisible1" center>
        <el-form :model="form">
          <el-form-item label="分类名称：" :label-width="formLabelWidth">
            <el-input v-model="form.classifyName" style="width:65%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="文章管理" name="second">
      <div style="float: right;margin-right:2%;">
        <el-button
          style="margin: 10px 0;height:35px;"
          :disabled="!isAuth('materialsList:add')"
          size="mini"
          type="primary"
          icon="document"
          @click="addNoticewz"
          >添加文章</el-button
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select
          v-model="classifyId"
          placeholder="请选择类型"
          style="width:150px;"
          @change="articleSelect(classifyId)"
        >
          <el-option
            v-for="(item, index) in classifyIds"
            :key="item.index"
            :label="item.classifyName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <el-table v-loading="tableDataLoading" :data="tableData">
        <el-table-column prop="id" label="编号" width="80"> </el-table-column>
        <el-table-column prop="title" label="标题" width="120">
        </el-table-column>
        <el-table-column prop="articleUrl" label="链接"> </el-table-column>
        <el-table-column prop="picture" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.picture" alt="" width="60" height="60" />
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="!isAuth('materialsList:update')"
              @click="updateswz(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              :disabled="!isAuth('materialsList:delete')"
              @click="deleteswz(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加弹框 -->
      <el-dialog title="添加文章" :visible.sync="dialogFormVisible2" center>
        <div style="margin-bottom: 10px;display: flex;">
          <span style="width: 200px;display: inline-block;text-align: right;"
            >文章图片：</span
          >
          <div
            style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
          >
            <el-upload
              class="avatar-uploader"
              v-model="picture"
              :action="Tupiantou"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="picture"
                :src="picture"
                class="avatar"
                style="border-radius: 6px;width: 148px;height: 148px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;"
            >文章标题：</span
          >
          <el-input
            style="width: 50%;"
            v-model="title"
            placeholder="请输入文章标题"
          ></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;"
            >跳转链接：</span
          >
          <el-input
            style="width: 50%;"
            v-model="articleUrl"
            placeholder="请输入跳转链接"
          ></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span
            style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;"
            >文章内容：</span
          >
          <el-input
            style="width: 50%;"
            type="textarea"
            rows="4"
            v-model="content"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="releasNoticeTowz()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 修改弹框 -->
      <el-dialog title="修改文章" :visible.sync="dialogFormVisible3" center>
        <el-form :model="form">
          <el-form-item label="文章图片：" :label-width="formLabelWidth">
            <div
              style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
            >
              <el-upload
                class="avatar-uploader"
                v-model="picture"
                :action="Tupiantou"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formwz.picture"
                  :src="formwz.picture"
                  class="avatar"
                  style="border-radius: 6px;width: 148px;height: 148px;"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="文章标题：" :label-width="formLabelWidth">
            <el-input v-model="formwz.title" style="width:65%;"></el-input>
          </el-form-item>
          <el-form-item label="跳转链接：" :label-width="formLabelWidth">
            <el-input v-model="formwz.articleUrl" style="width:65%;"></el-input>
          </el-form-item>
          <el-form-item label="文章内容：" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              rows="4"
              v-model="formwz.content"
              style="width:65%;"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="amendNoticeTowz()">确 定</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      limit: 5,
      page: 1,
      state: 1,
      sort: 0,
      remark: "",
      createTime: "",
      classifyName: "",
      id: "",
      classifyId: 1,
      classifyIds: [],
      form: {
        id: "",
        state: "",
        sort: "",
        classifyName: "",
        createTime: "",
        remark: ""
      },
      formwz: {
        id: "",
        picture: "",
        articleUrl: "",
        content: "",
        title: "",
        classifyId: "",
        createTime: ""
      },
      info: {
        stockDate: this.getNowTime() //日期
      },
      picture: "",
      picture2: "",
      articleUrl: "",
      content: "",
      title: "",
      formLabelWidth: "200px",
      activeName: "first",
      tableDataLoading: false,
      dialogFormVisible1: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      tableData: []
    };
  },
  methods: {
    //处理默认选中当前日期
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
      var mm =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
      var ss =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
      return defaultDate;
      this.$set(this.info, "stockDate", defaultDate);
    },
    handleClick(tab, event) {
      if (tab._props.label == "分类管理") {
        this.dataSelect();
      }
      if (tab._props.label == "文章管理") {
        this.classifyId = 1;
        this.articleSelect();
      }
    },
    beforeAvatarUpload(file) {
      return this.$processImage(this, file, false);
    },
    handleAvatarSuccess(file) {
      this.picture = file.data;
    },
    handleAvatarSuccess2(file2) {
      this.formwz.picture = file2.data;
    },
    // 添加分类弹框
    addNotice() {
      this.dialogFormVisible = true;
    },
    // 添加分类
    releasNoticeTo() {
      if (this.classifyName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择分类名称",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("article/saveArticleClassify"),
        method: "post",
        data: this.$http.adornData({
          state: this.state,
          sort: this.sort,
          remark: this.remark,
          classifyName: this.classifyName,
          createTime: this.info.stockDate
        })
      }).then(({ data }) => {
        this.dialogFormVisible = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.classifyName = "";
            this.dataSelect();
          }
        });
      });
    },
    // 编辑分类弹框
    updates(index, rows) {
      this.form.state = rows.state;
      this.form.sort = rows.state;
      this.dialogFormVisible1 = true;
      this.form.id = rows.id;
      this.form.classifyName = rows.classifyName;
      this.form.remark = rows.remark;
      this.form.createTime = rows.createTime;
    },
    // 修改类别
    amendNoticeTo() {
      this.$http({
        url: this.$http.adornUrl(
          `article/updateClassifyName/${this.form.id}/${this.form.classifyName}`
        ),
        method: "post",
        data: this.$http.adornData({})
      }).then(({ data }) => {
        this.dialogFormVisible1 = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dataSelect();
          }
        });
      });
    },
    // 删除分类
    deletes(row) {
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              `article/deleteArticleClassifyById?articleClassifyId=${row.id}`
            ),
            method: "post",
            data: this.$http.adornData({})
          }).then(({ data }) => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.name = "";
                this.dataSelect();
              }
            });
          });
        })
        .catch(() => {});
    },
    // 添加文章弹框
    addNoticewz() {
      this.dialogFormVisible2 = true;
    },
    // 添加文章
    releasNoticeTowz() {
      if (this.title == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入文章标题",
          type: "warning"
        });
        return;
      }
      if (this.articleUrl == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入跳转链接",
          type: "warning"
        });
        return;
      }
      if (this.content == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入内容",
          type: "warning"
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("article/addArticle"),
        method: "post",
        data: this.$http.adornData({
          articleUrl: this.articleUrl,
          classifyId: this.classifyId,
          content: this.content,
          createTime: this.info.stockDate,
          picture: this.picture,
          state: this.state,
          title: this.title
        })
      }).then(({ data }) => {
        this.dialogFormVisible2 = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.title = "";
            this.articleUrl = "";
            this.content = "";
            this.picture = "";
            this.articleSelect();
          }
        });
      });
    },
    // 编辑文章弹框
    updateswz(index, rows) {
      this.formwz.picture = rows.picture;
      this.dialogFormVisible3 = true;
      this.formwz.id = rows.id;
      this.formwz.classifyId = rows.classifyId;
      this.formwz.articleUrl = rows.articleUrl;
      this.formwz.content = rows.content;
      this.formwz.title = rows.title;
      this.formwz.createTime = rows.createTime;
    },
    // 修改文章
    amendNoticeTowz() {
      this.$http({
        url: this.$http.adornUrl("article/updateArticle"),
        method: "post",
        data: this.$http.adornData({
          id: this.formwz.id,
          picture: this.formwz.picture,
          articleUrl: this.formwz.articleUrl,
          content: this.formwz.content,
          classifyId: this.formwz.classifyId,
          title: this.formwz.title,
          createTime: this.info.stockDate
        })
      }).then(({ data }) => {
        this.dialogFormVisible3 = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.articleSelect();
          }
        });
      });
    },
    // 删除文章
    deleteswz(row) {
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              `article/deleteArticle?articleId=${row.id}`
            ),
            method: "post",
            data: this.$http.adornData({})
          }).then(({ data }) => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.name = "";
                this.articleSelect();
              }
            });
          });
        })
        .catch(() => {});
    },
    // 获取分类管理数据
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("article/selectArticleClassifyList"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData;
        this.classifyIds = returnData;
      });
    },
    // 获取文章管理数据
    articleSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("article/selectArticleList"),
        method: "get",
        params: this.$http.adornParams({
          classifyId: this.classifyId
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData;
      });
    }
  },
  mounted() {
    this.dataSelect();
  }
};
</script>

<style></style>
