<template>
    <el-drawer v-model="visible" title="在线客服" size="500px" destroy-on-close :with-header="false">
        <el-container class="flex-column">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main class="nopadding" v-loading="loading">
                <div class="order-detail" v-if="orderData">
                    <div class="ts-header">
                        <div class="ts-h-title">投诉门店</div>
                        <div class="store-info">
                            <div class="store-left">
                                <div class="name">{{orderData.store.poi_name}}</div>
                                <div class="address">{{orderData.store.poi_address}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="ts-body">
                        <div class="order-status" v-if="orderData.status == 0">
                            <img src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/complaint-2.svg" />
                        </div>
                        <div class="order-status" v-if="orderData.status == 1">
                            <img src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/complaint-3.svg" />
                        </div>
                        <div class="ts-form">
                            <div class="ts-form-item">
                                <div class="form-title">具体问题</div>
                                <div class="form-input">
                                    {{orderData.question}}
                                </div>
                            </div>
                            <div class="ts-form-item">
                                <div class="form-title">问题订单</div>
                                <div class="form-input">
                                    {{orderData.order_sn}}
                                </div>
                            </div>
                            <div class="ts-form-item">
                                <div class="form-title">联系方式</div>
                                <div class="form-input">
                                    {{orderData.mobile}}
                                </div>
                            </div>
                            <div class="ts-form-item">
                                <div class="form-title">详细补充</div>
                                <div class="form-input-text">
                                    {{orderData.content}}
                                </div>
                            </div>
                            <div class="ts-form-item">
                                <div class="form-title">回复结果 </div>
                                <div class="form-input-text">
                                    <div class="content-data">
                                        <div v-html="orderData.remark"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-drawer>
</template>

<script>
export default {
    data(){
        return {
            loading: false,
            isSaveing: false,
            isDoneing:false,
            mode:"add",
            titleMap:{
                add:"投诉详情",
                edit:"投诉详情"
            },
            visible:false,
            orderData:null,
			orderTime:null
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            this.getOrderDetail()
        },
        doneOrder(){
            this.$confirm(`手动核销订单后，该订单不支持线上退款，如需退款请线下沟通后进行`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                this.isDoneing = true;
                var resp = await this.$API.merOrder.done.post({"id":this.orderData.order_sn});
                this.isDoneing = false;
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.visible = false;
                this.$emit("success");
            }).catch(()=>{})
        },
        async getOrderDetail(){
            this.loading = true;
            var resp = await this.$API.complaint.detail.get({"id":this.formData.id});
            this.loading = false;
            if (resp.code == 0) {
                this.$message.error(resp.msg);
                this.visible = false;
                return ;
            }
            this.orderData = resp.data;
            this.orderTime = resp.data.end_time
        },
        sendAddress(){
            this.$emit("success",'address',this.orderData);
        }
    }
}
</script>

<style scoped>
.nopadding{background: #f8f8f8 !important;}
.ts-header{padding: 10px 0;margin-bottom: 10px;}
.ts-header .ts-h-title{font-size: 14px;color: #666;padding: 10px;}
.ts-header .store-info{background-color: #fff;padding: 10px;}
.ts-header .store-info .store-left .name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 40px;}
.ts-header .store-info .store-left .address{font-size: 12px;color: #999;}
.ts-body{background-color: #fff;padding: 10px;position: relative;}

.content-data {
    /deep/ img{
        width: 100%;
        height: 100%;
    }
}

.ts-body .order-status{position: absolute;right: 10px;top: 10px;}
.ts-body .order-status img{width: 110px;height: 110px;transform: rotate(45deg);}

.ts-form .ts-form-item{border-bottom: 1px solid #f8f8f8;padding-bottom: 10upx;}
.ts-form .ts-form-item:last-child{border-bottom: 0;}
.ts-form .ts-form-item .form-title{color: #000;font-size: 14px;padding: 10px 0;}
.ts-form .ts-form-item .form-title text{color: #f00;margin-left: 10upx;}
.ts-form .ts-form-item .form-input{font-size: 28upx;color: #333;height: 40px;display: flex;align-items: center;}
.ts-form .ts-form-item .ts-input{height: 100%;border: 0;box-shadow: none;width: 100%;}
.ts-form .form-input-textarea{height: 200upx;font-size: 14px;color: #333;}
.form-input-text{padding: 10px 0;}
.form-input-text img{width: 100%;}
</style>