<template>
    <div class="newbi-bigdata-list">
        <div class="left">
            <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.categoryValue }}</div>
                    </el-menu-item>
                    <el-submenu v-else :key="category.id" :index="category.id">
                        <template #title>{{ category.categoryValue }}</template>
                        <el-menu-item
                                v-for="c of category.children"
                                :key="c.id"
                                :index="c.id"
                        >
                            <div class="name" style="flex: 1">{{ c.categoryValue }}</div>
                        </el-menu-item>
                    </el-submenu>
                </template>
            </el-menu>
        </div>
        <div class="right">
            <div class="top">
                <el-input
                        size="small"
                        placeholder="搜索大屏"
                        v-model="bigdataKey"
                        @input="onSearchBigdata"
                        style="width: 360px"
                ></el-input>
                <el-dropdown @command="onBigdataEdit">
                    <el-button size="small" type="success" icon="el-icon-plus">
                        新建大屏
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :command="{ id: 0 }">大屏模式</el-dropdown-item>
                            <el-dropdown-item :command="{ id: 0, type: 'qucik' }"
                            >quick模式
                            </el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="item-list">
                <div class="item" v-for="item of bigdataListSearched" :key="item.id">
                    <div class="bg">
                        <img :src="baseUrl + '/' + item.backgroundUrl" alt=""/>
                        <div class="mask">
                            <div class="edit-btn" @click="onBigdataEdit(item)">编辑</div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="name" :title="item.title">{{ item.title }}</div>
                        <div class="btn">
                            <el-tooltip effect="dark" content="删除" placement="bottom">
                                <i
                                        class="el-icon el-icon-delete"
                                        @click="onBigdataDel(item)"
                                ></i>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="编辑" placement="bottom">
                                <i
                                        class="el-icon el-icon-edit"
                                        @click="onEditBigdata(item)"
                                ></i>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="预览" placement="bottom">
                                <i
                                        class="el-icon el-icon-view"
                                        @click="onBigdataPreview(item)"
                                ></i>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="复制" placement="bottom">
                                <i
                                        class="el-icon el-icon-copy-document"
                                        @click="onBigdataCopy(item)"
                                ></i>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <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.categoryValue"></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.categoryValue"
                                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
                v-model="showEditBigdata"
                title="编辑大屏信息"
                append-to-body
                width="400px"
        >
            <el-form size="mini" label-width="80px">
                <el-form-item label="大屏名称">
                    <el-input v-model="bigdataForm.title"></el-input>
                </el-form-item>
                <el-form-item label="大屏分类">
                    <el-select v-model="bigdataForm.category">
                        <el-option
                                v-for="c of categoryList"
                                :key="c.id"
                                :value="c.id"
                                :label="c.categoryValue"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button
                    size="mini"
                    type="primary"
                    @click="onEditBigdataConfirm"
                    style="width: 100px; margin: 30px auto 0; display: block"
            >
                保存
            </el-button>
        </el-dialog>
        <el-dialog v-model="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="categoryValue"></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 {
        bigdataCopy,
        bigdataDel,
        bigdataList,
        bigdataUpdate,
        categoryDel,
        categoryList,
        categorySave,
    } from "../../../api/newbi/bigdata";
    import {baseUrl} from "@/config/env";

    export default {
        data() {
            return {
                categoryList: [],
                categoryListSearched: [],
                categoryKey: "",
                nowCategoryId: "",
                showEditCategory: false,
                categoryForm: {},
                bigdataList: [],
                bigdataListSearched: [],
                baseUrl: import.meta.env.VITE_SERVER_SITE,
                bigdataKey: "",
                bigdataForm: {},
                showEditBigdata: false,
                showCategory: false,
            };
        },
        created() {
            this.getCategory();
        },
        methods: {
            onBigdataCopy(bigdata) {
                this.$confirm("确定复制此大屏?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        bigdataCopy({id: bigdata.id}).then((res) => {
                            this.$message({type: "success", message: "复制成功"});
                            this.getBigdata();
                        });
                    })
                    .catch(() => {
                    });
            },
            onEditBigdata(bigdata) {
                this.bigdataForm = {
                    title: bigdata.title,
                    category: bigdata.category,
                    id: bigdata.id,
                };
                this.showEditBigdata = true;
            },
            onEditBigdataConfirm() {
                if (!this.bigdataForm.title) {
                    return this.$message({message: "请填写大屏名称", type: "warning"});
                }
                bigdataUpdate(this.bigdataForm).then((res) => {
                    this.$message({message: "保存成功", type: "success"});
                    this.showEditBigdata = false;
                    this.getBigdata();
                });
            },
            onBigdataPreview(bigdata) {
                let {category, id, content} = bigdata;
                content = JSON.parse(content);
                localStorage.setItem("bigdataPreviewFlag", 1);
                let path = "/newbi/bigdata/preview";
                if (content.type === "quick") {
                    path = "/newbi/bigdata/gridpreview";
                }
                let routeUrl = this.$router.resolve({
                    path: path,
                    query: {category, id},
                });
                window.open(routeUrl.href, "_blank");
            },
            onBigdataDel(bigdata) {
                this.$confirm("确定删除此大屏?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        bigdataDel({ids: bigdata.id}).then((res) => {
                            this.$message({type: "success", message: "删除成功"});
                            this.getBigdata();
                        });
                    })
                    .catch(() => {
                    });
            },
            onBigdataEdit(item) {
                let routeUrl = "";
                let id = item.id;
                if (!id) {
                    let path = "/edit?cg=";
                    if (item.type) {
                        path = "/gridedit?cg=";
                    }
                    routeUrl = this.$router.resolve({
                        path: path + this.nowCategoryId,
                    });
                } else {
                    let type = JSON.parse(item.content).type;
                    let path = "/edit";
                    if (type) {
                        path = "/gridedit";
                    }
                    routeUrl = this.$router.resolve({
                        path: path,
                        query: {id},
                    });
                }
                window.open(routeUrl.href, "_blank");
            },
            onSearchCategory(k) {
                this.categoryListSearched = this.categoryList.filter((i) =>
                    i.categoryValue.includes(k)
                );
            },
            onSearchBigdata(k) {
                this.bigdataListSearched = this.bigdataList.filter((i) =>
                    i.title.includes(k)
                );
            },
            onDelCategory(category) {
                this.$confirm("确定删除此分类?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        categoryDel({id: category.id}).then((res) => {
                            this.$message({type: "success", message: "删除成功"});
                            this.getCategory();
                        });
                    })
                    .catch(() => {
                    });
            },
            onEditCategoryConfirm() {
                categorySave(this.categoryForm).then((res) => {
                    if (!this.categoryForm.categoryValue) {
                        this.$message({type: "warning", message: "请填写分类名"});
                        returnl;
                    }
                    this.$message({type: "success", message: "保存成功"});
                    this.showEditCategory = false;
                    this.getCategory();
                });
            },
            onEditCategory(category) {
                if (!category) {
                    this.categoryForm = {
                        categoryKey: "",
                        categoryValue: "",
                        parentId: 0,
                    };
                } else {
                    this.categoryForm = {...category};
                }
                this.showEditCategory = true;
            },
            onSelectCategory(index) {
                this.nowCategoryId = index;
                this.bigdataKey = "";
                this.getBigdata();
            },
            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.categoryValue;
                                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.getBigdata();
                    }
                });
            },
            getBigdata() {
                bigdataList({category: this.nowCategoryId}).then((res) => {
                    this.bigdataList = res.data.data;
                    this.bigdataListSearched = [...this.bigdataList];
                });
            },
        },
    };
</script>
<style lang="scss">
  .newbi-bigdata-list {
    display: flex;
    overflow: hidden;

    .left {
      flex: 0 0 260px;
      padding-right: 10px;
      border-right: 1px solid #ccc;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .btns {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;

        .el-button {
          width: 125px;
        }
      }

      .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;
          }
        }
      }
    }

    .right {
      flex: 1;
      padding: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
      }

      .item-list {
        flex: 1;
        overflow-y: auto;
        float: left;
        padding-bottom: 5%;
      }

      .item {
        width: 258px;
        margin: 10px;
        display: inline-block;
        border: 1px solid #ccc;

        .bg {
          width: 258px;
          height: 148px;
          display: block;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          background-color: #1d262e;
          color: #bcc9d4;
          font-size: 12px;

          .name {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .el-icon {
            margin-left: 15px;
            cursor: pointer;
          }
        }

        .mask {
          visibility: hidden;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background-color: rgba(0, 0, 0, 0.3);

          .edit-btn {
            width: 90px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background-image: linear-gradient(-225deg, #00d3f1 0, #12b3ff 100%);
            cursor: pointer;
            margin: 56px auto 0;
            font-size: 14px;
            letter-spacing: 0.2em;
            font-weight: 400;
          }
        }

        &:hover {
          box-shadow: 0 0 10px 0 #999;

          .mask {
            visibility: visible;
          }
        }
      }
    }
  }
</style>
