import { useArticle, useCategory } from "@/modules";
import { css } from "@linaria/core";
import { Button, Card, Table, TreeNode, TreeSelect } from "ant-design-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { any } from "vue-types";
import Modal from "@/components/Provider/Modal";

import { cloneDeep } from "lodash";
import loading from "@/components/Provider/Loading";
export default defineComponent({
  props: {
    current: any(),
  },
  setup(props) {
    const artStore = useArticle();
    const cateStore = useCategory();
    const modal = Modal.use();
    const selectRef = ref();
    const state = reactive({
      selectedRowKeys: [] as any,
      selectedRow: null,
      defaultId: "6464aef88dcb7ddb98b57a2e",
      treeData: [] as any,
    });
    const columns = [
      {
        title: "名称",
        dataIndex: "title",
      },
    ];
    onMounted(() => {
      initTreeData();
      let query = {
        cid: state.defaultId,
      };
      if (props.current._id) {
        state.selectedRowKeys.splice(0, 1, props.current._id);
        state.selectedRow = props.current;
        state.defaultId = props.current.cid;
        query = {
          cid: props.current.cid,
        };
      }
      artStore.listController.state.query = JSON.stringify(query);
      artStore.listController.loadPage(1);
    });
    const changeSelected = (record: any, selected: any) => {
      if (selected) {
        state.selectedRowKeys.splice(0, 1, record._id);
        state.selectedRow = record;
      } else {
        state.selectedRowKeys = [];
        state.selectedRow = null;
      }
    };
    const dataRender = (item: CategoryItem) => {
      if (item.children) {
        const temp = {
          value: item._id,
          label: item.name,
          children: [] as any,
          selectable: false,
        };
        const children = item.children.map((subItem: CategoryItem) => {
          return dataRender(subItem);
        });
        temp.children = children;
        return temp;
      } else {
        return {
          value: item._id,
          label: item.name,
        };
      }
    };
    const initTreeData = () => {
      const catrgory = cloneDeep(cateStore.categoryTree);
      const tree = catrgory.map((item: CategoryItem) => {
        return dataRender(item);
      });
      state.treeData = tree;
    };
    const submit = () => {
      modal.submit(state.selectedRow);
    };
    const treeChange = async (value: any) => {
      artStore.listController.state.query = JSON.stringify({
        cid: value,
      });
      loading.show("");
      await artStore.listController.loadPage(1);
      loading.hidden();
    };

    return () => (
      <div class={Page}>
        <div class={"mb-20px"}>
          <TreeSelect
            ref={selectRef}
            class={"w-200px"}
            defaultValue={state.defaultId}
            treeData={state.treeData}
            onChange={treeChange}
          ></TreeSelect>
        </div>
        <Table
          bordered
          rowKey={(record) => record._id}
          rowSelection={{
            hideSelectAll: true,
            selectedRowKeys: state.selectedRowKeys,
            onSelect: (record, selected) => {
              changeSelected(record, selected);
            },
          }}
          size="small"
          pagination={{
            size: "small",
            showSizeChanger: false,
            pageSize: artStore.listController.state.size,
            total: artStore.listController.state.total,
            onChange: (v) => artStore.listController.loadPage(v),
          }}
          columns={columns}
          dataSource={artStore.listController.state.list}
        ></Table>
        <div class={"mt-10px text-right"}>
          <Button type="primary" onClick={submit}>
            确定
          </Button>
        </div>
      </div>
    );
  },
});
const Page = css`
  width: 800px;
`;
