<template>
  <el-dialog class="sgstc-dialog" :title="props.title" v-model="isShowDialog" width="1000px"
    :before-close="beforeClose">

    <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>
      <xgsTC :title="xgsTCTitle" :isEdit="isEditTc" :years="props.years" v-if="isShowXgsTC" @close="closeXgsTC"
        :row="currRow" />
    </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 xgsTC from './xgsTC.vue';
const { proxy } = getCurrentInstance();
// const { D_BZ_YSFYLB,  } = proxy.$dict("D_BZ_YSFYLB",);
const props = defineProps({
  years: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: () => { }
  },
  title: {
    type: String,
    default: ''
  },
  /** 是否编辑 （使用登记-才能编辑） */
  isEdit: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['close'])
/** 县公司标题 */
const xgsTCTitle = ref('')
const isEditTc = ref(false)
const isShowXgsTC = ref(false)

const loadingShow = ref(false);

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

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

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


const stateOpt = [
  { label: '未上报', value: '0', elTagType: 'ysshpf-oper-red' },
  { label: '部门已上报', value: '1' },
  { label: '县安全部门负责人审批', value: '2' },
  { label: '市安全部门负责人汇总', value: '3' },
  { label: '市安全部门负责人审核', value: '4' },
  { label: '省安全部门负责人审核', value: '5' },
  { label: '审批通过', value: '6' },
];

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,

});
const isOpen = ref(false);
const tableData = ref([])

const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableColumns = reactive([
  {
    title: "单位名称",
    prop: "deptName",
    // sortable:true
  },

  {
    title: "车辆总数",
    prop: "count"
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])

const deptid = ref(null)
const totalHeight = ref(null)
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    totalHeight.value = `calc(80vh - 40px)`
  })
}, {
  deep: true,
  immediate: true
})
const auditDialogClose = () => {
  isShowAuditDialog.value = false
  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
  getDataList();
}

function getDataList() {
  tableloading.value = true;
  const params = {
    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 seeDetail = (row, type) => {
  console.log('row: ', row);
  currRow.value = row
  xgsTCTitle.value = `${row.deptName}-查看详情`
  isEditTc.value = type == 'edit'
  isShowXgsTC.value = true
}

const closeXgsTC = () => {
  isShowXgsTC.value = false
  // getDataList()
}
/**单位id */
const ssdwid = getItem("deptId").ssdwid;
onMounted(() => {
  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);
    }
  }
}

.sgstc-dialog {
  border: 1px solid red;
}

.sgstc-dialog .el-dialog {
  height: 85vh !important;
}

// ::v-deep .el-dialog__body {
//   height: 85vh;
// }</style>
