<template>
  <div>
    <app-info-builder :options :info>
      <template #thirdIdList>
        {{ thirdIdListName.join(",") }}
      </template>
      <template #platformStatus>
        {{ translationStatus(info.platformStatus, STATUS_LIST) }}
      </template>
    </app-info-builder>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import AppInfoBuilder from "@/components/info_builder/index.vue";
import { ref } from "vue";
import {
  getBusServicePlatform,
  getBusThirdPlatformListAll,
} from "@/request/database.js";
import { STATUS_LIST } from "@/assets/js/constant.js";
import { translationStatus } from "@/assets/js/utils.js";
const route = useRoute();
const { id } = route.query;
const info = ref({});
const options = [
  { key: "serviceCompany", label: "平台服务单位" },
  { key: "serviceName", label: "平台名称" },
  { key: "serviceCode", label: "服务平台编码" },
  { key: "thirdIdList", label: "涉及对接上级平台" },
  { key: "serviceUrl", label: "平台地址" },
  { key: "platformStatus", label: "状态" },
  { key: "platformContacts", label: "负责人" },
  { key: "platformMobile", label: "联系电话" },
];
const thirdIdListName = ref([]);
const fnGetData = async () => {
  const { data } = await getBusServicePlatform({ id: id });
  info.value = data;
  info.value.area = `${info.value.province},${info.value.city}, ${info.value.county}`;
  const { data: thirdPlatformList } = await getBusThirdPlatformListAll();

  info.value.thirdIdList.forEach((element) => {
    const target = thirdPlatformList.find((item) => item.id === element);
    thirdIdListName.value.push(target.platformName);
  });
};
fnGetData();
</script>

<style scoped lang="scss"></style>
