<template>
  <MOSTY.PageTree :pageTitle="'三交一封列表'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <section class="button">
        <el-button type="primary" @click="onloadExcel" 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="100">
          <template #vehiclelicense="{ row }">
            <dict-tag v-if="row.vehiclelicense" :options="D_BZ_YJWJ" :value="row.vehiclelicense" :tag="false" />
          </template>
          <template #workcertificate="{ row }">
            <dict-tag v-if="row.workcertificate" :options="D_BZ_YJWJ" :value="row.workcertificate" :tag="false" />
          </template>
          <template #carkey="{ row }">
            <dict-tag v-if="row.carkey" :options="D_BZ_YJWJ" :value="row.carkey" :tag="false" />
          </template>
          <template #affirm="{ row }">
            <dict-tag v-if="row.affirm" :options="D_BZ_SF" :value="row.affirm" :tag="false" />
            <span v-else>--</span>
          </template>

          <template #actions="{ row }">
            <span class="operesee" @click="edit(row)"> <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize">
          </MOSTY.Pages>
        </div>
      </section>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
import { postApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
const { proxy } = getCurrentInstance();
const { D_BZ_YJWJ, D_BZ_SF } = proxy.$dict("D_BZ_YJWJ", "D_BZ_SF");
const emit = defineEmits("changePage");
const tableloading = ref(false)
const lfBoxWid = ref("300px");
const loadingShow = ref(false)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    options: filterYear(7),
    placeholder: '请选择'
  }
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "车牌号",
      prop: "sequestrationcar",
    },
    {
      title: "车辆所属单位",
      prop: "carcontrorgname"
    },
    {
      title: "三交一封",
      suntab: [
        {
          title: "机动行驶证",
          prop: "vehiclelicense",
          slot: true
        },
        {
          title: "行业上岗证",
          prop: "workcertificate",
          slot: true
        },
        {
          title: "车辆钥匙",
          prop: "carkey",
          slot: true
        },
        {
          title: "封车地点",
          prop: "sequestrationlocation"
        }
      ]

    },
    {
      title: "封车时间",
      prop: "sequestrationstarttime"
    },
    {
      title: "车管员",
      prop: "carcontrname",
    },

    {
      title: "取车",
      suntab: [
        {
          title: "时间",
          prop: "receivetime"
        },
        {
          title: "驾驶员",
          prop: "drivername"
        },
        {
          title: "驾驶员是否确认",
          prop: "affirm",
          slot: true
        },
      ]
    }, {
      title: "操作",
      prop: "actions",
      fixed: 'right',
      slot: true
    }
  ],

});
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.orgcode = val.id;
  getTableData();
};
//获取列表数据
function getTableData() {
  tableloading.value = true
  postApi(listQuery.value, '/mosty-jcgl/sanJiaoYIFengl/queryThreesealRecord').then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      listQuery.value.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  })
}
const changeNo = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
const onSearch = (obj) => {
  listQuery.value.pageCurrent = 1;
  listQuery.value.year = obj.year;
  getTableData();
}
const edit = (row) => {
  let arr = {
    title: "车辆三交一封详情",
    saveBtnShow: true,
    id: row.id
  };
  emit("changePage", "Details", arr);
};
function onloadExcel() {
  loadingShow.value = true
  let title = {
    sequestrationcar: '车牌号',
    carcontrorgname: '车辆所属单位',
    vehiclelicense: '机动行驶证',
    workcertificate: '行业上岗证',
    carkey: '车辆钥匙',
    sequestrationlocation: '封车地点',
    sequestrationstarttime: '封车时间',
    carcontrname: '车管员姓名',
    drivername: '驾驶员姓名',
    receivetime: '解封时间',
    drivername: '驾驶员姓名',
  }
  let obj = { ...listQuery.value };
  obj.pageSize = 100000
  postApi(obj, '/mosty-jcgl/sanJiaoYIFengl/queryThreesealRecord').then((res) => {
    if (res.records) {
      let data = res.records
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].vehiclelicense = proxy.$getDictVal(data[i].vehiclelicense, D_BZ_YJWJ);
          data[i].workcertificate = proxy.$getDictVal(data[i].workcertificate, D_BZ_YJWJ);
          data[i].carkey = proxy.$getDictVal(data[i].carkey, D_BZ_YJWJ);
        }
        let tablename = '三交一封列表.xlsx'
        exportXlsx(title, data, '三交一封列表', tablename);

      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
}

</script>

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

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