<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
        {{
          `import GraphChart from '@/components/base/GraphChart/index.vue';
        <template>
            <GraphChart :nodes="nodes" :links="links" layoutType="none">
            </GraphChart>
        </template>
`}}
</pre>
      <div class="chart-box">
        <GraphChart :nodes="nodes" :links="links" layoutType="force">
        </GraphChart>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import GraphChart from '@/components/base/GraphChart/index.vue'

import CompanyImg from "./symbol.png"
const span = 24

const nodes = ref([
  {
    id: 0,
    name: "泰丰先行",
    // category: 0,
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
    x: 50,
    y: 10
  },
  {
    id: 1,
    name: "国轩高科",
    // category: 0,
    symbolSize: 30,
    value: 9,
    symbol: `image://${CompanyImg}`,
    x: 150,
    y: 10
  },
  {
    id: 2,
    name: "智方纳米",
    // category: 2,
    symbolSize: 30,
    value: 7,
    symbol: `image://${CompanyImg}`,
    x: 250,
    y: 10
  },
  {
    id: 3,
    name: "香百科技",
    // category: 1,
    symbolSize: 30,
    value: 6,
    symbol: `image://${CompanyImg}`,
    x: 350,
    y: 10
  },
  {
    id: 4,
    name: "格林滨",
    // category: 2,
    symbolSize: 30,
    value: 6,
    symbol: `image://${CompanyImg}`,
    x: 450,
    y: 10
  },
  {
    id: 5,
    name: "江西紫宸",
    // category: 2,
    symbolSize: 30,
    value: 7,
    symbol: `image://${CompanyImg}`,
    x: 550,
    y: 10
  },
  {
    id: 6,
    name: "紫江企业",
    // category: 4,
    symbolSize: 30,
    value: 6,
    symbol: `image://${CompanyImg}`,
    x: 650,
    y: 10
  },
  {
    id: 7,
    name: "大而美法案",
    // category: 4,
    symbolSize: 50,
    value: 5,
    symbol: `image://${CompanyImg}`,
    x: 300,
    y: 200
  },
  {
    id: 8,
    name: "比亚迪",
    // category: 0,
    symbolSize: 30,
    value: 10,
    symbol: `image://${CompanyImg}`,
    x: 50,
    y: 400
  },
  {
    id: 9,
    name: "铜陵有色",
    // category: 3,
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
    x: 150,
    y: 400
  },
  {
    id: 10,
    name: "长盛精密",
    // category: 1,
    symbolSize: 30,
    value: 7,
    symbol: `image://${CompanyImg}`,
    x: 250,
    y: 400
  },
  {
    id: 11,
    name: "天合光能",
    // category: 0,
    symbolSize: 30,
    value: 8,
    symbol: `image://${CompanyImg}`,
    x: 350,
    y: 400
  },
  {
    id: 12,
    name: "昆仑化学",
    // category: 2,
    symbolSize: 30,
    value: 6,
    symbol: `image://${CompanyImg}`,
    x: 250,
    y: 400

  },
  {
    id: 13,
    name: "嘉源科技",
    // category: 1,
    symbolSize: 30,
    value: 6,
    symbol: `image://${CompanyImg}`,
    x: 450,
    y: 400
  },
  {
    id: 14,
    name: "华阳集团",
    // category: 4,
    symbolSize: 30,
    value: 7,
    symbol: `image://${CompanyImg}`,
    x: 550,
    y: 400
  },
  {
    id: 15,
    name: "海辰智能",
    // category: 1,
    symbolSize: 30,
    value: 7,
    symbol: `image://${CompanyImg}`,
    x: 650,
    y: 400
  },
]);

const links = ref([
  { source: 1, target: 7, label: { show: true, formatter: '合作' } },
  { source: 2, target: 7, label: { show: true, formatter: '持股' } },
  { source: 3, target: 7, label: { show: true, formatter: '合作' } },
  { source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
  { source: 5, target: 7, label: { show: true, formatter: '合作' } },
  { source: 6, target: 7, label: { show: true, formatter: '持股' } },
  { source: 0, target: 7, label: { show: true, formatter: '持股' } },
  { source: 8, target: 7, label: { show: true, formatter: '合作' } },
  { source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
  { source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
  { source: 11, target: 7, label: { show: true, formatter: '合作' } },
  { source: 12, target: 7, label: { show: true, formatter: '合作' } },
  { source: 13, target: 7, label: { show: true, formatter: '合作' } },
  { source: 14, target: 7, label: { show: true, formatter: '合作' } },
  { source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);


</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
}

.chart-box {
  width: 800px;
  height: 500px;
}
</style>