import { useCollocation } from "@/modules/collocation";
import { css } from "@linaria/core";
import { Image } from "@queenjs/ui";
import { Button, Space, Table } from "ant-design-vue";
import { ColumnsType } from "ant-design-vue/lib/table/Table";
import { queenApi } from "queenjs";
import { defineComponent, onMounted } from "vue";
import OperationModal from "./components/OperationModal";

export default defineComponent({
  setup() {
    const collocation = useCollocation();

    const columns: ColumnsType = [
      {
        title: "款式图片",
        dataIndex: "thumbnail",
        key: "thumbnail",
        customRender: ({ text }) => (
          <Image class="thumbnail" src={text?.url} size={120} />
        ),
      },
      {
        title: "款式名称",
        dataIndex: "name",
        key: "name",
        width: 200,
      },
      {
        title: "款式编号",
        dataIndex: "code",
        key: "code",
      },
      {
        title: "款式类别",
        dataIndex: "category",
        key: "category",
      },
      {
        title: "价格(元)",
        dataIndex: "price",
        key: "price",
        customRender: ({ text }) => (text / 100 || 0).toFixed(2),
      },
      {
        title: "操作",
        key: "action",
        dataIndex: "action",
        customRender: ({ record }) => {
          return (
            <Space>
              <Button type="link" onClick={() => showEdit(record)}>
                编辑
              </Button>
              <Button
                type="link"
                onClick={() => {
                  queenApi.router.push(`/design/edit/${record._id}`);
                  // ctx.comm.mallJumpStyleEditor(record._id);
                }}
              >
                定制内容
              </Button>
              <Button
                type="text"
                danger
                onClick={() => collocation.actions.delDesign(record)}
              >
                删除
              </Button>
            </Space>
          );
        },
      },
    ];

    onMounted(() => {
      collocation.controls.listCtrl.loadPage(1, 20);
    });

    const showAddDesign = async () => {
      const values: IStyle = await collocation.showModal(<OperationModal />, {
        title: "添加可定制款式",
        width: "500px",
      });
      if (!values) return;

      values.thumbnail = values.scenePack?.thumbnail;
      await collocation.https.createStyle(values);
    };

    const showEdit = async (record: IStyle) => {
      const item: IStyle = await collocation.https.getStyleDetail(record._id);
      if (!item) return false;

      const values: IStyle = await collocation.showModal(
        <OperationModal data={record} />,
        {
          title: "编辑可定制款式",
          width: "500px",
        }
      );
      if (!values) return;

      values.thumbnail = values.scenePack.thumbnail;
      await collocation.https.updateStyle(values);
    };

    return () => {
      const listCtrl = collocation.controls.listCtrl;
      return (
        <div class={DesignStyle}>
          <div class="mb-20px table_header">
            <h3 class="font-bold">款式列表</h3>
            <Button type="primary" onClick={showAddDesign}>
              添加+
            </Button>
          </div>
          <Table
            size="small"
            columns={columns}
            rowKey={(record) => record._id}
            dataSource={listCtrl.state.list}
            pagination={{
              pageSize: listCtrl.state.size,
              current: listCtrl.state.page,
              total: listCtrl.state.total,
              onChange: (p) => listCtrl.loadPage(p),
            }}
          />
        </div>
      );
    };
  },
});

const DesignStyle = css`
  padding: 20px;
  .table_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    text-align: center;
  }
  .thumbnail {
    width: 120px;
    object-fit: contain;
  }
`;