<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notDel> </LayoutTable>

    <drawer-show ref="drawerform" @ok="getData" />
    <share-drawershow
      ref="shareDrawershow"
      :drawerTableData="drawerTableData"
    />
    <drawer-view ref="drawerview" @handletop="handleTop" @del="toDel" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import drawerView from "./drawerview";
import table from "@/assets/mixins/table";
import ShareDrawershow from "./shareDrawershow.vue";
export default {
  name: "NewsList",
  components: {
    drawerShow,
    drawerView,
    ShareDrawershow,
  },
  mixins: [table],
  created() {},
  methods: {
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.drawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.drawerform.edit(row);
    },
    /** 重写查看方法 */
    toView(row, isopen) {
      // this.$refs.drawerform.view(row);
      // 这里查看不再和编辑共用界面，多写一个抽屉，但调用view方法接口
      // this.$refs.drawerform.reset()
      this.$refs.drawerform.query = { id: row.id };
      this.$refs.drawerform.urls.currUrl = "news/view";

      this.$refs.drawerform
        .$get("news/view", this.$refs.drawerform.query)
        .then(({ data }) => {
          if (!isopen) {
            this.$refs.drawerview.open = true;
          }
          this.$refs.drawerview.form = data.entity;
        })
        .catch((error) => {
          this.$refs.drawerview.form = {};
          this.$message.error(error.message);
          throw error;
        });
    },

    handleTop(row, top) {
      this.$post("/news/save", { id: row.id, top: top })
        .then((res) => {
          if (res.code == 1) {
            if (top == 0) {
              this.$message.success("取消置顶成功！");
            } else {
              this.$message.success("置顶成功！");
            }
            this.toView({ id: row.id }, true);
            this.getData();
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    handleViews(row) {
      //查询详细
      this.$post("/news/record/list", { newsId: row.id })
        .then((res) => {
          if (res.code == 1) {
            console.log("views-data", res);
            // this.getData();
            this.drawerTableData = res.data;
            this.drawerTableData.row = row;
            this.drawerTableData.title = "浏览";
            this.$refs.shareDrawershow.open = true;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    handleShares(row) {
      //分享详细
      this.$post("/news/share/list", { newsId: row.id })
        .then((res) => {
          if (res.code == 1) {
            this.drawerTableData = res.data;
            this.drawerTableData.row = row;
            this.drawerTableData.title = "分享";
            this.$refs.shareDrawershow.open = true;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
  },
  data() {
    return {
      drawerTableData: [],
      config: {
        search: [
          {
            name: "categoryId",
            type: "select",
            placeholder: "请选择新闻类型",
            label: "新闻类型",
          },
          {
            name: "title",
            type: "text",
            label: "新闻标题",
            fuzzy: true,
          },
        ],
        columns: [
          // {type: "selection", width: 60},
          { type: "index", label: "序号", width: 50 },

          { label: "新闻标题", prop: "title" },

          { label: "新闻类型", prop: "categoryId", formatter: this.formatter },

          {
            label: "创建时间",
            prop: "createTime",
            formatter: this.formatterDate,
          },

          {
            label: "数据",
            formatter: (row) => {
              let bool = false;
              return (
                <div>
                  <el-link
                    underline={bool}
                    onClick={() => {
                      this.handleViews(row);
                    }}
                    type="primary"
                  >
                    浏览({row.viewNums})
                  </el-link>
                  <br />

                  <el-link
                    underline={bool}
                    onClick={() => {
                      this.handleShares(row);
                    }}
                    type="primary"
                  >
                    分享({row.shareNums})
                  </el-link>
                </div>
              );
            },
          },

          {
            label: "创建用户",
            prop: "createUserId",
            formatter: this.formatter,
          },
          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <div>
                  {row.top === 0 ? (
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-open"
                      onClick={() => {
                        this.handleTop(row, 1);
                      }}
                    >
                      置顶
                    </el-button>
                  ) : (
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-open"
                      onClick={() => {
                        this.handleTop(row, 0);
                      }}
                    >
                      取消置顶
                    </el-button>
                  )}
                  <span> </span>
                  <table-buttons
                    noAdd
                    row={row}
                    onEdit={this.toEdit}
                    onView={this.toView}
                    onDel={this.toDel}
                  />
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
