<template>
  <MOSTY.PageTree :pageTitle="null" :searchType="'03'" @getDeptId="getdeptId">
    <template #header>
      <div class="headBox">
        <div class="title">车辆行驶里程记录<span style='font-size:12px;color:red;'>(注：每日凌晨一点更新)</span></div>
      </div>
    </template>
    <template #serach>
      <div ref="getHeight">
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" @reset="onReset">
          <template #lable>
            <!-- 筛选按钮  -->
            <div class="toggle" :class="{ active: isToggle }" @click="handleClickOpen">
              <span style="white-space: nowrap">{{ isToggle ? "收起" : "展开" }}筛选</span>
              <el-icon>
                <DArrowLeft />
              </el-icon>
            </div>
          </template>
        </MOSTY.Search>
        <div v-if="isToggle" class="mb10">
          <el-date-picker @change="changeTime" v-model="timeValue" type="daterange" range-separator="至"
            style="width: 250px" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" />
        </div>
      </div>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true" @handleSelecTable="handleSelecTable" :tableHeight="'100%'">
          <template #isCheckcar="{ row }">
            <dict-tag :options="sjzt" :value="row.isCheckcar" :tag="false" />
          </template>

        </MOSTY.Table>
      </section>
      <div class="fenye">
        <Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></Pages>
      </div>
    </template>
  </MOSTY.PageTree>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Pages from "@/components/aboutTable/Pages/index.vue";
import { reactive, ref, onMounted, nextTick } from "vue";
import { postApi } from "@/api/tobAcco_api.js";
const emit = defineEmits("changePage");
const isToggle = ref(false);
const getHeight = ref();
const sjzt = ref([
  { value: 'N', label: '未检查' },
  { value: 'Y', label: '已检查' },
])
// 时间选择器
const timeValue = ref([])
const searchArr = reactive([
  {
    showType: "input",
    prop: "userName",
    width: '250px',
    placeholder: "请输入驾驶员姓名"
  },
  {
    showType: "input",
    prop: "carnumber",
    width: '250px',
    placeholder: "请输入车辆号牌"
  },
  {
    showType: "select",
    prop: "isCheckcar",
    options: sjzt,
    placeholder: "请选择"
  }
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "所属单位",
      prop: "unitName"
    },
    {
      title: "所属部门",
      prop: "deptName"
    },
    {
      title: "日期",
      prop: "queryDate"
    },
    {
      title: "车牌号",
      prop: "carnumber"
    },
    {
      title: "行驶里程(公里)",
      prop: "mileage"
    },
    {
      title: "驾驶员",
      prop: "userName",
    },
    {
      title: "是否车辆双检",
      prop: "isCheckcar",
      slot: true
    },
  ],
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
});
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
});
const tableloading = ref(false);
const totalHeight = ref(null)
const handleClickOpen = () => {
  isToggle.value = !isToggle.value
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${255 + getHeight.value.offsetHeight}px)`
  })
}
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - 323px)`
  })
  getTableData();
});
// 查询
const onSearch = (boj) => {
  listQuery.pageCurrent = 1;
  listQuery.userName = boj.userName;
  listQuery.isCheckcar = boj.isCheckcar;
  listQuery.carnumber = boj.carnumber;
  getTableData();
}
const changeTime = () => {
  listQuery.pageCurrent = 1;
  if (timeValue.value && timeValue.value.length == 2) {
    listQuery.year = ''
    listQuery.startTime = timeValue.value[0]
    listQuery.endTime = timeValue.value[1]
  } else {
    listQuery.startTime = null
    listQuery.endTime = null
  }
}
function onReset(params) {
  listQuery.startTime = null
  listQuery.endTime = null
  timeValue.value = []
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const handleRest = () => {
  listQuery.pageCurrent = 1;
  listQuery.userName = '';
  listQuery.isCheckcar = '';
  listQuery.carnumber = '';
  listQuery.pageCurrent = 1;
  listQuery.startTime = null
  listQuery.endTime = null
  getTableData();
};
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/carVehiclemile/getPageList`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        data.tableData = res.records;
        data.pageConfiger.total = res.total;
      } else {
        data.tableData = [];
        data.pageConfiger.total = 0;
        tableloading.value = false;
      }
    }
  );
}
</script>

<style lang="scss" scoped>
.bigBox {
  height: 84vh;
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

}

.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}
</style>