<template>
  <MOSTY.PageTree :pageTitle="'车辆信息档案列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <div class="flex-sjtj">
        <Sjtj :info="countlist" :isShowTip="false" :isShowBottom="false" :width="200" mb="6px" />
      </div>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="searchInfo" type="primary"><el-icon size="small">
            <Plus />
          </el-icon>精确查询</el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <div :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <!-- 操作 -->
          <template #actions="{ row }">
            <el-link type="primary" style="margin-right: 20px" @click="seeInfo(row)" size="small">查看</el-link>
          </template>
        </MOSTY.Table>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
      </div>
    </template>

  </MOSTY.PageTree>
  <el-dialog v-model="dialogVisible" title="车辆条件查询" :close-on-click-modal="false" width="500px" :show-close="false">
    <el-form :model="data.formData" :rules="rules" label-width="135px" class="demo-ruleForm.value">
      <div>
        <el-form-item label="车牌号">
          <el-input v-model="data.formData.carnumber" clearable style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="data.formData.orgname" clearable style="width: 300px"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="savexgf">确定 </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { reactive, onMounted, ref } from "vue";
const emit = defineEmits("changePage", "getobj");
const searchArr = reactive([
  {
    showType: "input",
    prop: "carnumber",
    width: '250px',
    placeholder: "请输入车牌号进行查询"
  }
]);

const data = reactive({
  searchObj: {},
  formData: [],
  tableData: [],
  tableColumn: [
    {
      title: "车牌号",
      prop: "carnumber",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "所属部门",
      prop: "managedeptname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "使用年限(年)",
      prop: "useterm",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "上户日期",
      prop: "purchasedate",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: '60vh',
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  }
});
const countlist = ref([])
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val;
  getTableData();
};
//精确查询
const dialogVisible = ref(false);
//精确查询
const searchInfo = () => {
  dialogVisible.value = true;
};
//精确查询
const savexgf = () => {
  listQuery.carnumber = data.formData.carnumber
    ? data.formData.carnumber
    : null;
  listQuery.orgname = data.formData.orgname ? data.formData.orgname : null;
  getTableData();
  dialogVisible.value = false;
};
// 查询数据
const onSearch = (obj) => {
  listQuery.carnumber = obj.carnumber;
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};


//查看
const seeInfo = (row) => {
  let arr = {
    title: "车辆档案详情",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};

const totalHeight = ref()
onMounted(() => {
  totalHeight.value = `calc(100vh - 420px)`
});
//选中的数据

const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/car/queryCarMsg`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
  getApi(listQuery, `/mosty-jcgl/car/countCarByType`).then((res) => {
    if (res) {
      res.forEach((item, index) => {
        item.icon = 'ccss/icon_0' + (index + 1) + '.png'
      });
      countlist.value = res;
    }
  });
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 15vh !important;
}

.flex-sjtj {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.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>