<template>
  <div>
    <el-dialog title="车辆列表" width="1200px" :model-value="props.modelValue" @close="closeDialog">
      <div class="head">
        <div></div>
      </div>

      <div class="config">
        <el-table stripe ref="refTable" @current-change="handleSelectionChange" :data="tableData" border
          :row-key="keyid" @row-click="changecoose" height="60vh" style="width: 100%">
          <el-table-column width="55" #default="{ row }">
            <el-radio v-model="ridioIndex" :label="row.carmsgid"></el-radio>
          </el-table-column>
          <el-table-column label="车牌号" property="carnumber"></el-table-column>
          <el-table-column label="驾驶员" property="drivername"></el-table-column>
          <el-table-column label="所属单位" property="orgname"></el-table-column>
          <el-table-column label="所属部门" property="managedeptname"></el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[7, 14]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="onComfirm"> <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>确定</span></el-button>
          <el-button @click="closeDialog" type="primary"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { ref, watch, onMounted, defineProps, defineEmits } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const ridioIndex = ref(null);
const emits = defineEmits(["changeClose"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  // 选择
  data: {
    type: Object,
    default: () => { }
  },
});
const tableData = ref(null)
const total = ref(0)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 7
})
const refTable = ref(null);
const selected = ref([]);
watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {
      handleFilter();
    } else {
    }
  }
);
//获取详情
onMounted(() => {
  getTableData()
});
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 保存提交
const onComfirm = () => {
  const data = selected.value;
  emits("listdata", data);
  refTable.value.clearSelection();
  closeDialog()
};
const keyid = (row) => {
  return row.carmsgid;
};
// 选中一行
const handleSelectionChange = (val) => {
  selected.value = val;
};
function changecoose(val) {
  ridioIndex.value = val.id
  selected.value = val
}
// 获取模板列表
const getTableData = () => {
  getApi(listQuery.value, "/mosty-jcgl/car/getCarListByOrg").then(async (res) => {
    if (res) {
      total.value = res.total
      tableData.value = res.records
    }
  });
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
// 关闭×
const closeDialog = () => {
  emits("changeClose", false);
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none !important;
}

::v-deep .el-table__cell {
  // 解决el-image 和 el-table冲突层级冲突问题
  position: static !important;
}
</style>
