<template>
    <el-card class="myLogCard">
        <template #header>
            <div class="card-header">
                <span>媒体日志</span>
                <el-icon style="float: right;cursor: pointer;" @click="handleClose">
                    <Close />
                </el-icon>
            </div>
        </template>
        <el-row :gutter="10" class="my_row" style="margin-top: 0;">
            <el-col :span="12">
                <el-form :inline="true" class="searchInputForm">
                    <el-form-item label="">
                        <el-input v-model="queryParams.keyword" placeholder="请输入操作人" :prefix-icon="Search"
                            style="width: 280px;" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
                        <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12" style="text-align: right;">
                <el-button-group>
                    <el-button v-for="(item, index) in ToolOptions" :key="index"
                        :type="activeIndex === index ? 'primary' : 'default'" @click="activeIndex = index">
                        <img v-if="index == 0" :src="activeIndex === index ? item.activeIcon : item.defaultIcon" />
                        <img v-if="index == 1" :src="activeIndex === index ? item.activeIcon : item.defaultIcon" />
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>

        <el-table v-if="activeIndex == 0" v-loading="loading" :data="activities" height="calc(100vh - 250px)">
            <el-table-column label="序号" align="center" width="80">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="供应商名称" align="left" prop="supplierName" width="230" :show-overflow-tooltip="true" />
            <el-table-column label="操作类型" align="left" prop="type" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="操作人" align="center" prop="user" width="160" :show-overflow-tooltip="true" />
            <el-table-column label="操作时间" align="center" prop="timestamp" width="150" :show-overflow-tooltip="true" />
            <el-table-column label="变更字段" align="left" prop="content" min-width="210" >
                <template #default="scope">
                    <el-popover popper-class="myUpdate_popover" placement="bottom-start">
                        <el-table :data="detailTable" height="230px">
                            <el-table-column label="字段名称" align="left" prop="type" min-width="100"
                                :show-overflow-tooltip="true" />
                            <el-table-column label="变更前" align="left" prop="type" min-width="100"
                                :show-overflow-tooltip="true" />
                            <el-table-column label="变更后" align="left" prop="type" min-width="100"
                                :show-overflow-tooltip="true" />
                        </el-table>
                        <template #reference>
                            <span class="updatefiter" @click="handleOpenDetail(scope.row.supplierId)">{{
                                scope.row.content
                                }}</span>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="activeIndex == 1">
            <el-timeline class="my-time-line" style="padding-left: 0;">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top"
                    :timestamp="activity.timestamp">
                    <div class="logsTitle mb20"><span class="mr10">{{ activity.user }}</span><span>{{ activity.type
                    }}</span>
                    </div>
                    <ul class="defaultUL">
                        <li>
                            <span class="logsLable">变更字段：</span>
                            <el-popover popper-class="myUpdate_popover" placement="bottom-start">
                                <el-table :data="detailTable" height="230px">
                                    <el-table-column label="字段名称" align="left" prop="type" min-width="100"
                                        :show-overflow-tooltip="true" />
                                    <el-table-column label="变更前" align="left" prop="type" min-width="100"
                                        :show-overflow-tooltip="true" />
                                    <el-table-column label="变更后" align="left" prop="type" min-width="100"
                                        :show-overflow-tooltip="true" />
                                </el-table>
                                <template #reference>
                                    <span class="updatefiter">{{ activity.content }}</span>
                                </template>
                            </el-popover>

                        </li>
                    </ul>
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-card>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import { Close, Grid, Calendar } from '@element-plus/icons-vue'

import iconList from '@/assets/images/iconList.png'
import iconTimeLine from '@/assets/images/iconTimeLine.png'
import iconListChose from '@/assets/images/iconListChose.png'
import iconTimeLineChose from '@/assets/images/iconTimeLineChose.png'
import { getBusSupplier } from "@/api/supplier"

const emit = defineEmits(['handleShowList']);
const ToolOptions = ref([
    { defaultIcon: iconList, activeIcon: iconListChose },
    { defaultIcon: iconTimeLine, activeIcon: iconTimeLineChose }
])
const activeIndex = ref(0)
const supplierLogList = ref([])
const detailTable = ref([])
const loading = ref(false)
const queryParams = ref({
    keyword: undefined
})

const activities = [{
    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ;其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
    content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
    timestamp: '2018-04-15',
    user: '优客传媒管理员',
    type: '修改'
},
{
    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
    content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
    timestamp: '2018-04-13',
    user: '优客传媒管理员',
    type: '修改'
},
{
    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
    content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
    timestamp: '2018-04-11',
    user: '优客传媒管理员',
    type: '新增'
},
]

/** 搜索按钮操作 */
const handleQuery = () => {
    getSupplierPageList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryParams.value = {
        keyword: undefined
    }
    handleQuery()
}
// 关闭
const handleClose = () => {
    emit('handleShowList')
}
</script>
<style lang='scss'>
.el-button,
.el-button.is-round {
    padding: 10px 11px;
}

.el-button-group>.el-button {
    float: left;
    position: relative;
    height: 30px;
    border: 1px solid #9C9C9C;
    border-radius: 15px;
    background: #9c9c9c1a;
}

.el-button-group>.el-button--primary {
    background: #1a75e61a;
    border: 1px solid #1A75E6;
    border-radius: 15px;
}

.el-button-group .el-button--primary:last-child {
    border-left-color: #1A75E6;
}

.el-button-group .el-button--primary:first-child {
    border-right-color: #1A75E6;
}

.updatefiter {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #1A75E6;
    cursor: pointer;
}

.updatefiter:hover {
    text-decoration: underline solid #1A75E6 1px;
    text-underline-offset: 4px;
}

.logsTitle {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #636262;
}

.defaultUL {
    list-style: none;
    padding-left: 0px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
}

.defaultUL li {
    line-height: 24px;
}

.defaultUL li::before {
    content: "•";
    color: #1A75E6;
    font-weight: bold;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 10px;
}

.logsLable {
    color: #00316E;
}

.logsValue {
    color: #1A75E6;
}
</style>