<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="地块流程图" width="70%">
    <template #footer> </template>
    <div class="mt-5 h-100 w-full overflow-auto">
      <div class="flow-path flex my-10">
        <Item :data="data?.fpzh" index="start"></Item>

        <div v-if="data?.cbdc" class="next text-[#CECECE] h-1px bg-[#CECECE] text-center mt-134px">
          <span class="absolute -top-10px"><FastForwardOutlined /></span>
        </div>
        <div v-if="data?.cbdc" class="item-box text-center">
          <div class="my-11px">初步调查 </div>
          <div class="flex mb-12px">
            <template v-for="v in data?.cbdc" :key="v.name">
              <Item :data="v" :style="{ height: '45px' }"></Item>
            </template>
          </div>
        </div>

        <div v-if="data?.fxpg" class="next text-[#CECECE] h-1px bg-[#CECECE] text-center mt-134px">
          <span class="absolute -top-10px"><FastForwardOutlined /></span>
        </div>
        <div v-if="data?.fxpg" class="item-box text-center">
          <div class="my-11px">风险评估</div>
          <div class="flex mb-12px">
            <template v-if="data?.fxpg" v-for="v in data?.fxpg" :key="v.name">
              <Item :data="v" :style="{ height: '45px' }"></Item>
            </template>
          </div>
        </div>
        <div v-if="data?.gkxg" class="next text-[#CECECE] h-1px bg-[#CECECE] text-center mt-134px">
          <span class="absolute -top-10px"><FastForwardOutlined /></span>
        </div>
        <div v-if="data?.gkxg" class="item-box text-center">
          <div class="my-11px">管控修复</div>
          <div class="flex mb-12px">
            <template v-if="data?.gkxg" v-for="v in data?.gkxg" :key="v.name">
              <Item :data="v" :style="{ height: '45px' }"></Item>
            </template>
          </div>
        </div>
        <div v-if="data?.xgpg" class="next text-[#CECECE] h-1px bg-[#CECECE] text-center mt-134px">
          <span class="absolute -top-10px"><FastForwardOutlined /></span>
        </div>
        <div v-if="data?.xgpg" class="item-box text-center">
          <div class="my-11px">效果评估</div>
          <div class="flex mb-12px">
            <template v-if="data?.xgpg" v-for="v in data?.xgpg" :key="v.name">
              <Item :data="v" :style="{ height: '45px' }"></Item>
            </template>
          </div>
        </div>
        <div v-if="data?.ycdk" class="next text-[#CECECE] h-1px bg-[#CECECE] text-center mt-134px">
          <span class="absolute -top-10px"><FastForwardOutlined /></span>
        </div>
        <template v-if="data?.ycdk">
          <Item :data="data?.ycdk" index="end" :style="{ height: '90px', backgroundColor: '#67CA5F' }"></Item>
        </template>
      </div>
      <!-- <div class="flex w-1/2 mx-auto mt-8">
        <div class="mr-5 mx-auto"><span class="w-3 h-3 rounded-1/2 bg-[#C0C0C0] inline-block mr-2"></span>已完成</div>
        <div><span class="w-3 h-3 mx-auto rounded-1/2 bg-[#67CA5F] inline-block mr-2"></span>当前状态</div>
      </div> -->
    </div>
  </BasicModal>
</template>
<script setup lang="ts">
  import Item from './item.vue';
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { FastForwardOutlined } from '@ant-design/icons-vue';
  import { flowChart } from '@/api/dkgl.api';

  const data = ref<any>();

  //赋值
  const [registerModal, {}] = useModalInner(async (d) => {
    data.value = await flowChart(d.record);
    console.log(data.value, 'data.value ');
  });
</script>
<style scoped lang="less">
  .next {
    width: 42px;
    position: relative;
  }
  .item-box {
    position: relative;
    border: 1px dashed #c0c0c0;
  }
</style>
