<!-- 商户审核查看 -->
<template>
  <Dialog title="商户审核记录" v-model="dialogVisible" width="90%" >
    <ContentWrap :class="{'mobile-card':mobile}" style="min-height: 150px;max-height: 500px;padding-top: 1rem;overflow: auto;">

    <div v-if="formData.logs.length == 0"
      style="text-align: center;margin-top: 50px;font-size: 14px;">
      暂无记录
    </div>
      <el-descriptions  v-else>
        <el-descriptions-item labelClassName="no-colon">
          <el-timeline>
            <el-timeline-item
              v-for="(log, index) in formData.logs"
              :key="index"
              :timestamp="formatDate(log.createTime!)"
              placement="top"
            > 
              <div class="el-timeline-left-content position-absolute top--40px" >
                {{ log?.checkName }}
              </div>
              <div class="el-timeline-right-content">
                {{ log?.checkComment }}
              </div>
              <template #dot>
                <span
                  :style="{ backgroundColor: getUserTypeColor(log.userType!) }"
                  class="dot-node-style"
                >
                  
                </span>
              </template>
            </el-timeline-item>
          </el-timeline>
        </el-descriptions-item>
      </el-descriptions>
    </ContentWrap>
  </Dialog>
</template>

<script lang="ts" setup>

import { propTypes } from '@/utils/propTypes'
import * as TradeOrderApi from '@/api/mall/trade/order'

import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
import { MerchantApi, MerchantVO } from '@/api/system/sale/merchant'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
const dialogVisible = ref(false) // 弹窗的是否展示


const formData = ref({
  logs: [],
})
const getLogList = async (merchantApplyId) => {
  const res = await MerchantApi.getApplyList({merchantApplyId})
  console.log(res)
  formData.value.logs = res.list
}
const open = async (id) => {
  dialogVisible.value = true;

  await getLogList(id)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 获得 userType 颜色 */
const getUserTypeColor = (type: number) => {
  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
  switch (dict?.colorType) {
    case 'success':
      return '#67C23A'
    case 'info':
      return '#909399'
    case 'warning':
      return '#E6A23C'
    case 'danger':
      return '#F56C6C'
  }
  return '#409EFF'
}


</script>
<style lang="scss" scoped>
.el-card{
  border:unset
}
:deep(.el-descriptions) {
  &:not(:nth-child(1)) {
    margin-top: 20px;
  }

  .el-descriptions__title {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 3px;
      height: 20px;
      margin-right: 10px;
      background-color: #409eff;
      content: '';
    }
  }

  .el-descriptions-item__container {
    margin: 0 10px;

    .no-colon {
      margin: 0;

      &::after {
        content: '';
      }
    }
  }
}

// 时间线样式调整
:deep(.el-timeline) {
  margin: 10px 0 0 160px;
  .el-timeline-item__wrapper {
    position: relative;
    top: -2px;
    .el-timeline-item__timestamp {
      position: absolute !important;
      top: 10px;
      left: -150px;
    }
  }

  .el-timeline-right-content {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 10px;
    background-color: #f7f8fa;

    &::before {
      position: absolute;
      top: 10px;
      left: 13px; /* 将伪元素水平居中 */
      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
      border-style: solid;
      border-width: 8px; /* 调整尖角大小 */
      content: ''; /* 必须设置 content 属性 */
    }
  }

  .dot-node-style {
    position: absolute;
    left: -5px;
    display: flex;
    width: 20px;
    height: 20px;
    font-size: 10px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
  }
}
/* 日志显示 */
::v-deep .el-timeline{
  margin: unset !important;
}
::v-deep .el-timeline-item{
  padding-bottom: 0;
}
::v-deep .el-timeline-item__tail{
  position: absolute;
  left: 21px !important;
  top: -19px !important;
  height: 150% !important;
}
::v-deep .dot-node-style{
  left: 12px !important;
  top: -39px !important;
  position: absolute !important;
}
::v-deep .el-timeline-item__timestamp{
  left: 35px !important;
  top: -22px !important;
}
::v-deep .el-timeline-item__content{
  margin-top: 42px;
  margin-left: 6px;
  padding-right: 15px;
}
::v-deep .el-timeline .el-timeline-right-content::before{
  top: 0px !important;
  left: 18px !important;
}
</style>
