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 ParkingTooltip = 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: "parking_time",
        key: "parking_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 ParkingTooltip;