<template>
  <div class="selectListBox flex-col">
    <div class="main6 flex-row">
      <div v-if="isShowAdmin()" class="selectIconBox" @click="adminShow()">
        <div class="main7 flex-col"></div>
        <span class="txt4">{{
          adminType === "all" ? $t('typeSelectList.allSuboUsers') : userName
        }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="adminTypeShow" position="bottom">
        <van-picker :title="$t('typeSelectList.merchant')" :columns="adminList" @confirm="adminConfirm"
          @cancel="adminCancel" />
      </van-popup>
      <div v-if="isShowCompany()" class="selectIconBox" @click="companyShow()">
        <div class="section3 flex-col"></div>
        <span class="txt4">{{ companies }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="companyType" position="bottom">
        <van-picker :title="$t('typeSelectList.companies')" :columns="companyList" @confirm="companyConfirm"
          @cancel="companyCancel" />
      </van-popup>
      <div v-if="isShowAdminAndCompany()" class="selectIconBox" @click="foreignShow()">
        <div class="section3 flex-col"></div>
        <span class="txt4">{{ ifForeignes }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="ifForeign" position="bottom">
        <van-picker :title="$t('typeSelectList.ifForeignes')" :columns="foreignList" @confirm="foreignConfirm"
          @cancel="foreignCancel" />
      </van-popup>
      <div class="selectIconBox" @click="payShow()">
        <div class="section3 flex-col"></div>
        <span class="txt4">{{ paymentMethod }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="payType" position="bottom">
        <van-picker :title="$t('typeSelectList.paymentMethod')" :columns="payList" @confirm="payConfirm"
          @cancel="payCancel" />
      </van-popup>
      <div v-if="isShowtrading()" class="selectIconBox" @click="tradingShow()">
        <div class="layer3 flex-col"></div>
        <span class="txt4">{{ alltradings }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="tradingType" position="bottom">
        <van-picker :title="$t('typeSelectList.alltradings')" :columns="tradingList" @confirm="tradingConfirm"
          @cancel="tradingCancel" />
      </van-popup>
      <div class="selectIconBox" @click="machineShow()">
        <div class="bd2 flex-col"></div>
        <span class="txt4">{{ machines }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="machineType" position="bottom">
        <van-picker :title="$t('typeSelectList.machineType')" :columns="machineList" @confirm="machineConfirm"
          @cancel="machineCancel" />
      </van-popup>
      <!-- <div class="selectIconBox" @click="productShow()">
        <div class="bd2 flex-col"></div>
        <span class="txt4">{{$t('typeSelectList.commodityType')}}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="productType" position="bottom">
        <van-picker
          :title="$t('typeSelectList.commodityType')"
          :columns="productList"
          @confirm="productConfirm"
          @cancel="productCancel"
        />
      </van-popup> -->
      <!-- 订单状态 -->
      <div v-if="!isHome" class="selectIconBox" @click="orderStatusShow()">
        <div class="section3 flex-col"></div>
        <span class="txt4">{{ orderStatusName }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="orderStatus" position="bottom">
        <van-picker :title="$t('typeSelectList.orderStatus')" :columns="orderStatusList" @confirm="orderStatusConfirm"
          @cancel="orderStatusCancel" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { onMounted, toRefs, 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 { t } = useI18n();
    // 支付方式
    const paymentMethod = ref(t('typeSelectList.paymentMethod'));
    // 账号地区
    const ifForeignes = ref(t('typeSelectList.ifForeignes'));
    // 公司平台
    const companies = ref(t('typeSelectList.companies'));
    // 公司平台
    const machines = ref(t('typeSelectList.machines'));
    // 所有设备
    const alltradings = ref(t('typeSelectList.alltradings'));
    // 订单状态
    const orderStatusName = ref(t('typeSelectList.orderStatus'));
    const user = getLoginUser(); // 获取登录用户
    let searchParams = reactive({
      userName: user.username,
      adminType: '',
      clientId: '',
      payType: '',
      productNo: '',
      equipmentId: '',
      companyType: '',
      machineType: '',
      ifForeign: '',
    });
    // 商户选择
    const adminTypeShow = ref(false);
    const adminShow = () => { adminTypeShow.value = true; };
    const adminList = ref([]);
    const adminConfirm = ({ selectedOptions }) => {
      console.log('selectedOptions[0].text', selectedOptions[0].text)
      searchParams.adminType = (selectedOptions[0].text === t('typeSelectList.allSuboUsers')) ? 'all' : '';
      searchParams.userName = (selectedOptions[0].text === t('typeSelectList.allSuboUsers')) ? 'all' : (selectedOptions[0].text === t('typeSelectList.thisMerchant')) ? user.username : selectedOptions[0].text;
      adminTypeShow.value = false;
      console.log('searchParams.userName', searchParams.userName)
      outputDate();
    }
    const adminCancel = () => { adminTypeShow.value = false; }
    // 获取商家列表
    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 }
        });
        adminList.value.unshift({ text: t('typeSelectList.allSuboUsers'), value: 'all' });
        adminList.value.unshift({ text: t('typeSelectList.thisMerchant'), value: 'this' });
      }
    }
    // 账号地区选择
    const ifForeign = ref(false);
    const foreignShow = () => { ifForeign.value = true; };
    const foreignList = [
      { text: t('typeSelectList.mainland'), value: '0' },
      { text: t('typeSelectList.overseas'), value: '1' },
    ];
    // const foreignList = ref([
    //   t('typeSelectList.mainland'),
    //   t('typeSelectList.overseas'),
    // ]);
    const foreignConfirm = ({ selectedOptions }) => {
      console.log(selectedOptions[0].text);
      ifForeignes.value = selectedOptions[0].text;
      // const selectPay = foreignList.filter(i => i.text === currentValue);
      // if (selectPay && selectPay.length > 0) { searchParams.ifForeign = selectPay[0].value; }
      searchParams.ifForeign = selectedOptions[0].value;
      ifForeign.value = false;
      outputDate();
    }
    const foreignCancel = () => { ifForeign.value = false; }
    // 公司平台选择
    const companyType = ref(false);
    const companyShow = () => { companyType.value = true; };
    const companyList = [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.sz'), value: '0' },
      { text: t('typeSelectList.sc'), value: '1' },
    ];
    // const companyList = ref([
    //   t('typeSelectList.whole'),
    //   t('typeSelectList.sz'),
    //   t('typeSelectList.sc'),
    // ]);
    const companyConfirm = ({ selectedOptions }) => {
      companies.value = selectedOptions[0].text;
      // const selectPay = companyList.filter(i => i.text === currentValue);
      // if (selectPay && selectPay.length > 0) { searchParams.companyType = selectPay[0].value; }
      searchParams.companyType = selectedOptions[0].value;
      companyType.value = false;
      outputDate();
    }
    const companyCancel = () => { companyType.value = false; }
    // 设备类型选择
    const machineType = ref(false);
    const machineShow = () => { machineType.value = true; };
    const machineList = [
      { text: t('typeSelectList.whole'), value: '' },
      { text: t('typeSelectList.MG'), value: '0' },
      { text: t('typeSelectList.POP'), value: '1' },
    ];
    // const machineList = ref([
    //   t('typeSelectList.whole'),
    //   t('typeSelectList.MG'),
    //   t('typeSelectList.POP'),
    // ]);
    const machineConfirm = ({ selectedOptions }) => {
      machines.value = selectedOptions[0].text;
      // const selectPay = machineList.filter(i => i.text === currentValue);
      // if (selectPay && selectPay.length > 0) { searchParams.machineType = selectPay[0].value; }
      searchParams.machineType = selectedOptions[0].value;
      machineType.value = false;
      outputDate();
    }
    const machineCancel = () => { machineType.value = false; }
    // 支付方式选择
    const payType = ref(false);
    const payShow = () => { payType.value = true; };
    const payList = user.ifForeign === '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.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 payList = ref(
    //   user.ifForeign === '0' ?
    //     [
    //       t('typeSelectList.whole'),
    //       t('typeSelectList.mainSweepOfAlipay'),
    //       t('typeSelectList.weChatScanning'),
    //       t('typeSelectList.antiScanningOfAlipay'),
    //       t('typeSelectList.weChatBackScanning')
    //     ]
    //     : [
    //       t('typeSelectList.whole'),
    //       t('typeSelectList.noPaymentRequired'),
    //       t('typeSelectList.coin'),
    //       t('typeSelectList.notes'),
    //       t('typeSelectList.coinsNotes'),
    //       t('typeSelectList.creditCard'),
    //       t('typeSelectList.electronicPayment')
    //     ]
    // );
    const payConfirm = ({ selectedOptions }) => {
      paymentMethod.value = selectedOptions[0].text;
      // const selectPay = payList.filter(i => i.text === selectedOptions);
      // if (selectPay && selectPay.length > 0) { searchParams.payType = selectPay[0].value; }
      searchParams.payType = selectedOptions[0].value;
      payType.value = false;
      outputDate();
    }
    const payCancel = () => { payType.value = false; }
    // 设备选择
    const tradingType = ref(false);
    const tradingShow = () => { tradingType.value = true; };
    const tradingList = ref([]);
    // const equipmentSourceList = ref([]);
    const tradingConfirm = ({ selectedOptions }) => {
      alltradings.value = selectedOptions[0].text;
      console.log("selectedOptions", selectedOptions)
      if (selectedOptions[0].name != t('typeSelectList.alltradings')) {
        const selectEquipment = tradingList.value.filter(i => i.text === selectedOptions[0].text);
        if (selectEquipment && selectEquipment.length > 0) {
          searchParams.equipmentId = selectEquipment[0].value;
        }
      } else {
        searchParams.equipmentId = '';
      }
      tradingType.value = false;
      outputDate();
    }
    const tradingCancel = () => { tradingType.value = false; }
    // 获取设备列表
    const gettradingListFun = async () => {
      const { data } = await getEquipmentList({ adminId: user.id });
      if (data.code === '00000') {
        // tradingList.value = data.data.map(item => {
        //   return item.name
        // });
        tradingList.value = data.data.map(item => {
          return { text: item.name != null ? item.name : item.clientId, value: item.id }
        });
        tradingList.value.unshift({ text: t('typeSelectList.alltradings'), value: '' });
        // tradingList.value.unshift(t('typeSelectList.alltradings'));
        // equipmentSourceList.value = data.data;
        // equipmentSourceList.value.unshift({ text: t('typeSelectList.alltradings'), value: null });
      }
    }
    // 商品选择
    // const productType = ref(false);
    // const productShow = () => { productType.value = true; };
    // const productList = ref([]);
    // const productSourceList = ref([]);
    // const productConfirm = (currentValue) => {
    //   const selectEquipment = equipmentSourceList.value.filter(i => i.productName === currentValue);
    //   if (selectEquipment && selectEquipment.length > 0) {
    //     searchParams.productNo = selectEquipment[0].no;
    //   }
    //   productType.value = false;
    //   outputDate();
    // }
    // const productCancel = () => { productType.value = false; }
    // 获取商品列表
    // const getProductListFun = async () => {
    //   const { data } = await getProductList({ adminId: user.id });
    //   if (data.code) {
    //     productList.value = data.data.map(item => {
    //       return item.productName
    //     });
    //     console.log('productList', productList)
    //     productSourceList.value = data.data;
    //   }
    // }
    // 是否商户
    const isShowAdmin = () => { return (user && user.type === 2); }
    // 是否管理员
    const isShowCompany = () => { return (user && user.type === 0); }
    // 是否管理员和公司人员
    const isShowAdminAndCompany = () => { return (user && user.type < 2); }
    // 是否商户及子账户
    const isShowtrading = () => { return (user && (user.type === 2 || user.type === 3)); }
    // 返回参数
    const outputDate = () => { emit('upselectdata', searchParams); }
    // 订单状态弹窗
    const orderStatus = ref(false);
    const orderStatusShow = () => { orderStatus.value = true; };
    // const orderStatusList = ref([
    //   t('typeSelectList.whole'),
    //   t('typeSelectList.unpaid'),
    //   t('typeSelectList.paid'),
    //   t('typeSelectList.refunding'),
    //   t('typeSelectList.refunded'),
    // ]
    // );
    const orderStatusList = [
      { 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 orderStatusConfirm = ({ selectedOptions }) => {
      orderStatusName.value = selectedOptions[0].text;
      // const selectPay = orderStatusList.filter(i => i.text === currentValue);
      // if (selectPay && selectPay.length > 0) { searchParams.status = selectPay[0].value; }
      searchParams.status = selectedOptions[0].value;
      orderStatus.value = false;
      outputDate();
    }
    const orderStatusCancel = () => { orderStatus.value = false; }

    onMounted(() => {
      getAdminListFun();
      gettradingListFun();
      // getProductListFun();
    });
    return {
      ...toRefs(searchParams),
      // 是否商户
      isShowAdmin,
      // 是否管理员
      isShowCompany,
      // 是否商户及子账户
      isShowtrading,
      // 是否管理员和公司人员
      isShowAdminAndCompany,
      // 商家选择
      adminTypeShow, adminList, adminShow, adminConfirm, adminCancel,
      // 支付方式选择
      payType, payList, payShow, payConfirm, payCancel,
      // 国内和海外选择
      ifForeign, foreignList, foreignShow, foreignConfirm, foreignCancel,
      // 公司平台选择
      companyType, companyList, companyShow, companyConfirm, companyCancel,
      // 设备类型选择
      machineType, machineList, machineShow, machineConfirm, machineCancel,
      // 设备选择
      tradingType, tradingList, tradingShow, tradingConfirm, tradingCancel,
      // 商品选择
      // productType, productList, productShow, productConfirm, productCancel,
      // 订单状态
      orderStatusShow, orderStatus, orderStatusList, orderStatusConfirm, orderStatusCancel,
      paymentMethod,
      ifForeignes,
      companies,
      machines,
      alltradings,
      orderStatusName,
    };
  },
};
</script>

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