<template>
    <el-dialog title="订单发货" center :visible.sync="visible" width="900px" :before-close="beforeCloseDialog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="物流公司" prop="deliverLcd">
                <el-select size="mini" v-model="ruleForm.deliverLcd" placeholder="请选择物流公司" @change="selectChanged">
                    <el-option v-for="(item, index) in expressList" :label="item.expressName" :key="index"
                        :value="item.expressCode"></el-option>
                </el-select>
                <el-radio-group v-model="radio3" size="mini" style="float: right;" @change="tabChange">
                    <!-- 三种发货形态-general：普通发货,merge:合并发货,mix:混合发货  -->
                    <el-radio-button label="general">普通发货</el-radio-button>
                    <!-- <el-radio-button label="merge">合并发货</el-radio-button>       -->
                    <el-radio-button label="mix">混合发货</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="order_list_ui">
            <ul v-if="orderitem">
                <div v-if="radio3 == 'general'">
                    <li>
                        <div class="item_head">
                            <el-row>
                                <el-col :md="12" :lg="12">
                                    <span><span class="infoTitle">订单编号：</span>{{ orderitem.orderSn }} </span></el-col>
                            </el-row>
                        </div>
                        <div class="item_body">
                            <div class="flexbox" style="justify-content: space-between;">
                                <div class="td1 flexbox" style="align-items: flex-start;">
                                    <div class="flexbox orderProducts" v-for="products in productsCodeList" :key="products.product.productId">
                                        <div class="flexbox productItem" style="">
                                            <!-- <el-checkbox :label="products.allOrderId"></el-checkbox> -->
                                            <img :src="products.product.productImages" width="30px" height="30px" :class="products.expressOrderId>0 && products.expressOrder != null ? 'gray' : ''" >
                                            <div class="" style="align-items: center;">
                                                <div class="bookName" style="margin-left:0">{{ products.product.productName }}</div>
                                                <div style="width:100%; color:#17B3A3; font-size:12px" v-if="products.expressOrderId>0 && products.expressOrder != null">快递信息：{{products.expressOrder.expressOrderSn}}</div>
                                            </div>
                                        </div>
                                        <div class="flexbox">
                                            <div class="price xcenter">
                                                <!-- <div>{{ products.productPrice }}</div> -->
                                                <div>× {{ products.quantity }}</div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </li>
                </div>
                <div v-if="radio3 == 'mix'">
                    <div v-if="mixOrderList.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>
                    <div v-else>
                        <div style="">
                            <div style="padding-bottom: 10px;" class="">
                            <div><span class="infoTitle">用户名：</span><span>{{mixOrderList[0].consignee.consigneeName}}</span>
                                <span class="infoTitle">电话：</span><span>{{mixOrderList[0].consignee.consigneeMobile}}</span>
                                <span class="infoTitle">收货地址：</span><span>{{mixOrderList[0].consignee.province}}-{{mixOrderList[0].consignee.city}}-{{mixOrderList[0].consignee.county}}-{{mixOrderList[0].consignee.address}}</span>
                            </div>
                            <div></div>
                        </div>
                        </div>
                        <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">

                            <li class="flexbox mergeList" style="border:1px solid #ddf6f3" v-for="(item, index) in mixOrderList" :key="index">
                                <!-- <div class="buierInfo flexbox">
                                    <div style="display: flex;width:180px; align-items: center;">
                                        <div style="padding: 10px;" class="">
                                            <div><span class="infoTitle">用户名：</span><span>{{item.userName}}</span></div>
                                            <div><span class="infoTitle">电话：</span><span>{{item.tel}}</span></div>
                                            <div><span class="infoTitle">收货地址：</span><span>{{item.address}}</span></div>
                                        </div>
                                    </div>
                                </div> -->
                                <div class="productInfo" style="width:100%;">

                                    <div class="item" >
                                        <div class="item_head no_right_border">
                                            <el-row>
                                                <el-col :span="24"
                                                    style="display: flex; justify-content: space-between;">
                                                    <span><span class="infoTitle">订单编号：</span>{{item.orderSn}} </span>
                                                    <!-- <el-button style="margin: 0; padding: 0;" type="text">移除</el-button> -->
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div class="item_body no_right_border no_bottom_border">
                                            <div class="flexbox" style="justify-content: space-between;">
                                                <div class="td1" style="width:100%; ">
                                                    <div class="flexbox orderProducts" style="width:50%; float: left;" v-for="(item2, index) in item.goodsList" :key="index">
                                                        <div class="flexbox productItem" style="width:100%;">
                                                            <el-checkbox :label="item2.buyOrderProductId" :disabled="item2.expressInfo &&  item2.expressInfo.expressOrderSn ? true : false"><br></el-checkbox>
                                                            <img :src="item2.productImage" width="30px" style="margin-left: -15px;"
                                                                height="30px">
                                                            <div class="" style="align-items: center;">
                                                                <div class="bookName">{{item2.productName}}</div>
                                                                <div style="width:100%; color:#17B3A3; font-size:12px" v-if="item2.expressInfo && item2.expressInfo.expressOrderSn">快递信息：{{item2.expressInfo.expressCompany}}-{{item2.expressInfo.expressOrderSn}}</div>
                                                            </div>
                                                        </div>
                                                        <div class="num xcenter"><span>× {{item2.quantity}}</span></div>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </li>
                        </el-checkbox-group>
                    </div>
                </div>
            </ul>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button v-if="radio3 === 'mix' && mixOrderList.length != 0" type="primary" @click="submit">发 货</el-button>
            <el-button v-if="radio3 == 'general'" type="primary" @click="submit1">发 货</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    props: {
        visible: {
            type: Boolean,
            value: true
        },
        orderitem: {
            type: Object,
            value: {}
        }
    },
    data() {
        return {
            // 普通发货list
            productsCodeList:[],
            productsIdsList:[],
            radio3: 'general',
            checkedList: [],
            ruleForm: {
                deliverLcd: 'SF',
                dictValue:'顺丰快递'
            },
            expressList: [],
            rules: {
                deliverLcd: [
                    { required: true, message: '请先选择物流公司', trigger: 'change' }
                ]
            },
            orderIds: [],
            // 混合发货数组
            mixOrderList: []
        }
    },
    created() {
       //  this.visible = false
        this.getExpressList()
    },
    methods: {
        tabChange(e){
            // console.log('变化了')
            this.$refs['ruleForm'].clearValidate()
            this.ruleForm.deliverLcd="SF"
            this.ruleForm.dictValue="顺丰快递"
        },
        // 获取快递公司列表
        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')
            })
        },
        selectChanged(val){
            // console.log(this.ruleForm)
            if(this.expressList && this.expressList.length > 0){
                this.expressList.forEach(element => {
                    if(element.expressCode == val){
                      return  this.ruleForm.dictValue = element.expressName
                    }
                });
            }
            // this.ruleForm.dictValue = val.dictValue
            //this.ruleForm.deliverLcd = val.dictType
        },
        handleCheckedCitiesChange(val) {
            // console.log(val)
        },
        // 获取可合并订单
        getMixDeliverOrderList() {
          //  this.orderIds[0] = this.orderitem.orderId
            this.$http({
                // url: this.$http.adornUrl(`/book/buyOrder/checkMerge`),
                url: this.$http.adornUrl(`/book/buyOrder/decomposeShipment`),
                method: 'post',
                data: this.$http.adornData({
                    'orderId': this.orderitem.orderId,
                    'pageIndex':1,
                    'pageSize':20
                })
            }).then(({ data }) => {
            //    console.log(data,'data')
                this.mixOrderList = data.result.data
            })
        },

        // 关闭前
        beforeCloseDialog() {
            this.$emit('closeDialog', false)
            this.$refs['ruleForm'].resetFields()
            this.$refs['ruleForm'].clearValidate()
            this.checkedList = []
        },
        getNewProducts(){
            this.productsCodeList.forEach((item, index) => {
                if(item.orderStatus == '1'){
                    this.productsCodeList.splice(index, 1)
                    // console.log(index)
                }
                this.productsIdsList = this.productsCodeList.map( item => item.id)
            })
        },
        //
       // getProductsCodeList
        // 普通发货
        submit1() {
            this.getNewProducts()
            // console.log(this.productsIdsList)
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    const 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/blendSendFMS/${this.ruleForm.deliverLcd}`),
                        url: this.$http.adornUrl(`/book/buyOrder/delivery`),
                        method: 'post',
                        params: this.$http.adornParams({
                            // "shipperName" : this.ruleForm.dictValue
                            'expressCompanyCode': this.ruleForm.deliverLcd
                        }),
                        data:  this.productsIdsList    // 是个数组
                          // 传orderid
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            loading.close();
                           // console.log(data)
                            this.beforeCloseDialog()
                            return this.$message.success('发货成功')
                        }
                    }).catch((e) => {
                        loading.close();
                        console.log('e',e)
                        this.$message.error('发货失败')
                    })
                }else{
                    this.$message.error('请先选择物流公司')

                }})
        },
        // 获取数据列表
    getData() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/book/buyOrder/appGetOrderInfo'),
        method: 'get',
        params: this.$http.adornParams({
          'orderId': this.orderId,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.productsCodeList = data.buyOrder
        //   console.log(888)
        } else {
          // this.dataList = []
          // this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
        //混合发货
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    // console.log(this.allOrder)
                    if (this.checkedList.length == 0 && this.radio3 == 'mix') {
                        return this.$message.error('请至少选择一条商品')
                    }
                    // console.log('执行更新发货操作')
                    this.$confirm(`正在执行${this.deliverType} , 是否继续?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        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/blendSendFMS/${this.ruleForm.deliverLcd}`),
                        url: this.$http.adornUrl(`/book/buyOrder/delivery`),
                        method: 'post',
                        params: this.$http.adornParams({
                            // "shipperName" : this.ruleForm.dictValue
                            'expressCompanyCode': this.ruleForm.deliverLcd
                        }),
                        data:  this.checkedList,
                        // 传orderid
                    }).then(({ data }) => {
                        if(data && data.code === 0){
                        // console.log(data)
                        loading.close()
                        this.beforeCloseDialog()
                       return  this.$message.success('发货成功')

                    }
                    }).catch(({e}) => {
                        loading.close();
                        console.log('e',e)
                    })
                        // this.$message({
                        //     type: 'success',
                        //     message: '发货成功!'
                        // });
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });
                    //this.beforeCloseDialog()
                }
            })
        }
    },
    computed: {
        deliverType() {
            let type = ''
            if (this.radio3 == 'mix') {
                type = `[混合发货]，当前操作${this.checkedList.length}个商品打包发货`
            } else if (this.radio3 == 'merge') {
                type = `[合并发货]`
            } else {
                // 混合发货
                type = '[普通发货]'
            }
            return type
        }
    },
    watch: {
        orderitem: {
            handler(val, oldVal) {
                // console.log('变化',val)
                this.productsCodeList = val.productList
                this.getNewProducts()
                // console.log('productsIdsList',this.productsIdsList)
                this.getMixDeliverOrderList()
                // this.getData()
                // this.visible = true
            },
            deep: true
        }
    }

}
</script>
<style lang="less" scoped>
.no_right_border {
    border-right: 0 !important;
}

.no_bottom_border {
    border-bottom: none !important;
}

.mergeList {
    .item_head:first-child {
        border-top: none;
    }
}

// .infoTitle {
//     color: #777;
//     display: inline-block;
//     width: 62px;
//     text-align: right;
// }

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

.flexbox {
    display: flex;
}

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

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

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

        li {
            list-style: none;
            margin-bottom: 10px;

            .item_head {
                width: 100%;
                padding: 6px;
                border: 1px solid #ddf6f3;
                // border-right: none;
                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-bottom: none;
                // border-right: none;
                border-top: none;

            }

        }
    }
}

.orderProducts {
    padding: 10px;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;

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

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

    .productItem {
        overflow: hidden;

        .flexbox {
            align-items: center;
        }

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

        .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: 100%;

    .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: 16px;
            margin-left: -6px;
            letter-spacing: 0;
            overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 控制多行的行数
    -webkit-box-orient: vertical;
            // -webkit-transform: scale(0.8);
        }

        .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;
}

.gray{
    -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.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;
}

.fengbi {
    margin-left: 0 !important;
}
</style>
