<script setup>
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import { ElMessageBox } from "element-plus";
import { MoreFilled, Check, Download ,VideoPlay} from "@element-plus/icons-vue";
import { time } from "echarts";
import { defineExpose } from "vue";
import { defineProps } from "vue";
import { orderGetDetails } from "@/api/order/order.js"
import Voice from '@/components/voice/index.vue'
//控制显示隐藏
const dialogVisible = ref(false);

const props = defineProps({
    rowData: Object
})

let opsCallList = ref([]);
let orderData = ref([]);
let orderContent = ref([]);
const voiceRef=ref()
const open = (row) => {
    dialogVisible.value = true;
};

const getData = async () => {
    // console.log(123);
    const data = await orderGetDetails(props.rowData.orderNumber)
    // console.log("111", data);
    return data

}
let contentState0 = [
    {
        content: "待处理",
        timestamp: "orderData.value",
        icon: Check,
        color: "#0bbd87",
        size: "large",
    },
    {
        content: "已处理",
        timestamp: "--",
        type: "primary",
        icon: MoreFilled,
        size: "large",
    },
    {
        content: "结单",
        timestamp: "--",
        size: "large",
        // icon: Check,
        // color: "#0bbd87",
    },
];
let contentState1 = [
    {
        content: "待处理",
        timestamp: "orderData.value",
        icon: Check,
        color: "#0bbd87",
        size: "large",
    },
    {
        content: "已处理",
        timestamp: "2022-07-20 20:00:00",
        icon: Check,
        color: "#0bbd87",
        size: "large",
    },
    {
        content: "结单",
        timestamp: "--",
        size: "large",
        type: "primary",
        icon: MoreFilled,
    },
];
let contentState2 = [
    {
        content: "待处理",
        timestamp: "orderData.value",
        icon: Check,
        color: "#0bbd87",
        size: "large",
    },
    {
        content: "已处理",
        timestamp: "2022-07-20 20:00:00",
        icon: Check,
        color: "#0bbd87",
        size: "large",
    },
    {
        content: "结单",
        timestamp: "2022-07-20 20:00:00",
        size: "large",
        icon: Check,
        color: "#0bbd87",
    },
];

watch(() => props.rowData, (newRowData) => {
    if (newRowData) {
        // console.log(getData(newRowData));
        getData(newRowData).then((data) => {
            opsCallList.value = []
            orderData.value = data.data

            //电话拨打记录
            const dataDetails = data.data.opsCallList
            // console.log(dataDetails);
            const theData = [{ createTime: '', data: [] }]

            dataDetails.forEach(for1data => {
                theData.forEach(for2data => {
                    if (for1data.createTime !== for2data.createTime) {
                        // console.log(for2data);
                        for2data.createTime = for1data.createTime
                        for2data.data.push(for1data)
                        theData.push({ createTime: for1data.createTime, data: [] })
                    } else {
                        for2data.data.push(for1data)
                        return;
                    }
                })
            });
            theData.pop()
            // theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
            // console.log(theData);
            theData.forEach(item => {
                item.data.forEach(info => {
                    if (info.answeredTime !== null) {
                        // console.log(info.answeredTime);
                        let startIndex = info.answeredTime.indexOf(' ') + 1;
                        let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
                        info.answeredTime = timeOnly.replace(/:/g, ':')
                        // info.answeredTime = timeOnly
                    }
                })
                // item.data.sort((a, b) => a.answeredTime - b.answeredTime)
                opsCallList.value.push(item)
            })

            //工单时间线
            orderContent.value = []
            console.log(orderData.value);
            // orderData.value.orderState='2'
            if (orderData.value.orderState === '0') {
                inputOrderContent(contentState0)
            }
            else if (orderData.value.orderState === '1') {
                inputOrderContent(contentState1)
            }
            else if (orderData.value.orderState === '2') {
                inputOrderContent(contentState2)
            }
            // console.log(orderContent.value);

        })
    }
}, {
    immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
});
const inputOrderTime = (item, index) => {
    {
        if (index === 0) {
            item.timestamp = orderData.value.operationTime || '--'
        } else if (index === 1) {
            // item.timestamp = orderData.value.processedTime || '--'
        } else {
            // item.timestamp = orderData.value.completionTime || '--'
        }
    }
}

const inputOrderContent = (contentState) => {
    contentState.map((item, index) => {
        inputOrderTime(item, index)
    })
    contentState.forEach(item => {
        orderContent.value.push(item)
    })
}

const openRecord = () => {
  voiceRef.value.open(true)
}

defineExpose({
    open,
});



</script>

<template>
    <el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
        <div class="common-layout">
            <el-container>
                <el-header class="header"><span>工单号：</span>
                    <span>{{ rowData.orderNumber }}</span>
                </el-header>
                <el-container class="main-container">
                    <el-aside width="200px" :style="{ position: 'static' }">
                        <div class="aside-content">
                            <el-timeline style="max-width: 600px">
                                <el-timeline-item v-for="(activity, index) in orderContent" :key="index"
                                    :icon="activity.icon" :type="activity.type" :color="activity.color"
                                    :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
                                    <p style="font-size: 17px;"> {{ activity.content }}</p>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-aside>
                    <el-main :style="{ position: 'static' }" class="main-content">
                        <div class="top">
                            <div class="info">
                                <!-- <span>创始人：{{ rowData.createBy }}</span> -->
                                <span>处理人：{{ rowData.operationUser }}</span>
                            </div>
                            <div class="info">
                                <span>工单名称：{{ rowData.orderName }}</span>
                                <span>关单人：{{ rowData.knotter }}</span>
                            </div>
                        </div>
                        <div class="body">
                            <div>
                                <div>工单内容：</div>
                                <div class="textBox">
                                    <el-scrollbar>
                                        <div class="text">{{ rowData.orderContent }}</div>
                                    </el-scrollbar>
                                </div>
                            </div>
                            <div>
                                <div>通话记录：</div>
                                <div class="textBox">
                                    <el-scrollbar>
                                        <div class="text">{{ rowData.processedContent }}</div>
                                    </el-scrollbar>
                                </div>

                            </div>
                            <div>
                                <div>录音信息：</div>
                                <div class="textBox—record">

                                    <el-button @click="openRecord" type="primary" :icon="VideoPlay" style="margin-right: 10px ;">播放录音      
                                    </el-button>
                                    <voice ref="voiceRef" title="录音详情"/>
                                    <a :href="opsCallList.recordUrl" download="record.mp3">
                                        <el-button type="primary" :icon="Download">下载录音</el-button>
                                    </a>
                                    <!-- <el-scrollbar> -->
                                    <!-- <div class="text">{{ rowData.recordUrl }}</div> -->
                                    <!-- </el-scrollbar> -->
                                </div>

                            </div>
                        </div>
                        <div class="footer">
                            <div>电话拨打记录：</div>
                            <div class="timebox">
                                <div>
                                    <el-scrollbar height="20vh">
                                        <el-timeline style="max-width: 99%" class="timeline">
                                            <el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
                                                icon="MoreFilled" type="primary" size="large">
                                                <div class="custom-card">
                                                    <div style="font-weight: bold">{{ activity.createTime }}</div>
                                                    <div v-for="(info, index) in activity.data" :key="index">
                                                        <div class="timeline-row">
                                                            <span :style="{ color: '#a8abb2' }">{{ info.callIdNumber
                                                                }}</span>
                                                            <PointTag dictType="call_status" :value="info.callState"
                                                                class="tag" />
                                                            <!-- <span :style="{
                                                                color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
                                                            }">{{ info.callState }}</span> -->
                                                            <span class="span-3th" :style="{ color: '#a8abb2' }">{{
                                                                info.answeredTime || '00:00:00' }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-scrollbar>
                                </div>
                            </div>
                        </div>

                    </el-main>
                </el-container>
            </el-container>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
.header {
    font-size: 27px;
    color: black;
}

.aside-content {
    position: relative;
    left: 3px;
}

.main-content {
    background-color: white;

}

.main-content span {
    padding-bottom: 5px;
    color: black;
    display: inline-block;
    width: 50%;
    align-items: center;
    justify-content: space-between;
}

.main-content .info {
    border-bottom: 1.5px solid #e4e7ed;
    margin-bottom: 50px;
    font-size: 17px;
}

.main-content .body {
    font-size: 17px;
    color: black
}

.main-content .body .textBox {
    width: 100%;
    min-height: 10vh;
    max-height: 15vh;
    border: 1.5px solid #e4e7ed;
    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
    margin-bottom: 20px;
    padding: 15px;
}

.main-content .body .textBox—record {
    width: 100%;
    min-height: 10vh;
    // max-height: 15vh;
    // border: 1.5px solid #e4e7ed;
    // box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
    // margin-bottom: 20px;
    padding: 15px;
}

.main-content .body .text {
    resize: none;
    // overflow-y: auto;
    font-size: 16px;
    line-height: 25px
}

.main-content .footer {
    color: black;
    font-size: 17px;
}

.main-content .timebox {
    width: 100%;
    height: 25vh;
    border: 1.5px solid #e4e7ed;
    padding-left: 20px;
    padding-top: 20px;
    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
    // overflow-x: hidden;
}

.main-content .timeline {
    // width: 100%;
    position: relative;
    left: 3px;
    // background-color: red;

}

.main-content .timeline-row {
    // border: 1px solid #000;
    display: flex;
    // justify-content: space-between;
    // border: 1px solid #000;

}

.main-content .tag {
    align-items: center;
    // background-color: red;
    margin-left: 30px;
}

.main-content .span-3th {
    // flex-grow: 1;
    // margin-right:;
    flex: 1;
    text-align: right;
    margin-right: 100px;

}

.custom-card {
    width: 100%;
    font-size: 16px;
}

.custom-card span {
    padding-top: 10px;
    width: 20%;
    margin: 2px;

}
</style>
