<template>
    <el-dialog v-model="visible" width="70vw" top="4vh" class="dialog-header-nopadding" align-center
        style="--el-dialog-padding-primary: 10px">
        <template #header="" style="display: flex;align-items: center;justify-content: space-between;">
            <div class="dialog-header">
                <span class="dialog-title">信件核对</span>
            </div>
        </template>
        <div class="dialog-body">
            <el-form ref="queryRef" :model="query" label-width="100px">
                <el-row>
                    <el-col span="6">
                        <el-form-item label="来信时间">
                            <el-date-picker v-model="query.mailTime" value-format="YYYY-MM-DD" type="daterange"
                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="数据导入">
                            <div class="upload-container">
                                <el-upload class="upload-demo" action="#" ref="upload" :limit="1"
                                    :http-request="handleUpload" :on-exceed="handleExceed" :auto-upload="false"
                                    :file-list="fileList">
                                    <el-button>上传
                                        <template #icon>
                                            <icon name="el-icon-Upload" />
                                        </template>
                                    </el-button>
                                    <div slot="tip">
                                        <ul class="file-list">
                                            <li v-for="file in fileList" :key="file.uid" class="file-item">
                                                {{ file.name }}
                                            </li>
                                        </ul>
                                    </div>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex end">
                <el-button type="primary" @click="handleCheck">信件核对</el-button>
            </div>
        </div>
        <div class="mr-20 ml-20">
            <div v-if="result" v-show="ifShow">
                <span class="allRight">数据核对无误</span>
            </div>
            <div class="table-container" v-if="!result" v-show="ifShow">
                <div style="display: flex;align-items: center;justify-content: space-between; margin-bottom: 20px">
                    <span class="title-label">以下数据共 {{ form.length }} 条，数据不匹配</span>
                    <el-button type="primary" @click="handleImport">下载不匹配数据</el-button>
                </div>
                <el-table :data="form" style="width: 100%" stripe ref="tableRef">
                    <el-table-column prop="mailTime" label="来信时间" align="center" width="170" />
                    <el-table-column label="信件来源" align="center" width="94">
                        <template #default="{ row }">
                            <span>{{
                                dictData.mail_source.filter(
                                    (item) => item.value === row.source
                                )[0].name
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contactName" label="姓名" align="center" width="70" />
                    <el-table-column prop="contactPhone" label="联系电话" width="120" />
                    <el-table-column prop="mailCategory" label="信件分类" width="160" />
                    <el-table-column prop="content" label="信件内容" show-overflow-tooltip />
                    <el-table-column label="信件状态" width="90">
                        <template #default="{ row }">
                            <span>{{ getDictLable(dictData.mail_state, row.mailState) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="threeDeptName" label="办理单位" width="160" />
                    <el-table-column label="流程节点">
                        <template #default="{ row }">
                            <el-tag :type="getFlowTagType(row.flowKey)" v-if="row.flowBeforeName">{{ row.flowBeforeName
                            }}</el-tag>
                            <el-tag type="danger" v-else>未签收</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程限时" width="140">
                        <template #default="{ row }">
                            <div v-if="row.flowLimitedRemainingTime > 0" class="success">
                                <span class="mr-4">剩余</span>
                                <span class="text">{{ formatTimeText(row.flowLimitedRemainingTime) }}</span>
                            </div>
                            <div v-if="row.flowLimitedRemainingTime < 0" class="error">
                                <span class="mr-4">超时</span>
                                <span class="text">{{ formatTimeText(-row.flowLimitedRemainingTime) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mailLabels" label="信件标签" width="160" />
                </el-table>
            </div>
        </div>

    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import { watch } from 'vue'
import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util";
import { useDictData } from "@/hooks/useDictOptions";
import { ElMessage, ElTable } from "element-plus";
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import axios from 'axios';
import request from "@/utils/request";
const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    mails: {
        type: String,
        default: ''
    }
})
const visible = ref(props.show)
watch(
    () => props.show,
    (val) => {
        visible.value = val;
        if (val) {
        }
    }
);

const query = ref({
    fileList: [],
    mailTime: []
})
const form = ref([])
const queryRef = ref(null)
const result = ref(true)
const ifShow = ref(false)
const upload = ref<UploadInstance>()
const fileList = ref([])

const handleUpload: UploadProps['httpRequest'] = (file) => {
    const formData = new FormData(); // 创建表单数据对象
    formData.append("file", file.file); // 将文件添加到表单数据中
    return axios.post("/lan-api/api/work/check", formData) // 使用 axios 发送 post 请求到后端
        .then((res) => {
            // 处理成功的响应
            console.log('checkMsg', res.data);            
            if (res.data[0]) {
                result.value = false
                ifShow.value = true
                form.value = res.data.data
            } else {
                ifShow.value = true
                result.value = true
            }
            upload.value.clearFiles(); // 清空文件列表
        })
        .catch((error) => {
            // 处理失败的响应
            console.error(error);
            ElMessage.error('上传失败')
        });
}
const handleCheck = () => {
    upload.value!.submit()
    console.log(query.value)
}
const handleImport = () => {
    request.post({ url: '/work/import', body: form.value }).then((data: any) => {
        ElMessage.success('下载成功')
        resetView()
    }).catch((error: any) => {
        console.error(error);
        ElMessage.error('下载失败')
    })
}

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

function resetView(){
    ifShow.value = false
}
</script>

<style lang="scss" scoped>
.dialog-header {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-self: center;
}

.dialog-title {
    margin-left: 20px;
    width: 100%;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    text-align: center;
}

.dialog-body {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
}

.main-label {
    width: 80px;
    height: 22px;
    font-size: 20px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
}

.title-label {
    height: 16px;
    font-size: 16px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 600;
    color: #162582;
    line-height: 24px;
}

.info-input {
    width: 100%;
}

.el-upload__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.allRight {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 500;
    color: #162582;
}

.upload-demo {
    margin-top: -4px;
    display: flex;
    align-items: center;
}

.file-list {
    display: inline-flex;
    margin-left: 20px;
}

.file-item {
    list-style: none;
}
</style>