<template>
  <div class="dk-home-wrap">
    <div class="tab-wrap">
      <div
        v-for="(item, index) in tabData"
        :key="index"
        class="tab-con"
        :class="{ 'tab-active': item.id === isSuspect }"
        @click="toChangTab(item.id)"
      >
        <template v-if="isSuspect === 1">
          <img src="@/assets/images/soil_method_on.png" class="tab-logo" v-if="item.id === 1" />
          <img src="@/assets/images/42_off.png" class="tab-logo" v-if="item.id === 2" />
        </template>
        <template v-if="isSuspect === 2">
          <img src="@/assets/images/soil_method_off.png" class="tab-logo" v-if="item.id === 1" />
          <img src="@/assets/images/42_on.png" class="tab-logo" v-if="item.id === 2" />
        </template>
        <div class="tab-name">{{ item.name }}</div>
      </div>
    </div>
    <div class="legend-wrap">
      <div class="legend legend0"><span class="sign"></span><span>国家系统数据</span></div>
      <div class="legend legend1"><span class="sign"></span><span>广东省系统数据</span></div>
    </div>
    <a-spin :spinning="loading">
      <!-- default simplebezier smoothstep step straight-->
      <VueFlow :nodes="nodes" :edges="edges" :draggable="false" :default-edge-options="{ type: 'smoothstep' }" class="vue-flow-basic-example">
        <Controls :showInteractive="false" :showFitView="false" />
      </VueFlow>
    </a-spin>
  </div>
</template>
<script setup>
  import { ref, h } from 'vue';
  import { VueFlow, useVueFlow, Position } from '@vue-flow/core';
  import { Controls } from '@vue-flow/controls';
  import { getPlotMessage } from '@/api/dashboard/api';
  const loading = ref(false);
  const isSuspect = ref(1);
  const tabData = ref([
    { name: '全部', id: 1 },
    { name: '42号令', id: 2 },
  ]);
  const edges = ref([
    { id: 'e1-20', source: '1', target: '20' },
    { id: 'e1-21', source: '1', target: '21' },
    { id: 'e1-22', source: '1', target: '22' },
    { id: 'e1-23', source: '1', target: '23' },
    { id: 'e22-30', source: '22', target: '30' },
    { id: 'e22-31', source: '22', target: '31' },
    { id: 'e22-32', source: '22', target: '32' },
    { id: 'e22-33', source: '22', target: '33' },
    { id: 'e22-34', source: '22', target: '34' },
    { id: 'e31-40', source: '31', target: '40' },
    { id: 'e31-41', source: '31', target: '41' },
    { id: 'e31-42', source: '31', target: '42' },
    { id: 'e32-43', source: '32', target: '43' },
    { id: 'e32-44', source: '32', target: '44' },
    { id: 'e32-45', source: '32', target: '45' },
    { id: 'e33-43', source: '33', target: '46' },
    { id: 'e33-44', source: '33', target: '47' },
    { id: 'e33-45', source: '33', target: '48' },
    { id: 'e41-50', source: '41', target: '50' },
    { id: 'e41-51', source: '41', target: '51' },
    { id: 'e41-52', source: '41', target: '52' },
    { id: 'e44-53', source: '44', target: '53' },
    { id: 'e44-54', source: '44', target: '54' },
    { id: 'e44-55', source: '44', target: '55' },
    { id: 'e47-56', source: '47', target: '56' },
    { id: 'e47-57', source: '47', target: '57' },
    { id: 'e47-58', source: '47', target: '58' },
  ]);
  function createLabel(text, number, total) {
    return h('div', [
      h('div', { class: 'text-wrap' }, text),
      h('div', [
        h('span', { style: { color: '#ff4800', fontWeight: 500, fontSize: '20px' } }, number),
        h('span', { style: { fontSize: '18px', margin: '0 5px' } }, '/'),
        h('span', { style: { fontWeight: 500, fontSize: '20px' } }, total),
      ]),
    ]);
  }
  const nodes = ref([
    { id: '1', label: createLabel('总地块', 0, 0), position: { x: 0, y: 225 }, class: 'green', type: 'input', sourcePosition: Position.Right },
    // 第二层级
    {
      id: '20',
      label: createLabel('未开展调查地块', 0, 0),
      position: { x: 300, y: 0 },
      class: 'green',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '21',
      label: createLabel('调查中地块', 0, 0),
      position: { x: 300, y: 150 },
      class: 'green',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '22',
      label: createLabel('调查评审地块', 0, 0),
      position: { x: 300, y: 300 },
      class: 'green',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '23',
      label: createLabel('未超标地块', 0, 0),
      position: { x: 300, y: 450 },
      class: 'green',
      type: 'output',
      targetPosition: Position.Left,
    },
    // 第三层级
    {
      id: '30',
      label: createLabel('无需采取措施地块', 0, 0),
      position: { x: 600, y: -100 },
      class: 'yellow',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '31',
      label: createLabel('风险管控地块', 0, 0),
      position: { x: 600, y: 0 },
      class: 'yellow',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '32',
      label: createLabel('修复地块', 0, 0),
      position: { x: 600, y: 300 },
      class: 'yellow',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '33',
      label: createLabel('管控及修复', 0, 0),
      position: { x: 600, y: 600 },
      class: 'yellow',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '34',
      label: createLabel('风险评估中地块', 0, 0),
      position: { x: 600, y: 700 },
      class: 'yellow',
      type: 'output',
      targetPosition: Position.Left,
    },
    // 第四层级
    {
      id: '40',
      label: createLabel('正在开展风险管控地块', 0, 0),
      position: { x: 900, y: -100 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '41',
      label: createLabel('已完成风险管控地块', 0, 0),
      position: { x: 900, y: 0 },
      class: 'blue',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '42',
      label: createLabel('未开展风险管控地块', 0, 0),
      position: { x: 900, y: 100 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '43',
      label: createLabel('正在开展修复地块', 0, 0),
      position: { x: 900, y: 200 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '44',
      label: createLabel('已完成修复地块', 0, 0),
      position: { x: 900, y: 300 },
      class: 'blue',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '45',
      label: createLabel('未开展修复地块', 0, 0),
      position: { x: 900, y: 400 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '46',
      label: createLabel('正在开展管控及修复地块', 0, 0),
      position: { x: 900, y: 500 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '47',
      label: createLabel('已完成管控及修复地块', 0, 0),
      position: { x: 900, y: 600 },
      class: 'blue',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '48',
      label: createLabel('正在开展管控及修复地块', 0, 0),
      position: { x: 900, y: 700 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    // 第五层级
    {
      id: '50',
      label: createLabel('完成效果评估地块', 0, 0),
      position: { x: 1200, y: -100 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '51',
      label: createLabel('移出风险管控与修复地块清单', 0, 0),
      position: { x: 1200, y: 0 },
      class: 'blue',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '52',
      label: createLabel('正在开展效果评估地块', 0, 0),
      position: { x: 1200, y: 100 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '53',
      label: createLabel('完成效果评估地块', 0, 0),
      position: { x: 1200, y: 200 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '54',
      label: createLabel('移出风险管控与修复地块清单', 0, 0),
      position: { x: 1200, y: 300 },
      class: 'blue',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '55',
      label: createLabel('正在开展效果评估地块', 0, 0),
      position: { x: 1200, y: 400 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '56',
      label: createLabel('完成效果评估地块', 0, 0),
      position: { x: 1200, y: 500 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
    {
      id: '57',
      label: createLabel('移出风险管控与修复地块清单', 0, 0),
      position: { x: 1200, y: 600 },
      class: 'blue',
      sourcePosition: Position.Right,
      targetPosition: Position.Left,
    },
    {
      id: '58',
      label: createLabel('正在开展效果评估地块', 0, 0),
      position: { x: 1200, y: 700 },
      class: 'blue',
      type: 'output',
      targetPosition: Position.Left,
    },
  ]);
  function search() {
    loading.value = true;
    getPlotMessage({ isSuspect: isSuspect.value }).then((res) => {
      loading.value = false;
      if (res) {
        const labelDataKeys = [
          { label: '总地块', key: 'zdk' },
          // 第二等级
          { label: '未开展调查地块', key: 'wkzdk' },
          { label: '调查中地块', key: 'dczdk' },
          { label: '调查超标地块', key: 'cbdk' },
          { label: '未超标地块', key: 'wcbdk' },
          // 第三层级
          { label: '无需采取措施地块', key: 'wxcqcsdk' },
          { label: '风险管控地块', key: 'fxgkdk' },
          { label: '修复地块', key: 'xfdk' },
          { label: '管控及修复', key: 'gkyxfdk' },
          { label: '风险评估中地块', key: 'fxgkyxfdk' },
          // 第四层级
          { label: '正在开展风险管控地块', key: 'zzkzfxpgdk' },
          { label: '已完成风险管控地块', key: 'ywcfxpgdk' },
          { label: '未开展风险管控地块', key: 'wkcfxpgdk' },
          { label: '正在开展修复地块', key: 'zzkzxfdk' },
          { label: '已完成修复地块', key: 'ywcxfdk' },
          { label: '未开展修复地块', key: 'wkcxfdk' },
          { label: '正在开展管控及修复地块', key: 'zzkzgkxfdk' },
          { label: '已完成管控及修复地块', key: 'ywcgkxfdk' },
          { label: '未开展管控及修复地块', key: 'wkcgkxfdk' },
          // 第五层级
          { label: '完成效果评估地块', key: 'ywcfxgkxgpgdk' },
          { label: '移出风险管控与修复地块清单', key: 'ycfxgkxgpgdk' },
          { label: '正在开展效果评估地块', key: 'kzzfxgkxgpgdk' },
          { label: '完成效果评估地块', key: 'ywcxfxgpgdk' },
          { label: '移出风险管控与修复地块清单', key: 'ycxfxgpgdk' },
          { label: '正在开展效果评估地块', key: 'kzzxfxgpgdk' },
          { label: '完成效果评估地块', key: 'ywcgkxfxfxgpgdk' },
          { label: '移出风险管控与修复地块清单', key: 'ycgkxfxfxgpgdk' },
          { label: '正在开展效果评估地块', key: 'kzzgkxfxfxgpgdk' },
        ];
        nodes.value = nodes.value.map((node, index) => {
          if (index < labelDataKeys.length) {
            const { label, key } = labelDataKeys[index];
            return {
              ...node,
              label: createLabel(label, res.gj[key], res.gd[key]),
            };
          }
          return node;
        });
      }
    });
  }
  function toChangTab(id) {
    isSuspect.value = id;
    search();
  }
  search();
  const { onPaneReady } = useVueFlow();
  onPaneReady((instance) => {
    instance.fitView();
  });
</script>

<style>
  @import '@vue-flow/core/dist/style.css';
  @import '@vue-flow/core/dist/theme-default.css';
  @import '@vue-flow/controls/dist/style.css';
  /* output, input */
  .vue-flow__node-input .vue-flow__handle,
  .vue-flow__node-output .vue-flow__handle {
    background: #1a192b;
  }
</style>
<style lang="less" scoped>
  .dk-home-wrap,
  .vue-flow-basic-example {
    height: calc(100vh - 61px - 46px);
  }

  .text-wrap {
    padding: 0 10px;
  }
  :deep(.vue-flow__node) {
    border-radius: 50px;
    width: 200px;
  }
  :deep(.vue-flow__node.green) {
    border-color: #4ecb73;
    border-width: 3px;
    &:before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 1px solid #4ecb73;
      box-sizing: border-box;
      border-radius: 50px;
    }
  }
  :deep(.vue-flow__node.yellow) {
    border-color: #fcbe00;
    border-width: 3px;
    &:before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 1px solid #fcbe00;
      box-sizing: border-box;
      border-radius: 50px;
    }
  }
  :deep(.vue-flow__node.blue) {
    border-color: #428eb9;
    border-width: 3px;
    &:before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 1px solid #428eb9;
      box-sizing: border-box;
      border-radius: 50px;
    }
  }
  // tab
  .tab-wrap {
    z-index: 1;
    width: 85px;
    height: 170px;
    position: absolute;
    top: 61px;
    left: 15px;
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    border-radius: 6px;
    background: #fff;
    .tab-con {
      height: 85px;
      text-align: center;
      cursor: pointer;
      .tab-logo {
        width: 30px;
        height: 30px;
        margin: 12px auto 0;
      }
      .tab-name {
        line-height: 30px;
      }
    }
    .tab-active {
      background: #0882fe;
      color: #fff;
    }
  }
  // 图例
  .legend-wrap {
    position: absolute;
    bottom: 15px;
    left: 59px;
    width: fit-content;
    .legend {
      display: flex;
      align-items: center;
      span {
        display: inline-flex;
      }
      .sign {
        height: 17px;
        width: 30px;
        margin-right: 10px;
      }
    }
    .legend0 {
      .sign {
        background: #ff4800;
      }
    }
    .legend1 {
      .sign {
        background: rgba(0, 0, 0, 0.85);
      }
    }
  }
</style>
