<template>
  <div class="outer bg-white pt-4 rounded-2xl">
    <div class="px-5 relative">
      <!-- 网点位置 -->
      <div class="pb-2">
        <div class="mb-2">
          <img
            src="../../../assets/img/bank_logo.png"
            class="w-6 h-6 inline-block m-auto align-text-bottom"
          />
          <span class="ml-2 text-gray-800 font-semibold text-base">{{
            name
          }}</span>
          <!-- 切换网点 -->
          <div v-if="changeable" class="switch absolute -right-2 -top-2">
            <img
              src="../../../assets/icons/location.png"
              class="location w-3 absolute top-2 left-3 inline-block"
            />
            <span
              class="
                z-10
                text-white
                inline-block
                text-xs
                absolute
                top-2
                right-1
              "
              >切换网点</span
            >
            <img src="../../../assets/img/badge.png" class="w-20 h-10" />
          </div>
          <p
            v-else
            class="
              bg-branch-bg
              text-branch-font text-xs
              px-2
              rounded
              inline-block
              align-middle
              float-right
            "
          >
            网点
          </p>
        </div>
        <div class="flex items-start w-full justify-between"  v-if="!disableChat">
          <div class="text-gray-400 text-xs">{{ location }}</div>
          <div class="text-gray-400 text-xs float-right ml-2">
            {{ filter.filterDistance(distance) }}
          </div>
        </div>
      </div>
      <div class="border border-blue-50"></div>
      <!-- 营业时间 -->
      <div class="mt-2 pb-3 flex justify-between items-center">
        <div class="overflow-hidden mr-6">
          <div v-if="is_normal_work" class="mb-2">
            <icon
              name="icon-yingye"
              color="#1B1F37"
              size="14"
              class="inline-block align-middle mr-3"
            />
            <span
              v-if="isOpen"
              class="
                text-app-blue
                border border-app-blue
                bg-indigo-100
                text-xs
                px-2
                rounded
              "
              >营业中</span
            >
            <span
              v-else
              class="
                text-app-blue
                border border-app-blue
                bg-indigo-100
                text-xs
                px-2
                rounded
              "
              >休息中</span
            >
          </div>
          <div v-if="is_normal_work">
            <icon
              name="icon-a-shijian"
              color="#1B1F37"
              size="14"
              class="inline-block align-text-top mr-3"
            />
            <span class="text-gray-400 text-sm inline-block align-top"
              >{{ weekDays }} 丨 {{ dailyTime }}</span
            >
          </div>
          <template v-else>
            <!-- <div class="text-red">{{ error }}</div> -->
            <div class="text-red">{{ errorReason }}</div>
          </template>
        </div>

        <div class="text-right h-3" v-if="!disableChat">
          <icon
            name="icon-ditu"
            color="#3E4FAF"
            size="14"
            class="inline-block align-top"
            @click="handleClickNagigate"
          />
        </div>
      </div>
    </div>
    <!-- 底部操作 -->
    <div
      class="flex text-center py-3 text-gray-800 bg-branch-tab-bg rounded-b-2xl"
      v-if="(!isNotChatUser && is_normal_work && !disableChat)"
    >
      <p
        class="w-1/2 border-r border-gray-200 mb-0"
        @click="handleClickChatWithClientManager"
      >
        联系客服
      </p>
      <p
        class="w-1/2 mb-0"
        :class="isOpen ? 'text-app-blue' : 'text-gray-800'"
        @click="toCall"
      >
        电话咨询
      </p>
    </div>
    <show-call :show="show" :phone="phone" @hidden="hidden" />
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  defineComponent,
  onMounted,
  onUnmounted,
  PropType,
  reactive,
  ref,
} from "vue";
import Icon from "@/components/common/Icon.vue";
import { transfterStrToDate } from "@/utils/transfer";
import AddressService from "@/service/AddressService";
import dayjs from "dayjs";
import filter from "@/filter";
import jsBridge from "@/utils/jsBridge2";
import UserService from "@/service/UserService";
import { authCheck } from "@/utils/authCheck";
import router from "@/router";
import ShowCall from "@/components/showCall/index.vue";
import { goToChatWithOutletRoboot } from "@/router/navigate";
import { getUserMsg } from "@/utils/userMsg";
import { eRole } from "@/types/roleType";

const disableChat = computed(() => {
  return getUserMsg()?.role2 == (eRole.staff || eRole.doNotChat);
});
const addressService = new AddressService();

const components = defineComponent({
  ShowCall,
});

const props = defineProps({
  changeable: {
    type: Boolean,
    default: false,
    required: false,
  },
  distance: {
    type: String as PropType<string>,
  },
  is_normal_work: {
    type: Boolean,
    default: true,
  },
  latitude: String,
  location: String,
  longitude: String,
  name: String as PropType<string>,
  opening_hours: String,
  weekend_status: Number,
  outlet_id: Number,
});

const judgeWeekend = () => {
  const status = props.weekend_status;
  const day = new Date(Date.now()).getDay();
  switch (status) {
    case 0:
      return day >= 1 && day <= 5;
    case 1:
      return day >= 1 && day <= 6;
    case 2:
      return day >= 0 && day <= 5;
    case 3:
      return true;
    default:
      return false;
  }
};

const weekDays = computed(() => {
  const status = props.weekend_status;
  switch (status) {
    case 0:
      return "周一至周五";
    case 1:
      return "周一至周六";
    case 2:
      return "周一至周五,周日";
    case 3:
      return "全周";
    default:
      return "-";
  }
});

const dailyTime = computed(() => {
  const _time = props.opening_hours as string;
  if (!_time) return "-- - --";
  const [start, end] = transfterStrToDate(_time) as Date[];
  return dayjs(start).format("HH:mm") + "-" + dayjs(end).format("HH:mm");
});

const isOpen = computed(() => {
  const splitedStr = props.opening_hours as string;
  // 初始进入，请求中
  if (!splitedStr) return;

  // 获取到数据
  const inWeek = judgeWeekend();
  if (!inWeek) return false;
  if (!transfterStrToDate(splitedStr)) return false;
  const [start, end] = transfterStrToDate(splitedStr) as Date[];
  if (
    Date.now() > new Date(start).getTime() &&
    Date.now() < new Date(end).getTime()
  ) {
    return true;
  } else {
    return false;
  }
});
const error = "由于施工原因，本营业厅暂时不营业搬迁中";
const errorReason = ref("");
const getErrorNote = () => {
  if (props.is_normal_work) return;
  addressService
    .getNote({ id: props.outlet_id as number })
    .then((res: { data: { note: string } }) => {
      errorReason.value = res.data.note;
    });
};

getErrorNote();

let show = ref(false);
const phone = ref("");
const toCall = () => {
  authCheck(async () => {
    const ret = await UserService.getInstance().contact_custom_service({
      outLetID: props.outlet_id as number,
    });
    if (ret.code === 200) {
      phone.value = ret.data.phone;
      show.value = true;
    }
  });
};

const hidden = (v: boolean) => {
  show.value = v;
};

const handleClickNagigate = () => {
  console.log(`${props.longitude},${props.latitude}`, "show lola");
  new jsBridge().bridge_navigate(
    `${props.longitude},${props.latitude},${props.name}`,
    () => {
      show.value = false;
    }
  );
};

const handleClickChatWithClientManager = async () => {
  authCheck(async () => {
    goToChatWithOutletRoboot({
      outletId: props.outlet_id as number,
    });
  });
};

const isNotChatUser = getUserMsg()?.role2 === eRole.doNotChat;
console.log(isNotChatUser, 'show isNotChatUser');
</script>

<style lang="less" scoped>
.switch {
  right: -0.344rem;
  .location {
    width: 0.8rem;
  }
}
</style>