<template>
  <div class="dataset-list">
    <div class="category-list">
      <div class="btns">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-edit"
          @click="showCategory = true"
        >
          编辑分类
        </el-button>
        <el-button
          size="small"
          type="success"
          icon="el-icon-plus"
          @click="onEditCategory(null)"
        >
          添加分类
        </el-button>
      </div>
      <el-input
        v-model="categoryKey"
        size="small"
        style="margin-bottom: 20px"
        @input="onSearchCategory"
        placeholder="搜索分类"
      ></el-input>
      <el-menu :default-active="nowCategoryId" @select="onSelectCategory">
        <template v-for="category in categoryListSearched">
          <el-menu-item
            v-if="!category.children.length"
            :key="category.id"
            :index="category.id"
          >
            <div class="name" style="flex: 1">{{ category.wsName }}</div>
          </el-menu-item>
          <el-submenu v-else :key="category.id" :index="category.id">
            <template slot="title">{{ category.wsName }}</template>
            <el-menu-item
              v-for="c of category.children"
              :key="c.id"
              :index="c.id"
            >
              <div class="name" style="flex: 1">{{ c.wsName }}</div>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <div class="main-wrapper">
      <div class="my-menu">
        <div></div>
        <el-button
          type="success"
          size="small"
          icon="el-icon-plus"
          @click="showAdd = true"
        >
          新建数据集
        </el-button>
      </div>
      <el-table :data="tableData" size="small" border>
        <el-table-column label="名称" prop="cubeName"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="创建者" prop="createBy"></el-table-column>
        <el-table-column label="所用数据源">
          <template slot-scope="cube"> {{ getDatasource(cube.row) }} </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="cube">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="onEditCube(cube.row)"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="success"
              plain
              @click="onCreateBigdata(cube.row)"
            >
              创建模板
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="my-paging"
        @size-change="sizeChange"
        @current-change="getData"
        :current-page.sync="page.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="选择数据源"
      :visible.sync="showAdd"
      append-to-body
      width="300px"
    >
      <div style="display: flex; justify-content: space-between">
        <el-select
          class="my-select"
          size="small"
          v-model="selectedDatasourceId"
        >
          <el-option
            v-for="(item, i) of datasourceList"
            :key="i"
            :value="item.id"
            :label="item.dsDb + ' ' + item.remark || ''"
          >
            <span style="padding-left: 20px">{{
              item.dsDb + " " + item.remark || ""
            }}</span>
          </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="onAddConfirm">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showEditCategory"
      title="编辑分类"
      append-to-body
      width="400px"
    >
      <el-form size="mini" label-width="80px">
        <el-form-item label="分类名">
          <el-input v-model="categoryForm.wsName"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-select v-model="categoryForm.parentId">
            <el-option :value="0" label="顶级分类"></el-option>
            <el-option
              v-for="c of categoryList"
              :key="c.id"
              :value="c.id"
              :label="c.wsName"
              v-show="c.id != categoryForm.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button
        size="mini"
        type="primary"
        @click="onEditCategoryConfirm"
        style="width: 100px; margin: 30px auto 0; display: block"
      >
        保存
      </el-button>
    </el-dialog>
    <el-dialog :visible.sync="showCategory" title="分类列表" append-to-body>
      <el-table
        size="mini"
        :data="categoryList"
        border
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        default-expand-all
        >>
        <el-table-column label="分类名" prop="wsName"></el-table-column>
        <el-table-column label="父级分类" prop="parentName"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="onEditCategory(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="onDelCategory(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { reportdatasourceList } from "../../../api/report/report";
import {
  cubeList,
  categoryDel,
  categoryList,
  categorySave,
} from "../../../api/newbi/dataset";
export default {
  data() {
    return {
      tableData: [],
      datasourceList: [],
      showAdd: false,
      selectedDatasourceId: "",
      page: { total: 0, size: 10, current: 1 },
      categoryList: [],
      categoryListSearched: [],
      categoryKey: "",
      nowCategoryId: "",
      showEditCategory: false,
      categoryForm: {},
      showCategory: false,
    };
  },
  created() {
    reportdatasourceList().then((res) => {
      this.datasourceList = res.data.data;
    });
    this.getCategory();
  },
  methods: {
    onCreateBigdata(cube) {
      let routeUrl = this.$router.resolve({
        path: "/newbi/bigdata/edit?ds=" + cube.id,
      });
      window.open(routeUrl.href, "_blank");
    },
    onSearchCategory(k) {
      this.categoryListSearched = this.categoryList.filter((i) =>
        i.wsName.includes(k)
      );
    },
    onDelCategory(category) {
      this.$confirm("确定删除此分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        categoryDel({ workspaceId: category.id })
          .then((res) => {
            this.$message({ type: "success", message: "删除成功" });
            this.getCategory();
          })
          .catch(() => {});
      });
    },
    onEditCategoryConfirm() {
      categorySave(this.categoryForm).then((res) => {
        if (!this.categoryForm.wsName) {
          this.$message({ type: "warning", message: "请填写分类名" });
          returnl;
        }
        this.$message({ type: "success", message: "保存成功" });
        this.showEditCategory = false;
        this.getCategory();
      });
    },
    onEditCategory(category) {
      if (!category) {
        this.categoryForm = {
          wsName: "",
          sortNum: 0,
          parentId: 0,
        };
      } else {
        this.categoryForm = { ...category };
      }
      this.showEditCategory = true;
    },
    onSelectCategory(index) {
      this.nowCategoryId = index;
      this.page.current = 1;
      this.getData();
    },
    getCategory() {
      categoryList({ current: 1, size: 10000 }).then((res) => {
        let list = res.data.data.records;
        let categoryList = list
          .filter((i) => !i.parentId)
          .map((i) => ({ ...i, children: [], parentName: "顶级分类" }));
        list.forEach((i) => {
          if (i.parentId) {
            let parent = categoryList.find((j) => j.id == i.parentId);
            if (parent) {
              i.parentName = parent.wsName;
              parent.children.push(i);
            }
          }
        });
        categoryList.forEach((i) => (i.hasChildren = !i.children.length));
        this.categoryList = categoryList;
        this.categoryListSearched = [...this.categoryList];
        if (this.categoryListSearched[0]) {
          this.nowCategoryId = this.categoryListSearched[0].id;
          this.getData();
        }
      });
    },
    onEditCube(cube) {
      this.$router.push("/newbi/dataset/edit?id=" + cube.id);
    },
    getDatasource(cube) {
      let datasource = this.datasourceList.find(
        (i) => i.id == cube.datasourceId
      );
      if (datasource) {
        return datasource.dsDb + " " + datasource.remark;
      }
    },
    sizeChange(size) {
      this.page.size = size;
      this.getData();
    },
    getData() {
      let { size, current } = this.page;
      cubeList({ size, current, workspaceId: this.nowCategoryId }).then(
        (res) => {
          let { total, records } = res.data.data;
          this.page.total = total;
          this.tableData = records;
        }
      );
    },
    onAddConfirm() {
      if (!this.selectedDatasourceId) {
        this.$message({ type: "warning", message: "请选择数据源" });
      } else {
        this.$router.push(
          `/newbi/dataset/edit?sourceid=${this.selectedDatasourceId}&ws=${this.nowCategoryId}`
        );
      }
    },
  },
};
</script>
<style lang="scss">
.dataset-list {
  display: flex;
  overflow: hidden;
  .btns {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .el-button {
      width: 125px;
    }
  }
  .category-list {
    flex: 0 0 260px;
    padding-top: 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .el-menu {
      flex: 1;
      overflow-y: auto;
      .el-menu-item {
        padding: 0 5px 0 10px;
        display: flex;
        align-items: center;
        height: 50px;
        line-height: 50px;
        .name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .main-wrapper {
    flex: 1;
    padding: 10px;
  }
}
</style>