<template>
    <div class="location-widget">
        <van-cell-group
            v-for="(items, index) in datalist"
            :key="index"
            class="loca-box-group"
            :class="{'loca-mini': size == 'mini'}"
        >
            <template #title>
                <div class="loca_title_widget">
                    <div class="loca_left"  v-if="items.sort <= -2">
                        <i class="iconfont icon-xing remind"/>
                        <i class="iconfont icon-xing remind"/>
                        <i class="iconfont icon-xing remind"/>
                        {{ items.area }}
                        <i class="iconfont icon-xing remind"/>
                        <i class="iconfont icon-xing remind"/>
                        <i class="iconfont icon-xing remind"/>
                    </div>
                    <div class="loca_left" v-else>
                        <i class="iconfont icon-xing remind" v-if="items.sort < 999998"/>
                        {{ items.area }}
                    </div>
                    <div class="loca_right">
                        <slot name="title-right" :items="items"  />
                    </div>
                </div>
            </template>
            <div
                class="loca-inner"
                :class="isLocaBoxCls(item)"
                v-for="(item, idx) in items.children"
                :key="idx"
            >
                <div
                    class="loca-box list-cell"
                    :class="{'selected': selectedIndex.indexOf(item.locacode) > -1, 'newloca': isNewlocaSelected(item)}"
                >
                    <van-cell
                        class="loca-main lj-cell-left"
                        center
                        @click="handleCellClick(item)"
                    >
                        <template #title>
                            <span :class="{'title-select': isNewlocaSelected(item)}">
                                {{ item.locacode }}
                            </span>
                        </template>
                        <template #label v-if="isProgressTitle || !isNewlocaSelected(item)">
                            {{ item.lcode }}
                        </template>
                        <template #icon>
                            <slot
                                name="icon"
                                :item="item"
                                :handleAction="handleActionLoca"
                            >
                                <div class="lj_icon" :class="isIconCls(item)" style="margin-right: 4px">
                                    <i v-if="selectedIndex.indexOf(item.locacode) > -1" class="iconfont icon-tongyi"></i>
                                </div>
                            </slot>
                        </template>
                        <template #default>
                            <slot
                                v-if="isProgressTitle"
                                name="default"
                                :item="item"
                                :addLoca="handleActionLoca"
                                :changeStepper="handleChangeLocaStp"
                                :stepperBlur="handleBlur"
                            ></slot>
                        </template>
                    </van-cell>
                    <slot
                        v-if="!isProgressTitle"
                        name="middle-action"
                        :item="item"
                        :addLoca="handleActionLoca"
                        :changeStepper="handleChangeLocaStp"
                        :stepperBlur="handleBlur"
                    ></slot>
                    <lj-progress
                        v-if="item.volume"
                        class="loca-volume"
                        :size="size"
                        :molecule="item.allarea"
                        :inner-molecule="item.mtrlarea"
                        :denominator="item.volume"
                        :color="isProgressColor(item)"
                        :progress-mini-text="isProgressMiniText(item)"
                        :progress-mini-text-color="isProgressMiniTextColor(item)"
                        :bokeh="item.value > 0"
                    >
                        <div class="volume-title" slot="title" v-if="isProgressTitle">
                            {{item.allarea}}
                            <span style="color: #dddddd">/</span>
                            <span>
                                {{ `${item.volume} m³` }}
                            </span>
                        </div>
                        <div class="left-text" slot="left" v-else>
                            {{ item.volume }}
                            <span>m³</span>
                        </div>
                        <div
                            v-if="item.value > 0 && mtrlCubage > 0"
                            slot="additem"
                            class="additem-box"
                            :class="{'outtype': !waretype}"
                            :style="additemBoxStyle(item)"
                        >
                            <div class="additem volume-all" :class="{'outtype': !waretype}" :style="additemStyle(item)">
                                <span v-if="isProgressTitle">{{ isAdditemText(item.value, item.volume) }}</span>
                            </div>
                            <span
                                v-if="isProgressTitle"
                                class="volume-text"
                                :style="additemTextStyle(item.value, item.notoutqty)"
                            >
                                {{ isAdditemText(item.value, item.volume) }}
                            </span>
                        </div>
                    </lj-progress>
                </div>
            </div>
        </van-cell-group>
    </div>
</template>

<script>
import LjProgress from './lj-progress';

export default {
    name: 'L1appLocationItem',
    components: {
        LjProgress,
    },
    props: {
        datalist: {
            type: Array,
            default: function() {
                return []
            }
        },
        // 已选列表
        selectedIndex: {
            type: Array,
            default: function() {
                return []
            }
        },
        mtrlCubage: {
            type: Number,
            default: 0
        },
        // 是否新仓位模式
        uselocationState: {
            type: Boolean,
            default: false
        },
        // showAcction: {
        //     type: Boolean,
        //     default: true
        // },
        // 进出仓：1：进仓；0：出仓
        waretype: {
            type: Number,
            default: 1
        },
        // 控制尺寸：large:(默认)一行；mini:半行
        size: {
            type: String,
            default: "large"
        },
        // 模式: newloca：新仓位模式, single：单选, checkbox：多选
        modelType: {
            type: String,
            default: ''
        }
    },
    computed: {
        isNewlocaSelected(item) {
            return function(item) {
                if (this.selectedIndex.indexOf(item.locacode) == -1) {
                    return false;
                } else {
                    if (this.modelType == 'checkbox') {
                        return false;
                    }
                    if (this.uselocationState) {
                        return true
                    }
                }
                return false
            }
        },
        isProgressColor(item) {
            return function(item) {
                let percent = $lj.floatMul($lj.floatDiv(item.allarea, item.volume).toFixed(2),  100);

                // return percent > 100 ? '#f44336' : '#66bb6a';
                return percent > 100 ? '#f44336' : '#8E8E93';
                // return '#8E8E93';
            }
        },
        isAdditemText(a, b) {
            return function(a, b) {
                let percent = $lj.floatMul($lj.floatDiv(a * this.mtrlCubage, b).toFixed(2), 100);
                let text;
                if (this.waretype) {
                    text = `+ ${percent}%`;
                } else {
                    text = `- ${percent}%`;
                }
                return text;
            }
        },
        additemTextStyle(a, b) {
            return function(a, b) {
                let color = $lj.colorHexToRgb_a('#34C759', 0.8);
                // let color = $lj.colorHexToRgb_a('#29b6f6', 0.8);
                if (!this.waretype) {
                    if (a > b) {
                        color = $lj.colorHexToRgb_a('#f44336', 0.8);
                    }
                }
                return {
                    'left': this.waretype ? '36px' : 'unset',
                    'right': this.waretype ? 'unset' : '36px',
                    'color': color
                }
            }
        },
        additemBoxStyle(item) {
            return function(item) {
                if (this.waretype) {
                    // 进仓
                    let style = {};
                    let percent = $lj.floatMul($lj.floatDiv(item.allarea, item.volume).toFixed(2), 100);
                    style['left'] =  percent + '%';
                    if (item.allarea > 0) {
                        style['padding-left'] = '2px';
                    }
                    return style;
                }
                return '';
            }
        },
        additemStyle(item) {
            return function(item) {
                let percent = $lj.floatMul($lj.floatDiv(item.value * this.mtrlCubage, item.volume).toFixed(2), 100);
                let color = '#34C759'
                // let color = $lj.colorHexToRgb_a('#29b6f6', 0.8);
                if (!this.waretype) {
                    // 出仓
                    if (item.value > item.notoutqty) {
                        color = '#f44336'
                    }
                } else {
                    // 进仓
                    if (item.value * this.mtrlCubage + item.allarea > item.volume) {
                        color = '#f44336'
                    }
                }
                color = $lj.colorHexToRgb_a(color, 0.8);
                return {
                    'width': percent > 100 ? 100 + '%' : percent + '%',
                    'background-color': color,
                }
            }
        },
        isLocaBoxCls(item) {
            return function (item) {
                return {
                    // 'selected': this.selectedIndex.indexOf(item.locacode) > -1,
                    'loca-box-mini': this.size == 'mini'
                };
            }
        },
        isProgressTitle() {
            return this.size != 'mini';
        },
        isProgressMiniText(item) {
            return function(item) {
                let percent, text;
                percent = $lj.floatMul($lj.floatDiv(item.allarea, item.volume).toFixed(2),  100);
                text = `${percent}%`;
                if (this.selectedIndex.indexOf(item.locacode) == -1) {
                    return text;
                } else {
                    if (this.modelType == 'checkbox') {
                        return text;
                    }
                    if (this.uselocationState) {
                        percent = $lj.floatMul($lj.floatDiv(item.value * this.mtrlCubage, item.volume).toFixed(2), 100);
                        if (percent > 999) percent = 999;
                        if (this.waretype) {
                            text = `+ ${percent}%`;
                        } else {
                            text = `- ${percent}%`;
                        }
                    }
                }
                return text;
            }
        },
        isProgressMiniTextColor(item) {
            return function(item) {
                let color;// 绿
                let percent = $lj.floatMul($lj.floatDiv(item.allarea, item.volume).toFixed(2),  100);
                color = percent > 100 ? '#f44336' : '#8E8E93';
                if (this.selectedIndex.indexOf(item.locacode) == -1) {
                    return $lj.colorHexToRgb_a(color, 0.8);
                } else {
                    if (this.modelType == 'checkbox') {
                        return $lj.colorHexToRgb_a(color, 0.8);
                    }
                    if (this.uselocationState) {
                        color = '#34C759';// 绿
                        if (!this.waretype) {
                            // 出仓
                            if (item.value > item.notoutqty) {
                                color = '#f44336'
                            }
                        } else {
                            // 进仓
                            if (item.value * this.mtrlCubage + item.allarea > item.volume) {
                                color = '#f44336'
                            }
                        }
                    }
                }
                return $lj.colorHexToRgb_a(color, 0.8);
            }
        },
        isIconCls(item) {
            return function(item) {
                let cls = this.modelType;
                if (this.selectedIndex.indexOf(item.locacode) > -1) {
                    cls += ' checked'
                }
                return cls
            }
        }
    },

    methods: {
        handleChangeLocaStp(value, {name}) {
            this.$emit('change-stepper', value, {name});
        },
        handleCellClick(item) {
            this.$emit('cell-click', item);
        },
        handleActionLoca(type, item) {
            console.log('组件的大大大大大多多多 item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
            this.$emit('add-loca', type, item);
        },
        handleBlur() {
            this.$emit('stepper-blur');
        },
    },
};
</script>

<style lang="less">
@import "../../../../assets/css/lj-pda";
@import "../../../../assets/css/lj-style-variable";
.location-widget {
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
        border-width: 0;
    }
    .loca-box-group {
        &.loca-mini {
            display: flex;
            flex-wrap: wrap;
            // margin-right: -10px;
            padding: 0 5px;
            width: 100%;
            box-sizing: border-box!important;
        }
    }
    .van-cell-group__title {
        // padding-left: 0;
        // padding-right: 0;
        padding-bottom: 0;
    }
    .list-cell {
        margin: 0 10px;
        margin-top: 8px;
        background-color: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        padding: 7px 15px;
        // transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
        border: 1px solid transparent;

        &.selected {
            // &::before {
            //     content: '';
            //     position: absolute;
            //     top: 0;
            //     left: 0;
            //     width: 100%;
            //     height: 100%;
            // }
            border: 1px solid rgba(33, 150, 243, 0.6);;
            // transform: translateY(-2px);
            box-shadow: 0px 8px 20px 8px rgba(33, 150, 243, 0.05), 0px 6px 16px rgba(33, 150, 243, 0.08), 0px 3px 6px -4px rgba(33, 150, 243, 0.12);
        }
    }
    .remind{
        font-size: 14px;
        color: @colorWarn;
    }
    .van-cell__label {
        margin-top: 0;
    }
    .icon-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    // .iconfont {
    //     font-size: 20px;
    //     margin-right: 4px;
    // }
    // .selected-stepper {
    //     display: flex;
    //     justify-content: flex-end;
    //     // align-items: center;
    //     height: 100%;

    //     .van-stepper__input {
    //         color: @musePrimary;
    //     }
    // }
    // .van-skeleton__row, .van-skeleton__title{
    //     background-color: #fff;
    // }
    // .van-cell-group {
    //     background-color: unset;
    // }
    // .loca-default {
    //     display: flex;
    //     margin: auto 0;
    //     justify-content: flex-end;
    //     align-items: center;

    //     .cricle-text{
    //         position: relative;
    //         font-size: 12px;
    //         font-weight: bold;
    //         display: inline-flex;
    //         // display: flex;
    //         margin: auto;
    //         justify-content: center;
    //         align-items: center;
    //         color: #333;
    //         height: 100%;

    //         span {
    //             position: absolute;
    //             right: -100%;
    //             font-size: 10px;
    //             font-weight: normal;
    //         }
    //     }
    //     .text-box {
    //         margin-right: 5px;
    //     }
    // }

    .loca_title_widget {
        display: flex;
        color: #999999;
        font-size: 12px;

        .loca_left {
            flex: 1;
        }
        .loca_right {
            flex-shrink: 0;

            .iconfont {
                font-size: 12px;
            }
        }
    }
    .loca-inner {
        position: relative;
        .loca-box {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            // height: 100%;
            padding: 6px 0!important;
        }
        .loca-main {
            padding: 0 16px;
            // transition: all ease-out 0.2s;

            .van-cell__title > span {
                font-weight: 700;
                // transition: all ease-out 0.2s;
            }
        }
        .loca-volume {
            margin-top: 12px;
            position: relative;

            .volume-title {
                position: absolute;
                right: 8px;
                top: -100%;
                text-align: right;
                font-size: 12px;
                color: @summaryLightTextColor;

                span {
                    opacity: 0.6;
                }
            }
            .additem-box {
                // position: relative;
                display: flex;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 100%;

                &.outtype {
                    justify-content: flex-end;
                }

                .volume-text {
                    left: 4px;
                    color: @colorBlue;
                }
            }
            .additem {
                // background-color: rgba(41,182,246,0.8);
                color: #fff;
                border-right: 2px solid #fff;

                span {
                    padding-left: 36px;
                    white-space: nowrap;
                }
                &.outtype {
                    border-right: unset;
                    border-left: 2px solid #fff;
                    span {
                        position: absolute;
                        right: 36px;
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        text-align: right;
                        padding-left: 0;
                    }
                }

            }
            .left-text {
                min-width: 32px;
                flex-shrink: 0;
                margin-right: 4px;
                line-height: 14px;
                font-size: 10px;
                font-weight: normal;
                color: rgb(142, 142, 147);
                text-align: right;
                span {
                    transform: scale(0.8);
                    color: rgb(205, 205, 206);
                }
            }
        }

        &.loca-box-mini {
            width: 50%!important;
            padding: 0 5px;
            margin-top: 8px;

            .loca-box {
                width: 100%!important;
                margin: 0!important;
                // min-height: 72px;

                &.newloca {
                    padding: 1px 0!important;
                }
            }

            .loca-main {
                padding: 0 8px;

                .title-select {
                    font-weight: normal!important;
                    font-size: 12px;
                }
            }

            .loca-volume {
                margin-top: 0;
            }
        }
    }
    .van-cell::after {
        content: none;
    }
}
/**公共 */
.mtrl_num {
    font-size: 12px;
    color: #333;
    font-weight: bold;
    text-align: right;

    .span-dot {
        display: inline-block;
        background-color: @colorBlue;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
}
.lj_tag {
    position: relative;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    margin: 0 1px;
    border-radius: 8px;
    border-bottom-left-radius: 1px;
    border: 1px solid transparent;
    font-size: 10px;

    &.primary {
        color: #fff;
        border-color: rgba(33, 150, 243, 0.8);
        background-color: rgba(33, 150, 243, 0.8);

        &.plain {
            color: @musePrimary;
            border-color: rgba(33, 150, 243, 0.8);
            // background-color: rgb(200, 225, 245);
            background-color: #fff;
        }
    }
    &.warning {
        color: #fff;
        border-color: @colorOrange;
        background-color: @colorOrange;
    }
}
.lj_icon {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    position: relative;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 4px;
    border: 1px solid @tertiary;
    transition: all ease-in-out 0.2s;

    &.single {
        border-radius: 50%;
    }
    &.checked {
        border-color: @musePrimary;
        background-color: @musePrimary;
    }
    .iconfont {
        margin-right: 0!important;
        font-size: 12px!important;
        color: #ffffff;
    }
}

// .locaicon {
//     display: block;
//     position: relative;
//     width: 16px;
//     height: 16px;
//     // margin: auto 10px;
//     border-radius: 50%;

//     &::before, &.add::after {
//         content: "";
//         position: absolute;
//         border-radius: 1px;
//         background-color: #fff;
//     }
//     &::before {
//         top: 7px;
//         left: 3px;
//         width: 10px;
//         height: 2px;
//     }

//     &.add {
//         background-color: rgb(57,203,106);
//         &::after {
//             top: 3px;
//             left: 7px;
//             height: 10px;
//             width: 2px;
//         }
//     }
//     &.del {
//         background-color: rgb(255,59,48);
//     }
// }
</style>