<template>
    <div>
        <div v-if="ruleForm.list.length == 0"
            style="display: flex; height:300px; width: 100%; align-items: center; justify-content: center;">
            <div class="empty" style="text-align: center;">
                <icon-svg style="font-size: 130px;" name="kongbai"></icon-svg>
                <div style="color: #999;">当前暂无可合并发货的订单哦</div>
            </div>
        </div>
        <el-form v-else ref="ruleForm" :model="ruleForm" label-width="80px" :rules="rules">
            <div class="order_list_ui">
                <div style="">
                    <el-radio-group class="group3" v-model="radio3" size="mini" @change="radioChange">
                        <el-radio-button label="allYse">全合并</el-radio-button>
                        <el-radio-button label="allNo">全不合并</el-radio-button>
                        <el-button type="primary" size="mini" @click="submit" :disabled="buttonDisable">批量合并发货</el-button>
                    </el-radio-group>
                </div>
                <ul style="">
                    <li class="flexbox " v-for="(de, index) in ruleForm.list" :key="index"
                        style="border:1px solid #CFF3ED;  margin-bottom: 5px;">
                        <div class="flexbox" style="align-items: center; padding: 0 10px; width: 34px; border-right: 1px solid #CFF3ED;">
                            <el-form-item label-width="0" :prop="`list.${index}.isMerge`" :rules="[
                                { required: true, message: '此项为必填项', trigger: 'blur' }]">
                                    <el-radio-group v-model="de.isMerge" size="mini" @input="MergeRadioListChanged($event,index)">
                                        <div>
                                            <el-radio label="true"><br/></el-radio>
                                        </div>
                                        <!-- <div>
                                            <el-radio label="false">不合并</el-radio>
                                        </div> -->
                                    </el-radio-group>
                                </el-form-item>
                        </div>
                        <div class="buierInfo flexbox">
                            <div style="width:180px; ">
                                <div style="padding: 10px;" class="">
                                    <div><span class="infoTitle">用户名：</span><span>{{ de.userName }}</span></div>
                                    <div><span class="infoTitle">电话：</span><span>{{ de.tel }}</span></div>
                                    <div><span class="infoTitle">收货地址：</span><span>{{ de.address }}</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="productInfo" style="width:80%;">
                            <div class="item" v-for="(item, orderindex) in de.orderList" :key="orderindex">
                                <div class="item_head">
                                    <el-row>
                                        <el-col :span="24" style="display: flex; justify-content: space-between;">
                                            <span>订单编号: {{ item.orderSn }}</span>
                                            <el-button style="margin: 0; padding: 0;" type="text"
                                                @click="removeOrder(orderindex, index)">移除</el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="item_body">
                                    <div class="flexbox" style="justify-content: space-between;">
                                        <div class="td1 flexbox" style="width:100%; ">
                                            <div class="flexbox orderProducts" style="width:25%;"
                                                :class="{ nobottomBorder: item.products.length <= 4 }"
                                                v-for="(productitem, productindex) in item.products"
                                                :key="productindex">
                                                <div class="flexbox productItem" style="width:100%;">
                                                    <!-- <el-checkbox :label="4545454545"></el-checkbox> -->
                                                    <img :src="productitem.productUrl" width="30px" height="30px">
                                                    <div class="">
                                                        <div class="bookName tabContent">{{ productitem.productName }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="num xcenter"><span>× {{ productitem.quantity }}</span></div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div style=" padding: 10px;" class="buttonBox flexbox">
                            <div>
                                <!-- <div style="margin-bottom: 10px;"><span style="color: #f56c6c;">*</span> 是否合并当前可合并项？
                                </div> -->
                                
                                <el-button type="warning" size="mini" plain
                                    @click="mergeOne(de.orderList, index)">合并发货</el-button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="buttons">                
                <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                    :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-form>
        <setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="merOneList"
      @closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
    </div>
</template>
<script>
import setDeliverDialog from './set-deliver-dialog'
export default {
    data() {
        return {
            merOneList: [],
            buttonDisable: true,
            flag:false,
            submitMrgeIdList:[],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            // form: {
            //     deliverLcd: ''
            // },
            setDeliverVisible: false,
            radio3: '',
            expressList: [],
            // dataRule: {
            //     deliverLcd: [
            //         { required: true, message: '请先选择物流公司', trigger: 'blur' }
            //     ]
            // },
            ruleForm: {
                list: []
            },
            // 批量合并发货
            multMergeIdList:[],
            rules: {
                ruleForm: [
                    { required: true, message: '必填项', trigger: 'blur' },
                ]
            }
        }
    },
    created() {
        this.getExpressList()
        this.getMergeOrders()
    },
    methods: {
        // 选择批量合并发货
        MergeRadioListChanged(val,index) {
            console.log(this.ruleForm.list,'this.ruleForm.list')
            this.ruleForm.list[index].isMerge = 'true'  
            this.buttonDisable = false   
            this.radio3 = ''
         },
        // 获取快递公司列表
        getExpressList() {
            this.$http({
                // url: this.$http.adornUrl('/book/sysdictdata/selectByType/express_name'),
                url: this.$http.adornUrl('/express/getExpressCompanyList'),
                method: 'get',
            }).then(({ data }) => {
                // console.log(data, '快递列表')
                this.expressList = data.result
            }).catch(({ e }) => {
                console.log(e,'e')
            })
        },
        // 获取可合并订单
        getMergeOrders() {
            let loading = this.$loading({
                lock: true,
                text: '正在查询，请稍后',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$http({
                url: this.$http.adornUrl(`/book/buyOrder/checkOrder`),
                method: 'post',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                })
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    // console.log('订单发货前的检查')  
                    // this.dataList = data.page.list
                    this.totalPage = data.page.totalCount
                    loading.close()
                    this.ruleForm.list = data.page.records
                    this.ruleForm.list.map(item => { 
                       return item.isMerge = 'false'
                    })
                    console.log(this.ruleForm.list)
                    //this.mergeDliverVisible = true
                } else {
                    this.ruleForm.list = []
                    this.totalPage = 0
                    loading.close()
                    this.$message.error('请求失败')
                }
            })
        },
        // 移除订单
        removeOrder(orderindex, listindex) {
            // order: 订单信息
            // orderindex:  订单下标
            // listindex:上级下标
            //addr.splice(i, 1)
            // 判断是否剩余订单数小于2   小于2 就整条都删除

            if (this.ruleForm.list[listindex].orderList.length <= 2) {
                console.log(this.ruleForm.list)
                this.ruleForm.list.splice(listindex, 1)
            } else {
                console.log(this.ruleForm.list)
                this.ruleForm.list[listindex].orderList.splice(orderindex, 1)
                console.log()
            }
        },
        closeDeliverDialog(val) {
            this.setDeliverVisible = false
            this.getMergeOrders()
            this.merOneList = []
    },    
        // 单个合并订单发货
        mergeOne(list, index) {
            // console.log(list)
            this.merOneList = list.map(item => {
                return item.orderId
            })
            console.log(this.merOneList)
            // this.$refs['ruleForm'].validate((valid) => {
                // if (valid) {
                    this.$confirm('正在进行合并发货, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.setDeliverVisible = true                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                // } else {
                //     return this.$message.error('请核对必填项')
                // }
            // })
        },
        radioChange(val){
            // console.log(this.ruleForm.list)
            if(val == 'allNo'){
                this.ruleForm.list.forEach(element => {                                        
                        element.isMerge = 'false'                                     
                }); 
                this.buttonDisable = true
                console.log(this.ruleForm.list)
            }
            if(val == 'allYse'){
                // console.log('全选')
                this.buttonDisable = false
                this.ruleForm.list.forEach(element => {                                        
                        element.isMerge = 'true'                                     
                }); 
                console.log(this.ruleForm.list)
            }
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getMergeOrders()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getMergeOrders()
        },
        submit() {
            // 表单验证
            // this.$refs['ruleForm'].validate((valid) => {
            //     if (valid) {
             this.multMergeIdList = []
            this.submitMrgeIdList = JSON.parse(JSON.stringify(this.ruleForm.list))         // 深度拷贝选中的订单
            this.submitMrgeIdList.map((item, index) => {                                     
                if (item.isMerge == 'false') {
                    this.submitMrgeIdList.splice(index, 1)               // 去掉未选中的合并项      
                }
                
            })
            this.submitMrgeIdList.map(element => { 
                let list = []  
                list = element.orderList.map(ele => {      // 转换成id格式
                    return ele.orderId
                })
                this.multMergeIdList = this.multMergeIdList.concat(list)
            })
                    //  console.log(this.submitMrgeIdList,'submitMrgeIdList') 
                    // console.log(this.multMergeIdList,'multMergeIdList') 
                    this.merOneList = this.multMergeIdList
                   this.setDeliverVisible = true  
                   console.log(this.merOneList)            
            //     } else {
            //         return this.$message.error('请核对必填项')
            //     }
            // })
        }
    },
    components:{
        setDeliverDialog
    }

}
</script>
<style lang="less" scoped>
.infoTitle {
    color: #777;
    display: inline-block;
    width: 62px;
    text-align: right;
}

.dialog-footer {
    text-align: center;
}

.el-radio-button {
    margin-left: -3px;
}

/deep/ .el-dialog__footer {
    text-align: center;
}

.flexbox {
    display: flex;
}

.order_list_ui {
    margin-top: 15px;

    * {
        font-size: 12px;
        //color: #777;
    }

    ul {
        color: #515a6e;
        padding: 0;

        li {
            list-style: none;
            width: 100%;
            // margin-bottom: 10px;

            .item_head {
                width: 100%;
                padding: 10px;

                // border-right: none !important;
                background-color: #edf9f8;

                .el-checkbox__label {
                    display: none !important;
                }

                .tip {
                    text-align: right;

                    .el-button {
                        padding: 0;
                    }
                }

                .el-checkbox {
                    margin-right: 10px;

                }
            }

            .item_body {
                // border: 1px solid #ddf6f3;
                border-top: none;

            }

        }
    }
}

.productInfo {
    border-left: 1px solid #CFF3ED;
    border-right: 1px solid #CFF3ED;
    width: 100%;
}

.orderProducts {
    padding: 4px;
    border-right: 1px solid #CFF3ED;
    border-bottom: 1px solid #CFF3ED;

    .price {
        width: 40px;
        line-height: 54px;
    }

    .num {
        width: 40px;
        line-height: 20px;
    }

    .productItem {
        overflow: hidden;

        .flexbox {
            align-items: center;
        }

        .el-checkbox {
            line-height: 54px;
        }

        .el-checkbox__label {
            display: none !important;
        }
    }
}

.xcenter {
    text-align: center;
}

.borderright {
    padding-left: 10px;
    border-right: 1px solid #f1f1f1;
}

.normal {
    display: none;
}

.hasDeliver {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background-image: url(../../../../static/img/hasDeliver_icon.png);
}

.td1 {

    // width: 400px;
    .orderProducts {
        overflow: hidden;
        position: relative;

        .el-checkbox {
            margin-right: 10px;
        }

        img {
            margin-right: 10px;
            padding: 2px;
            border: 1px solid #f1f1f1;
        }

        .bookName {
            //margin-right: 10px;
            font-size: 12px;
            line-height: 22px;
            margin-left: -6px;
            -webkit-transform: scale(0.9);
        }

        .author {
            color: #999;
        }
    }
}

.td2 {
    width: 150px;
    line-height: 26px;
    padding: 5px;

    em {
        font-size: 18px;
        font-style: normal;
        color: #48C9B0;
    }
}

.tabName {
    color: #999;
    margin-bottom: -3px;
}

.tabContent {
    line-height: 26px;
    -webkit-transform: scale(0.9);
}

.td3 {
    padding: 5px;
    line-height: 24px;
    width: 200px;

    .buier_tip {
        color: #666;
    }
}

.td4 {
    padding: 5px;
    width: 200px;
    line-height: 24px;

    .time {
        color: #999
    }

    .orderStatus {
        color: #ec6565;
    }

    .el-button {
        margin-top: 15px;
    }
}

.td5 {
    padding: 5px;
    line-height: 24px;
}

.orderProducts:last-child {
    border-bottom: none;
}

.hasSplit {
    background-color: #fffae8;
    border: 1px solid #ffedd6;

    .el-button {
        margin-top: 0;
    }
}

.buttonGroup {
    .el-checkbox {
        margin-right: 10px;
    }
}

.deliverName {
    margin-bottom: px;
}

.paper_list_ui {
    margin-top: 15px;
}

.buttonBox {
    align-items: center;
}

.fengbi {
    margin-left: 0 !important;
}

.buierInfo {
    justify-content: center;
    align-items: center;
    line-height: 20px;
}

.nobottomBorder {
    border-bottom: 0;
}

/deep/ .el-pagination {
    float: right;
    margin-top: 0;
}
</style>
<style>
.el-radio-button:last-child .el-radio-button__inner{border-radius: 0 4px 4px 0 !important;}
</style>