<!--
@name 业务组件：销售出仓展示组件
@desc 基于 vant-ui

【必填入参】：
    @param {String} [tabsAText]  -  第一个标签页文本，默认：""
    @param {String} [tabsBText]  -  第二个标签页文本，默认：""

    @param {Array} [dataList]  -  原始数据，已选订单列表
        @example: [{locacode:"",locaname:"",stoargecode:"",stoargename:""}...] - 多条仓库与仓位
    @param {Boolean} [showCheckbox]  -  是否展示复选框，默认：false
    @param {Boolean} [scanstart]  -  开始扫描状态，默认：false
    @param {Object} [fieldsMap]   - 数据命名
        @example: fieldsMap: {
                orderTitle: ""  - 编码字段名 <string>
                orderDate: ""  - 日期字段名 <string>
                orderLabel: ""  -  标签字段名 <string>
                orderNumber: ""  - 数值字段名 <string>
                orderOutrep: ""  -  业务员字段名 <string>
            }

【选填入参】： 
    @param {String} [itemLeftText] - 模块左侧提示文字, 默认："包件明细"
    @param {String} [itemRightText] - 模块右侧提示文字, 默认："计划发货数"

【回调出参】：
    @function {out} popupItem(data) - 点击标题事件，弹出详情
    @function {out} checkboxToggle(Array) - 复选框点击回调，返回已选复选框数组

【父组件控制方法】：
    @function {in} fnClearSel()  -  清空复选框已选内容
    @function {in} fnTabsAction(tabName)  -  切换到tabs页面; tabName的值：order,barcode
    @function {in} fnAddOrder(Array)  -  成功添加订单后，展开详情; Array是订单编号的集合;

【插槽】
    @slot [barcode]  第二个标签页内容
    @slot [right_default]  订单列表中，包件明细右侧插槽

@example 调用示例
    <lj-multi-order ref="modle" :data-list="outwareState" list-id="outwarecode" :show-checkbox="showOrderToDelect" @checkboxToggle="handleSelDelOrdertoggle" tabs-a-text="发货单" tabs-b-text="包装汇总"></lj-multi-order>
@time 2020年8月3日 -- design by Yj_cHen
-->
<template>
    <div class="multi-order-wrapper">
        <van-tabs v-model="tabsActive" @click="handleOpenTabs" sticky :offset-top="offserTop">
            <!--part A-->
            <van-tab name="order" class="order-tabs" :title="`${tabsAText}(${dataList.length})`">
                <!-- <template slot="title">
                    <lj-bagde class="order-title" :title="tabsAText" :num="dataList.length" color="#46a4da"></lj-bagde>
                </template> -->
                <slot name="main-list">

                    <van-empty class="lj-empty" v-if="!dataList.length" image="search" :description="emptyText" />
                    
                    <!--复选框，选择要删除的订单-->
                    <template v-else>
                            <van-checkbox-group v-if="showCheckbox" v-model="checkboxToDel" @change="autoChangeCB">
                                <van-cell
                                    v-for="(items, index) in dataList"
                                    clickable
                                    :key="index"
                                    class="muti-order-section lj-cell-left"
                                    title-class="scan-item-title"
                                    value-class="scan-item-value"
                                    @click="handleSelDelOrdertoggle(index, items[fieldsMap.orderTitle])"
                                >
                                    <template slot="icon">
                                        <van-checkbox :name="items[fieldsMap.orderTitle]" ref="checkboxes" />
                                    </template>
                                    <template slot="title">
                                        <span class="title" @click.stop="handleShowBarcodeDetail(items, 0)">
                                            {{ items[fieldsMap.orderTitle] }}
                                        </span>
                                        <div class="item-name">
                                            <lj-tag-double
                                                :value="labelText | colonFilter"
                                                :doubleValue="items[fieldsMap.orderLabel]"
                                            >
                                            </lj-tag-double>
                                            <!-- {{ labelText + items[fieldsMap.orderLabel] }} -->
                                        </div>
                                    </template>
                                    <template slot="default">
                                        <div class="item-default">
                                            <!-- <div class="item-code time">
                                                {{ formatDate(items[fieldsMap.orderDate]) }}
                                            </div> -->
                                            <!-- <div class="item-code outrep" v-if="items[fieldsMap.orderOutrep]">
                                                {{ items[fieldsMap.orderOutrep] }}
                                            </div> -->
                                            <lj-tag-double
                                                v-if="items[fieldsMap.orderOutrep]"
                                                type="primary"
                                                value="业务"
                                                :doubleValue="items[fieldsMap.orderOutrep]"
                                            >
                                            </lj-tag-double>
                                        </div>
                                    </template>
                                </van-cell>
                            </van-checkbox-group>

                            <!--展示订单-->
                            <van-collapse v-model="orderOpenState" v-else>
                                <van-collapse-item
                                    v-for="(items, index) in dataList"
                                    :key="index"
                                    :name="items[fieldsMap.orderTitle]"
                                    class="muti-order-section lj-cell-left"
                                    title-class="barcode-item-title"
                                    value-class="scan-item-value"
                                >
                                    <template slot="title">
                                        <div class="title">
                                            <span @click.stop="handleShowBarcodeDetail(items, 0)">
                                                {{ items[fieldsMap.orderTitle] }}
                                            </span>
                                        </div>
                                        <div class="item-name">
                                            <lj-tag-double
                                                :value="labelText | colonFilter"
                                                :doubleValue="items[fieldsMap.orderLabel]"
                                            >
                                            </lj-tag-double>
                                            <!-- {{ labelText + items[fieldsMap.orderLabel] }} -->
                                        </div>
                                    </template>
                                    <template slot="label">
                                    </template>
                                    <template slot="value">
                                        <div class="item-default" style="align-items: flex-end">
                                            <!-- <div class="item-code time">
                                                {{ formatDate(items[fieldsMap.orderDate]) }}
                                            </div> -->
                                            <template v-if="scanstart">
                                                <!-- <span class="item-code">
                                                    {{ items.qtySum + "/" + items.planqtySum }}
                                                </span>
                                                <span class="item-code code">
                                                    {{ items.barcode.length }}
                                                </span> -->
                                                <lj-tag-double
                                                    style="margin-bottom: 2px"
                                                    type="primary"
                                                    value="小计"
                                                    :doubleValue="items.qtySum + '/' + items.planqtySum"
                                                >
                                                </lj-tag-double>
                                                <lj-tag-double
                                                    type="warning"
                                                    plain
                                                    :value="items.barcode.length"
                                                >
                                                </lj-tag-double>
                                            </template>
                                            <!-- <div class="item-code outrep" v-else-if="items[fieldsMap.orderOutrep]">
                                                {{ items[fieldsMap.orderOutrep] }}
                                            </div> -->
                                            <lj-tag-double
                                                v-else-if="items[fieldsMap.orderOutrep]"
                                                type="primary"
                                                value="业务员"
                                                :doubleValue="items[fieldsMap.orderOutrep]"
                                            >
                                            </lj-tag-double>
                                        </div>
                                    </template>
                                    <template slot="default">
                                        <van-cell-group>
                                            <div class="cell-group-title" slot="title">
                                                <span class="left">{{ itemLeftText }}</span>
                                                <span class="right">{{ itemRightText }}</span>
                                            </div>
                                            <van-cell
                                                class="lj-cell-left lj-card__header"
                                                title-class="scan-item-title"
                                                label-class="scan-item-subtitle"
                                                value-class="scan-item-value"
                                                v-for="(item, idx) in items.children"
                                                :key="idx"
                                            >
                                                <template slot="title">
                                                    <span class="title" @click="handleShowBarcodeDetail(item, 1)">
                                                        {{ item.mtrlcode }}
                                                    </span>
                                                </template>
                                                <template slot="label">
                                                    <slot name="ordermx_label" :item="item">
                                                        {{ item.mtrlname }}
                                                    </slot>
                                                </template>
                                                <template slot="default">
                                                    <slot name="right_default" :item="item" :isscan="scanstart" :handleShowTips="handleShowTips">
                                                        <div class="item-default" v-if="!scanstart" @click="handleShowTips('right_default', item)">
                                                            <div style="margin: auto 0.1rem auto auto; min-width: 80px">
                                                                <!-- <span class="item-code" :class="{'no_outtype': item.outtype != 2}">
                                                                    {{ item.planqty }}
                                                                </span> -->
                                                                <lj-tag-double
                                                                    :type="item.outtype != 2 ? 'default' : 'primary'"
                                                                    plain
                                                                    :value="item.planqty + item.unit"
                                                                />
                                                                <!-- <span class="unit">
                                                                    {{ item.unit }}
                                                                </span> -->
                                                            </div>
                                                            <lj-tag-double
                                                                v-if="item.plancode"
                                                                value="批号"
                                                                :doubleValue="item.plancode"
                                                            />
                                                        </div>
                                                        <div class="item-default" v-else  @click="handleShowTips('right_default', item)">
                                                            <template v-if="item.outtype == 2">
                                                                <div style="margin: auto 0.1rem auto auto;">
                                                                    <!-- <span class="item-code">
                                                                        {{ item.qty + "/" + item.planqty }}
                                                                    </span> -->
                                                                    <i class="check-icon iconfont icon-check" v-if="item.qty >= item.planqty"></i>
                                                                    <lj-tag-double
                                                                        :type="item.qty >= item.planqty ? 'success' : 'primary'"
                                                                        plain
                                                                        :value="item.qty + '/' + item.planqty + item.unit"
                                                                    >
                                                                    </lj-tag-double>
                                                                    <!-- <span class="unit">
                                                                        {{ item.unit }}
                                                                    </span> -->
                                                                </div>
                                                                <lj-tag-double
                                                                    v-if="item.plancode"
                                                                    value="批号"
                                                                    :doubleValue="item.plancode"
                                                                />
                                                            </template>
                                                            <template v-else>
                                                                <!-- <span class="item-code no_outtype">
                                                                    {{ item.planqty }}
                                                                </span> -->
                                                                <div style="margin: auto 0.1rem auto auto;">
                                                                    <!-- <span class="item-code no_outtype">
                                                                        {{ item.planqty }}
                                                                    </span> -->
                                                                    <lj-tag-double
                                                                        plain
                                                                        :value="item.planqty + item.unit"
                                                                    />
                                                                    <!-- <span class="unit">
                                                                        {{ item.unit }}
                                                                    </span> -->
                                                                </div>
                                                                <lj-tag-double
                                                                    v-if="item.plancode"
                                                                    value="批号"
                                                                    :doubleValue="item.plancode"
                                                                />
                                                            </template>
                                                        </div>
                                                    </slot>
                                                </template>
                                            </van-cell>
                                        </van-cell-group>
                                    </template>
                                </van-collapse-item>
                            </van-collapse>
                    </template>
                </slot>
            </van-tab>
            <!--part B-->
            <van-tab name="barcode">
				<template slot="title">
                    <slot name="title">{{tabsBText}}</slot>
                </template>
                <slot name="barcode"/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import ljBagde from "./lj-bagde"
import LjTagDouble from 'components/lj-tag-double';

export default {
    name: "ljMultiOrder",
    components: {
        ljBagde,
        LjTagDouble
    },
    data() {
        return {
            tabsActive: "",
            checkboxToDel: [], // 记录点击了的checkbox
            orderOpenState: [], // 记录展开的订单
            actionName: "order", // 当前打开的tab
            // offserTop: 40
        }
    },
    props: {
        scanstart: {
            type: Boolean,
            default: false
        },
        tabsAText: {
            type: String,
            default: ""
        },
        tabsBText: {
            type: String,
            default: ""
        },
        emptyText: {
            type: String,
            default: "暂无数据"
        },
        dataList: {
            type: Array,
            default: function() {
                return []
            }
        },
        fieldsMap: {
            type: Object,
            required: true,
            default: function() {
                return {
                    orderTitle: "", // - 编码字段名 <string>
                    orderDate: "", // - 日期字段名 <string>
                    orderLabel: "", // -  标签字段名 <string>
                    orderNumber: "", // - 数值字段名 <string>
                    orderOutrep: "", // -  业务员字段名 <string>
                }
            }
        },
        showCheckbox: {
            type: Boolean,
            default: false
        },
        itemLeftText: {
            type: String,
            default: "包件明细"
        },
        itemRightText: {
            type: String,
            default: "计划发货数"
        },
        offserTop:{
            type: Number/String
        },
        labelText: {
            type: String,
            default: "客户："
        }
    },
    computed: {
        formatDate(time) {
            return function(time) {
                let date = new Date(time);
                return $lj.dateformat(date, 'yyyy-MM-dd')
            }
        },
        isShowCusname(data) {
            return function (data) {
                let msg = "";
                if ($lj.checkPower(1210)) {
                    msg = data.cusname;
                } else {
                    msg = data.cuscode;
                }
                return msg;
            }
        }
    },
    mounted() {
        // this.offserTop = $lj.getAppBarHeight();
        // console.log("multiorder吸顶高度：", JSON.stringify(this.offserTop));
    },
    methods: {
        // setOffserTop(height) {
        //     this.offserTop = height;
        // },
        /**切换tabs */
        handleShowTips(type, item) {
            if (type == "right_default") {
                if (!this.scanstart) {
                    if (item.outtype != 2) {
                        $lj.toast("此包件：不使用条码", 2000, "middle");
                    } else {
                        $lj.toast("计划数：" + item.planqty, 2000, "middle");
                    }
                } else {
                    if (item.outtype != 2) {
                        $lj.toast("此包件：不使用条码", 2000, "middle");
                    } else {
                        $lj.toast("实际数：" + item.qty + "\n计划数：" + item.planqty, 2000, "middle");
                    }
                }
            }
        },
        fnTabsAction(tabName) {
            this.tabsActive = tabName;
        },
        /**添加订单时，展开折叠面板 */
        fnAddOrder(arr) {
            for (let i = 0; i < arr.length; i++) {
                this.orderOpenState.push(arr[i]);
            }
        },
        /**展开与折叠订单列表 */
        handleOpenTabs(params) {
            if (this.actionName == params && params == "order") {
                let length = this.dataList.length;
                if (length == this.orderOpenState.length) {
                    this.orderOpenState = [];
                } else {
                    for (let i = 0; i < length; i++) {
                        if (this.orderOpenState.indexOf(this.dataList[i][this.fieldsMap.orderTitle]) == -1) {
                            this.orderOpenState.push(this.dataList[i][this.fieldsMap.orderTitle]);
                        }
                    }
                }
            }
            this.actionName = params;
        },
        /**记录当前选中的复选框，并返回 */
        handleSelDelOrdertoggle(index, targetId) {
            this.$refs.checkboxes[index].toggle();
        },
        autoChangeCB(value) {
            console.log("checkboxToggle改变值了", JSON.stringify(value));
            this.$emit("checkboxToggle", this.checkboxToDel)
        },
        fnClearSel() {
            this.checkboxToDel = [];
        },
        handleShowBarcodeDetail(item, index) {
            console.log("popupItem", item);
            this.$emit("popupItem", item, index)
        }
    },
    filters: {
        colonFilter(data) {
            return data.replace(/(\:|：)$/g, '')
        }
    }
}
</script>

<style lang="less">
@import "../../../assets/css/lj-style-variable";
@import "../../../assets/css/lj-base";
@import "../../../assets/css/lj-pda";

.multi-order-wrapper {

    position: relative;
    .order-tabs {
        position: relative;
        padding: 5px;
        .lj-empty {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
    }
    // .van-sticky {
    .van-tabs__wrap {
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.03), 0px 0px 3px 0px rgba(0,0,0,0.05);
        z-index: 2;
    }
    .van-tabs__content {
        padding-top: 1px;
    }
    .van-tabs__line {
        background-color: @colorPass;
    }
    .van-cell {
        padding: 5px 10px;
    }
    .order-title {
        display: initial;
        & > .bagde {
            top: -50%;
            right: -40%;
        }
    }

    .barcode-item-title {
        .title {
            .word_one_line();
            text-align: left;
            span {
                font-weight: bold;
            }
        }
        .item-name {
            .word_one_line();
            text-align: left;
        }
    }
    .scan-item-title {
        text-align: left;
        .title {
            .word_one_line();
            font-weight: bold;
        }
    }
    .scan-item-subtitle {
        text-align: left;
    }
    .scan-item-value {
        .item-default {
            .middle_center();
            height: 100%;
            flex-direction: column;
            .item-code {
                .sign-code();
            }
            .unit {
                margin: auto 5px auto auto;
            }
            .item-default_right_min {
                font-size: 12px
            }
            .check-icon {
                font-size: 12px;
                color: @light-system-green2;
                margin-right: 2px;
            }
        }
    }

    /**订单模块样式 */
    .muti-order-section {
        .shadow_border();
        margin: 5px 0;
        position: relative;
        border-bottom: 1px solid #ebedf0;

        > .van-cell {
            padding: 5px 10px;
        }
        .van-cell-group__title {
            padding: 5px 0;
        }
        /**模块内部标题样式 */
        .cell-group-title {
            display: flex;
            text-align: left;
            span {
                flex: 1;
            }
            .right {
                text-align: right;
                padding-right: 16px;
                color: @light-label-tertiary;
                font-size: 12px;
            }
        }
        .van-checkbox {
            margin-left: 10px;
            margin-right: 5px;
        }
        .location-tag {
            margin-right: 2px;
        }
    }
}
</style>