<template>
  <div class="tablePage">
    <!-- 筛选参数 -->
    <el-header>
      <el-form :inline="true" style="display:flex">
        <el-form-item>
          <el-input @change="getList" v-model="queryForm.query" placeholder="请输入标题名称"></el-input>
        </el-form-item>
        <el-form-item style="flex-grow: 1">
          <el-select
            @change="getList"
            class="maxItem"
            v-model="queryForm.classifyCode"
            placeholder="请选择分类"
            clearable
          >
            <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>
          <el-button @click="handleShowEdit(null)" type="primary" icon="el-icon-plus">新建</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <!-- 表格 -->
    <el-container>
      <el-table :data="list" :loading="loading">
        <el-table-column type="index" min-width="50"></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="标题"
          prop="articleTitle"
          min-width="200"
        ></el-table-column>

        <el-table-column>
          <template slot="header" slot-scope="scope">
            排序值
            <el-tooltip effect="dark" content="值越大排序越前" placement="top">
              <i :data="scope" class="el-icon-question" style="cursor: pointer;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">{{scope.row.orderId}}</template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="false" label="浏览次数" prop="viewNumber" width="130"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.onlineStatus==1"
              type="success"
              class="pointer"
              :class="{'not-allowed' : scope.row.sysList}"
              @click="scope.row.sysList ? '' : handleChangeStatue(scope.row, 0)"
            >在线</el-tag>
            <el-tag
              v-else
              type="info"
              class="pointer"
              :class="{'not-allowed' : scope.row.sysList}"
              @click="scope.row.sysList ? '' : handleChangeStatue(scope.row, 1)"
            >下线</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否置顶" min-width="100">
          <template slot-scope="scope">
            <el-switch
              @change="setList(scope.row)"
              v-model="scope.row.inTop"
              active-color="rgb(102,177,255)"
              inactive-color="rgb(234,236,240)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShowEdit(scope.row.articleCode)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row.articleCode)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
    <!-- 分页 -->
    <el-footer class="fixed-bottom">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="queryForm.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30,50]"
        :page-size="queryForm.size"
        :total="total"
      ></el-pagination>
    </el-footer>
  </div>
</template>

<script>
import { timestampFormat } from "@/utils/utils";

const getListApi = app.api.getArticleList;
const setListApi = app.api.setArticleList;

export default {
  props: [],
  components: {},
  data() {
    return {
      queryForm: {
        page: 1,
        size: 10,
        query: "",
        classifyCode: ""
      }, //列表默认传参
      list: [], //列表数据
      total: 0, //列表总数
      loading: true, //表格加载状态
      keyword: "accountCode",

      pojo: null,
      showEdit: false,
      showChangePwd: false,
      classifyList: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    timestampFormat,
    // 初始化数据
    async initData() {
      this.getList();
      this.getClassifyList();
    },
    // 获取列表
    getList(resize) {
      if (resize && resize != undefined) {
        this.queryForm.page = 1;
      }
      this.loading = true;
      app
        .get({
          url: getListApi,
          data: this.queryForm
        })
        .then(res => {
          this.loading = false;

          res.list.forEach(item => {
            item.onlineStatus = item.onlineStatus == 1 ? true : false;
            item.inTop = item.inTop == 1 ? true : false;
          });

          this.list = res.list;
          this.total = res.total;
        })
        .catch(err => {
          this.loading = false;
        });
    },

    getClassifyList() {
      app
        .get({ url: app.api.getArticleClassify, data: null })
        .then(res => {
          this.classifyList = res.list;
        })
        .catch(e => {});
    },

    // 更新内容
    setList(item) {
      let editForm = JSON.parse(JSON.stringify(item));
      editForm.inTop = item.inTop ? 1 : 0;
      editForm.onlineStatus = item.onlineStatus ? 1 : 0;

      app
        .post({
          url: setListApi,
          data: editForm
        })
        .then(res => {
          this.$message({
            message: "更新成功",
            type: "success"
          });
          // this.getList();
        })
        .catch(err => {});
    },

    setOrderType(val) {
      if (!val.order) {
        this.queryForm.orderType = "";
        this.getList(true);
        return;
      }
      switch (val.prop) {
        case "createAt":
          if (val.order == "descending") {
            this.queryForm.orderType = "id:desc";
          } else {
            this.queryForm.orderType = "id:asc";
          }
          this.getList(true);
          break;
        case "viewNumber":
          if (val.order == "descending") {
            this.queryForm.orderType = "viewNumber:desc";
          } else {
            this.queryForm.orderType = "viewNumber:asc";
          }
          this.getList(true);
          break;

        default:
          break;
      }
    },

    // 上下架
    setOnlineStatus(item) {
      item.onlineStatus = item.onlineStatus == 0 ? 1 : 0;
      this.setList(item);
    },

    // 置顶
    setOrderId(item) {
      item.inTop = item.inTop == 1 ? 0 : 1;
      this.setList(item);
    },

    // 切换页码大小
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.queryForm.page = 1;
      this.initData();
    },

    // 切换页码
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.initData();
    },
    handleShowEdit(articleCode) {
      this.$router.push({
        name: "articleDetail",
        query: {
          articleCode: articleCode
        }
      });
    },
    handleChangePwd(pojo) {
      this.pojo = pojo;
      this.showChangePwd = true;
    },
    handleDelete(articleCode) {
      this.$confirm("删除后,不可恢复 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          app
            .delete({
              url: setListApi,
              data: { articleCode }
            })
            .then(res => {
              this.$message({
                message: "更新成功",
                type: "success"
              });
              this.getList();
            })
            .catch(err => {});
        })
        .catch(() => {
          this.loading = true;
        });
    },
    handleChangeStatue(row, status) {
      let msg = status == 1 ? "是否上线当前文章？" : "是否下线当前文章？";
      let data = JSON.parse(JSON.stringify(row));
      data.onlineStatus = status;
      data.inTop = data.inTop ? 1 : 0;
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          app.post({ url: setListApi, data }).then(res => {
            this.getList();
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success"
            });
          });
        })
        .catch(() => {
          this.loading = true;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__wrapper {
  overflow: hidden;
}
</style>