<template>
  <el-dialog title="车辆信息管理列表" v-model="isShowDialog" width="90%">
    <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    <el-divider />
    <section class="button">
      <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
        <el-icon>
          <Download />
        </el-icon>
        <span>导出</span>
      </el-button>
    </section>
    <section class="eltab3">
      <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
        :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false" actionsW="260">
        <template #sign="{ row }">
          <p style=" width: 12px; height: 12px;border-radius: 50%;margin: 0 auto"
            :style="{ 'background-color': row?.sign ? '#33CC00' : '#FC5F76' }"></p>
        </template>
        <template #actions="{ row }">

          <span class="operesee" @click="edit(row)" size="small">
            <el-icon>
              <View />
            </el-icon>查看</span>
        </template>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
      </div>
    </section>
    <div class="cart-table-detail-dialog">
      <el-dialog v-model="isShowDetail" width="90vw" title="详情">
        <detail v-if="isShowDetail" from="carInfoStatistics" contentH="calc(85vh - 100px)" :obj="detailObj" />
      </el-dialog>

    </div>

  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { exportXlsx } from "@/excel/Export2Excel.js"
import { ElMessage } from "element-plus"
import { reactive, ref, onMounted, defineProps } from "vue"
import { getItem } from "@/utils/storage"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { singleObjectCheck, haveIntersection } from "@/utils/tools.js"
import detail from "@/views/yxkzgl/jtaq/cl/clgl/Details/index.vue"

const emit = defineEmits("changePage")
const props = defineProps({
  // row 数据
  row: {
    type: Object,
    default: () => []
  },

})

const isShowDetail = ref(false);
const isShowDialog = ref(true);
const tableloading = ref(false)
const loadingShow = ref(false)
const detailObj = ref({})
// 树的展开与折叠
const iconChange = ref(true)
// 公共属性
const commonMark = ["carnumber", "cartype", "zcqs", "environmental", "purchasedate", "auto", "jumpDate", "runDate", "useterm", "managedeptname"]
// 新能源
const newEnergyLabeling = ["displacement", "environmentalStandards", "assetOwnership", "purchasingDate"]
// 载货
const activeMark = ["zhlx", ...commonMark]
// 载客
const guestMark = ["zklx", ...commonMark]

const listQuery = reactive({
  orgid: props.row.deptId,
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const ssdept = getItem("deptId")
const searchArr = reactive([
  {
    showType: "input",
    prop: "carnumber",
    width: "250px",
    placeholder: "请输入车牌号"
  }
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "标记",
      prop: "sign",
      sortable: false,
      slot: true
    },
    {
      title: "车牌号",
      prop: "carnumber"
    },
    {
      title: "所属部门",
      prop: "managedeptname"
    },
    {
      title: "车辆厂牌",
      prop: "label"
    },
    {
      title: "车架号",
      prop: "vin"
    },
    {
      title: "发动机号",
      prop: "enginenum"
    },
    {
      title: "购置金额",
      prop: "gzje"
    },
    {
      title: "当年累计行驶里程",
      prop: "mileage"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ]

})
// 初始化
onMounted(() => {
  getTableData()
})

//获取部门数据
const getdeptId = (val) => {
  listQuery.orgid = val.id
  listQuery.pageCurrent = 1
  getTableData()
}

function getTableData() {
  tableloading.value = true
  postApi(listQuery, "/mosty-jcgl/car/queryCarMsg").then(async (res) => {
    if (res.records) {
      tableloading.value = false
      let table_Data = []
      // 载客
      let guest_mark = ["11", "12", "13"]
      // 载货
      let active_mark = ["21", "22", "23"]
      for (let i = 0; i < res.records.length; i++) {
        // 载客非新能源
        if (haveIntersection(guest_mark, [res.records[i]["cartype"]]) && (res.records[i].environmental === "0" || res.records[i].environmental === null)) {
          table_Data.push(await singleObjectCheck(res.records[i], guestMark))
          continue
        }
        // 载客新能源
        if (haveIntersection(guest_mark, [res.records[i]["cartype"]]) && (res.records[i].environmental === "1" || res.records[i].environmental === null)) {
          table_Data.push(await singleObjectCheck(res.records[i], [...newEnergyLabeling, ...guestMark]))
          continue
        }
        // 载货新能源
        if (haveIntersection(active_mark, [res.records[i]["cartype"]]) && (res.records[i].environmental === "1" || res.records[i].environmental === null)) {
          table_Data.push(await singleObjectCheck(res.records[i], [...newEnergyLabeling, ...activeMark]))
          continue
        }
        // 载货非新能源
        if (haveIntersection(active_mark, [res.records[i]["cartype"]]) && (res.records[i].environmental === "0" || res.records[i].environmental === null)) {
          table_Data.push(await singleObjectCheck(res.records[i], [...activeMark]))
          continue
        }
        table_Data.push(await singleObjectCheck(res.records[i], commonMark))
      }
      data.tableData = table_Data.map(item => {
        return {
          ...item,
          mileage: item.mileage ? parseInt(item.mileage) : ''
        }
      })
      listQuery.total = res.total
      console.log("列表数据")
      console.log(data.tableData)
    } else {
      data.tableData = []
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}

//获取详情
function gtdataxq(id, title, saveBtn, call) {
  getApi({ id: id }, `/mosty-jcgl/car/queryCarMsgDetail`).then((res) => {
    let obj = {
      title, //表单标题
      saveBtn, //是否展示保存按钮
      row: res //列表内容
    }
    if (call) call(obj)
  })
}

//
//详情
const edit = (row) => {
  console.log('row: ', row);
  gtdataxq(row.id, "车辆信息详情", false, (resObj) => {
    detailObj.value = resObj
    isShowDetail.value = true
  })
}

const changeNo = (val) => {
  listQuery.pageCurrent = val
  getTableData()
}
const changeSize = (val) => {
  listQuery.pageSize = val
  getTableData()
}
// 查询数据
const onSearch = (obj) => {
  listQuery.carnumber = obj.carnumber
  getTableData()
}

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

//导出表格
const export2Excel = () => {
  loadingShow.value = true
  let title = {
    carnumber: "车牌号",
    managedeptname: "所属部门",
    label: "车辆厂牌",
    vin: "车架号",
    enginenum: "发动机号",
    gzje: "购置金额",
    mileage: "行驶里程"

  }
  const param = {
    pageCurrent: 1,
    pageSize: 10000,
    orgid: listQuery.orgid
  }
  postApi(param, "/mosty-jcgl/car/queryCarMsg").then((res) => {
    if (res.records) {
      let data = res.records
      if (data.length > 0) {
        let tablename = "车辆信息管理列表.xlsx"
        exportXlsx(title, data, "车辆信息管理列表", tablename)
      } else {
        ElMessage.warning("暂无数据")
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
}
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100% - 170px);
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}

::v-deep .el-dialog__body {
  height: 85vh;
}
.cart-table-detail-dialog .el-dialog {
  height: 85vh !important;
  .wibox {
    padding: 0;
  }
}
</style>
