<template>
  <!-- 车辆弹窗 -->
  <el-dialog center ref="dialog" :title="dataTitle" :show-close="false" modal :destory-on-close="true"
    class="dialogClass" :append-to-body="true" width="871px" custom-class="custom-dialog" v-model="props.visible">
    <section class="button">
      <el-button @click="exportExcels" :loading="excelLoading">导出</el-button>
      <el-button v-if="popForm" @click="backbtn">返回</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </section>

    <div class="itemTrading">
      <!-- @cell-dblclick="editData" -->
      <el-table id="out-table" v-loading="tableloading" stripe ref="detailTable" show-summary
        :summary-method="getSummaries" height="450px" border :data="carData">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column property="universal" sortable label="通用车辆" width="150"></el-table-column>
        <el-table-column property="miniBus" sortable label="小型客车" width="150"></el-table-column>
        <el-table-column property="mediumBus" sortable label="中型客车" width="150"></el-table-column>
        <el-table-column property="largeBus" sortable label="大型客车" width="150"></el-table-column>
        <el-table-column property="miniTruck" sortable label="小型货车" width="150"></el-table-column>
        <el-table-column property="mediumTruck" sortable label="中型货车" width="150"></el-table-column>
        <el-table-column property="largeTruck" sortable label="大型货车" width="150"></el-table-column>
        <el-table-column property="specialCar" sortable label="特殊车辆" width="150"></el-table-column>
        <el-table-column property="tankCar" sortable label="洒水车" width="150"></el-table-column>
        <el-table-column property="rainTrain" sortable label="增雨火箭车" width="150"></el-table-column>
        <el-table-column property="distributionCar" sortable label="配送车" width="150"></el-table-column>
        <el-table-column property="serviceCar" sortable label="公务用车" width="150"></el-table-column>
        <el-table-column property="otherCar" sortable label="其他用途车辆" width="150"></el-table-column>
        <el-table-column property="carTotal" sortable label="车辆总数" width="150"></el-table-column>
        <el-table-column property="regularEmp" sortable label="正式员工" width="150"></el-table-column>
        <el-table-column property="contractBasedEmp" sortable label="聘用员工" width="150"></el-table-column>
        <el-table-column property="bizOutsourcing" sortable label="业务外包" width="150"></el-table-column>
        <el-table-column property="more8Year" sortable label="使用超过八年车辆" width="150"></el-table-column>
        <el-table-column property="more30km" sortable label="行驶超过30万公里数量" width="150"></el-table-column>

        <!-- <el-table-column label="操作" v-if="!popForm" width="150">
          <template #default="scope">
            <span class="operesee" @click="handleClick(scope.$index, scope.row)"><el-icon>
                <View />
              </el-icon>详情</span>
          </template>
</el-table-column> -->
      </el-table>
    </div>

  </el-dialog>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { getSummaries } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
const tableloading = ref(false)
const excelLoading = ref(false)
const popForm = ref(false);
const detailTable = ref();
const emit = defineEmits(['changeVi'])
const listQuery = ref({
  code: ''
});
const props = defineProps({
  visible: false,
  dataTitle: {
    type: String,
    requried: true
  }
});

//车辆
const carData = ref([
  {
    "orgName": "甘肃省烟草专卖局（公司）",
    "universal": 91,
    "miniBus": 3,
    "mediumBus": 41,
    "largeBus": 63,
    "miniTruck": 14,
    "mediumTruck": 9,
    "largeTruck": 86,
    "specialCar": 4,
    "tankCar": 54,
    "rainTrain": 25,
    "distributionCar": 17,
    "serviceCar": 85,
    "otherCar": 90,
    "carTotal": 27,
    "regularEmp": 91,
    "contractBasedEmp": 52,
    "bizOutsourcing": 55,
    "more8Year": 67,
    "more30km": 29
  },
  {
    "orgName": "兰州市烟草专卖局（公司）",
    "universal": 88,
    "miniBus": 31,
    "mediumBus": 34,
    "largeBus": 1,
    "miniTruck": 85,
    "mediumTruck": 30,
    "largeTruck": 65,
    "specialCar": 81,
    "tankCar": 48,
    "rainTrain": 37,
    "distributionCar": 5,
    "serviceCar": 58,
    "otherCar": 7,
    "carTotal": 47,
    "regularEmp": 54,
    "contractBasedEmp": 40,
    "bizOutsourcing": 70,
    "more8Year": 72,
    "more30km": 43
  },
  {
    "orgName": "天水市烟草专卖局（公司）",
    "universal": 28,
    "miniBus": 75,
    "largeTruck": 49,
    "specialCar": 12,
    "mediumBus": 56,
    "largeBus": 25,
    "miniTruck": 53,
    "mediumTruck": 9,
    "tankCar": 47,
    "rainTrain": 26,
    "distributionCar": 6,
    "serviceCar": 4,
    "otherCar": 99,
    "carTotal": 91,
    "regularEmp": 48,
    "contractBasedEmp": 60,
    "bizOutsourcing": 8,
    "more8Year": 68,
    "more30km": 99
  },
  {
    "orgName": "陇南市烟草专卖局（公司）",
    "universal": 74,
    "miniBus": 81,
    "largeTruck": 30,
    "specialCar": 95,
    "mediumBus": 88,
    "largeBus": 99,
    "miniTruck": 47,
    "mediumTruck": 31,
    "tankCar": 34,
    "rainTrain": 56,
    "distributionCar": 63,
    "serviceCar": 92,
    "otherCar": 28,
    "carTotal": 3,
    "regularEmp": 11,
    "contractBasedEmp": 11,
    "bizOutsourcing": 46,
    "more8Year": 77,
    "more30km": 11
  },
  {
    "orgName": "酒泉市烟草专卖局（公司）",
    "universal": 17,
    "miniBus": 83,
    "largeTruck": 19,
    "specialCar": 36,
    "mediumBus": 49,
    "largeBus": 9,
    "miniTruck": 3,
    "mediumTruck": 45,
    "tankCar": 82,
    "rainTrain": 53,
    "distributionCar": 90,
    "serviceCar": 22,
    "otherCar": 21,
    "carTotal": 13,
    "regularEmp": 88,
    "contractBasedEmp": 65,
    "bizOutsourcing": 28,
    "more8Year": 78,
    "more30km": 97
  },
  {
    "orgName": "嘉峪关市烟草专卖局（公司）",
    "universal": 59,
    "miniBus": 95,
    "largeTruck": 23,
    "specialCar": 63,
    "mediumBus": 47,
    "largeBus": 83,
    "miniTruck": 31,
    "mediumTruck": 44,
    "tankCar": 9,
    "rainTrain": 60,
    "distributionCar": 25,
    "serviceCar": 80,
    "otherCar": 89,
    "carTotal": 59,
    "regularEmp": 63,
    "contractBasedEmp": 87,
    "bizOutsourcing": 31,
    "more8Year": 64,
    "more30km": 62
  },
  {
    "orgName": "庆阳市烟草专卖局（公司）",
    "universal": 85,
    "miniBus": 78,
    "largeTruck": 57,
    "specialCar": 44,
    "mediumBus": 18,
    "largeBus": 68,
    "miniTruck": 47,
    "mediumTruck": 26,
    "tankCar": 23,
    "rainTrain": 80,
    "distributionCar": 38,
    "serviceCar": 11,
    "otherCar": 57,
    "carTotal": 2,
    "regularEmp": 19,
    "contractBasedEmp": 36,
    "bizOutsourcing": 28,
    "more8Year": 3,
    "more30km": 47
  },
  {
    "orgName": "白银市烟草专卖局（公司）",
    "universal": 84,
    "miniBus": 70,
    "largeTruck": 32,
    "specialCar": 8,
    "mediumBus": 63,
    "largeBus": 76,
    "miniTruck": 39,
    "mediumTruck": 90,
    "tankCar": 63,
    "rainTrain": 77,
    "distributionCar": 79,
    "serviceCar": 87,
    "otherCar": 40,
    "carTotal": 76,
    "regularEmp": 35,
    "contractBasedEmp": 41,
    "bizOutsourcing": 32,
    "more8Year": 87,
    "more30km": 20
  },
  {
    "orgName": "定西市烟草专卖局（公司）",
    "universal": 27,
    "miniBus": 23,
    "largeTruck": 50,
    "specialCar": 94,
    "mediumBus": 66,
    "largeBus": 67,
    "miniTruck": 10,
    "mediumTruck": 90,
    "tankCar": 21,
    "rainTrain": 29,
    "distributionCar": 18,
    "serviceCar": 45,
    "otherCar": 61,
    "carTotal": 57,
    "regularEmp": 73,
    "contractBasedEmp": 55,
    "bizOutsourcing": 1,
    "more8Year": 63,
    "more30km": 49
  },
  {
    "orgName": "金昌市烟草专卖局（公司）",
    "universal": 66,
    "miniBus": 87,
    "largeTruck": 17,
    "specialCar": 12,
    "mediumBus": 99,
    "largeBus": 63,
    "miniTruck": 45,
    "mediumTruck": 1,
    "tankCar": 4,
    "rainTrain": 42,
    "distributionCar": 21,
    "serviceCar": 73,
    "otherCar": 29,
    "carTotal": 51,
    "regularEmp": 35,
    "contractBasedEmp": 95,
    "bizOutsourcing": 8,
    "more8Year": 91,
    "more30km": 79
  },
  {
    "orgName": "平凉市烟草专卖局（公司）",
    "universal": 9,
    "miniBus": 46,
    "largeTruck": 38,
    "specialCar": 99,
    "mediumBus": 54,
    "largeBus": 46,
    "miniTruck": 5,
    "mediumTruck": 16,
    "tankCar": 18,
    "rainTrain": 18,
    "distributionCar": 72,
    "serviceCar": 70,
    "otherCar": 75,
    "carTotal": 80,
    "regularEmp": 44,
    "contractBasedEmp": 81,
    "bizOutsourcing": 42,
    "more8Year": 54,
    "more30km": 41
  },
  {
    "orgName": "武威市烟草专卖局（公司）",
    "universal": 18,
    "miniBus": 74,
    "largeTruck": 39,
    "specialCar": 88,
    "mediumBus": 6,
    "largeBus": 22,
    "miniTruck": 62,
    "mediumTruck": 35,
    "tankCar": 95,
    "rainTrain": 98,
    "distributionCar": 99,
    "serviceCar": 86,
    "otherCar": 92,
    "carTotal": 16,
    "regularEmp": 3,
    "contractBasedEmp": 56,
    "bizOutsourcing": 54,
    "more8Year": 34,
    "more30km": 2
  },
  {
    "orgName": "甘南州烟草专卖局（公司）",
    "universal": 89,
    "miniBus": 92,
    "largeTruck": 1,
    "specialCar": 40,
    "mediumBus": 15,
    "largeBus": 47,
    "miniTruck": 51,
    "mediumTruck": 30,
    "tankCar": 1,
    "rainTrain": 11,
    "distributionCar": 31,
    "serviceCar": 14,
    "otherCar": 98,
    "carTotal": 22,
    "regularEmp": 50,
    "contractBasedEmp": 96,
    "bizOutsourcing": 51,
    "more8Year": 73,
    "more30km": 4
  },
  {
    "orgName": "临夏州烟草专卖局（公司）",
    "universal": 17,
    "miniBus": 48,
    "largeTruck": 36,
    "specialCar": 61,
    "mediumBus": 51,
    "largeBus": 43,
    "miniTruck": 19,
    "mediumTruck": 11,
    "tankCar": 58,
    "rainTrain": 83,
    "distributionCar": 41,
    "serviceCar": 13,
    "otherCar": 99,
    "carTotal": 66,
    "regularEmp": 65,
    "contractBasedEmp": 61,
    "bizOutsourcing": 24,
    "more8Year": 12,
    "more30km": 67
  },
]);
onMounted(() => {
  // getCarData();
  popForm.value = false;
  // demowidth();

});
//车辆接口数据
const getCarData = () => {
  carData.value = []
  getApi({}, "/mosty-jcgl/car/listDisplay").then((res) => {
    carData.value = res ? res : []
  })
}


//详情按钮
const handleClick = (index, row) => {
  var code = row.cityCode
  listQuery.value.code = code
  popForm.value = true; //显示返回按钮
  document.getElementById('out-table').scrollLeft = 0
  // let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
  //   demo.style = `width:3200px`;
  demowidth();
  getCarXQData()

};
//车辆详情数据
const getCarXQData = () => {
  carData.value = []
  getApi(listQuery.value, "/mosty-jcgl/car/details").then((res) => {
    carData.value = res.list ? res.list : [];
  })
}
//公司名称双击事件
function editData(row, column) {
  //双击单位名称获取城市编号
  if (column.carTotal == 'comName') {
  }
  // popForm.value = true; //显示返回按钮
}
//点击返回
const backbtn = () => {
  popForm.value = false;
  demowidth();
  getCarData();
};
function demowidth() {
  setTimeout(() => {
    let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
    demo.style = `width:${detailTable._value.bodyWidth}`;
  }, 1e3);
}

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    universal: "通用车辆",
    miniBus: "小型客车",
    mediumBus: "中型客车",
    largeBus: "大型客车",
    miniTruck: "小型货车",
    mediumTruck: "中型货车",
    largeTruck: "大型货车",
    specialCar: "特殊车辆",
    tankCar: "洒水车",
    rainTrain: "增雨火箭车",
    distributionCar: "配送车",
    serviceCar: "公务用车",
    otherCar: "其他用途车辆",
    carTotal: "车辆总数",
    regularEmp: "正式员工",
    contractBasedEmp: "聘用员工",
    bizOutsourcing: '业务外包',
    more8Year: '使用超过八年车辆',
    more30km: '行驶超过30万公里数量'

  };
  const param = listQuery.value
  let data = structuredClone(carData.value);
  let obj = {
    orgName: '合计',
    universal: 0,
    mediumBus: 0,
    largeBus: 0,
    miniTruck: 0,
    mediumTruck: 0,
    largeTruck: 0,
    specialCar: 0,
    tankCar: 0,
    rainTrain: 0,
    distributionCar: 0,
    serviceCar: 0,
    miniBus: 0,
    otherCar: 0,
    carTotal: 0,
    regularEmp: 0,
    contractBasedEmp: 0,
    bizOutsourcing: 0,
    more8Year: 0,
    more30km: 0
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.universal += data[i].universal;
      obj.mediumBus += data[i].mediumBus;
      obj.largeBus += data[i].largeBus;
      obj.miniTruck += data[i].miniTruck;
      obj.mediumTruck += data[i].mediumTruck;
      obj.largeTruck += data[i].largeTruck;
      obj.specialCar += data[i].specialCar;
      obj.tankCar += data[i].tankCar;
      obj.rainTrain += data[i].rainTrain;
      obj.distributionCar += data[i].distributionCar;
      obj.serviceCar += data[i].serviceCar;
      obj.miniBus += data[i].miniBus;
      obj.otherCar += data[i].otherCar;
      obj.carTotal += data[i].carTotal;
      obj.regularEmp += data[i].regularEmp;
      obj.contractBasedEmp += data[i].contractBasedEmp;
      obj.bizOutsourcing += data[i].bizOutsourcing;
      obj.more8Year += data[i].more8Year;
      obj.more30km += data[i].more30km;
    }
    data.push(obj)
    let tablename = "车辆台账.xlsx";
    exportXlsx(title, data, '车辆台账', tablename);
    excelLoading.value = false
  }
  // getApi(param, "/mosty-jcgl/basicData/tzsbList").then((res) => {
  //   if (res) {

  //     excelLoading.value = false
  //   }
  // }).catch(() => {
  //   excelLoading.value = false
  // });
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/element-plus.scss";
</style>
