<template>
    <div class="system-add-blackList-container">
        <el-dialog v-model="state.isShowDialog" draggable title="坐席话务明细">
            <div class="flex-center-between mb20">
				<div class="flex-center-center">
                    <p class="mr10" style="width: 100px;">话机动作：</p>
                    <el-select v-model="state.action" placeholder="请选择呼叫方向" class="w100">
                            <el-option v-for="item in state.actionList" :key="item.value" :label="item.label"
                                :value="item.value" />
					</el-select>
                </div>
				<div>
					<el-button type="primary" v-waves @click="onImportTable" :disabled="!state.multipleSelection.length">
						<SvgIcon name="iconfont icon-daochu" class="mr5" />导出
					</el-button>
				</div>
			</div>
            <!-- 表格 -->
            <el-table :data="state.tableData" row-key="id" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :reserve-selection="true" />
                <el-table-column type="index" width="60" label="序号" />
                <el-table-column prop="phoneNo" label="坐席" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phoneNo" label="话机" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phoneNo" label="话机动作" show-overflow-tooltip></el-table-column>
                <el-table-column label="开始时间" show-overflow-tooltip width="170">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结束时间" show-overflow-tooltip width="170">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneNo" label="累计时间（分钟）"  width="170" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phoneNo" label="备注" show-overflow-tooltip fixed="right" align="center"></el-table-column>
                <template #empty>
                    <Empty />
                </template>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="closeDialog" class="default-button">关 闭</el-button>
                    </span>
                </template>
            </el-table>
            <!-- 分页 -->
			<pagination :total="queryParams.total" v-model:page="queryParams.PageIndex" v-model:limit="queryParams.PageSize" @pagination="getList" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="operationRecord">
import { reactive } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import table2excel from 'js-table2excel';

// 定义接口来定义对象的类型
interface StateBacklist {
    isShowDialog: boolean;
    tableData: Array<any>;
    multipleSelection:Array<any>;
    action:string;
    actionList:Array<any>;
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog', 'closeDialog'])

// 定义变量内容
const state = reactive<StateBacklist>({
    isShowDialog: false,
    tableData: [],
    multipleSelection:[],
    action:'',
    actionList:[
        {
            label:"全部",
            value:''
        },
        {
            label:"签入",
            value:1
        },
        {
            label:"小休",
            value:2
        },
        {
            label:"接听",
            value:3
        },
        {
            label:"呼出",
            value:4
        },
        {
            label:"保持",
            value:5
        },
    ],
})
const queryParams = reactive({
    total:0,
    PageIndex:1,
    PageSize:10
})
// 获取列表数据
const getList = ()=>{

}
// 打开弹窗
const openDialog = (row:any) => {
    console.log(row)
    state.isShowDialog = true;
    emit('openDialog')
}
// 关闭弹窗
const closeDialog = () => {
    state.isShowDialog = false;
    emit('closeDialog')
};

// 表格多选
const handleSelectionChange = (val: any) => {
	state.multipleSelection = val;
}
// 导出表格
const onImportTable = () => {
	const tabeHeader = [
		{ key: 'phoneNo', colWidth: '', title: '电话号码', type: 'text', isCheck: true },
		{ key: 'duration', colWidth: '', title: '黑名单时长(秒)', type: 'text', isCheck: true },
		{ key: 'creationTime', colWidth: '', title: '创建时间', type: 'text', isCheck: true },
	]
	table2excel(tabeHeader, state.multipleSelection, `${formatDate(new Date(), 'YYYY-mm-dd HH-MM')}`);
}

//暴漏变量和方法
defineExpose({ closeDialog, openDialog });

</script>
