import { useCtx } from "@/comm/ctx";
import { useList } from "@/modules/list";
import { css } from "@linaria/core";
import { Image } from "@queenjs/ui";
import { Button, Select, Space, Table } from "ant-design-vue";

import { defineComponent, reactive } from "vue";
import CategoryModal from "./categoryModal";

export default defineComponent({
  setup() {
    const ctx = useList();
    const { store, showModal, actions } = ctx;
    const { deviceCtrl } = useCtx();
    const state = reactive({
      select: "default",
      optsions: [
        {
          label: "默认",
          value: "default",
        },
      ],
    });
    const columns = [
      {
        title: "封面图",
        dataIndex: "thumbnail",
        key: "thumbnail",
        customRender: ({ text }: any) => {
          return (
            <Image
              class="thumbnail"
              src={deviceCtrl.httpServer + text}
              size={0}
            />
          );
        },
      },
      {
        title: "名称",
        dataIndex: "name",
        key: "name",
      },
    ];
    actions.getAssetList();
    const initShowCategory = async () => {
      const appDataDir = deviceCtrl.appDataDir;
      const category = await deviceCtrl.ReadFileText(
        `${appDataDir}/screen/category.json`
      );
      const currentCategory = localStorage.getItem("category") || "default";
      state.select = currentCategory;
      if (!category.error && category.text) {
        const assets = JSON.parse(category.text);
        state.optsions = assets;
      }
    };
    const { msgCtrl } = useCtx();
    msgCtrl.screenModule = ctx;
    initShowCategory();
    msgCtrl.initScreen();
    const setShowCategory = (value: any) => {
      localStorage.setItem("category", value || "default");
      state.select = value;
      actions.getAssetList();
    };
    const createShowCategory = async () => {
      const { deviceCtrl } = useCtx();
      const res: any = await showModal(<CategoryModal />, {
        title: "新建分类",
      });
      const options = [...state.optsions];
      const optionItem = options.find((e) => {
        return e.value == res.value;
      });
      if (optionItem) {
        return;
      }
      options.push(res);
      state.optsions = options;
      const appDataDir = deviceCtrl.appDataDir;
      await deviceCtrl.WriteFileText(
        `${appDataDir}/screen/category.json`,
        JSON.stringify(options)
      );
    };
    return () => (
      <div class={ViewStyle}>
        <div class="table_header">
          <div class="title">展示列表</div>
          <div>
            <Space>
              <Select
                class={"select"}
                value={state.select}
                options={state.optsions}
                onChange={setShowCategory}
              ></Select>
              <Button
                type="primary"
                ghost
                onClick={() => {
                  createShowCategory();
                }}
              >
                新建展示分类
              </Button>
            </Space>
          </div>
        </div>
        <Table
          size="small"
          columns={columns}
          dataSource={store.list}
          rowKey={(record) => record?._id}
        ></Table>
      </div>
    );
  },
});

const ViewStyle = css`
  padding: 20px;
  .table_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    .select {
      width: 150px;
    }
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    text-align: center;
  }
  .thumbnail {
    width: 120px;
    object-fit: contain;
  }
`;