<template>
  <div class="tablePage">
    <!-- 筛选参数 -->
    <el-header>
      <el-form :inline="true" style="display:flex">
        <el-form-item style="flex-grow: 1"></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 label="名称" prop="classifyName"></el-table-column>
        <!-- <el-table-column label="图标" min-width="100">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.classifyIcon"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="主分类图标" min-width="100">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.classifyHomePic"></el-image>
          </template>
        </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="排序" prop="orderId"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShowEdit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.row)"
              :disabled="scope.row.sysList ? true : false"
            >删除</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>
// 列表路径
const listUrl = app.api.getArticleClassify;
// 提交路径
const postUrl = app.api.setArticleClassify;
// 唯一标识
const primaryCodeName = "classifyCode";

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

      classifyCode: "",
      relationsArticleCodes: [],

      isShowRelations: false,
      articlesList: [],

      transferProps: {
        key: "memberCode",
        label: "name"
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 初始化数据
    initData(resize) {
      if (resize && resize != undefined) {
        this.queryForm.page = 1;
      }

      this.getList();
    },

    // 获取列表
    getList() {
      this.loading = true;
      app
        .get({
          url: listUrl,
          data: this.queryForm
        })
        .then(res => {
          this.loading = false;
          this.list = res.list;
          this.total = res.total;
        })
        .catch(err => {
          this.loading = false;
        });
    },

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

    // 切换页码
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.initData();
    },

    handleShowEdit(pojo) {
      this.$router.push({
        name: "articeClassifyDetail",
        query: {
          pojo: JSON.stringify(pojo)
        }
      });
    },

    handleShowRelation(classifyCode) {
      this.relationsArticleCodes = [];
      this.classifyCode = classifyCode;
      this.getArticleRelativeArticles(classifyCode);
    },

    handleDelete(pojo) {
      this.$confirm("删除后,不可恢复 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {};
          data[primaryCodeName] = pojo[primaryCodeName];
          this.loading = true;
          app
            .delete({
              url: postUrl,
              data
            })
            .then(res => {
              this.getList();
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
            });
        })
        .catch(() => {
          this.loading = true;
        });
    },
    handleChangeStatue(row, status) {
      let msg = status == 1 ? "是否上线当前分类？" : "是否下线当前分类？";
      let data = JSON.parse(JSON.stringify(row));
      data.onlineStatus = status;
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          app.post({ url: postUrl, data }).then(res => {
            this.getList();
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success"
            });
          });
        })
        .catch(() => {
          this.loading = true;
        });
    },
    handleChangeShow(row, status) {
      let msg = status == 1 ? "是否显示当前分类？" : "是否隐藏当前分类？";
      let data = JSON.parse(JSON.stringify(row));
      data.onShow = status;
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          app.post({ url: postUrl, data }).then(res => {
            this.getList();
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success"
            });
          });
        })
        .catch(() => {
          this.loading = true;
        });
    }
  }
};
</script>

<style scoped>
.transfer {
  margin: 0 auto;
}
.not-allowed {
  cursor: not-allowed;
}
</style>