<template>
  <div class="item w-20">
    <!-- <a-popover :title="datas.name">
      <template #content>
        <p v-if="datas?.operate">操作人：{{ datas?.operate }}</p>
        <p>操作时间：{{ datas?.sj }}</p>
      </template>
      <div
        class="w-10 h-10 rounded-1/2 bg-[#CECECE] text-center text-xl text-[#fff] mx-auto"
        :style="{ backgroundColor: `${index == 'end' ? '#67CA5F' : '#CECECE'}` }"
      >
        <ClusterOutlined v-if="index == 'start'" class="mt-2" />
        <SnippetsOutlined v-else-if="index == 'end'" class="mt-2" />
        <FormOutlined v-else class="mt-2" />
      </div>
    </a-popover> -->
    <div
        class="w-10 h-10 rounded-1/2 bg-[#CECECE] text-center text-xl text-[#fff] mx-auto"
        :style="{ backgroundColor: `${index == 'end' ? '#67CA5F' : '#CECECE'}` }"
      >
        <ClusterOutlined v-if="index == 'start'" class="mt-2" />
        <SnippetsOutlined v-else-if="index == 'end'" class="mt-2" />
        <FormOutlined v-else class="mt-2" />
      </div>
    <div class="w-1px h-60px bg-[#C0C0C0] mx-auto" :style="style"></div>
    <div class="line-horizontal flex">
      <div class="w-1/2 h-1px bg-[#fff] mt-1" v-if="index == 'start'"></div>
      <div class="w-1/2 h-1px bg-[#C0C0C0] mt-1" v-else></div>
      <div class="w-2 h-2 bg-[#C0C0C0] rounded-1/2"></div>
      <div class="w-1/2 h-1px bg-[#fff] mt-1" v-if="index == 'end'"></div>
      <div class="w-1/2 h-1px bg-[#C0C0C0] mt-1" v-else></div>
    </div>
    <div class="text-center my-2" style="min-width: 9rem; flex-shrink: 0;">{{ datas?.name }}</div>
    <div class="text-center my-2" style="padding: 0 5px; flex-shrink: 0;">{{ datas?.operate }}</div>
    <div class="text-center my-2">{{ datas?.sj }}</div>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch, nextTick } from 'vue';
  import { ClusterOutlined, FormOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
  const datas = ref<any>({ name: '', operate: '', sj: '' });
  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    style: {
      type: Object,
      default: { height: '90px' },
    },
    index: {
      type: String,
      default: '',
    },
  });

  watch(
    () => props?.data.name,
    async (val: any) => {
      await nextTick();
      // console.log(props?.data, 'val');
      if (val) datas.value = props?.data;
    },
    { deep: true, immediate: true }
  );
</script>
<style>
.w-20{
  width: 9rem;
}
</style>
