import { defineComponent } from "vue-demi";
import { h } from "../../../utils";
import { useState } from "../use";
import "../styles/route-plans.scss";

export const RoutePlans = defineComponent({
  setup() {
    const state = useState();

    return () =>
      h(
        "div",
        {
          class: "route-plans"
        },
        [
          // 驾车方案
          state.drivingPlans.length
            ? h(
                "div",
                null,
                state.drivingPlans.map((plan, planIndex) =>
                  h(
                    "details",
                    {
                      on: {
                        click: () => {
                          state.drivingPlanIndex = planIndex;
                        }
                      }
                    },
                    [
                      h("summary", null, `方案${planIndex + 1}: ${plan.duration} 秒 | ${plan.distance} 公里`),
                      ...plan.routes.item.map((item, itemIndex) => {
                        return h("div", null, `${itemIndex + 1}.${item.strguide}`);
                      })
                    ]
                  )
                )
              )
            : "",
          // 公交方案
          state.drivingPlans.length
            ? h(
                "div",
                null,
                state.transitPlans.map((plan, planIndex) =>
                  h(
                    "details",
                    {
                      on: {
                        click: () => {
                          state.transitPlanIndex = planIndex;
                        }
                      },
                      style: { backgroundColor: "#fff" }
                    },
                    [
                      h("summary", null, `方案${planIndex + 1}: ${plan.lineName}`),
                      plan.segments
                        .map((segment, segmentIndex) => {
                          const segmentLine = segment.segmentLine[0];

                          //经过的公交或地铁的站数
                          const stationCount = segmentLine.segmentStationCount
                            ? "，经过" + segmentLine.segmentStationCount + "站"
                            : "";

                          switch (segment.segmentType) {
                            case 1:
                              return "步行约" + segmentLine.segmentDistance + "米，到达" + segment.stationEnd.name;
                            case 2:
                            case 3:
                              return "乘坐" + segmentLine.direction + stationCount + "，到达" + segment.stationEnd.name;
                            case 4:
                              return "站内换乘";
                            default:
                              return "";
                          }
                        })
                        .join("，") + "终点"
                    ]
                  )
                )
              )
            : ""
        ]
      );
  }
});