<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <ul class="classify-list">
            <black v-for="item of classifyList" :key="item.id">
                <li class="item">
                    <div class="con" @click="toggleChild(item)">
                        <div class="name">
                            {{ item.name }}
                        </div>
                        <div class="des">
                            {{
                                item.children ? item.children.length : 0
                            }}个二级分类
                        </div>
                        <my-image
                            class="arrow"
                            :class="{ up: item.showChildren }"
                            src="/static/common/arrows_left.png"
                        ></my-image>
                    </div>
                    <div class="tool">
                        <span
                            class="status"
                            :class="{ up: item.status === 0 }"
                            @click="setOnline(item)"
                            >{{ item.status === 0 ? "下架中" : "上架中" }}</span
                        >
                        <div class="setting" @click="setting(item, 'root')">
                            设置
                        </div>
                    </div>
                </li>
                <black
                    v-if="
                        item.children &&
                        item.children.length &&
                        item.showChildren
                    "
                >
                    <li
                        class="item item-child"
                        v-for="child of item.children"
                        :key="child.id"
                    >
                        <div class="con">
                            <div class="name">
                                {{ child.name }}
                            </div>
                        </div>
                        <div class="tool">
                            <span
                                class="status"
                                :class="{ up: child.status === 0 }"
                                @click="setOnline(child)"
                                >{{
                                    child.status === 0 ? "下架中" : "上架中"
                                }}</span
                            >
                            <div class="setting" @click="setting(child)">
                                设置
                            </div>
                        </div>
                    </li>
                </black>
            </black>
        </ul>
        <div class="add-classify" @click="add">新建一级分类</div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            storeId: "",
            classifyList: [],
        };
    },

    onLoad() {
        if (this.user.storeId) {
            this.storeId = this.user.storeId;
        } 
    },
    async onShow() {
        this.getClassify();
    },
    // 函数
    methods: {
        // 获取分类
        getClassify() {
            let storeId = this.storeId;
            this.api
                .get("/Product/GetProductType", {
                    storeId,
                })
                .then((res) => {
                    this.classifyList = res.data;
                });
        },
        toggleChild(val) {
            val.showChildren = !val.showChildren;
            this.$forceUpdate();
        },
        // 设置菜单
        setting(val, type) {
            let arr = ["编辑", "删除", "下移", "上移"];
            if (type === "root") {
                arr.push("新增二级分类");
            }
            this.fn.showActionSheet(arr).then((res) => {
                switch (res) {
                    case 0:
                        this.edit(val);
                        break;
                    case 1:
                        this.remove(val, false);
                        break;
                    case 2:
                        this.move(val, false);
                        break;
                    case 3:
                        this.move(val, true);
                        break;
                    case 4:
                        this.addChild(val);
                        break;

                    default:
                        break;
                }
            });
        },

        // 编辑
        edit(val) {
            this.$store.commit("common/update", {
                editClassify: val,
            });
            this.router.push({
                path: "/pages/manage/classify-form",
                query: {
                    id: val.id,
                },
            });
        },

        // 删除 confirm是否确认删除
        remove(val, confirm) {
            this.api
                .post("/Product/RemoveType", {
                    query: true,
                    id: val.id,
                    confirm: confirm,
                })
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("删除成功");
                        let arr = [];
                        for (let item of this.classifyList) {
                            if (item.id !== val.id) {
                                arr.push(item);
                            }
                        }
                        this.classifyList = arr;
                    } else {
                        this.fn
                            .showModal({
                                content: "是否确认删除？",
                            })
                            .then((res) => {
                                if (res.confirm) {
                                    this.remove(val, true);
                                }
                            });
                    }
                });
        },

        // 移动  up 上移或下移，true-上移，false-下移
        move(val, up) {
            this.api
                .post("/Product/MoveType", {
                    query: true,
                    id: val.id,
                    up: up,
                })
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("移动成功");
                        this.getClassify();
                    } else {
                        this.fn.showModal({
                            title: "移动失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        // 新增
        add() {
            this.router.push({
                path: "/pages/manage/classify-form",
            });
        },

        // 增加子集
        addChild(val) {
            this.router.push({
                path: "/pages/manage/classify-form",
                query: {
                    parentId: val.id,
                },
            });
        },
        // 上下架
        setOnline(val) {
            if (val.status === 0) {
                //下架中，点击上架
                this.api
                    .get("/Product/TypeGoOnline", {
                        typeId: val.id,
                    })
                    .then((res) => {
                        if (res.success) {
                            // this.fn.showToast("上架成功");
                            val.status = 1;
                            this.$forceUpdate();
                        } else {
                            this.fn.showModal({
                                title: "上架失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            } else {
                this.api
                    .get("/Product/TypeGoOffline", {
                        typeId: val.id,
                    })
                    .then((res) => {
                        if (res.success) {
                            // this.fn.showToast("下架成功");
                            val.status = 0;
                            this.$forceUpdate();
                        } else {
                            this.fn.showModal({
                                title: "下架失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            }
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(180);
    min-height: 100vh;
    background-color: #fff;
}
.add-classify {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: px(150);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: px(44);
    color: #fff;
    background-color: rgb(0, 188, 38);
}
.page--iphoneX {
    .add-classify {
        padding-bottom: px(30);
    }
}
.classify-list {
    .item {
        display: flex;
        padding: px(30) px(35);
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f1f1f1;
        .tool {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .setting {
            width: px(140);
            height: px(80);
            border: 1px solid #b7b7b7;
            border-radius: px(8);
            color: #666;
            font-size: px(40);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .con {
            width: 50%;
            padding-right: px(44);
            position: relative;
        }
        .name {
            font-size: px(44);
            color: #333;
            
        }

        .des {
            font-size: px(36);
            margin-top: px(20);
            color: #666;
            @include omit(100%);
        }
        .arrow {
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 10;
            transform: translate(0, -50%) rotate(180deg);
            width: px(44);
            height: px(44);
            transition: all 0.3s;
            /deep/ img {
                height: px(44);
                width: px(44);
            }
            &.up {
                transform: translate(0, -50%) rotate(90deg);
            }
        }
        .status {
            width: px(120);
            height: px(44);
            background-color: #e7faf0;
            border-radius: px(8);
            border: 1px solid #d0f5e0;
            font-size: px(32);
            color: #13ce66;
            padding: px(6) px(3);
            margin-right: px(30);
            display: flex;
            align-items: center;
            justify-content: center;
            &.up {
                background-color: #ffeded;
                border-color: #ffdbdb;
                color: #ff4949;
            }
        }
    }
    .item-child {
        padding-left: px(60);
        background-color: #efefef;
    }
}
</style>