<script setup lang="ts">
import { nextTick, reactive, ref, watch } from "vue";
import "./rightDetail.less";
import {
  handleGetAnnualSplit,
  handleGetBrandReceivables,
  handleGetBusinessDate,
  handleGetPeriodWarningList,
  handleGetPeriodWarningListPOST,
  handleGetServerpartInfo,
} from "../service";
import { log } from "console";
import {
  formatNumber,
  parseThousandSeparatedNumber,
} from "../../../options/serveice";
import moment from "moment";
// 选择的标签
let selectTab = ref<number>(0);
// 标签列表
let tabList: any = [
  { label: "基础信息", value: 1 },
  { label: "在营项目", value: 2 },
];
// 项目的状态标签
let tabs: any = reactive<any>([
  { label: "在营", value: 0, key: 0 },
  { label: "暂停", value: 0, key: 1 },
  { label: "关闭", value: 0, key: 2 },
  { label: "历史", value: 0, key: 3 },
]);
// 选中了第几个状态
let selectProjectState = ref<number>(0);
// 各种状态的在营列表
let allProjectList = reactive<any>([]);
// 在营项目显示列表
let onlineProjectList = reactive<any>([]);
// 显示项目详情
let showProjectDetail = ref<boolean>(false);
// 当前选中的项目
let currentProjectDetail = ref<any>();
// 项目的一些成本设置
let currentRowDetail = ref<any>();
// 文本loading效果
let textLoading = ref<boolean>(false);
// 需要滚动到的shopId
let scrollShopId = ref<any>();
// 滚动到的门店id名称
let scrollIdStr = ref<string>();
// 服务区详情
let serviceDetail = ref<any>();
// 省份信息
const baseInfoObj = ref<any>();
let saveData = localStorage.getItem("baseInfoObj");
if (saveData) {
  baseInfoObj.value = JSON.parse(saveData);
}

// tab标签的点击事件
const handleClickTab = (tabs: any, event: any) => {
  selectTab.value = tabs.props.name;

  if (selectTab.value === 2) {
    if (onlineProjectList && onlineProjectList.length > 0) {
    } else {
      handleGetBusinessProjectList();
    }
  }
};

// tab清空选择
const handleNoSelectTab = () => {
  selectTab.value = 0;
};

// 隐藏整个右侧详情
const handleHideDetail = () => {
  emit("handleCloseRightDetail");
  emit("handleShowDetail", false);
};

// 拿到该服务区的经营项目列表
const handleGetBusinessProjectList = async () => {
  let req: any = {
    ServerpartId: props.currentServerPartDetail.SERVERPART_ID,
    ShowProjectSplit: false,
  };
  const data = await handleGetBrandReceivables(req);
  console.log("data", data);

  // 拿到数据之后按照每一项的BUSINESS_STATE不同分为四类 然后遍历push到不同状态的数组中
  const inCampList: any = []; // 在营 1000
  const suspend: any = []; // 暂停 2000
  const closeList: any = []; // 关闭 3000
  const historyList: any = []; // 历史

  console.log("scrollShopId", scrollShopId.value);
  let currentShop: any;
  if (scrollShopId.value) {
    selectTab.value = 2;
    currentShop = scrollShopId.value[0];
  }

  let defaultTab: number = 0;

  console.log("currentShop", currentShop);

  data.List.forEach((item: any) => {
    if (item.BUSINESS_STATE === 1000) {
      if (currentShop && item.SERVERPARTSHOP_ID.indexOf(currentShop) !== -1) {
        defaultTab = 0;
        item.select = true;
        scrollIdStr.value = `shop${item.SERVERPARTSHOP_ID}`;
      }
      inCampList.push(item);
    } else if (item.BUSINESS_STATE === 2000) {
      if (currentShop && item.SERVERPARTSHOP_ID.indexOf(currentShop) !== -1) {
        defaultTab = 1;
        item.select = true;
        scrollIdStr.value = `shop${item.SERVERPARTSHOP_ID}`;
      }
      suspend.push(item);
    } else if (item.BUSINESS_STATE === 3000) {
      if (currentShop && item.SERVERPARTSHOP_ID.indexOf(currentShop) !== -1) {
        defaultTab = 2;
        item.select = true;
        scrollIdStr.value = `shop${item.SERVERPARTSHOP_ID}`;
      }
      closeList.push(item);
    }
  });
  // 历史的列表数据会放在otherData里面
  if (data?.OtherData) {
    data?.OtherData.forEach((item: any) => {
      if (currentShop && item.SERVERPARTSHOP_ID.indexOf(currentShop) !== -1) {
        defaultTab = 3;
        item.select = true;
        scrollIdStr.value = `shop${item.SERVERPARTSHOP_ID}`;
      }
      historyList.push(item);
    });
  }

  console.log("scrollIdStr.value", scrollIdStr.value);

  // 由于tab选项卡也是写死的 吧每一项的length 补充在选项卡的名称后面
  tabs.forEach((item: any) => {
    if (item.key === 0) {
      item.value = inCampList.length;
    } else if (item.key === 1) {
      item.value = suspend.length;
    } else if (item.key === 2) {
      item.value = closeList.length;
    } else if (item.key === 3) {
      item.value = historyList.length;
    }
  });

  const list = [inCampList, suspend, closeList, historyList];
  console.log("list", list);

  allProjectList.splice(
    0,
    allProjectList.length,
    ...[inCampList, suspend, closeList, historyList]
  );
  onlineProjectList.splice(
    0,
    onlineProjectList.length,
    ...[inCampList, suspend, closeList, historyList][defaultTab]
  );

  console.log("defaultTab", defaultTab);
  nextTick(() => {
    selectProjectState.value = defaultTab;
    console.log("onlineProjectList3232", onlineProjectList);
    const element: any = document.getElementById(scrollIdStr.value!.toString());
    if (element) {
      element.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  });
};

// 切换在营项目的tabs
const handleChangeTabs = (name: any) => {
  selectProjectState.value = name;
  onlineProjectList = allProjectList[selectProjectState.value];
  console.log("onlineProjectList", onlineProjectList);
};

// 获取项目详情
const handleGetProjectDetail = async (item: any) => {
  console.log("item", item);
  currentProjectDetail.value = item;
  showProjectDetail.value = true;
  emit("handleShowDetail", true);

  textLoading.value = true;
  nextTick(async () => {
    await handleGetProjectDetailList(item);
  });
};
// 关闭详情
const handleCloseProjectDetail = () => {
  console.log("2222");
  currentProjectDetail.value = undefined;
  showProjectDetail.value = false;
  emit("handleShowDetail", false);
};

// 请求项目的往期内容的方法
const handleGetProjectDetailList = async (item: any) => {
  const allBoxes = document.querySelectorAll(".rightDetailPrintWordBox");
  console.log("allBoxes", allBoxes);

  const lastBox: any = allBoxes[allBoxes.length - 1];

  if (item.BUSINESSPROJECT_ID && item.BUSINESSPROJECT_ID !== -1) {
    const req: any = {
      SearchParameter: {
        BUSINESSPROJECT_ID: item.BUSINESSPROJECT_ID,
      },
      PageIndex: 1,
      PageSize: 999999,
    };
    const data = await handleGetPeriodWarningListPOST(req);

    const resData = await handleGetAnnualSplit({
      BusinessProjectId: item.BUSINESSPROJECT_ID,
      DataType: 2,
    });
    console.log("datads", data);
    console.log("resData", resData);

    if (data && data.length > 0) {
      // 排序 根据期数 从最近的排到最远的
      for (let i = 0; i < data.length - 1; i++) {
        for (let j = 0; j < data.length - i - 1; j++) {
          if (data[j].PERIOD_INDEX < data[j + 1].PERIOD_INDEX) {
            let temp = data[j];
            data[j] = data[j + 1];
            data[j + 1] = temp;
          }
        }
      }
      console.log("data2", data);

      const shopTime: any = await handleGetBusinessDate({
        ServerpartShopIds: item.SERVERPARTSHOP_ID,
      });
      console.log("shopTime", shopTime);
      const shopEndTime: any = shopTime.value;

      data.forEach((item: any) => {
        if (resData && resData.length > 0) {
          resData.forEach((subItem: any) => {
            if (item.BUSINESS_PERIOD === subItem.BUSINESS_PERIOD) {
              item.SUBROYALTY_PRICE = subItem.SUBROYALTY_PRICE;
            }
          });
        }

        if (
          new Date().getTime() > new Date(item.STARTDATE).getTime() &&
          new Date().getTime() < new Date(item.ENDDATE).getTime()
        ) {
          item.isNow = true;
          const startDate = new Date(item.STARTDATE);
          let startY: number = startDate.getFullYear();
          let startM: number = startDate.getMonth() + 1;
          let startD: number = startDate.getDate();
          const endDate = new Date(shopEndTime);
          let endY: number = endDate.getFullYear();
          let endM: number = endDate.getMonth() + 1;
          let endD: number = endDate.getDate();
          let otherMonth: number =
            startD >= 21
              ? 0
              : startD > 10 && startD <= 20
              ? 0.5
              : startD <= 10
              ? 1
              : 0;
          let otherEndMonth: number =
            endD >= 21 ? 1 : endD > 10 && endD <= 20 ? 0.5 : endD <= 10 ? 0 : 0;
          let differenceMonth: number =
            moment(
              `${endM - 1 <= 0 ? endY - 1 : endY}-${
                endM - 1 <= 0 ? 12 : endM - 1
              }`
            )
              .endOf("m")
              .diff(
                otherMonth === 0 || otherMonth === 0.5
                  ? moment(
                      `${startM + 1 > 12 ? startY + 1 : startY}-${
                        startM + 1 > 12 ? 1 : startM + 1
                      }`
                    ).startOf("M")
                  : moment(`${startY}-${startM}`).startOf("M"),
                "month"
              ) + (otherMonth === 1 ? 0 : 1);
          item.realMonth = differenceMonth + otherEndMonth + otherMonth;
        } else {
          item.realMonth = 12;
        }
        const startTime: any = moment(item.STARTDATE);
        const endTime: any = moment(item.ENDDATE);
        const nowTime: any = moment();
        item.projectDaySum = endTime.diff(startTime, "days") + 1;
        // 距离今天是多少天
        item.projectBetween = nowTime.diff(startTime, "days") + 1;
        console.log("day", nowTime.diff(startTime, "days") + 1);

        // 完成率
        item.daySuccess = (item.projectBetween / item.projectDaySum) * 100;
        item.costEstimation = item.REVENUE_AMOUNT * 0.4;
        item.profitEstimate =
          item.SUBROYALTY_THEORY - item.REVENUE_AMOUNT * 0.4;
        item.rentDelivery =
          item.SUBROYALTY_PRICE / item.MINTURNOVER > 1
            ? 100
            : (item.SUBROYALTY_PRICE / item.MINTURNOVER) * 100;
        item.daySuccessNumber =
          (item.projectBetween / item.projectDaySum) * 100;
        item.progressDifference = item.rentDelivery - item.daySuccessNumber;
      });
      console.log("data3", data);

      textLoading.value = false;
      let lastContent: string = `<span class='title'>经营情况（共${
        data.length
      }期）</span>
        <span class='div'>
          ${data
            .map((item: any) => {
              return `<span class='bigDiv'>
              <span class='div'>
                <span class='style1'>${item.BUSINESS_PERIOD}</span>
                <span class='style2'>${moment(item.STARTDATE).format(
                  "YYYY年MM月DD日"
                )}至${moment(item.ENDDATE).format("YYYY年MM月DD日")}</span>
                ${item.isNow ? "项目履约中..." : "项目已完成..."}
                <span class='style3'>${
                  item.SUBROYALTY_PRICE >= item.MINTURNOVER
                    ? "保底租金已交付！"
                    : "未完成保底额"
                }</span>
              </span>
              <span class='div'>
                对客销售总额<span class='style4'>${formatNumber(
                  item.REVENUE_AMOUNT / 10000
                )}</span><span class='style5'>/万元</span>
              </span>
              <span class='div'>
                保底租金<span class='style4'>${formatNumber(
                  item.MINTURNOVER / 10000
                )}</span><span class='style5'>/万元</span>，提成比例<span class='style3'>${
                item.GUARANTEERATIO + "%"
              }
                </span>， 按合同约定支付驿达租金<span class='style4'>${formatNumber(
                  item.ROYALTY_THEORY / 10000
                )}</span><span class='style5'>/万元</span>
              </span>
              <span class='div'>
                商家入账<span class='style4'>${formatNumber(
                  item.SUBROYALTY_THEORY / 10000
                )}</span><span class='style5'>/万元</span>，移动支付手续费约<span class='style4'>${formatNumber(
                (item.REVENUE_AMOUNT -
                  item.ROYALTY_THEORY -
                  item.SUBROYALTY_THEORY) /
                  10000
              )}
                </span><span class='style5'>/万元</span>
              </span>
              <span class='div'>
              按对客销售的<span class='style3'>${
                item.COST_RATE
              }%</span>成本预估经营成本需<span class='style4'>${formatNumber(
                (item.REVENUE_AMOUNT *
                  (item?.COST_RATE ? item?.COST_RATE / 100 : 0)) /
                  10000
              )}</span><span class='style5'>/万元</span>
              </span>
              <span class='div'>
              人工成本，按<span class='style3'>${
                item?.LABOURS_COUNT
              }</span>个人，平均工资<span class='style3'>${
                item?.LABOURS_WAGE
              }</span>元/月，实际发生<span class='style3'>${
                item.realMonth
              }</span>个月，合计人工成本<span class='style4'>${formatNumber(
                (item.LABOURS_COUNT * item.LABOURS_WAGE * item.realMonth) /
                  10000
              )}</span>万元
              </span>
              <span class='div'>
              折旧费用，按总投入<span class='style3'>${formatNumber(
                item.DEPRECIATION_EXPENSE
              )}</span>万元，<span class='style3'>${
                item?.DEPRECIATION_YEAR
              }</span>年折旧，实际发生<span class='style3'>${
                item.realMonth
              }</span>个月，合计折旧费用${formatNumber(
                (item.DEPRECIATION_EXPENSE / item.DEPRECIATION_YEAR / 12) *
                  item.realMonth
              )}万元
              </span>
              <span class='div'>
              其他经营费用，按每年综合经营费用<span class='style4'>${formatNumber(
                (item.OTHER_EXPENSE / 12) * item.realMonth
              )}</span>万元预估
              </span>
              <span class='div'>
                <span class='style5'>综合商家经营成本 = 经营成本 + 人工成本 + 折旧费用 + 其他经营费用 =</span><span class='style4'>${formatNumber(
                  (item.REVENUE_AMOUNT *
                    (item.COST_RATE ? item.COST_RATE / 100 : 0) +
                    item.LABOURS_COUNT * item.LABOURS_WAGE * item.realMonth +
                    (item.DEPRECIATION_EXPENSE / item.DEPRECIATION_YEAR / 12) *
                      item.realMonth *
                      10000 +
                    (item.OTHER_EXPENSE / 12) * item.realMonth * 10000) /
                    10000
                )}</span>万元
              </span>
              <span class='div'>
              商家<span class='style3'>${
                item.SUBROYALTY_THEORY -
                  (item.REVENUE_AMOUNT *
                    (item.COST_RATE ? item.COST_RATE / 100 : 0) +
                    item.LABOURS_COUNT * item.LABOURS_WAGE * item.realMonth +
                    (item.DEPRECIATION_EXPENSE / item.DEPRECIATION_YEAR / 12) *
                      item.realMonth *
                      10000 +
                    (item.OTHER_EXPENSE / 12) * item.realMonth * 10000) <
                0
                  ? "预亏"
                  : "盈利"
              }</span>
                                  <span class='style4'>${formatNumber(
                                    Math.abs(
                                      item.SUBROYALTY_THEORY -
                                        (item.REVENUE_AMOUNT *
                                          (item.COST_RATE
                                            ? item.COST_RATE / 100
                                            : 0) +
                                          item.LABOURS_COUNT *
                                            item.LABOURS_WAGE *
                                            item.realMonth +
                                          (item.DEPRECIATION_EXPENSE /
                                            item.DEPRECIATION_YEAR /
                                            12) *
                                            item.realMonth *
                                            10000 +
                                          (item.OTHER_EXPENSE / 12) *
                                            item.realMonth *
                                            10000)
                                    ) / 10000
                                  )}</span>万元
              </span>
              <span class='div'>
              项目进度已完成${
                item.daySuccess > 100
                  ? 100 + "%"
                  : formatNumber(item.daySuccess) + "%"
              }，租金交付已完成${
                item.rentDelivery > 100
                  ? 100 + "%"
                  : formatNumber(item.rentDelivery) + "%"
              },租金交付进度<span class='style3'>${
                item.rentDelivery > item.daySuccess
                  ? "优于"
                  : item.rentDelivery < item.daySuccess
                  ? "低于"
                  : "等于"
              }</span>项目进度
              </span>
            </span>`;
            })
            .join("")}
        </span>
      `;
      await handlePrintWord(lastBox, lastContent, 10);
    }
  } else {
    let lastContent: any = `小驿暂时无法支持自营业态的数据分析！`;
    console.log("lastContent", lastContent);
    console.log("lastBox", lastBox);

    await handlePrintWord(lastBox, lastContent, 30);
  }
};

// 打印的方法
const handlePrintWord = async (
  element: HTMLElement,
  htmlContent: string,
  speed: number
) => {
  return new Promise<void>((resolve) => {
    let i = 0;
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;

    const tagStack: HTMLElement[] = [element];

    const typeCharacter = async () => {
      if (i < tempDiv.innerHTML.length) {
        const handleWaitRegex = /handleWait\((.*?)\)/;
        const restContent = tempDiv.innerHTML.slice(i);
        const match = handleWaitRegex.exec(restContent);

        if (match && match.index === 0) {
          // 提取括号内的参数
          const param: string = match[1].trim().replace(/^["']|["']$/g, "");
          // await handleWait(param); // 执行 handleWait 方法
          i += match[0].length; // 跳过 handleWait 字符串
        } else {
          const char = tempDiv.innerHTML.charAt(i);
          if (char === "<") {
            const tagEnd = tempDiv.innerHTML.indexOf(">", i);
            const tagContent = tempDiv.innerHTML.slice(i, tagEnd + 1);
            const isClosingTag = tagContent.startsWith("</");

            if (isClosingTag) {
              tagStack.pop();
            } else {
              const range = document.createRange();
              const fragment = range.createContextualFragment(tagContent);
              const newElement = fragment.firstChild as HTMLElement;
              tagStack[tagStack.length - 1].appendChild(newElement);
              if (!tagContent.endsWith("/>")) {
                tagStack.push(newElement);
              }
            }
            i = tagEnd + 1;
          } else {
            const textNode = document.createTextNode(
              char === "\n" ? "\n" : char
            );
            tagStack[tagStack.length - 1].appendChild(textNode);
            i++;
          }
        }

        setTimeout(typeCharacter, speed);
        handleScrollToBottom();
      } else {
        // isPrinting.value = false;
        resolve();
      }
    };

    typeCharacter();
  });
};

const handleScrollToBottom = () => {
  const div: any = document.getElementById("rightDetailPrintWordBox");
  setTimeout(() => {
    nextTick(() => {
      if (div) {
        div.scrollTop = div.scrollHeight; // 将 scrollTop 设置为 scrollHeight，滚动到最底部
      }
    });
  }, 100);
};

// 表格自动滚动到当前看到的门店去
const handleScrollProjectList = (shopId: any) => {
  if (shopId && shopId.length > 0) {
    console.log("shopId", shopId);
    nextTick(() => {
      scrollShopId.value = shopId;
    });
  }
};

// 获得服务区详情
const handleServiceDetail = async (val: string) => {
  const req = {
    ServerpartId: val,
  };
  const data = await handleGetServerpartInfo(req);
  console.log("data", data);
  serviceDetail.value = data;
};

// 传入的数据
const props = defineProps<{
  currentServerPartDetail: any;
}>();

// 监听传入的选中服务区
watch(
  () => props.currentServerPartDetail,
  (newVal, oldVal) => {
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    if (newVal && newVal.SERVERPART_ID) {
      selectTab.value = 0
      onlineProjectList = [];
      tabs = [
        { label: "在营", value: 0, key: 0 },
        { label: "暂停", value: 0, key: 1 },
        { label: "关闭", value: 0, key: 2 },
        { label: "历史", value: 0, key: 3 },
      ];
      handleGetBusinessProjectList();
      handleServiceDetail(newVal.SERVERPART_ID);
    } else {
      nextTick(() => {
        selectTab.value = 0
        onlineProjectList = [];
        tabs = [
          { label: "在营", value: 0, key: 0 },
          { label: "暂停", value: 0, key: 1 },
          { label: "关闭", value: 0, key: 2 },
          { label: "历史", value: 0, key: 3 },
        ];
      });
    }
  },
  { deep: true }
);

// 传入的方法
const emit = defineEmits<{
  (e: "handleCloseRightDetail"): void; // 关闭整个
  (e: "handleShowDetail", value: boolean): void; // 关闭整个
}>();
defineExpose({
  handleScrollProjectList: handleScrollProjectList,
});
</script>

<template>
  <div class="rightDetailBox">
    <div v-if="!showProjectDetail">
      <div class="tabTop">
        <div class="tabBox">
          <el-tabs v-model="selectTab" @tab-click="handleClickTab">
            <el-tab-pane
              v-for="(item, index) in tabList"
              :key="index"
              :label="item.label"
              :name="item.value"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="noTab">
          <img
            class="noTabIcon"
            src="@/assets/ai/clearIcon.png"
            @click="handleHideDetail()"
          />
        </div>
        <!-- @click="handleNoSelectTab()" -->

        <!-- <img
          class="closeIcon"
          src="@/assets/ai/dropDown.png"
          @click="handleHideDetail()"
        /> -->
      </div>

      <div class="detailContent">
        <div class="detailServerPart" v-if="selectTab === 1">
          <div class="serverPartImg">
            <img
              v-if="
                serviceDetail.ImageLits && serviceDetail.ImageLits.length > 0
              "
              class="serverImg"
              :src="serviceDetail.ImageLits[0]"
            />
            <img class="defaultImg" v-else src="@/assets/ai/defaultIcon.png" />
          </div>
          <div class="serviceTypeTabs">
            <div class="serviceTypeItem">
              <img class="itemIcon" src="@/assets/servicePart/carService.png" />
              <span class="itemText">司机之家</span>
            </div>

            <div class="serviceTypeItem">
              <img class="itemIcon" src="@/assets/servicePart/hotal.png" />
              <span class="itemText">客房</span>
            </div>

            <div class="serviceTypeItem">
              <img class="itemIcon" src="@/assets/servicePart/charge.png" />
              <span class="itemText">充电桩</span>
            </div>

            <div class="serviceTypeItem">
              <img class="itemIcon" src="@/assets/servicePart/baby.png" />
              <span class="itemText">母婴室</span>
            </div>
          </div>
          <div class="detailList">
            <div class="detailItem">
              <div class="detailItemLeft">
                <img class="itemLeftIcon" src="@/assets/servicePart/area.png" />
                <span class="itemLeftLabel">占地面积</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.FLOORAREA
                    ? formatNumber(serviceDetail.ServerpartInfo.FLOORAREA)
                    : "-"
                }}m²
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/stopArea.png"
                />
                <span class="itemLeftLabel">停车场面积</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.SHAREAREA
                    ? formatNumber(serviceDetail.ServerpartInfo.SHAREAREA)
                    : "-"
                }}m²
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/buildArea.png"
                />
                <span class="itemLeftLabel">建筑面积</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.SERVERPART_AREA
                    ? formatNumber(serviceDetail.ServerpartInfo.SERVERPART_AREA)
                    : "-"
                }}m²
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/water.png"
                />
                <span class="itemLeftLabel">取水方式</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.WATERINTAKE_TYPE === 1
                    ? "自来水"
                    : serviceDetail.ServerpartInfo.WATERINTAKE_TYPE === 2
                    ? "井水"
                    : ""
                }}
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/badWater.png"
                />
                <span class="itemLeftLabel">污水处理</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.SEWAGEDISPOSAL_TYPE === 1
                    ? "市政"
                    : serviceDetail.ServerpartInfo?.SEWAGEDISPOSAL_TYPE === 2
                    ? "污水处理设备"
                    : ""
                }}
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/fixed.png"
                />
                <span class="itemLeftLabel">市区县镇</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.SERVERPART_ADDRESS
                    ? serviceDetail.ServerpartInfo.SERVERPART_ADDRESS
                    : ""
                }}
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/managerUnit.png"
                />
                <span class="itemLeftLabel">管理单位</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.MANAGERCOMPANY
                    ? serviceDetail.ServerpartInfo.MANAGERCOMPANY
                    : ""
                }}
              </div>
            </div>

            <div class="detailItem">
              <div class="detailItemLeft">
                <img
                  class="itemLeftIcon"
                  src="@/assets/servicePart/propryRight.png"
                />
                <span class="itemLeftLabel">产权单位</span>
              </div>
              <div class="detailItemRight">
                {{
                  serviceDetail?.ServerpartInfo?.OWNEDCOMPANY
                    ? serviceDetail.ServerpartInfo.OWNEDCOMPANY
                    : ""
                }}
              </div>
            </div>
          </div>
          <div class="areaList">
            <div
              class="areaItem"
              v-for="(item, index) in serviceDetail.RegionInfo"
              :key="index"
            >
              <div class="areaItemTop">
                <img
                  class="itemTopIcon"
                  src="@/assets/servicePart/ES.png"
                  :style="{
                    transform: `rotate(${
                      item.SERVERPART_REGIONNAME === '东区' ||
                      item.SERVERPART_REGIONNAME === '西区'
                        ? '90deg'
                        : '0deg'
                    })`,
                  }"
                />
                <span class="itemTitle">{{
                  `${item.SERVERPART_REGIONNAME || ""}`
                }}</span>
                <span class="typeItem"></span>
              </div>

              <div class="itemList">
                <div class="contentItem">
                  <div
                    :class="
                      item.HASPANTRY
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/manWC.png"
                    />
                    <span class="contentItemText">
                      男厕
                      <span class="number">{{
                        `(${item.HASPANTRY || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASWIFI
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/womenWC.png"
                    />
                    <span class="contentItemText">
                      女厕
                      <span class="number">{{
                        `(${item.HASWIFI || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASTHIRDTOILETS
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/thirdToilets.png"
                    />
                    <span class="contentItemText">
                      第三卫生间
                      <span class="number">{{
                        `(${item.HASTHIRDTOILETS || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.TOILETCOUNT
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/tidalSpace.png"
                    />
                    <span class="contentItemText">
                      潮汐厕位
                      <span class="number">{{
                        `(${item.TOILETCOUNT || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASWATERROOM
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/waterBoiler.png"
                    />
                    <span class="contentItemText">
                      开水器
                      <span class="number">{{
                        `(${item.HASWATERROOM || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASSHOWERROOM
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/vehicleRefueling.png"
                    />
                    <span class="contentItemText">
                      车辆加水
                      <span class="number">{{
                        `(${item.HASSHOWERROOM || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASCHILD
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/maintenance.png"
                    />
                    <span class="contentItemText">
                      车辆维修
                      <span class="number">{{
                        `(${item.HASCHILD || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.SMALLPARKING
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/car.png"
                    />
                    <span class="contentItemText">
                      轿车车位
                      <span class="number">{{
                        `(${item.SMALLPARKING || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.PACKING
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/bus.png"
                    />
                    <span class="contentItemText">
                      客车车位
                      <span class="number">{{
                        `(${item.PACKING || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.TRUCKPACKING
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/trainCar.png"
                    />
                    <span class="contentItemText">
                      货车车位
                      <span class="number">{{
                        `(${item.TRUCKPACKING || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.DININGROOMCOUNT
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/food.png"
                    />
                    <span class="contentItemText">
                      餐饮
                      <span class="number">{{
                        `(${item.DININGROOMCOUNT || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASBACKGROUNDRADIO
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/minimart.png"
                    />
                    <span class="contentItemText">
                      便利店
                      <span class="number">{{
                        `(${item.HASBACKGROUNDRADIO || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.HASMESSAGESEARCH
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/room.png"
                    />
                    <span class="contentItemText">
                      住宿
                      <span class="number">{{
                        `(${item.HASMESSAGESEARCH || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.DININGBXCOUNT
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/shop.png"
                    />
                    <span class="contentItemText">
                      商铺
                      <span class="number">{{
                        `(${item.DININGBXCOUNT || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>

                <div class="contentItem">
                  <div
                    :class="
                      item.DANPACKING
                        ? 'contentItemBox'
                        : 'contentItemBox noContentItemBox'
                    "
                  >
                    <img
                      class="contentItemIcon"
                      src="@/assets/servicePart/chemicals.png"
                    />
                    <span class="contentItemText">
                      危化品车位
                      <span class="number">{{
                        `(${item.DANPACKING || ""})`
                      }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="projectBox" v-if="selectTab === 2">
          <div class="projectTab">
            <el-radio-group
              v-model="selectProjectState"
              style="margin-bottom: 30px"
            >
              <el-radio-button
                v-for="(item, index) in tabs"
                :key="index"
                :value="item.key"
                @click="handleChangeTabs(item.key)"
                >{{ item.label || ""
                }}<span style="marginleft: 4px"
                  >({{ item.value }})</span
                ></el-radio-button
              >
            </el-radio-group>
          </div>

          <div class="projectList">
            <div
              v-for="(item, index) in onlineProjectList"
              :key="index"
              :class="
                item.select ? 'projectItem selectProjectItem' : 'projectItem'
              "
              @click="handleGetProjectDetail(item)"
              :id="'shop' + item.SERVERPARTSHOP_ID"
            >
              <div class="projectItemLeft">
                <img
                  class="leftBrandIcon"
                  :src="
                    item.BUSINESSPROJECT_ICO ||
                    'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png'
                  "
                />
              </div>

              <div class="projectItemRight">
                <p class="rightTitle">{{ item.BRAND_NAME }}</p>
                <div class="typeLists">
                  <template v-if="item.BUSINESSTRADE_NAME">
                    <div
                      class="typeItem"
                      v-for="(subItem, index) in item.BUSINESSTRADE_NAME.split(
                        ','
                      )"
                      :key="index"
                      style="background: #c8e3cf; color: #005f10"
                    >
                      {{ subItem || "" }}
                    </div>
                  </template>

                  <template v-if="item.BRAND_TYPENAME">
                    <div
                      class="typeItem"
                      v-for="(subItem, index) in item.BRAND_TYPENAME.split(',')"
                      :key="index"
                      style="background: #fbedc8; color: #571519"
                    >
                      {{ subItem || "" }}
                    </div>
                  </template>
                </div>

                <div class="topRight">
                  <div class="dailyItem">
                    <img class="itemIcon" src="@/assets/ai/proportion.png" />
                    <span class="itemLabel">提成比例</span>
                    <span class="itemValue">{{ item.COMMISSION_RATIO }}</span>
                  </div>

                  <div class="dailyItem">
                    <img class="itemIcon" src="@/assets/ai/revenue.png" />
                    <span class="itemLabel">日均营收/元</span>
                    <span class="itemValue">{{
                      item.BUSINESSDAYS && item.REVENUE_AMOUNT
                        ? `￥${formatNumber(
                            item.REVENUE_AMOUNT / Number(item.BUSINESSDAYS)
                          )}`
                        : ""
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="showProjectDetail">
      <div class="detailTop">
        <div class="backIconBox">
          <img
            class="backIcon"
            src="@/assets/ai/whiteBack.png"
            @click="handleCloseProjectDetail"
          />
        </div>
        <div class="currentItem">
          <div class="projectItemLeft">
            <img
              class="leftBrandIcon"
              :src="
                currentProjectDetail.BUSINESSPROJECT_ICO ||
                'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png'
              "
            />
          </div>

          <div class="projectItemRight">
            <p class="rightTitle">{{ currentProjectDetail.BRAND_NAME }}</p>
            <div class="typeLists">
              <template v-if="currentProjectDetail.BUSINESSTRADE_NAME">
                <div
                  class="typeItem"
                  v-for="(
                    item, index
                  ) in currentProjectDetail.BUSINESSTRADE_NAME.split(',')"
                  :key="index"
                  style="background: #c8e3cf; color: #005f10"
                >
                  {{ item || "" }}
                </div>
              </template>

              <template v-if="currentProjectDetail.BRAND_TYPENAME">
                <div
                  class="typeItem"
                  v-for="(
                    item, index
                  ) in currentProjectDetail.BRAND_TYPENAME.split(',')"
                  :key="index"
                  style="background: #fbedc8; color: #571519"
                >
                  {{ item || "" }}
                </div>
              </template>
            </div>

            <div class="topRight">
              <div class="dailyItem">
                <img class="itemIcon" src="@/assets/ai/proportion.png" />
                <span class="itemLabel">提成比例</span>
                <span class="itemValue">{{
                  currentProjectDetail.COMMISSION_RATIO
                }}</span>
              </div>

              <div class="dailyItem">
                <img class="itemIcon" src="@/assets/ai/revenue.png" />
                <span class="itemLabel">日均营收/元</span>
                <span class="itemValue">{{
                  currentProjectDetail.BUSINESSDAYS &&
                  currentProjectDetail.REVENUE_AMOUNT
                    ? `￥${formatNumber(
                        currentProjectDetail.REVENUE_AMOUNT /
                          Number(currentProjectDetail.BUSINESSDAYS)
                      )}`
                    : ""
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="loadingBox"
        v-loading="textLoading"
        v-if="textLoading"
        style="width: 100%; height: 500px; background-color: rgba(0, 0, 0, 0.5)"
      ></div>
      <div class="rightDetailPrintWordBox" id="rightDetailPrintWordBox"></div>
    </div>
  </div>
</template>