<!--
  Description: 台账管理-闸井/场站列表-同步日志-详情
  Author: 李亚光
  Date: 2024-07-22
 -->
<script lang="ts" setup name="SyncLogDetail">
import { getSyncDetail } from '@/api/home/ledger/log'
const dialogFormVisible = ref(false) // 对话框是否显示
const dataForm = ref({
}) as { [key: string]: any } // 表单
const data = ref([
  {
    name: '更新数据',
    value: 'updateCount',
    content: 'updateContent'
  },
  {
    name: '新增数据',
    value: 'addCount',
    content: 'addContent'
  },
  {
    name: '删除数据',
    value: 'deleteCount',
    content: 'deleteContent'
  },
])
// 初始化对话框
const loading = ref(true)
const initDialog = (row: any) => {
  dialogFormVisible.value = true
  loading.value = true
  getSyncDetail({ id: row.id }).then((res) => {
    // console.log(res.data)
    dataForm.value = {
      ...row,
      ...res.data[0]
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({
  initDialog,
})


const cancel = () => {
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="日志详情" append-to-body width="900px">
    <el-form v-loading="loading" ref="dataFormRef" :model="dataForm" label-position="right" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="5">
          <el-form-item label="操作人">
            {{ dataForm.createUser }}
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="同步类型">
            {{ dataForm.syncTypeName }}
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="同步时间">
            {{ dataForm.startTime }} ~ {{ dataForm.endTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <div style="border-top: 1px solid #888;">
            <div v-for="item in data" class="sync-item">
              <div class="name">{{ `${item.name}(${dataForm[item.value]})` }}</div>
              <div class="content">{{ dataForm[item.content] ? dataForm[item.content] : '暂无数据' }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

.sync-item {
  width: 100%;
  display: flex;
  border: 1px solid #888;
  border-top: none;
  // line-height: 50px;
  // height: 50px;


  .name {
    width: 25%;
    text-align: center;
    background-color: #eee;
    padding-top: 25px;
    padding-bottom: 25px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .content {
    width: 75%;
    text-align: center;
    border-left: 1px solid #888;
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
  }
}
</style>