import { Component, Injector } from "@angular/core";
import { STChange, STColumn } from "@delon/abc/st";
import _ from "lodash";

import {
  ListPageParams,
  RoutedListComponent,
} from "@shared/components/routed-components/routed-list.component.base";
import {
  <%= classify(name) %>BriefFragment,
  <%= classify(name) %>sGql,
  Delete<%= classify(name) %>sGql
} from "@shared/graphql/.generated/type";
import { RouteParamsMappings } from "@shared";

export type <%= classify(name) %>ListPageParam = ListPageParams<<%= classify(name) %>BriefFragment> & {
  filterText: string;
};

@Component({
  selector: "app-<%= dasherize(name) %>-list",
  templateUrl: "./list.page.html",
  styles: [],
})
export class <%= classify(name) %>ListPage extends RoutedListComponent<<%= classify(name) %>ListPageParam, <%= classify(name) %>BriefFragment> {
  routeParamsMappings: RouteParamsMappings<<%= classify(name) %>ListPageParam> = {
    filterText: { position: "queryParams", default: "" },
    pi: { position: "queryParams", default: 1 },
    ps: { position: "queryParams", default: 10 },
    sort: { position: "queryParams", default: {} },
  };
  override columns?: Array<STColumn<<%= classify(name) %>BriefFragment>> = [
    {
      title: "",
      width: 30,
      type: "checkbox",
      index: "checked",
      fixed: "left",
      className: ["text-center"],
    },
    { title: "Id", index: "id", width: 200, className: ["text-center"] },
    {
      title: "名称",
      index: "name",
      // render: "name",
      className: ["text-center"],
    },
    {
      title: "创建时间",
      index: "createdOn",
      sort: {
        key: "createdOn",
        default: "descend",
      },
      type: "date",
    },
    {
      title: "操作",
      buttons: [
        {
          icon: "edit",
          text: "编辑",
          click: item => this.router.navigate(["edit"], { queryParams: { id: item.id }, relativeTo: this.route }),
          // acl: AppPermission.<%= classify(name) %>MutationEdit<%= classify(name) %>,
        },
        {
          icon: "delete",
          text: "删除",
          pop: {
            title: "是否确认删除?",
          },
          click: item => {
            this.delete(item.id);
          },
          // acl: AppPermission.,
        },
      ],
      className: ["text-center"],
    },
  ];
  override async onRouted(params: <%= classify(name) %>ListPageParam) {
    let res = await this.apollo
      .query({
        query: <%= classify(name) %>sGql,
        variables: {
          input: { name: params.filterText },
          skip: (params.pi - 1) * params.ps,
          take: params.ps,
          order: params.sort,
        },
        fetchPolicy: "no-cache",
      })
      .toPromise();
    this.selectedData$.set([]);
    this.total = res.data.<%= camelize(name) %>s.totalCount;
    this.data = res.data.<%= camelize(name) %>s.items;
  }

  constructor(injector: Injector) {
    super(injector);
  }

  filter: string;

  async add() {
    await this.router.navigate(["./edit"], { relativeTo: this.route });
  }

  override async refresh() {
    return super.refresh();
  }

  override async reset() {
    return super.reset();
  }

  async edit(id: string) {
    await this.router.navigate(["./edit"], { queryParams: { id }, relativeTo: this.route });
  }

  async delete(id: string) {
    await this.apollo
      .mutate({
        mutation: Delete<%= classify(name) %>sGql,
        variables: {
          ids: [id],
        },
      })
      .toPromise();
    this.msgSrv.success("已删除");
    this.refresh();
  }

  override async tableChange(args: STChange) {
    return super.tableChange(args);
  }
}