<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <ul class="classify-list">
            <black v-for="item of classifyList" :key="item.categoryId">
                <li class="item">
                    <div
                        class="con"
                    >
                        <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">
                        <!-- <selectSwitch class="switch" :defaultSwitch="item.display===1" @change="displaySwitch(item,$event)" :switchList="['显示','隐藏']"/> -->
                        <!-- <selectSwitch class="switch" :defaultSwitch="item.top!==0" @change="setTopSwitch(item,$event)" :switchList="['置顶','取消']" :changeBgColor="false"/> -->
                    </div>
                </li>
            </black>
        </ul>
        <!-- <div class="add-classify" @click="add">新建分类</div> -->

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'推荐等级'"
                :content="false"
                :inputType="'number'"
                :value="level"
                placeholder="请输入推荐等级"
                @confirm="popupConfirm"
            ></uni-popup-dialog>
        </uni-popup>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";
import selectSwitch  from "../../components/xuan-switch/xuan-switch";

export default {
    name: "",
    components: { MyImage, uniPopup, uniPopupDialog,selectSwitch  },

    // 数据
    data() {
        return {
            classifyList: [],
            curData: {},
            level: 0,
        };
    },

    onLoad() {
        if (this.user.storeId) {
        }
    },
    async onShow() {
        this.getClassify();
    },
    // 函数
    methods: {
        // 获取分类
        getClassify() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Supplier/GetCateList", {}).then((res) => {
                uni.hideLoading();
                this.classifyList = res.data;
            });
        },

        // 显示隐藏
        displaySwitch(val,e) {
            if (val.display === 0) {
                //下架中，点击上架
                this.api
                    .post("/Yx/SetCategoryDisplay", {
                        categoryId: val.categoryId,
                        display: 1,
                    })
                    .then((res) => {
                        if (res.success) {
                            val.display = 1;
                            this.$forceUpdate();
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            } else {
                this.api
                    .post("/Yx/SetCategoryDisplay", {
                        categoryId: val.categoryId,
                        display: 0,
                    })
                    .then((res) => {
                        if (res.success) {
                            // this.fn.showToast("下架成功");
                            val.display = 0;
                            this.$forceUpdate();
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            }
        },

        // 推荐等级设置
        setTopSwitch(val) {
            if (val.top === 0) {
                // 置顶
                this.api
                    .post("/Yx/SetCategoryTop", {
                        id: val.categoryId,
                        query:true
                    })
                    .then((res) => {
                        if (res.success) {
                            val.top = 99;
                            this.$forceUpdate();
                        } else {
                            this.fn.showModal({
                                title: "设置失败",
                                content: res.message,
                                showCancel: false,
                            });
                        }
                    });
            } else {
                // 取消置顶
                this.api
                    .post("/Yx/CancelCategoryTop", {
                        id: val.categoryId,
                        query:true
                    })
                    .then((res) => {
                        if (res.success) {
                            // this.fn.showToast("下架成功");
                            val.top = 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: 40%;
            padding-right: px(44);
            position: relative;
        }
        .link {
            color: #4395ff;
            font-size: px(42);
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 10;
            transform: translate(0, -50%);
        }
        .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;
            &.status2 {
                width: px(210);
            }
            &.up {
                background-color: #ffeded;
                border-color: #ffdbdb;
                color: #ff4949;
            }
        }
    }
    .item-child {
        padding-left: px(60);
        background-color: #efefef;
    }
}
.switch~.switch{
    margin-left: px(40);
}
</style>