<template>
  <div>
    <v-chart
      :key="treeCounter"
      :option="options"
      style="height: 500px; width: 100%"
      @dblclick="onChartDblClick"
      @click="onChartClick"
      ref="chart"
      lazy
    ></v-chart>
  </div>
</template>

<script>
// 
import { use } from "echarts/core";
import { TreemapChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([
  TitleComponent,
  TooltipComponent,
  TreemapChart,
  CanvasRenderer,
  ToolboxComponent,
]);

/**
 * @vue-prop {Array} [dataTreeMap=[]] - داده‌های نمودار درختی

 * @vue-data {Array} [dataTest=[]] - داده‌های نمودار درختی
 * @vue-data {Object} [options] - تنظیمات نمودار درختی
 * @vue-data {Object} [options.title] - عنوان نمودار
 * @vue-data {String} [options.title.text="تعداد افراد"] - متن عنوان
 * @vue-data {String} [options.title.left="leafDepth"] - موقعیت عنوان
 * @vue-data {Object} [options.series] - سری‌های نمودار
 * @vue-data {String} [options.series.name="افراد"] - نام سری
 * @vue-data {String} [options.series.type="treemap"] - نوع نمودار
 * @vue-data {Number} [options.series.visibleMin=300] - حداقل مقدار قابل مشاهده
 * @vue-data {Array} [options.series.data=[]] - داده‌های سری
 * @vue-data {Number} [options.series.leafDepth=2] - عمق برگ
 * @vue-data {Array} [options.series.levels] - سطوح نمودار
 * @vue-data {Object} [options.series.upperLabel] - برچسب بالایی
 * @vue-data {Boolean} [options.series.upperLabel.show=true] - نمایش برچسب بالایی
 * @vue-data {Number} [options.series.upperLabel.height=30] - ارتفاع برچسب بالایی
 */

export default {
  props: {
    dataChart: {
      default() {
        return [];
      },
      type: Array,
    },
  },
  watch: {
    dataChart(navItem) {
      let data = this.organizeData(navItem);
      // let data = navItem;

      this.options.series[0].data = data;
      this.treeCounter++;
    },
  },

  data() {
    return {
      treeCounter: 1,
      // dataTest: [
      //   {
      //     value: 1000,
      //     name: "Root",
      //     children: [
      //       {
      //         value: 500,
      //         name: "Child 1",
      //         children: [
      //           {
      //             value: 200,
      //             name: "Child 1.1",
      //             children: [
      //               { value: 50, name: "Child 1.1.1" },
      //               { value: 50, name: "Child 1.1.2" },
      //               { value: 50, name: "Child 1.1.3" },
      //             ],
      //           },
      //           {
      //             value: 200,
      //             name: "Child 1.2",
      //             children: [
      //               { value: 50, name: "Child 1.2.1" },
      //               { value: 50, name: "Child 1.2.2" },
      //               { value: 50, name: "Child 1.2.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 1.3",
      //             children: [
      //               { value: 30, name: "Child 1.3.1" },
      //               { value: 30, name: "Child 1.3.2" },
      //               { value: 30, name: "Child 1.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //       {
      //         value: 300,
      //         name: "Child 2",
      //         children: [
      //           {
      //             value: 100,
      //             name: "Child 2.1",
      //             children: [
      //               { value: 30, name: "Child 2.1.1" },
      //               { value: 30, name: "Child 2.1.2" },
      //               { value: 30, name: "Child 2.1.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 2.2",
      //             children: [
      //               { value: 30, name: "Child 2.2.1" },
      //               { value: 30, name: "Child 2.2.2" },
      //               { value: 30, name: "Child 2.2.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 2.3",
      //             children: [
      //               { value: 30, name: "Child 2.3.1" },
      //               { value: 30, name: "Child 2.3.2" },
      //               { value: 30, name: "Child 2.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //       {
      //         value: 200,
      //         name: "Child 3",
      //         children: [
      //           {
      //             value: 60,
      //             name: "Child 3.1",
      //             children: [
      //               { value: 20, name: "Child 3.1.1" },
      //               { value: 20, name: "Child 3.1.2" },
      //               { value: 20, name: "Child 3.1.3" },
      //             ],
      //           },
      //           {
      //             value: 60,
      //             name: "Child 3.2",
      //             children: [
      //               { value: 20, name: "Child 3.2.1" },
      //               { value: 20, name: "Child 3.2.2" },
      //               { value: 20, name: "Child 3.2.3" },
      //             ],
      //           },
      //           {
      //             value: 80,
      //             name: "Child 3.3",
      //             children: [
      //               { value: 30, name: "Child 3.3.1" },
      //               { value: 30, name: "Child 3.3.2" },
      //               { value: 30, name: "Child 3.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     value: 1000,
      //     name: "Root",
      //     children: [
      //       {
      //         value: 500,
      //         name: "Child 1",
      //         children: [
      //           {
      //             value: 200,
      //             name: "Child 1.1",
      //             children: [
      //               { value: 50, name: "Child 1.1.1" },
      //               { value: 50, name: "Child 1.1.2" },
      //               { value: 50, name: "Child 1.1.3" },
      //             ],
      //           },
      //           {
      //             value: 200,
      //             name: "Child 1.2",
      //             children: [
      //               { value: 50, name: "Child 1.2.1" },
      //               { value: 50, name: "Child 1.2.2" },
      //               { value: 50, name: "Child 1.2.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 1.3",
      //             children: [
      //               { value: 30, name: "Child 1.3.1" },
      //               { value: 30, name: "Child 1.3.2" },
      //               { value: 30, name: "Child 1.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //       {
      //         value: 300,
      //         name: "Child 2",
      //         children: [
      //           {
      //             value: 100,
      //             name: "Child 2.1",
      //             children: [
      //               { value: 30, name: "Child 2.1.1" },
      //               { value: 30, name: "Child 2.1.2" },
      //               { value: 30, name: "Child 2.1.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 2.2",
      //             children: [
      //               { value: 30, name: "Child 2.2.1" },
      //               { value: 30, name: "Child 2.2.2" },
      //               { value: 30, name: "Child 2.2.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 2.3",
      //             children: [
      //               { value: 30, name: "Child 2.3.1" },
      //               { value: 30, name: "Child 2.3.2" },
      //               { value: 30, name: "Child 2.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //       {
      //         value: 200,
      //         name: "Child 3",
      //         children: [
      //           {
      //             value: 60,
      //             name: "Child 3.1",
      //             children: [
      //               { value: 20, name: "Child 3.1.1" },
      //               { value: 20, name: "Child 3.1.2" },
      //               { value: 20, name: "Child 3.1.3" },
      //             ],
      //           },
      //           {
      //             value: 60,
      //             name: "Child 3.2",
      //             children: [
      //               { value: 20, name: "Child 3.2.1" },
      //               { value: 20, name: "Child 3.2.2" },
      //               { value: 20, name: "Child 3.2.3" },
      //             ],
      //           },
      //           {
      //             value: 80,
      //             name: "Child 3.3",
      //             children: [
      //               { value: 30, name: "Child 3.3.1" },
      //               { value: 30, name: "Child 3.3.2" },
      //               { value: 30, name: "Child 3.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     value: 1000,
      //     name: "Root",
      //     children: [
      //       {
      //         value: 500,
      //         name: "Child 1",
      //         children: [
      //           {
      //             value: 200,
      //             name: "Child 1.1",
      //             children: [
      //               { value: 50, name: "Child 1.1.1" },
      //               { value: 50, name: "Child 1.1.2" },
      //               { value: 50, name: "Child 1.1.3" },
      //             ],
      //           },
      //           {
      //             value: 200,
      //             name: "Child 1.2",
      //             children: [
      //               { value: 50, name: "Child 1.2.1" },
      //               { value: 50, name: "Child 1.2.2" },
      //               { value: 50, name: "Child 1.2.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 1.3",
      //             children: [
      //               { value: 30, name: "Child 1.3.1" },
      //               { value: 30, name: "Child 1.3.2" },
      //               { value: 30, name: "Child 1.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //       {
      //         value: 300,
      //         name: "Child 2",
      //         children: [
      //           {
      //             value: 100,
      //             name: "Child 2.1",
      //             children: [
      //               { value: 30, name: "Child 2.1.1" },
      //               { value: 30, name: "Child 2.1.2" },
      //               { value: 30, name: "Child 2.1.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 2.2",
      //             children: [
      //               { value: 30, name: "Child 2.2.1" },
      //               { value: 30, name: "Child 2.2.2" },
      //               { value: 30, name: "Child 2.2.3" },
      //             ],
      //           },
      //           {
      //             value: 100,
      //             name: "Child 2.3",
      //             children: [
      //               { value: 30, name: "Child 2.3.1" },
      //               { value: 30, name: "Child 2.3.2" },
      //               { value: 30, name: "Child 2.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //       {
      //         value: 200,
      //         name: "Child 3",
      //         children: [
      //           {
      //             value: 60,
      //             name: "Child 3.1",
      //             children: [
      //               { value: 20, name: "Child 3.1.1" },
      //               { value: 20, name: "Child 3.1.2" },
      //               { value: 20, name: "Child 3.1.3" },
      //             ],
      //           },
      //           {
      //             value: 60,
      //             name: "Child 3.2",
      //             children: [
      //               { value: 20, name: "Child 3.2.1" },
      //               { value: 20, name: "Child 3.2.2" },
      //               { value: 20, name: "Child 3.2.3" },
      //             ],
      //           },
      //           {
      //             value: 80,
      //             name: "Child 3.3",
      //             children: [
      //               { value: 30, name: "Child 3.3.1" },
      //               { value: 30, name: "Child 3.3.2" },
      //               { value: 30, name: "Child 3.3.3" },
      //             ],
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
      dataTest: [
        {
          id: "1739",
          parent: "0",
          name: "پیامد زیرساختی ",
          value: 44,
          color: "#CD5C08",
        },
        {
          id: "1740",
          parent: "0",
          name: "پیامدهای ساختاری نهادی",
          value: 123,
          color: "#F5E8B7",
        },
        {
          id: "1741",
          parent: "0",
          name: "پیامدهای روبنایی",
          value: 53,
          color: "#E5CFF7",
        },
        {
          id: "1744",
          parent: "0",
          name: "تست",
          value: 0,
          color: "#6A9C89",
        },
        {
          id: "1747",
          parent: "0",
          name: "موضوع جدید تستی23",
          value: 0,
          color: "#5B0888",
        },
        {
          id: "1748",
          parent: "0",
          name: "موضوع تستی با موبایل",
          value: 0,
          color: "#713ABE",
        },
        {
          id: "787",
          parent: "757",
          name: "خودتأمینی",
          value: 0,
        },
        {
          id: "774",
          parent: "771",
          name: "اشتغال",
          value: 0,
        },
        {
          id: "849",
          parent: "780",
          name: "نظام توزیع",
          value: 0,
        },
        {
          id: "793",
          parent: "781",
          name: "پسماند",
          value: 0,
        },
        {
          id: "784",
          parent: "783",
          name: "اگرواکوسیستم",
          value: 0,
        },
        {
          id: "786",
          parent: "785",
          name: "خودتأمینی",
          value: 0,
        },
        {
          id: "788",
          parent: "785",
          name: "بازیافت آب",
          value: 0,
        },
        {
          id: "1745",
          parent: "856",
          name: "هویت اجتماعی",
          value: 1,
        },
        {
          id: "863",
          parent: "859",
          name: "مدیریت و حکمرانی",
          value: 5,
        },
        {
          id: "864",
          parent: "859",
          name: "سازماندهی",
          value: 6,
        },
        {
          id: "866",
          parent: "865",
          name: "روندهای دانشی",
          value: 6,
        },
        {
          id: "867",
          parent: "865",
          name: "آموزش و تربیت",
          value: 4,
        },
        {
          id: "869",
          parent: "868",
          name: "فضای کالبدی",
          value: 46,
        },
        {
          id: "870",
          parent: "868",
          name: "نظام تولید ثروت",
          value: 24,
        },
        {
          id: "871",
          parent: "868",
          name: "نظام توزیع",
          value: 11,
        },
        {
          id: "1738",
          parent: "868",
          name: "تأمین انرژی",
          value: 0,
        },
        {
          id: "873",
          parent: "872",
          name: "خانواده",
          value: 9,
        },
        {
          id: "874",
          parent: "872",
          name: "نهاد اجتماعی بانوان",
          value: 3,
        },
        {
          id: "881",
          parent: "875",
          name: "تأمین معیشت",
          value: 10,
        },
        {
          id: "882",
          parent: "875",
          name: "نظام تغذیه",
          value: 18,
        },
        {
          id: "883",
          parent: "875",
          name: "تکافل اجتماعی",
          value: 3,
        },
        {
          id: "898",
          parent: "881",
          name: "تست تامین معیشت",
          value: 0,
        },
        {
          id: "897",
          parent: "882",
          name: "امنیت غذایی",
          value: 7,
        },
        {
          id: "887",
          parent: "885",
          name: "نشاط اجتماعی، تفریح و ورزش",
          value: 3,
        },
        {
          id: "888",
          parent: "885",
          name: "کشاورزی",
          value: 28,
        },
        {
          id: "889",
          parent: "885",
          name: "تولیدی و صنعتی",
          value: 12,
        },
        {
          id: "856",
          parent: "1739",
          name: "هویت اجتماعی",
          value: 28,
        },
        {
          id: "857",
          parent: "1739",
          name: "محور انگیزش اجتماعی",
          value: 14,
        },
        {
          id: "858",
          parent: "1739",
          name: "فعالیت جهادی",
          value: 3,
        },
        {
          id: "1746",
          parent: "1739",
          name: "موضوع تستی",
          value: 0,
        },
        {
          id: "859",
          parent: "1740",
          name: "چرخه مشارکت مردمی",
          value: 18,
        },
        {
          id: "865",
          parent: "1740",
          name: "چرخه دانش",
          value: 10,
        },
        {
          id: "868",
          parent: "1740",
          name: "چرخه اقتصادی و فضای کالبدی",
          value: 82,
        },
        {
          id: "872",
          parent: "1740",
          name: "بنیان جامعه",
          value: 12,
        },
        {
          id: "875",
          parent: "1741",
          name: "ثمرات اقتصادی",
          value: 24,
        },
        {
          id: "884",
          parent: "1741",
          name: "نظام سلامت",
          value: 7,
        },
        {
          id: "885",
          parent: "1741",
          name: "فعالیت مؤثر اجتماعی",
          value: 44,
        },
        {
          id: "890",
          parent: "1741",
          name: "گردشکری",
          value: 2,
        },
        {
          id: "894",
          parent: "1741",
          name: "امنیت",
          value: 0,
        },
        {
          id: "900",
          parent: "1741",
          name: "تعامل با محیط زیست",
          value: 19,
        },
        {
          id: "0000000",
          parent: "0",
          name: "نامشخص",
          value: 11,
          color: "#CD5C08",
        },
      ],
      options: {
        // title: {
        //   // text: "تعداد افراد",
        //   // subtext: '2016/04',
        //   left: "leafDepth",
        // },
        tooltip: {},
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: "none",
        //     },
        //     dataView: { readOnly: false },
        //     // magicType: { type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: {},
        //   },
        // },
        series: [
          {
            // name: "افراد",
            type: "treemap",
            visibleMin: 1,
            // visualDimension: 2,
            data: [],
            leafDepth: 1,

            // squareRatio: 0.15,
            levels: [
              {
                visibleMin: 0,
                itemStyle: {
                  borderColor: "#555",
                  borderWidth: 4,
                  gapWidth: 4,
                },
              },
              {
                colorSaturation: [0.3, 0.6],
                itemStyle: {
                  borderColorSaturation: 0.7,
                  gapWidth: 2,
                  borderWidth: 2,
                },
              },
              {
                colorSaturation: [0.3, 0.5],
                itemStyle: {
                  borderColorSaturation: 0.6,
                  gapWidth: 1,
                },
              },
              {
                colorSaturation: [0.3, 0.5],
              },
            ],
            // label: {
            //   show: true,
            //   formatter: "{b}",
            // },
            upperLabel: {
              show: true,
              height: 30,
            },
          },
        ],
      },
      value: 50,
    };
  },
  mounted() {
    let data = this.organizeData(this.dataChart);
    this.options.series[0].data = data;
    this.treeCounter++;
  },
  methods: {
    /**
     * هنگامی که بر روی نمودار دوبل کلیک می‌شود، این متد اجرا می‌شود.
     * اطلاعات مربوط به رویداد دوبل کلیک را به کامپوننت والد ارسال می‌کند.
     *
     * @param {object} params - پارامترهای مربوط به رویداد دوبل کلیک
     */
    onChartDblClick(params) {
      this.$emit("dblClick", params);
    },
    // وقتی مشکل value درست شد 
    // مقدار iپاک کنید 
    organizeData(data) {
      const map = {};
      const roots = [];
      let i = "";
      data.forEach((item) => {
        i = this.value++;
        map[item.id] = {
          ...item,
          children: [],
          visibleMin: item.value === 0 ? 0 : undefined,
          value : i ,
        };
      });

      data.forEach((item) => {
        if (item.parent === "0") {
          roots.push(map[item.id]);
        } else if (map[item.parent]) {
          map[item.parent].children.push(map[item.id]);
        }
      });

      return roots;
    },
   
    onChartClick(event) {
     
      const itemSelected = { name: event.data.name, y: event.data.value };
      this.$emit("list", itemSelected);
    },
  },
};
</script>
