<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" ? userName : $t('typeSelectList.thisMerchant')
        }}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="adminType" position="bottom">
        <van-picker
          title="{{$t('typeSelectList.merchant')}}"
          :columns="adminList"
          @confirm="adminConfirm"
          @cancel="adminCancel"
        />
      </van-popup>
      <div class="selectIconBox" @click="payShow()">
        <div class="section3 flex-col"></div>
        <span class="txt4">{{$t('typeSelectList.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="isShowDevice()" class="selectIconBox" @click="deviceShow()">
        <div class="layer3 flex-col"></div>
        <span class="txt4">{{$t('typeSelectList.allDevices')}}</span>
        <div class="layer1 flex-col"></div>
      </div>
      <van-popup v-model:show="deviceType" position="bottom">
        <van-picker
          title="{{$t('typeSelectList.allDevices')}}"
          :columns="deviceList"
          @confirm="deviceConfirm"
          @cancel="deviceCancel"
        />
      </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>
  </div>
</template>

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

export default {
  name: "typeSelectList",
  components: {},
  setup(props, { emit }) {
    const { t } = useI18n();
    const user = getLoginUser(); // 获取登录用户
    let searchParams = reactive({
      userName: '',
      adminType: '',
      clientId: '',
      payType: '',
      productNo: ''
    });
    // 商户选择
    const adminType = ref(false);
    const adminShow = () => { adminType.value = true; };
    const adminList = ref([]);
    const adminConfirm = (currentValue) => {
      searchParams.adminType = (currentValue === t('typeSelectList.thisMerchant')) ? '' : 'all';
      searchParams.userName = (currentValue === t('typeSelectList.thisMerchant')) ? '' : currentValue;
      adminType.value = false;
      outputDate();
    }
    const adminCancel = () => { adminType.value = false; }
    // 获取商家列表
    const getAdminListFun = async () => {
      const { data } = await getAdminList({adminId: user.id});
      if (data.code === '00000') {
        adminList.value = data.data.map(item => {
          return item.username
        });
        adminList.value.unshift(t('typeSelectList.thisMerchant'));
      }
    }
    // 支付方式选择
    const payType = ref(false);
    const payShow = () => { payType.value = true; };
    const paySouerList = [
      { text: t('typeSelectList.whole'), values: null },
      { text: t('typeSelectList.noPaymentRequired'), values: 0 },
      { text: t('typeSelectList.coin'), values: 1 },
      { text: t('typeSelectList.notes'), values: 2 },
      { text: t('typeSelectList.coinsNotes'), values: 3 },
      { text: t('typeSelectList.creditCard'), values: 4 },
      { text: t('typeSelectList.electronicPayment'), values: 5 },
      { text: t('typeSelectList.mainSweepOfAlipay'), values: 'ALIPAY_NATIVE' },
      { text: t('typeSelectList.weChatScanning'), values: 'WEIXIN_NATIVE' },
      { text: t('typeSelectList.antiScanningOfAlipay'), values: 'ALIPAY_CARD' },
      { text: t('typeSelectList.weChatBackScanning'), values: 'WEIXIN_CARD' }
    ];
    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 = (currentValue) => {
      const selectPay = paySouerList.filter(i => i.text === currentValue);
      if (selectPay && selectPay.length > 0) { searchParams.payType = selectPay[0].values; }
      payType.value = false;
      outputDate();
    }
    const payCancel = () => { payType.value = false; }
    // 设备选择
    const deviceType = ref(false);
    const deviceShow = () => { deviceType.value = true; };
    const deviceList = ref([]);
    const equipmentSourceList = ref([]);
    const deviceConfirm = (currentValue) => {
      const selectEquipment = equipmentSourceList.value.filter(i => i.name === currentValue);
      if (selectEquipment && selectEquipment.length > 0) {
        searchParams.clientId = selectEquipment[0].id;
      }
      deviceType.value = false;
      outputDate();
    }
    const deviceCancel = () => { deviceType.value = false; }
    // 获取设备列表
    const getDeviceListFun = async () => {
      const { data } = await getEquipmentList({adminId: user.id});
      if (data.code === '00000') {
        deviceList.value = data.data.map(item => {
          return item.name
        });
        deviceList.value.unshift(t('typeSelectList.allDevices'));
        equipmentSourceList.value = data.data;
        equipmentSourceList.value.unshift({name: t('typeSelectList.allDevices'), id: 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 === '00000') {
        productList.value = data.data.map(item => {
          return item.productName
        });
        productSourceList.value = data.data;
      }
    }
    // 是否商户
    const isShowAdmin = () => { return (user && user.type === 2); }
    // 是否商户及子账户
    const isShowDevice = () => { return (user && (user.type === 2 || user.type === 3)); }
    // 返回参数
    const outputDate = () => { emit('upselectdata', searchParams); }
    onMounted(() => {
      getAdminListFun();
      getDeviceListFun();
      getProductListFun();
    });
    return {
      ...toRefs(searchParams),
      // 是否商户
      isShowAdmin,
      // 是否商户及子账户
      isShowDevice,
      // 商家选择
      adminType, adminList, adminShow, adminConfirm, adminCancel,
      // 支付方式选择
      payType, payList, payShow, payConfirm, payCancel,
      // 设备选择
      deviceType, deviceList, deviceShow, deviceConfirm, deviceCancel,
      // 商品选择
      productType, productList, productShow, productConfirm, productCancel
    };
  },
};
</script>

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