<template>
  <a-card title="支付配置" class="general-card">
    <template #extra>
      <a-button size="small" type="primary" @click="showDeployModal(0)">
        <template #icon>
          <icon-plus />
        </template>
      </a-button>
    </template>
    <a-space direction="vertical" size="large" fill>
      <div v-for="(data, index) in renderData" :key="index">
        <a-descriptions bordered>
          <template #title>
            <div>支付类型：{{ data.singleRoadName }}</div>
            <div>
              <a-space>
                <a-button
                  status="success"
                  size="small"
                  @click="() => copyClipboard(data.roadSetting)"
                >
                  <template #icon>
                    <icon-copy />
                  </template>
                </a-button>
                <a-button
                  status="warning"
                  size="small"
                  @click="showDeployModal(data.id)"
                >
                  <template #icon>
                    <icon-edit />
                  </template>
                </a-button>
                <a-button
                  status="danger"
                  size="small"
                  @click="
                    deleteDeploy(
                      data.merchantUid,
                      data.payType,
                      data.singleRoadUid
                    )
                  "
                >
                  <template #icon>
                    <icon-delete />
                  </template>
                </a-button>
              </a-space>
            </div>
          </template>
          <a-descriptions-item label="平台净利率" :span="3">
            <a-descriptions
              class="platformrate"
              :column="4"
              layout="inline-horizontal"
              :bordered="false"
            >
              <a-descriptions-item
                v-for="(rate, rateIndex) in singleRateConvrtToMap(
                  data.singleRoadPlatformRate
                )"
                :key="rateIndex"
                :label="rate.label"
              >
                <a-space size="mini">
                  <span>
                    {{ rate.value }}
                  </span>
                  <a-button
                    v-if="rate.isLink"
                    size="small"
                    status="success"
                    @click="
                      openLink(
                        rate.label,
                        data.singleRoadPlatformRate[Math.floor(rateIndex / 8)]
                          .isLinkSingle,
                        rate.value
                      )
                    "
                  >
                    <template #icon>
                      <icon-copy />
                    </template>
                  </a-button>
                </a-space>
              </a-descriptions-item>
            </a-descriptions>
          </a-descriptions-item>
          <a-descriptions-item label="自动结算">
            {{ data.autoSettle === 'yes' ? '✔️' : '❌' }}
          </a-descriptions-item>
          <a-descriptions-item label="自动代付">
            {{ data.autoPayfor === 'yes' ? '✔️' : '❌' }}
          </a-descriptions-item>
          <a-descriptions-item label="代理净利率">
            {{ data.singleRoadAgentRate }}
          </a-descriptions-item>
          <a-descriptions-item label="轮询通道">
            {{ data.rollRoadName }}
          </a-descriptions-item>
          <a-descriptions-item label="轮询平台净利率">
            {{ data.rollRoadPlatformRate }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag
              :color="data.status === 'active' ? 'green' : 'grey'"
              size="small"
            >
              {{ data.status === 'active' ? '激活' : '冻结' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="轮询策略">
            {{ data.submitStrategy === 'DIRECT' ? '直连' : '轮询' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-space>
  </a-card>
  <add-deploy
    v-model:visible="deployState"
    :uid="props.uid"
    :deploy-id="deployId"
    @close="closeDeploy"
  />
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
import {
  deleteMerchantDeploy,
  getmerchantDeployList,
  merchantDeployRate,
  simpleArray
} from '@/api/merchant-deploy';
import { isNumber } from '@/utils/is';
import AddDeploy from './deploy/add-deploy.vue';
import { openExternalLink } from './deploy/components/data';
import { useClipboard } from '@vueuse/core';
import { Message, Notification } from '@arco-design/web-vue';

const props = defineProps<{
  uid: string;
}>();

const renderData = ref([]);
const deployState = ref(false);
const deployId = ref(0);

const fetchData = async (uid: string) => {
  const {
    data: { list }
  } = await getmerchantDeployList({ merchantUid: uid });
  renderData.value = list;
};

const closeDeploy = () => {
  fetchData(props.uid);
};

const showDeployModal = (id?: number) => {
  deployState.value = true;
  if (isNumber(id)) {
    deployId.value = id;
  }
};

const deleteDeploy = async (
  uid: string,
  payType: string,
  singleRoadUid: string
) => {
  await deleteMerchantDeploy({
    merchantUid: uid,
    payType,
    singleRoadUid
  });
  fetchData(uid);
};

const copyClipboard = async (roadSetting: string) => {
  const { copy } = useClipboard();
  await copy(roadSetting);
  Notification.success(`${roadSetting}`);
};

const openLink = async (
  platformLabel: string,
  isLinkSingle: boolean,
  linkID: string
) => {
  const { copy } = useClipboard();
  const link = openExternalLink(platformLabel, isLinkSingle, linkID);
  await copy(link);
  Message.success(`复制成功，链接${link}`);
};

const singleRateConvrtToMap = (items: merchantDeployRate[]): simpleArray[] => {
  const itemArray: simpleArray[] = [];
  items.sort((a, b) => {
    if (a.factLabel !== b.factLabel) {
      return a.factLabel - b.factLabel;
    }
    return a.sort - b.sort;
  });
  items.forEach(item => {
    itemArray.push({
      label: '售价',
      value: item.factLabel
    });
    itemArray.push({
      label: '面额',
      value: item.showLabel
    });
    itemArray.push({
      label: '是否单独',
      value: item.isLinkSingle
    });
    itemArray.push({
      label: '利率',
      value: item.value
    });
    itemArray.push({
      label: '排序',
      value: item.sort
    });
    itemArray.push({
      label: '平台',
      value: item.platformLabel
    });
    itemArray.push({
      label: '链接',
      value: item.linkID,
      isLink: true
    });
    itemArray.push({
      label: '备注',
      value: ''
    });
  });
  return itemArray;
};

// Fetch data when the component is mounted or props change
watchEffect(() => {
  fetchData(props.uid);
});

// 定义一个expose
defineExpose({
  fetchData
});
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-title) {
  display: flex;
  justify-content: space-between;
}

.platformrate :deep(.arco-descriptions-body) {
  border: 0;

  td {
    padding-left: 0 !important;
    background-color: transparent !important;
    border-right: 0 !important;
  }
}
</style>
