<!-- 
  TODO 设置客户支付方式
 -->
<template>
  <SysDialog
    class="set-payment-type"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <div class="payment-type" v-show="isPaymentPlatformList">
        <el-form
          ref="setPaymentTypeFormRef"
          :model="setPaymentTypeForm"
        >
          <el-form-item prop="paymentPlatformList">
            <el-checkbox-group
              v-model="setPaymentTypeForm.paymentPlatformList"
            >
              <el-checkbox
                v-for="item in paymentPlatformList"
                :key="item.value"
                :label="item.value"
                border
              >
                <div class="pay-logo-warp">
                  <img
                    width="24"
                    :src="getLogo(Number(item.value))"
                    :alt="item.label"
                  />
                  <div class="title">
                    {{ item.label }}
                  </div>
                </div>
              </el-checkbox>
              <!-- <el-checkbox
        label="gz"
        border
      >
        <div class="pay-logo-warp">
          <img
            width="24"
            src="@/assets/gsLogo.png"
            alt="工商银行"
          >
          <div class="title">
            工商银行
          </div>
        </div>
      </el-checkbox>
      <el-checkbox
        label="sz"
        border
      >
        <div class="pay-logo-warp">
          <img
            width="24"
            src="@/assets/zgLogo.png"
            alt="中国银行"
          >
          <div class="title">
            中国银行
          </div>
        </div>
      </el-checkbox> -->
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="!isPaymentPlatformList">
        <el-empty description="暂无数据！" />
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useDropDownData } from "@/hooks/useDropDownData";
import zfbLogo from "@/assets/zfbLogo.png";
import wxLogo from "@/assets/wxLogo.png";
import { CustomerPaymentTypeParam } from "@/api/paymentType/paymentTypeModle";
import { ref, reactive, computed } from "vue";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { isArrayLength, isNumber } from "@/utils/is";
import { api_customerGetPaymentType } from "@/api/paymentType/paymentType";
import { resCodeSuccess } from "@/utils/useReturnData";

const emit = defineEmits(["onSetPaymentType"]);
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "设置支付方式",
  width: "520",
  height: 0,
});
const { paymentPlatformList } = useDropDownData();
const setPaymentTypeForm = reactive<CustomerPaymentTypeParam>({
  oldIdList: [],
  paymentPlatformList: [],
});
// const setPaymentTypeState = reactive({
//   rules: {
//     paymentPlatformList: [
//       { required: true, message: '请选择支付方式', trigger: 'change' },
//     ]
//   }
// })
const isPaymentPlatformList = computed(() => {
  return isArrayLength(paymentPlatformList.value)
})
const setPaymentTypeFormRef = ref()
// 根据value值获取当前图标
const getLogo = (val: number) => {
  switch (val) {
    case 1:
      return zfbLogo;
    case 2:
      return wxLogo;
    default:
      return zfbLogo;
  }
};
// 校验表单
const { formValidate, resetForm } = useEleFormValidate();
// 显示、隐藏
const show = (oldId) => {
  oldId && oldId.length > 0 ? 
  setPaymentTypeForm.oldIdList = oldId : 
  setPaymentTypeForm.oldIdList = [oldId]
  if (isNumber(oldId)) {
    api_customerGetPaymentType({ oldId }).then((res) => {
      if (resCodeSuccess(res) && res.data.length > 0) {
        const paymentTypeList = res.data.map(item => item.paymentType)
        setPaymentTypeForm.paymentPlatformList = Array.from(new Set(paymentTypeList))
      }
    })
  }
  onShow();
};
const onclose = () => {
  setPaymentTypeForm.oldIdList = [];
  setPaymentTypeForm.paymentPlatformList = [];
  resetForm(setPaymentTypeFormRef.value)
  onClose();
};

// 提交
const confirm = async () => {
  const isValidate = await formValidate(setPaymentTypeFormRef.value);
  if (!isValidate) return;
  setLoading(true)
  emit("onSetPaymentType", setPaymentTypeForm, onclose, setLoading);
};

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.set-payment-type {
  .payment-type {
    padding: 10px 46px;
    // :deep(.el-form-item__content) {
    //   display: flex;
    //   justify-content: center;
    // }
    :deep(.el-checkbox) {
      height: 48px;
      line-height: 48px;
      padding: 0 20px;
    }
    .pay-logo-warp {
      display: flex;
      align-items: center;
      margin-left: 5px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        margin-left: 5px;
      }
    }
  }
}
</style>
