<template>
  <div class="app-task">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      row-key="orderId"
      :columns="columns"
      :datasource="datasource"
      :customRow="customRow"
      :scroll="{ x: 2400 }"
      tool-class="ele-toolbar-form"
      class="sys-org-table"
    >
      <template #toolbar>
        <ShopOrderOrderSearch @add="openEdit" @remove="removeBatch"/>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'type'">
          <a-tag v-if="record.type === 0">续费</a-tag>
          <a-tag v-if="record.type === 1" color="orange">新购</a-tag>
        </template>
        <template v-if="column.key === 'domain'">
          <a :href="`http://${record.domain}`" target="_blank">{{ record.domain }}</a>
        </template>
        <template v-if="column.key === 'password'">
          <a-tooltip title="点击查看密码" class="cursor-pointer" @click="showPassword">{{password ? decrypt(record.password) : '******'}}</a-tooltip>
        </template>
        <template v-if="column.key === 'orderStatus'">
          <a-tag color="">处理中</a-tag>
          <a-tag color="">已完成</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a @click="openEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
            <a class="ele-text-danger">删除</a>
          </a-popconfirm>
        </template>
      </template>
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <ShopOrderOrderEdit
      v-model:visible="showEdit"
      :appId="appId"
      :data="current"
      @done="reload"
    />
  </div>
</template>

<script lang="ts" setup>
import {createVNode, ref, watch} from 'vue';
import {message, Modal} from 'ant-design-vue';
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import type {EleProTable} from 'ele-admin-pro';
import type {DatasourceFunction} from 'ele-admin-pro/es/ele-pro-table/types';
import ShopOrderOrderSearch from './app-order-search.vue';
import ShopOrderOrderEdit from './app-order-edit.vue';
import { formatNumber } from 'ele-admin-pro/es';
import {ShopOrder, OrderParam} from '@/api/shop/shopOrder/model';
import {
  pageOrder,
  removeOrder,
  removeBatchOrder
} from '@/api/shop/shopOrder';
import {decrypt} from "@/utils/common";

const props = defineProps<{
  appId: any;
  data: ShopOrder;
}>();

// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
const selection = ref<ShopOrder[]>([]);
// 当前编辑数据
const current = ref<ShopOrder | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 查看密码
const password = ref(false);

// 表格数据源
const datasource: DatasourceFunction = ({page, limit, where, orders}) => {
  // 搜索条件
  // where.appId = props.appId;
  return pageOrder({
    ...where,
    ...orders,
    page,
    limit
  });
};

// 表格列配置
const columns = ref<any[]>([
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 220,
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    width: 90
  },
  {
    title: '金额',
    dataIndex: 'money',
    key: 'money',
    align: 'center',
    width: 280,
    customRender: ({text}) => `￥${text}`
  },
  {
    title: '支付方式',
    dataIndex: 'account',
    align: 'center',
    width: 280
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
    width: 120,
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'comments',
    key: 'comments',
    ellipsis: true
  },
  {
    title: '减少金额',
    dataIndex: 'orderNo',
    key: 'orderNo',
    align: 'center',
    customRender: ({ text }) => `￥${formatNumber(text)}`
  },
  {
    title: "实付金额",
    dataIndex: "payPrice",
    key: "payPrice",
    align: "center",
    sorter: true,
    customRender: ({ text }) => `￥${formatNumber(text)}`
  },
  {
    title: '支付方式',
    dataIndex: 'payType',
    key: 'payType',
    align: 'center'
  },
  {
    title: '付款状态',
    dataIndex: 'payStatus',
    key: 'payStatus',
    align: 'center'
  },
  {
    title: '操作人',
    dataIndex: 'nickname',
    key: 'nickname',
    align: 'center',
    width: 280
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
    fixed: 'right',
    align: 'center',
    hideInSetting: true
  }
]);

const showPassword = () => {
  password.value = !password.value;
}

/* 打开编辑弹窗 */
const openEdit = (row?: ShopOrder) => {
  current.value = row ?? null;
  showEdit.value = true;
};

/* 搜索 */
const reload = (where?: OrderParam) => {
  selection.value = [];
  tableRef?.value?.reload({where: where});
};

/* 删除单个 */
const remove = (row: ShopOrder) => {
  const hide = message.loading('请求中..', 0);
  removeOrder(row.orderId)
    .then((msg) => {
      hide();
      message.success(msg);
      reload();
    })
    .catch((e) => {
      hide();
      message.error(e.message);
    });
};

/* 批量删除 */
const removeBatch = () => {
  if (!selection.value?.length) {
    message.error('请至少选择一条数据');
    return;
  }
  if (selection.value?.length) {
    Modal.confirm({
      title: '提示',
      content: '确定要删除选中的记录吗?',
      icon: createVNode(ExclamationCircleOutlined),
      maskClosable: true,
      onOk: () => {
        const hide = message.loading('请求中..', 0);
        removeBatchOrder(selection.value.map((d) => d.orderId))
          .then((msg) => {
            hide();
            message.success(msg);
            reload();
          })
          .catch((e) => {
            hide();
            message.error(e.message);
          });
      }
    });
  }
};

/* 自定义行属性 */
const customRow = (record: ShopOrder) => {
  return {
    // 行点击事件
    onClick: () => {
      // console.log(record);
    },
    // 行双击事件
    onDblclick: () => {
      openEdit(record)
    }
  };
};

watch(
  () => props.appId,
  (appId) => {
    if (appId) {
      reload();
    }
  },
  {immediate: true}
);

</script>

<script lang="ts">
export default {
  name: 'ProjectOrderIndex'
};
</script>
