<script setup>
import { apiCustomerUser } from '@/api/customer'
import { useRoute } from 'vue-router'
import { dayjs } from 'element-plus'

const route = useRoute()

const list = ref([])
function getRecord() {
  if(!route.query.id&&['/customer/userTransform','/customer/userAdd'].includes(route.path)) return
  apiCustomerUser.userOperationRecord({
    UserId: route.query.id
  }).then(res => {
    if (res.Ret !== 200) return
    list.value = res.Data.List || []
  })
}
getRecord()

</script>

<template>
  <div class="customer-operationRecord-wrap" v-if="list.length>0">
    <el-timeline>
      <el-timeline-item
        v-for="item in list"
        :key="item.UserChangeRecordId"
        :timestamp="dayjs(item.CreateTime).format('YYYY-MM-DD HH:mm:ss')"
        color="#4099ef"
      >
        {{ item.Content }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<style lang="scss" scoped>
.customer-operationRecord-wrap {
  margin-top: 20px;
  max-width: 350px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
}
</style>