<template>
  <el-dialog :title="title" v-model="isShowDialog" width="1000px" @close="handleClose">
    <div style="height: 100%;overflow-y: auto;">
      <div style="display: flex;justify-content: end;margin-bottom: 5px;">
        <!-- <el-button type="primary" v-loading="loadingShow" @click="onloadExcel">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button> -->
      </div>

      <section style="height: calc(100% - 20px)">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" :tableHeight="'100%'" actionsW="260">

          <template #actions="{ row }">
            <span class="operesee" @click="seeDetail(row)"><el-icon>
                <Compass />
              </el-icon>查看明细
            </span>
          </template>

        </MOSTY.Table>
      </section>

      <carTable v-if="isShowPageList" :title="`${currRow.deptName}-详情`" :row="currRow" @close="pageListClose" />
    </div>
  </el-dialog>

</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick, watch, computed, defineProps, defineEmits } from 'vue'
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import carTable from './carTable.vue';

const { proxy } = getCurrentInstance();
// const { D_BZ_YSFYLB,  } = proxy.$dict("D_BZ_YSFYLB",);
const props = defineProps(['years', 'row', 'isEdit'])
const emits = defineEmits(['close'])

const xgsTCTitle = ref('')
const isShowPageList = ref(false)
/**单位id */
const ssdwid = getItem("deptId").ssdwid;
/** 部门id */
const ssbmid = getItem("deptId").ssbmid;

const isEditTc = ref(false)

/** 是否显示 审核弹框 */
const isShowAuditDialog = ref(false)


/** 当前查看或审核行 */
const currRow = ref({})


const beforeClose = () => {
  emits('close')
}

const handleClose = () => {
  emits('close')
}

const tableloading = ref(false)
const USERID = getItem("USERID")
const ssdept = getItem("deptId")
const title = ref('');//弹窗标题
const isShowDialog = ref(true);

const type = ref('01');//控制弹窗参数(01:年初预算调整审核新增)
const rowid = ref(null)
const listQuery = reactive({
  orgCode: props.row.deptId,
  // ctype: null
});
const isOpen = ref(false);
const tableData = ref([])

const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableColumns = reactive([
  {
    title: "部门",
    prop: "deptName",
    width: '200',
    // sortable: true
  },


  {
    title: "车辆总数",
    prop: "count",
    // sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])

const deptid = ref(null)
const orgids = ref(null)
const totalHeight = ref(null)
const getHeight = ref(null)
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    totalHeight.value = `calc(71vh - 20px)`
  })
}, {
  deep: true,
  immediate: true
})
const auditDialogClose = () => {
  isShowAuditDialog.value = false
  getDataList()
}
onMounted(() => {
  getDataList()
})
//获取年初查询年初统计

//刷新
function resetTable(val) {
  listQuery.pageSize = 20
  listQuery.pageCurrent = 1
  // listQuery.orgid = orgids.value;
  // listQuery.ctype = ''
  deptid.value = ''
  listQuery.years = new Date().getFullYear().toString()
  getDataList();
}

//查询
function onSearch(obj) {
  listQuery.pageCurrent = 1
  // listQuery.ctype = obj.ctype;
  // listQuery.cwkm = obj.cwkm;
  getDataList();
  // getTotaldata()
}

function getDataList() {
  tableloading.value = true;
  const params = {
    years: listQuery.years,
    orgCode: listQuery.orgCode,
  }
  postApi(params, "/mosty-jcgl/car/getOrgCodeforCar")
    .then((res) => {
      tableData.value = []
      if (res) {
        tableData.value = res;
        pageConfiger.total = res.total;
        listQuery.orgCode = ''
      }
    }).finally(() => {
      tableloading.value = false;
    })
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};



const seeDetail = (row, type) => {
  console.log('row: ', row);
  currRow.value = row
  xgsTCTitle.value = `${row.deptName}-查看详情`
  isEditTc.value = type === 'edit'
  isShowPageList.value = true
}
const pageListClose = () => {
  isShowPageList.value = false
  // getDataList()
}

</script>

<style lang="scss" scoped>
::v-deep .bigBox {
  height: initial;
}

::v-deep .bigBox .zy-right {
  margin-left: 0;
}

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

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