<template>
  <el-dialog title="上报历史" width="80%" v-model="dialogVisible" @close="closed">
    <el-table border :data="dataTable" style="width: 100%; margin-bottom: 10px" v-loading="tableLoading"
      :header-cell-style="{ background: '#F6F6F6' }" height="70vh">
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, i) in tableColumn" :key="i">
        <template #default="{ row }" v-if="item.prop === 'count'">
          <span>{{ Number(row.gwclNum || 0) + Number(row.tqclNum || 0) + Number(row.kcScjybzclNum || 0) +
            Number(row.wlysclNum || 0) + Number(row.hcScjybzclNum || 0) }}</span>
        </template>
        <template #default="{ row }" v-if="item.prop == 'kc'">
          <el-table-column label="公务车辆" prop="gwclNum" />
          <el-table-column label="通勤车辆" prop="tqclNum" />
          <el-table-column label="生产经营保障车辆" prop="kcScjybzclNum" />
        </template>
        <template #default="{ row }" v-if="item.prop == 'hc'">
          <el-table-column label="物流运输车辆" prop="wlysclNum" />
          <el-table-column label="生产经营保障车辆" prop="hcScjybzclNum" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="onDetail(row)">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog title="上报历史" width="90%" v-model="detailVisible">
    <el-table border :data="detailTable" style="width: 100%; margin-bottom: 10px" v-loading="detailLoading"
      :header-cell-style="{ background: '#F6F6F6' }" height="70vh">
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, i) in detailColumn" :key="i">
      </el-table-column>
      <el-table-column align="center" label="操作" width="170" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="handleDetail(row)">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <DetailJsy @close="detailCCVisible = false" :title="dialogTitle" :detail="detail" v-if="detailCCVisible" type="report"/>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue"
import { postApi } from "@/api/tobAcco_api.js"
import DetailJsy from "./DetailJsy.vue"
const { proxy } = getCurrentInstance()
const { D_BZ_SGZT } = proxy.$dict("D_BZ_SGZT")
const emit = defineEmits(["close"]);
const props = defineProps({
  params: Object
})
const dialogVisible = ref(true)
const dataTable = ref([])
const tableColumn = ref([
  { label: '企业名称', prop: 'orgName' },
  { label: '上报次数', prop: 'sbcs' },
  { label: '总数（辆）', prop: 'count' },
  { label: '客车', prop: 'kc' },
  { label: '货车', prop: 'hc' },
  { label: '上报时间', prop: 'updateTime' },
])
const tableLoading = ref(false)
const detailVisible = ref(false)
const detailCCVisible = ref(false)
const dialogTitle = ref("")
const detail = ref(null)
const detailTable = ref([])
const detailColumn = ref([
  { label: '公司名称', prop: 'orgName' },
  { label: '车牌号码', prop: 'cdCarNo' },
  { label: '资产权属', prop: 'cdMotorCarOwnershipName' },
  { label: '车辆类型', prop: 'cdMotorCarTypeName' },
  { label: '车辆用途', prop: 'cdMotorCarUsageName' },
  { label: '机动车辆新能源车标识', prop: 'cdMotorCarNewEnergyCarFlag' },
  { label: '车辆使用状态', prop: 'cdMotorCarUseStateName' },
  { label: '车辆安全智能化', prop: 'cdCarSafeIntelligentName' },
  { label: '采购时间', prop: 'cdMotorCarProcurementDate' },
  { label: '行驶里程', prop: 'cdMotorCarMileageTraveled' },
])
const detailLoading = ref(false)
onMounted(() => {
  getDataList()
})
const getDataList = () => {
  dataTable.value = []
  tableLoading.value = true
  postApi(props.params, "/mosty-jcgl/data/CarStat/queryReportingHistoryStat").then(res => {
    if (res) {
      dataTable.value = res
      tableLoading.value = false
    }
  })
}
const getDetailList = data => {
  detailTable.value = []
  detailLoading.value = true
  let _data = props.params
  _data.sbcs = data.sbcs
  _data.orgCode = data.orgCode
  postApi(_data, "/mosty-jcgl/data/CarStat/queryReportingHistoryStatLogDetails").then(res => {
    if (res) {
      detailTable.value = res
      detailLoading.value = false
    }
  })
}
const onDetail = e => {
  detailVisible.value = true
  detail.value = e
  getDetailList(e)
}
const handleDetail = row => {
  detail.value = row
  dialogTitle.value = `车辆管理详情`
  detailCCVisible.value = true
}
const closed = () => {
  emit("close");
};
</script>

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