<!-- 应急物资分类表 -->
<template>
  <basic-container>
    <el-form class="whole_form" :inline="true" :model="queryForm" label-suffix=":">
      <el-form-item label="车牌号">
        <el-input v-model="queryForm.licensePlateNumber" style="width: 200px" placeholder="请输入车牌号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
        <el-button type="primary" :icon="Plus" @click="openDetail">新增</el-button>
        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="序号" align="center" width="60">
        <template #default="scope">
          {{ (page.currentPage - 1) * page.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="licensePlateNumber" label="车牌号" align="center" />
      <el-table-column prop="driverName" label="司机名称" align="center" />
      <el-table-column prop="licensePlateColor" label="车牌颜色" align="center" />
      <el-table-column prop="transportMaterial" label="物资名称" align="center" />
      <el-table-column prop="startDeliveryTime" label="开始送货时间" align="center" />
      <el-table-column prop="estimatedArrivalTime" label="预计送达时间" align="center" />
      <el-table-column label="操作" width="250" align="center">
        <template #default="{ row }">
          <el-button link type="success" size="small" @click="openDetail(row, 'look')">查看车辆轨迹</el-button>
          <el-button link type="primary" size="small" @click="openDetail(row, 'edit')">编辑</el-button>
          <el-button link type="danger" size="small" @click="deleteClick(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="page.total > 0"
      v-model:page="page.currentPage"
      v-model:limit="page.pageSize"
      :total="page.total"
      @pagination="getList"
    />
  </basic-container>
</template>

<script setup lang="ts">
import { Plus, Search, RefreshRight } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { getDriverList, deleteDriver, getCrasUrl } from "@/api/PowermanagementPositioning";
import router from "@/router";
import { ElMessage, ElMessageBox } from "element-plus";
import { useDict } from "@/hooks/dict";
import store from "@/store";
import { setQuery } from "@/hooks/detailQuery/index";

const { gender } = useDict("gender");

const { vehicle_type, vehicle_status, annual_review_status, Insurance_situation } = useDict(
  "vehicle_type",
  "vehicle_status",
  "annual_review_status",
  "Insurance_situation"
);
const queryForm = ref({
  licensePlateNumber: ""
});
const Cars_Options = reactive([]);
const tableData: any = ref([]);
const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const handleClick = () => {
  console.log("click");
};
// 根据码回显中文
const showCh = (value, option) => {
  const filterItem = option.filter((item) => item.value == value);
  return filterItem.length ? filterItem[0].label : "-";
};

// 清空搜索条件
const clearSearch = () => {
  queryForm.value = {
    licensePlateNumber: ""
  };
  getList();
};

const buildUrlWithParams = (baseUrl: string, params: any) => {
  let queryString = "";
  for (let key in params) {
    if (params.hasOwnProperty(key)) {
      if (queryString.length > 0) {
        queryString += "&";
      }
      queryString += key + "=" + encodeURIComponent(params[key]);
    }
  }

  // 如果存在查询字符串，则将其添加到baseUrl后面
  if (queryString.length > 0) {
    return baseUrl + "?" + queryString;
  } else {
    return baseUrl;
  }
};

/** 添加/修改/查看进入详情操作 */
const openDetail = (row: any, type: string) => {
  if (type == "look") {
    getCrasUrl(row.id).then((res: any) => {
      if (res.code === 0) {
        const data = res.data;
        const baseUrl = "http://121.36.17.6:9096/yingyan/#/openTrackPlayback";
        const url = buildUrlWithParams(baseUrl, data);
        window.open(url);
      }
    });
    return;
  } else {
    setQuery("/Powermanagement/PositioningDetail", { id: row.id, type: type });
  }
};
/** 列表数据获取 */
const getList = () => {
  const data = reactive({
    size: page.pageSize,
    current: page.currentPage,
    ...queryForm.value
  });
  getDriverList(data).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data.records;
      page.total = res.data.total;
    }
  });
};
/** 删除操作 */
const deleteClick = (row: any) => {
  ElMessageBox.confirm(`是否删除此条数据？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteDriver(row.id).then((res: any) => {
      if (res.code === 0) {
        getList();
        ElMessage({
          message: "删除成功！",
          type: "success"
        });
      } else {
        ElMessage({
          message: "删除失败！",
          type: "error"
        });
      }
    });
  });
};
queryForm.value = store.state.searchQuery.searchQuery || {};
getList();
</script>

<style lang="scss" scoped></style>
