import { useCtx } from "@/pages/website/context";
import { css } from "@linaria/core";

import { message, Checkbox, Button, Space } from "ant-design-vue";
import { List } from "queenjs/ui";
import { defineComponent, onMounted, reactive } from "vue";
import { array, number, string } from "vue-types";

export default defineComponent({
  emits: ["submit", "cancel"],
  setup(props, { emit }) {
    const ctx = useCtx();
    const state = reactive({
      checked: [],
    });

    onMounted(() => {
      if (ctx.list.exportList.state.list.length == 0) {
        ctx.list.exportList.loadPage(1);
      }
    });
    const loadNext = () => {
      let page = ctx.list.exportList.state.page;
      page += 1;
      ctx.list.exportList.loadPage(page);
    };
    const checkOne = (id: string) => {
      if (state.checked.includes(id)) {
        state.checked.splice(state.checked.indexOf(id), 1);
      } else {
        state.checked.push(id);
      }
    };
    const checkAll = (e) => {
      const value = e.target.checked;
      if (value) {
        state.checked = [];
        ctx.list.exportList.state.list.forEach((e) => {
          state.checked.push(e._id);
        });
      } else {
        state.checked = [];
      }
    };
    return () => (
      <div class={RootStyle}>
        <div class={"list_view"}>
          <List gap="10px" columns={1} data={ctx.list.exportList.state.list}>
            {{
              item: (data: any) => {
                return (
                  <div class={"export_item"}>
                    <Checkbox
                      checked={state.checked.includes(data._id)}
                      onChange={(e) => {
                        checkOne(data._id);
                      }}
                    >
                      {data.name}
                    </Checkbox>
                  </div>
                );
              },
            }}
          </List>
        </div>
        <div class={"btm_btns"}>
          <div class={""}>
            <Space>
              <Checkbox
                checked={
                  state.checked.length ==
                    ctx.list.exportList.state.list.length &&
                  state.checked.length != 0
                }
                onChange={checkAll}
              >
                全选
              </Checkbox>
              {ctx.list.exportList.state.list.length <
                ctx.list.exportList.state.total && (
                <Button
                  type="primary"
                  onClick={loadNext}
                  style={{ minWidth: "0.6rem" }}
                  shape="round"
                >
                  下一页
                </Button>
              )}
            </Space>
          </div>
          <div>
            <Space>
              <Button
                onClick={() => {
                  emit("cancel");
                }}
                style={{ minWidth: "0.6rem" }}
                shape="round"
              >
                取消
              </Button>
              <Button
                style={{ minWidth: "0.88rem" }}
                shape="round"
                type="primary"
                onClick={() => {
                  emit("submit", state.checked);
                }}
              >
                确定
              </Button>
            </Space>
          </div>
        </div>
      </div>
    );
  },
});

const RootStyle = css`
  width: 600px;
  .list_view {
    max-height: 600px;
    overflow-y: auto;
    .export_item {
      padding: 4px 10px;
      .ant-checkbox-wrapper {
        width: 100%;
      }
      &:hover {
        background-color: var(--layout-bg);
      }
    }
  }
  .btm_btns {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`;
