<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="2"
              :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="siteBusinessTableData"
                v-loading="siteLoading"
                border
                highlight-current-row
                default-expand-all
                row-key="id"
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
              >
                >
                <el-table-column prop="businessName" label="业务名称" />
                <el-table-column width="140" fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="light"
                      v-if="scope.row.parentId === 0"
                      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="siteBusinessTable.currPage"
                :page-size="siteBusinessTable.prePageResult"
                :page-sizes="[10, 20, 50, 100, 200]"
                layout="sizes, total, prev, pager, next, jumper"
                :total="siteBusinessTable.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"
            >
            </LayoutTable>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

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

<script>
import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow";
import tree from "@/assets/mixins/tree";

export default {
  name: "Business",
  mixins: [table, tree],
  components: { dialogShow },
  created() {
    this.$post("/area/getListByParentId", {
      parentId: 0,
    }).then(({ data }) => {
      this.areaData = data.result;
    });
  },
  methods: {
    refreshData() {
      this.getData();
      this.getSiteBusinessTableData();
    },
    handleSizeChange(currSize) {
      console.log("currSize=" + currSize);
      this.siteBusinessTable.prePageResult = currSize;
      this.getSiteBusinessTableData();
    },
    handleCurrentChange(currPage) {
      console.log("currPage=" + currPage);
      this.siteBusinessTable.currPage = currPage;
      this.getSiteBusinessTableData();
    },
    handleDelete(index, row) {
      this.siteLoading = true;
      console.log(row);
      this.$post("/site/business/delete", { id: [row.id] })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.getSiteBusinessTableData();
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    //刷新业务站点列表
    getSiteBusinessTableData() {
      //初始花query
      const query = {
        "query.siteId": this.siteBusinessTable.siteId,
        "query.parentId": 0,
        "pageInfo.currPage": this.siteBusinessTable.currPage,
        "pageInfo.prePageResult": this.siteBusinessTable.prePageResult,
      };
      this.siteLoading = true;
      this.$post("/site/business/list", query)
        .then(({ data }) => {
          this.siteBusinessTableData = data.result;
          this.siteBusinessTable.currPage = data.pageInfo.currPage;
          this.siteBusinessTable.prePageResult = data.pageInfo.prePageResult;
          this.siteBusinessTable.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);
    },
    /** 加入到站点库 */
    handleAddSite(row) {
      console.log("row", row);
      if (this.currentNode.type !== "site") {
        this.$message.info("请选择站点后加入！");
        return;
      }
      this.businessIds = row.id;
      this.loading = true;
      this.$post("/business/addBusinessToSite", {
        businessIds: this.businessIds,
        siteId: this.currentNode.id,
      }).then((res) => {
        if (res && res.code && res.code == 1) {
          //刷新列表
          this.getsiteBusinessTableData();
        }

        this.loading = false;
      });
    },

    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row, this.businessOptions);
    },
    handleNodeClick(node) {
      console.log("click node", node);
      this.currentNode = node;
      if (node.type === "site") {
        //分页查询站点业务列表
        this.siteBusinessTable.siteId = node.id;
        this.getsiteBusinessTableData();
      }
    },
  },
  data() {
    return {
      siteLoading: false,
      businessIds: "",
      siteBusinessTable: {
        siteId: null,
        totalResult: "",
        prePageResult: "",
        currPage: "",
      },
      siteBusinessTableData: [],
      query: { "query.parentId": 0 },
      config: {
        /** 树表是否默认展开 */
        expand: true,
        breadcrumbList: [],

        showType: "treetable",
        search: [],
        columns: [
          { label: "业务名称", prop: "name" },

          {
            label: "操作",
            width: 180,
            formatter: (row) => {
              return row.parentId != 0 ? (
                <div>
                  <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);
                      }}
                      size="mini"
                    ></el-button>
                  </el-tooltip>
                </div>
              ) : (
                <div>
                  <el-tooltip effect="light" content="加入">
                    <el-button
                      circle
                      icon="el-icon-arrow-left"
                      onClick={() => {
                        this.handleAddSite(row);
                      }}
                      size="mini"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip effect="light" content="新增">
                    <el-button
                      circle
                      icon="el-icon-plus"
                      onClick={() => {
                        this.handleAdd(row);
                      }}
                      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);
                      }}
                      size="mini"
                    ></el-button>
                  </el-tooltip>
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
