<template>
  <div class="page">
    <el-row :gutter="20">
      <el-col :span="6" :xs="12" class="mytree">
        <el-card>
          <div slot="header">
            <span>站点结构</span>
          </div>
          <el-scrollbar style="height: 100%">
            <el-tree
              size="mini"
              ref="areaTree"
              :data="areaData"
              id="el-tree"
              node-key="id"
              indent="4"
              :props="treeProps"
              :load="loadNode"
              highlight-current
              lazy
              :render-content="renderContent"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="9" :xs="12">
        <el-card>
          <el-row>
            <!-- 站点事项列表 -->
            <div>
              <el-table
                size="mini"
                :data="siteMatterTableData"
                v-loading="siteLoading"
                border
                highlight-current-row
                default-expand-all
                row-key="id"
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
              >
                >
                <el-table-column prop="matterName" label="事项名称" />
                <el-table-column width="140" fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="light"
                      content="删除"
                    >
                      <el-button
                        circle
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                        size="mini"
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页器 -->
            <div class="pagination-wapper">
              <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="siteMatterTable.currPage"
                :page-size="siteMatterTable.prePageResult"
                :page-sizes="[10, 20, 50, 100, 200]"
                layout="sizes, total, prev, pager, next, jumper"
                :total="siteMatterTable.totalResult"
              >
              </el-pagination>
            </div>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="9" :xs="12">
        <el-card>
          <el-row>
            <LayoutTable
              ref="layoutTable"
              :data="tableData"
              notDel
             
              :config="tableConfig"
            >
            <el-button
        slot="table-head-left2"
        icon="el-icon-shopping-cart-full"
        size="mini"
        @click="toBatchAddSite"
        >批量加入</el-button
      >
            </LayoutTable>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <dialog-show ref="dialogform" @ok="refreshData" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
import tree from "@/assets/mixins/tree";
export default {
  name: "Matter",
  components: { dialogShow },
  mixins: [table, tree],
  created() {
    this.$post("/area/getListByParentId", {
      parentId: 0,
    }).then(({ data }) => {
      this.areaData = data.result;
    });
  },
  methods: {
     toBack() {
       console.log("back")
      // this.$router.push({
      //   path: this.pageInfo.back
      // })
    },
    refreshData() {
      this.getData();
      this.getSiteMatterTableData();
    },
    handleSizeChange(currSize) {
      console.log("currSize=" + currSize);
      this.siteMatterTable.prePageResult = currSize;
      this.getSiteMatterTableData();
    },
    handleCurrentChange(currPage) {
      console.log("currPage=" + currPage);
      this.siteMatterTable.currPage = currPage;
      this.getSiteMatterTableData();
    },
    handleDelete(index, row) {
      this.siteLoading = true;
      console.log(row);
      this.$post("/site/matter/delete", { id: [row.id] })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.getSiteMatterTableData();
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    //刷新业务站点列表
    getSiteMatterTableData() {
      //初始花query
      const query = {
        "query.siteId": this.siteMatterTable.siteId,
        "query.parentId": 0,
        "pageInfo.currPage": this.siteMatterTable.currPage,
        "pageInfo.prePageResult": this.siteMatterTable.prePageResult,
      };
      this.siteLoading = true;
      this.$post("/site/matter/list", query)
        .then(({ data }) => {
          this.siteMatterTableData = data.result;
          this.siteMatterTable.currPage = data.pageInfo.currPage;
          this.siteMatterTable.prePageResult = data.pageInfo.prePageResult;
          this.siteMatterTable.totalResult = data.pageInfo.totalResult;

          this.siteLoading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    afterRender(data) {},
    afterDel(data) {
      this.getData();
    },

    handleAdd(row) {
      this.$refs.dialogform.add(row);
    },
    toBatchAddSite(row) {
      console.log("bacth add",this.selection.join(','))
      this.handleAddSite(this.selection.join(','), true);
    },
    /** 加入到站点库 */
    handleAddSite(ids,isBatch) {
      console.log("ids", ids);
      if (this.currentNode.type !== "site") {
        this.$message.info("请选择站点后加入！");
        return;
      }
      //this.matterIds = row.id;
      this.loading = true;
      this.$post("/matter/addMatterToSite", {
        matterIds: ids,
        siteId: this.currentNode.id,
      }).then((res) => {
        if (res && res.code && res.code == 1) {
          //刷新列表
          this.getSiteMatterTableData();
        }

        this.loading = false;
      });
    },

    /** 重写新增方法 */
    toAdd(row) {
       this.$router.push({
        path: "/matter/index",
        query: {
          matterId: row.matterId,
        },
      });

     // this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      console.log("edit",row)

       this.$router.push({
        path: "/matter/index",
        query: {
          matterId: row.id,
        },
      });

      //this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    // toView(row) {
    //     this.$refs.dialogform.view(row);
    // },
    handleNodeClick(node) {
      console.log("click node", node);
      this.currentNode = node;
      if (node.type === "site") {
        //分页查询站点业务列表
        this.siteMatterTable.siteId = node.id;
        this.getSiteMatterTableData();
      }
    },
  },
  data() {
    return {
      siteLoading: false,
      matterIds: "",
      siteMatterTable: {
        siteId: null,
        totalResult: "",
        prePageResult: "",
        currPage: "",
      },
    
      config: {
          breadcrumbList: [""],
        search: [
          {
            name: "matterName",
            type: "text",
            label: "事项名称",
            fuzzy: true,
          },
          {
            name: "matterNo",
            type: "text",
            label: "事项编号",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60 },

          { label: "事项名称", prop: "matterName" },

          { label: "事项编号", prop: "matterNo" },
          {
            label: "操作",
            width: 150,
            formatter: (row) => {return (
      
                <div>
                  <el-tooltip effect="light" content="加入">
                    <el-button
                      circle
                      icon="el-icon-arrow-left"
                      onClick={() => {
                        this.handleAddSite(row.id);
                      }}
                      size="mini"
                    ></el-button>
                  </el-tooltip>
 
                  <el-tooltip effect="light" content="编辑">
                    <el-button
                      circle
                      icon="el-icon-edit-outline"
                      onClick={() => {
                        this.toEdit(row);
                      }}
                      size="mini"
                    ></el-button>
                  </el-tooltip>

                  <el-tooltip effect="light" content="删除">
                    <el-button
                      circle
                      icon="el-icon-delete"
                      onClick={() => {
                        this.toDel(row.id);
                      }}
                      size="mini"
                    ></el-button>
                  </el-tooltip>
                </div>)
            },
          },
        ],
      },
    };
  },
};
</script>