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 BreakingTooltip = defineComponent({
  props: {
    dataSource: Object,
    dataName: String,
  },
  setup(props: any) {
    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 = [
      {
        title: "时间",
        dataIndex: "violate_time",
        key: "violate_time",
        ellipsis: true,
        width: 90,
        fixed: "left",
        customRender: (column: any) => <span> {column.text ? dayjs(column.text).format("MM-DD HH:mm") : "-"}</span>,
      },
      {
        title: "企业",
        dataIndex: "enterprise_name",
        key: "enterprise_name",
        ellipsis: true,
        width: 120,
        customRender: (column: any) => (
          <span
            style={{ color: "#aaa" }}
            onClick={() => {
              changeEnterprise(column.text);
            }}
          >
            {" "}
            {column.text ? column.text.replace(/深圳市|深圳/, "") : "-"}
          </span>
        ),
      },
      {
        title: "车牌",
        dataIndex: "plate",
        key: "plate",
        width: 100,
        customRender: (column: any) => (
          <a
            style={{ color: "#aaa" }}
            onClick={() => {
              changePlate(column.text);
            }}
          >
            {" "}
            {column.text ? column.text : "-"}
          </a>
        ),
      },
      {
        title: "交通单元",
        dataIndex: "segroad_uid",
        key: "segroad_uid",
        width: 150,
        ellipsis: true,
      },
      {
        title: "操作",
        key: "action",
        width: 80,
        customRender: (text: any, record: any) => <a style={{ color: "#aaa" }}>看行程</a>,
      },
    ];
    return () => (
      <div class={style.listContainer}>
        <div class={style.hd}>泥头车异常点 - {props.dataName}</div>
        <Table
          dataSource={props.dataSource}
          columns={columns}
          size={"small"}
          pagination={false}
          bordered={false}
          scroll={{ x: 440, y: 200 }}
        ></Table>
      </div>
    );
  },
});

export default BreakingTooltip;
