<template>
  <el-input v-model="codeName" clearable @clear="onReset" :style="{ width: props.width }">
    <template #append>
      <el-buttom @click="onShow">选择</el-buttom>
    </template>
  </el-input>
  <el-dialog append-to-body title="危险化学品名称查询" width="1200px" v-model="dialogVisible" @close="onClose">
    <el-input placeholder="请输入" v-model="listQuery.searchName" @clear="pageData" clearable
      style="width: 250px; margin: 0 10px 10px 0" />
    <el-button type="primary" @click="pageData"><el-icon>
        <Search />
      </el-icon> 查询
    </el-button>
    <div>
      <el-table :data="tableData" style="width: 100%" border v-loading="tableLoading" ref="tableRef"
        @row-click="onCurrentChange" height="500px">
        <el-table-column align="center" width="55" label="选择">
          <template #default="{ row }">
            <el-radio class="radio" v-model="currentRowId" :label="row.id">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" align="center" width="150" />
        <el-table-column label="编码" property="code" align="center" width="250"> </el-table-column>
        <el-table-column label="名称" property="name" align="center"></el-table-column>
        <el-table-column label="别名" property="aliasName" align="center"></el-table-column>
      </el-table>
    </div>

    <div class="fenye">
      <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize" />
    </div>

    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="onSave" :disabled="currentRowId === '' ? true : false"> 确定 </el-button>
        <el-button @click="onClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";

const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: "100%"
  }
});
const emits = defineEmits(["update:modelValue"]);
const dialogVisible = ref(false);
const codeName = defineModel();
const tableData = ref([]);
const tableRef = ref(null);
const tableLoading = ref(false);
const pageConfiger = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
});
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  searchName: ""
});
const currentRowId = ref("");
const onShow = () => {
  dialogVisible.value = true;
  pageData();
};
const onClose = () => {
  dialogVisible.value = false;
};
const onReset = () => {
  emits("update:modelValue", "");
};
const onSave = () => {
  let name = tableData.value.find((item) => item.id === currentRowId.value).name;
  codeName.value = name;
  emits("update:modelValue", name);
  onClose();
};
const pageData = () => {
  tableLoading.value = true;
  tableData.value = [];
  getApi(listQuery, "/mosty-jcgl/hazardousChemicalsDict/list")
    .then((res) => {
      if (res) {
        listQuery.total = res.total;
        tableData.value = res.records;
        let row = tableData.value.find((item) => item.name === codeName.value);
        if (row) tableRef.value.setCurrentRow(row), currentRowId.value = row.id;
      }
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  pageData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  pageData();
};
const onCurrentChange = (row) => {
  currentRowId.value = row.id;
};

// onMounted(() => {});

watch(
  () => props.modelValue,
  (n, o) => {
    if (n) {
      codeName.value = n;
    }
  },
  { deep: true }
  // { immediate: true, deep: true }
);
</script>

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

::v-deep .el-overlay-dialog {
  top: -60px !important;
}
</style>
