import Card from '@/components/Card';
import { useIncidentStore } from '@/store';
import clsx from 'clsx';
import { computed, defineComponent, ref } from 'vue-demi';
import { Management } from '@element-plus/icons';
export default defineComponent({
  name: 'ExecutionLogCard',
  setup(props) {
    const store = useIncidentStore();

    const medias = computed(() =>
      (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).concat(
        store.incidentDetail?.baseInfo?.video?.split(',') ?? [],
      ),
    );

    return () => (
      <Card cardType="execution-log">
        <div class="execution-log-container">
          {store.incidentDetail?.process?.map((item, idx) => (
            <div class={clsx('log-item', `log-item-${idx % 4}`)}>
              <span class="log-label">{item.des}</span>
              <span class="log-time">
                {item.createTime}
                <span class="logo-icon">
                  <el-icon>
                    <Management />
                  </el-icon>
                </span>
              </span>
            </div>
          ))}
        </div>
      </Card>
    );
  },
});