<template>
  <a-table
    :data="tableData"
    :columns="columns"
    class="rate-table"
    :pagination="false"
    column-resizable
    :bordered="{ cell: true }"
  >
    <template #sort="{ rowIndex }">
      <a-input-number v-model="tableData[rowIndex].sort" required />
    </template>
    <template #factLabel="{ rowIndex }">
      <a-input-number
        v-model="tableData[rowIndex].factLabel"
        :precision="2"
        required
      />
    </template>
    <template #showLabel="{ rowIndex }">
      <a-input-number
        v-model="tableData[rowIndex].showLabel"
        :precision="2"
        required
      />
    </template>
    <template #value="{ rowIndex }">
      <a-input-number
        v-model="tableData[rowIndex].value"
        :precision="2"
        required
      />
    </template>
    <template #platformLabel="{ rowIndex }">
      <a-input v-model="tableData[rowIndex].platformLabel" required />
    </template>
    <template #isLinkSingle="{ rowIndex }">
      <a-select v-model="tableData[rowIndex].isLinkSingle" required>
        <a-option :value="true" label="是" />
        <a-option :value="false" label="否" />
      </a-select>
    </template>
    <template #linkID="{ rowIndex }">
      <a-input v-model="tableData[rowIndex].linkID" required />
    </template>
    <template #action="{ rowIndex }">
      <a-space size="mini">
        <a-button size="small" status="warning" @click="addRecord(rowIndex)">
          <template #icon>
            <icon-plus />
          </template>
        </a-button>
        <a-tooltip content="复制链接">
          <a-button size="small" status="success" @click="openLink(rowIndex)">
            <template #icon>
              <icon-copy />
            </template>
          </a-button>
        </a-tooltip>
        <a-button size="small" status="danger" @click="deleteRecord(rowIndex)">
          <template #icon>
            <icon-delete />
          </template>
        </a-button>
      </a-space>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { merchantDeployRate } from '@/api/merchant-deploy';
import { openExternalLink } from './data';
import { useClipboard } from '@vueuse/core';
import { TableColumnData } from '@arco-design/web-vue/es/table';
import { Message } from '@arco-design/web-vue';
import { watch, watchEffect } from 'vue';

const generateTableData = () => {
  return {
    factLabel: 0,
    showLabel: 0,
    platformLabel: '',
    isLinkSingle: true,
    value: 0,
    sort: 0,
    linkID: ''
  };
};
const tableData = defineModel<merchantDeployRate[]>();

const { copy } = useClipboard();

const columns: TableColumnData[] = [
  {
    title: '排序',
    dataIndex: 'sort',
    slotName: 'sort'
  },
  {
    title: '面值',
    dataIndex: 'showLabel',
    slotName: 'showLabel'
  },
  {
    title: '售价',
    dataIndex: 'factLabel',
    slotName: 'factLabel'
  },
  {
    title: '平台',
    dataIndex: 'platformLabel',
    slotName: 'platformLabel'
  },
  {
    title: '链接是否单独',
    dataIndex: 'isLinkSingle',
    slotName: 'isLinkSingle'
  },
  {
    title: '折扣率',
    dataIndex: 'value',
    slotName: 'value'
  },
  {
    title: '商品链接',
    dataIndex: 'linkID',
    slotName: 'linkID'
  },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action'
  }
];

const addRecord = (rowIndex: number) => {
  tableData.value.splice(rowIndex + 1, 0, generateTableData());
};

watchEffect(() => {
  if (tableData.value?.length === 0) {
    tableData.value.push(generateTableData());
  }
});

const openLink = async (rowIndex: number) => {
  const { platformLabel, isLinkSingle, linkID } = tableData.value[rowIndex];
  const link = openExternalLink(platformLabel, isLinkSingle, linkID);
  await copy(link);
  Message.info(`复制链接成功，地址：${link}`);
};

const deleteRecord = (rowIndex: number) => {
  tableData.value.splice(rowIndex, 1);
};
</script>

<style lang="less"></style>
