<template>
<div class="mx-item">
    <div class="mtrl-text">
        <div class="mtrl-info flex-row-space">
            <div class="icon-box flex_shrink-0">
                <i class="iconfont icon-huowu"></i>
            </div>
            <div class="flex-column-space flex-1">
                <div class="flex mtrl-info-main">
                    <div class="font-grey-14" style="margin-right: 4px">{{mx.mtrlcode}}</div>
                    <div class="font-black-14 flex-1">{{mx.mtrlname}}</div>
                    <div class="menu">
                        <van-popover
                            v-model="showMenuPopover"
                            trigger="click"
                            :actions="actionsMenu"
                            placement="bottom-end"
                            @select="handleSelPopoverMenu"
                        >
                            <template #reference>
                                <i class="iconfont icon-dots-menu"></i>
                            </template>
                        </van-popover>
                    </div>
                </div>
                <div class="mtrl-cfg mtrl-info-main">
                    <slot name="mtrlcfg">
                        <lj-cfgsel-tag  v-if="mx.status && mx.status.length > 0" :textValue="mx.status" :textFlag="mx.statusflag"></lj-cfgsel-tag>
                        <lj-cfgsel-tag  v-if="mx.woodcode && mx.woodcode.length > 0" :textValue="mx.woodcode" :textFlag="mx.woodcodeflag"></lj-cfgsel-tag>
                        <lj-cfgsel-tag  v-if="mx.pcode && mx.pcode.length > 0" :textValue="mx.pcode" :textFlag="mx.pcodeflag"></lj-cfgsel-tag>
                    </slot>
                </div>
                <div class="flex mtrl-info-main" style="align-items: flex-end;">
                    <div class="flex-column-space flex-1">
                        <div class="mtrl-price">
                            <template v-if="Number(mx.rebate) != 1">
                                <del class="del-price"><i>¥{{mx.enprice | moneyFilter}}</i></del>
                            </template>
                            <lj-tag-double
                                v-if="Number(mx.rebate) != 1"
                                :value="mx.rebate | discountFilter"
                                type="primary"
                                size="mini"
                            >
                            </lj-tag-double>
                            <lj-tag-double
                                v-if="mx.taxrate > 0"
                                value="税"
                                type="default"
                                size="mini"
                                plain
                                :doubleValue="mx.taxrate | taxrateFilter"
                            >
                            </lj-tag-double>
                        </div>
                        <div class="mtrl-price">
                            <!-- <template v-if="mx.rebate < 1 || mx.taxrate > 0">
                                <del class="del-price"><i>¥{{mx.enprice | moneyFilter}}</i></del>
                            </template> -->
                            <template>
                                ¥<span class="mtrl-price-number">{{mx.enprice * mx.rebate | moneyFilter}}</span>
                                <!-- ¥<span class="mtrl-price-number">{{ unitPrice(mx) }}</span> -->
                            </template>
                            <template>
                                <span class="mtrl-unit"> /{{mx.unit}}</span>
                            </template>
                        </div>
                    </div>
                    <van-stepper
                        v-model="mx.saleqty"
                        input-width="45px"
                        button-size="24px"
                        min="0"
                        @change="handleSaletaskMxChange"
                        @plus="handleSaletaskMxPlus(mx)"
                        @minus="handleSaletaskMxMinus(mx)"
                        @focus="handleSelectValue($event)"
                    />
                </div>
            </div>
        </div>
        <van-cell-group :border="false">
            <van-field
                v-if="mxdscrpShow"
                v-model="mx.mxdscrp"
                rows="1"
                autosize
                label="明细备注"
                type="textarea"
                placeholder="请输入明细备注"
                label-width="87"
                :border="false"
            />
            <van-field
                v-if="requiredateShow"
                v-model="mx.requiredate"
                readonly
                name="datetimePicker"
                label="交货时间"
                placeholder="点击选择时间"
                label-width="87"
                :border="false"
                @click="handleSelDate"
            >
                <template #right-icon>
                    <i class="iconfont icon-Calendar_light"></i>
                </template>
            </van-field>
        </van-cell-group>
    </div>
</div>
</template>

<script>
import LjImg from "components/lj-img";
import LjCfgselTag from 'components/lj-cfgsel-tag';
import LjTagDouble from 'components/lj-tag-double';

export default {
    name: 'saletask-edit-mx-item',
    components: {
        LjImg,
        LjCfgselTag,
        LjTagDouble
    },
    props: {
        mx: {
            type: Object,
            default: () => {return {}}
        },
        index: {
            type: Number,
        },
    },
    data(){
        return {
            isEdit: false,
            showPicker: false,
            selectItem: null,
            showMxRqDate: false,
            showMxDscrp: false,
            currentDate: new Date(),
            editVisiable: false,
            mxdscrp: "",
            requiredate: new Date(),
            // unitPrice: '', // 单价
            originalPrice: '', // 原价
            showMenuPopover: false, // 小菜单
            actionsMenu: [
                { text: '添加明细备注' },
                { text: '指定交货日期' },
            ],
            mxdscrpShow: false,
            requiredateShow: false
        }
    },
    methods: {
        handleSelPopoverMenu(action, index) {
            if (index == 0) {
                this.mxdscrpShow = true
            } else if (index == 1) {
                this.requiredateShow = true
            }
        },
        handleDeleteGoodsCart(item,index) {
            this.$emit("delete-goods",item,index);
        },
        handleSaletaskMxPlus(item){
            this.$emit("plus-goods",item);
        },
        handleSaletaskMxMinus(item){
            this.$emit("minus-goods",item);
        },
        handleModifyGoodsCart(item,index) {
            this.$emit("modify-goods",item,index);
        },
        handleSelDate() {
            this.$emit("select-date", this.mx, this.index);
        },
        handleSaletaskMxChange() {
            this.$emit("change", this.mx, this.index);
        },
        handleSelectValue(e) {
            e.currentTarget.select();
        },
        handleSelectDatePicker(item) {
            this.selectItem = item;
            this.showPicker = true;
        },
        onConfirm(value) {
            this.requiredate = $lj.dateformat(value,'yyyy-MM-dd');
            this.showPicker = false;
        },
        // beforeClose(action, done){
        //     if(action === 'confirm') {
        //         this.selectItem.mxdscrp = this.mxdscrp;
        //         this.selectItem.requiredate = this.requiredate;
        //         // this._autoEditTaskQty();
        //         setTimeout(done, 1000);
        //     } else if(action === 'cancel') {
        //         done() //关闭
        //     }
        //     this.editVisiable = false;
        // },
        // handleAddField(item) {
        //     this.selectItem = item;
        //     this.mxdscrp = item.mxdscrp;
        //     this.requiredate = item.requiredate;
        //     this.currentDate = new Date(this.requiredate);
        //     this.editVisiable = true;
        // }
    },
    created(){
    },
    mounted(){
    },
    watch: {
        mx: {
            handler(newVal, oldVal) {
                if (newVal.mxdscrp) {
                    this.mxdscrpShow = true;
                }
                if (newVal.requiredate) {
                    this.requiredateShow = true;
                }
            },
            deep: true
        }
    },
    filters: {
        discountFilter(value) {
            if (value < 0) {
                return '';
            }
            return Number(value)*10 + '折'
        },
        taxrateFilter(value) {
            if (value < 0) {
                return '';
            }
            return Number(value)*100 + '%'
        }
    }
}
</script>
<style lang='less' scoped>
    // .saletask-mx-container {
    //     background-color: #fff;
    //     width: 100%;
    //     height: 100%;

        .flex-row-start {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
        }

        .flex-row-space {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
        }

        .flex-column-space {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .flex-column-space-end {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .flex-row-space-end {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: center;
        }

        .icon-16{
            font-size: 16px;
        }
        
        .text-edit {
            color:@editableTextColor;
        }

        .font-black-14 {
            font-size: 14px;
            color: @summaryHeavyTextColor;
        }

        .font-grey-14 {
            font-size: 14px;
            color: @light-label-secondary;
        }
        
        .font-grey-12 {
            font-size: 12px;
            color: @summaryLightTextColor;
        }

        .del-price {
            font-size: 12px;
            color: @summaryLightTextColor;
            margin-right: 5px;
        }

        .mtrl-price {
            color: @musePrimary;

            .mtrl-price-number {
                font-size: 20px;
                font-weight: 500;
            }
        }

        // .container-body {
            
            .even-row {
                background-color: #f7f8fa;
            }

            .mx-item {
                padding: 5px 0;
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                border-bottom: 1px solid #f7f8fa;

                .mtrl-checkbox {
                    align-self: center;
                    margin-right: 10px;
                }

                .mtrl-text{
                    width: 100%;

                    .mtrl-info {
                        width: 100%;
                        padding-left: 16px;
                        padding-right: 16px;
                        align-items: flex-start;
                    }
                    .icon-box {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 5px;
                        width: 46px;
                        height: 46px;
                        background-color: @light-fill-quarternary;
                        border-radius: 4px;
                    }
                }

                .mtrl-cfg {
                    .van-cell{
                        padding-top: 5px;
                        padding-bottom: 5px;
                        padding-left: 0;
                        padding-right: 0;
                        // background-color: #f7f8fa;
                    }

                    // .van-field__control {
                    //     color: ;
                    // }
                }
                .mtrl-info-main {
                    width: 100%;
                    align-items: flex-start;

                    .menu {
                        .iconfont {
                            font-size: 14px;
                        }
                    }
                }
            }

            .mtrl-unit {
                // margin-left: 5px;
                color: @summaryLightTextColor;
            }

            .mtrl-qty {
                margin-top: 5px;
            }

            .swipe-button {
                height: 100%;
            }
        // }
    // }
</style>