<template>
  <van-dropdown-menu class="titleMenu" swipe-threshold="3" :overlay="false"  active-color="#2c87c8">
    <!-- 用户 -->
    <van-dropdown-item v-if="isShowAdmin()" :title="adminTypeTitle" v-model="adminType" :options="adminList"
      @change="adminTypeChange" />
    <!-- 设备类型 -->
    <van-dropdown-item :title="machineTypeTitle" v-model="machineType" :options="machineList"
      @change="machineTypeChange" />
    <!-- 账号类型 -->
    <van-dropdown-item v-if="isShowAdminAndCompany()" :title="foreignTypeTitle" v-model="foreignType"
      :options="foreignList" @change="foreignTypeChange" />
    <!-- 公司平台 -->
    <van-dropdown-item v-if="isShowCompany()" :title="companyTypeTitle" v-model="companyType" :options="companyList"
      @change="companyTypeChange" />
    <!-- 支付方式 -->
    <van-dropdown-item :title="paymentTypeTitle" v-model="paymentType" :options="payList" @change="paymentTypeChange" />
    <!-- 设备筛选 -->
    <van-dropdown-item v-if="isShowDevice()" :title="deviceTypeTitle" v-model="deviceType" :options="deviceList"
      @change="deviceTypeChange" />
    <!-- 订单状态 -->
    <van-dropdown-item v-if="!isHome" :title="orderStatusTitle" v-model="orderStatus" :options="orderStatusList"
      @change="orderStatusChange" />
  </van-dropdown-menu>
</template>

<script>
import { onMounted, toRefs, computed, reactive, ref } from "vue";
import { getAdminList, getEquipmentList } from '@/service/typeSelectList';
import { getLoginUser } from '@/common/js/utils';
import { useI18n } from 'vue-i18n';

export default {
  name: "typeSelectList",
  components: {},
  props: {
    // 是否首页
    isHome: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const user = getLoginUser(); // 获取登录用户

    const { t } = useI18n();
    // 用户类型
    const userType = ref(user.ifForeign);
    // 支付方式类型选择
    const payTypeStatus = ref(false);
    // 支付方式
    const paymentType = ref(null);
    // 支付方式标题
    const paymentTypeTitle = computed(() => {
      if (!payTypeStatus.value) {
        return t('typeSelectList.paymentMethod'); // 未选择时的原始标题
      }
      const selected = payList.value.find(
        item => item.value === searchParams.payType
      );
      return selected ? selected.text : t('typeSelectList.paymentMethod');
    });
    // 支付方式列表
    const payList = computed(() => (userType.value === '0' ? [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.mainSweepOfAlipay'), value: 'ALIPAY_NATIVE' },
      { text: t('typeSelectList.weChatScanning'), value: 'WEIXIN_NATIVE' },
      { text: t('typeSelectList.antiScanningOfAlipay'), value: 'ALIPAY_CARD' },
      { text: t('typeSelectList.weChatBackScanning'), value: 'WEIXIN_CARD' },
      { text: t('typeSelectList.eCNYBackeScanning'), value: 'ECNY_CARD' },
    ] : [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.noPaymentRequired'), value: 0 },
      { text: t('typeSelectList.coin'), value: 1 },
      { text: t('typeSelectList.notes'), value: 2 },
      { text: t('typeSelectList.coinsNotes'), value: 3 },
      { text: t('typeSelectList.creditCard'), value: 4 },
      { text: t('typeSelectList.electronicPayment'), value: 5 },
    ]));
    // 选择支付方式
    const paymentTypeChange = (value) => {
      payTypeStatus.value = true;
      searchParams.payType = value;
      outputDate();
    }

    // 公司平台选择
    const companyTypeStatus = ref(false);
    // 公司平台
    const companyType = ref(null);
    // 公司平台标题
    const companyTypeTitle = computed(() => {
      if (!companyTypeStatus.value) {
        return t('typeSelectList.companies'); // 未选择时的原始标题
      }
      const selected = companyList.value.find(
        item => item.value === searchParams.companyType
      );
      return selected ? selected.text : t('typeSelectList.companies');
    });
    // 公司平台列表
    const companyList = computed(() => [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.sz'), value: '0' },
      { text: t('typeSelectList.sc'), value: '1' },
    ]);
    // 选择公司平台
    const companyTypeChange = (value) => {
      companyTypeStatus.value = true;
      searchParams.companyType = value;
      outputDate();
    }

    // 账号类型选择
    const foreignTypeStatus = ref(false);
    // 账号类型
    const foreignType = ref(null);
    // 账号类型标题
    const foreignTypeTitle = computed(() => {
      if (!foreignTypeStatus.value) {
        return t('typeSelectList.ifForeignes'); // 未选择时的原始标题
      }
      const selected = foreignList.value.find(
        item => item.value === userType.value
      );
      return selected ? selected.text : t('typeSelectList.ifForeignes');
    });
    // 账号地区列表
    const foreignList = computed(() => [
      { text: t('typeSelectList.mainland'), value: '0' },
      { text: t('typeSelectList.overseas'), value: '1' },
    ]);
    // 选择账号类型
    const foreignTypeChange = (value) => {
      if (userType.value != value) {
        searchParams.payType = '';
      }
      foreignTypeStatus.value = true;
      userType.value = value;
      searchParams.ifForeign = value;
      outputDate();
    }

    // 设备类型选择
    const machineTypeStatus = ref(false);
    // 设备类型
    const machineType = ref(null);
    // 设备类型标题
    const machineTypeTitle = computed(() => {
      if (!machineTypeStatus.value) {
        return t('typeSelectList.machines'); // 未选择时的原始标题
      }
      const selected = machineList.value.find(
        item => item.value === searchParams.machineType
      );
      return selected !== null ? selected.text : t('typeSelectList.machines');
    });
    // 设备类型列表
    const machineList = computed(() => [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.MG'), value: '0' },
      { text: t('typeSelectList.POP'), value: '1' },
      { text: t('typeSelectList.ICE'), value: '2' },
    ]);
    // 选择设备类型
    const machineTypeChange = (value) => {
      machineTypeStatus.value = true;
      searchParams.machineType = value;
      outputDate();
    }

    // 设备筛选
    const deviceType = ref(null);
    // 设备筛选标题
    const deviceTypeTitle = ref(t('typeSelectList.allDevices'));
    // 设备列表
    const deviceList = ref([]);
    // 获取设备列表
    const getDeviceListFun = async () => {
      const { data } = await getEquipmentList({ adminId: user.id });
      if (data.code === '00000') {
        deviceList.value = data.data.map(item => {
          return { text: item.name != null ? item.name : item.clientId, value: item.id }
        });
        deviceList.value.unshift({ text: t('typeSelectList.allDevices'), value: '' });
      }
    }
    // 设备选择
    const deviceTypeChange = (value) => {
      deviceTypeTitle.value = deviceList.value.find(deviceList => deviceList.value === value).text;
      if (deviceTypeTitle.value != t('typeSelectList.allDevices')) {
        searchParams.equipmentId = value;
      } else {
        searchParams.equipmentId = '';
      }
      outputDate();
    }

    // 订单状态选择
    const orderStatusStatus = ref(false);
    // 订单状态
    const orderStatus = ref(null);
    // 订单状态标题
    const orderStatusTitle = computed(() => {
      if (!orderStatusStatus.value) {
        return t('typeSelectList.orderStatus'); // 未选择时的原始标题
      }
      const selected = orderStatusList.value.find(
        item => item.value === searchParams.status
      );
      return selected ? selected.text : t('typeSelectList.orderStatus');
    });
    // 订单状态列表
    const orderStatusList = computed(() => [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.unpaid'), value: 0 },
      { text: t('typeSelectList.paid'), value: 1 },
      { text: t('typeSelectList.refunding'), value: 2 },
      { text: t('typeSelectList.refunded'), value: 3 },
    ]);
    // 选择订单状态
    const orderStatusChange = (value) => {
      orderStatusStatus.value = true;
      searchParams.status = value;
      outputDate();
    }

    // 商户筛选
    const adminType = ref(null);
    // 商户筛选标题
    const adminTypeTitle = ref('选择商户');
    // 商户列表
    const adminList = ref([]);
    // 获取商户列表
    const getAdminListFun = async () => {
      const { data } = await getAdminList({ adminId: user.id });
      if (data.code === '00000') {
        adminList.value = data.data.map(item => {
          return { text: item.username, value: item.id, ifForeign: item.ifForeign }
        });
      }
    }
    // 选择商户
    const adminTypeChange = (value) => {
      adminTypeTitle.value = adminList.value.find(adminList => adminList.value === value).text;
      searchParams.adminType = (adminTypeTitle.value === t('typeSelectList.allSuboUsers')) ? 'all' : '';
      searchParams.userName = (adminTypeTitle.value === t('typeSelectList.allSuboUsers')) ? 'all' : (adminTypeTitle.value === t('typeSelectList.thisMerchant')) ? user.username : adminTypeTitle.value;
      searchParams.adminId = (value === ('this' || 'all') ? null : value);
      searchParams.ifForeign = adminList.value.find(adminList => adminList.value === value).ifForeign;
      userType.value = searchParams.ifForeign;
      outputDate();
    }


    // 筛选参数
    let searchParams = reactive({
      userName: user.username,
      adminType: '',
      clientId: '',
      payType: '',
      productNo: '',
      equipmentId: '',
      companyType: '',
      machineType: '',
      ifForeign: '',
      adminId: user.id,
    });


    // 是否商户
    const isShowAdmin = () => { return (user && user.type === 4); }
    // 是否管理员
    const isShowCompany = () => { return (user && user.type === 0); }
    // 是否管理员和公司人员
    const isShowAdminAndCompany = () => { return (user && user.type < 2); }
    // 是否商户及子账户
    const isShowDevice = () => { return (user && (user.type === 2 || user.type === 3)); }
    // 返回参数
    const outputDate = () => { emit('upselectdata', searchParams); }

    onMounted(() => {
      getAdminListFun();
      getDeviceListFun();
    });
    return {
      ...toRefs(searchParams),
      // 是否商户
      isShowAdmin,
      // 是否管理员
      isShowCompany,
      // 是否商户及子账户
      isShowDevice,
      // 是否管理员和公司人员
      isShowAdminAndCompany,
      // 商家选择
      adminList,
      adminType,
      adminTypeTitle,
      adminTypeChange,

      // 订单状态
      orderStatusList,
      orderStatus,
      orderStatusTitle,
      orderStatusChange,

      // 设备选择
      deviceList,
      deviceType,
      deviceTypeTitle,
      deviceTypeChange,

      // 设备类型选择
      machineList,
      machineType,
      machineTypeTitle,
      machineTypeChange,

      // 账号类型选择
      foreignList,
      foreignType,
      foreignTypeTitle,
      foreignTypeChange,

      // 公司平台选择
      companyList,
      companyType,
      companyTypeTitle,
      companyTypeChange,

      // 支付方式选择
      payList,
      paymentType,
      paymentTypeTitle,
      paymentTypeChange,
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/common/style/common.less";

.titleMenu {
  --card-bg: #ffffff;
  --card-radius: 12px;
  --card-shadow: 0 4px 20px rgba(77, 106, 221, 0.1);
  --title-color: #404d74;
  --active-color: #2c87c8;
  --border-color: #eef0fa;
  --item-padding: 16px 24px;

  margin: 10px;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
  overflow: visible;
  /* 修复裁剪问题 */
  position: relative;
  /* 创建定位上下文 */

  :deep(.van-dropdown-menu__bar) {
    height: auto;
    background: transparent;
    padding: 0px 5px;
  }

  :deep(.van-dropdown-menu__item) {
    flex: 1;
    min-width: 82px;
    position: relative;
    padding: 8px 0px;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 24px;
      background: var(--border-color);
    }
  }

  :deep(.van-dropdown-menu__title) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    color: var(--title-color);
    font-size: 10px;
    font-weight: 500;
    transition: all 0.5s;
    width: auto !important;

    &::after {
      content: '';
      position: relative !important;
      right: 0 !important;
      top: 0 !important;
      transform: none !important;
      display: inline-block;
      width: 0;
      height: 0;
      border: 5px solid;
      border-color: var(--title-color) transparent transparent;
      margin-left: 8px;
      margin-top: 3px;
      order: 1;
      transition: transform 0.5s;
    }

    &--active {
      color: var(--active-color);

      &::after {
        border-color: var(--active-color) transparent transparent;
        transform: rotate(-180deg) translateY(2px) !important;
      }
    }
  }

  :deep(.van-dropdown-item) {
    position: static;

    &__content {
      top: calc(100% + 4px) !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      border-radius: var(--card-radius);
      box-shadow: var(--card-shadow);
      border: 0;
      max-height: 60vh;
      z-index: 9999;
      /* 确保层级 */
    }
  }

  @media (max-width: 480px) {
    margin: 10px;
    border-radius: 8px;

    :deep(.van-dropdown-menu__title) {
      padding: 2px 4px !important;
      font-size: 12px;

      &::after {
        margin-left: 2px;
        margin-top: 4px;
        border-width: 4px;
      }
    }
  }
}
</style>