import { defineComponent, ref, onMounted, watch, computed, Teleport } from "vue";
import style from "@/assets/style/Report/map.module.less";
import { Select, DatePicker, Radio, Drawer, Input, Table, Button } from "ant-design-vue";
import { useStore } from "@/hook/useStore";
import useEnterpriseReportStore from "@/store/enterpriseReport";
import dayjs from "dayjs";
const CommonTooltip = defineComponent({
  props: {
    dataSource: Array,
    dataName: String,
    onClose: Function,
  },
  setup(props, context) {
    const { filters, activeTooltipUid } = useStore(useEnterpriseReportStore);
    const changeEnterprise = (name: string) => {
      filters.value.enterpriseName = name;
      activeTooltipUid.value = "body";
    };
    const changePlate = (name: string) => {
      filters.value.plate = name;
      activeTooltipUid.value = "body";
    };
    const columns = ref<any[]>([]);

    const dataList = ref<any[]>([]);
    const buildDataSource = () => {
      if (props.dataSource && props.dataSource.length) {
        if (props.dataSource.length == 1) {
          columns.value = [
            { title: "字段", dataIndex: "key", key: "key", width: 150 },
            { title: "值", dataIndex: "value", key: "value" },
          ];
          const data = props.dataSource[0] as any;
          dataList.value = [];
          for (const k in data) {
            dataList.value.push({
              key: k,
              value: data[k],
            });
          }
        } else {
          columns.value = [];
          for (const key in props.dataSource[0] as any) {
            columns.value.push({
              title: key,
              dataIndex: key,
              key: key,
              width: 150,
              ellipsis: true,
            });
          }
          dataList.value = Array.from(props.dataSource);
        }
        //   props.dataSource.forEach((column) => {
        //     columns.push({
        //       title: "交通单元",
        //       dataIndex: "segroad_uid",
        //       key: "segroad_uid",
        //       width: 150,
        //       ellipsis: true,
        //     });
        //   });
      } else {
        columns.value = [];
        dataList.value = [];
      }
    };
    buildDataSource();
    watch(
      () => {
        return props.dataSource;
      },
      () => {
        buildDataSource();
      }
    );

    return () => (
      <div class={style.listContainer}>
        <div class={style.hd}>{props.dataName}</div>
        <Table
          dataSource={dataList.value}
          columns={columns.value}
          size={"small"}
          pagination={false}
          bordered={false}
          scroll={{ x: 440, y: 200 }}
        ></Table>
        <a
          class={style.closeButton}
          onClick={() => {
            props.onClose && props.onClose();
          }}
        >
          关闭
        </a>
      </div>
    );
  },
});

export default CommonTooltip;