<template>
  <div class="ep-project-select">
    <el-input
      v-model="displayName"
      readonly
      :disabled="disabled"
      :placeholder="$t('通用.请选择')"
      @click="openDialogFun"
    >
    </el-input>
    <Dialog v-model="dialogVisible" :diaTitle="$t('通用.选择项目')" width="80%" showFooter>
      <div class="ep-project-select-table">
        <BaseTable
          ref="tableRef"
          :tableName="TABLE_NAME.EP_PROJECT_LIST"
          :api="queryProjectInfoListApi"
          :fullHeight="true"
          :checkboxConfig="{ showHeader: false }"
          showCheckbox
          showIndex
          @checkbox-change="checkboxChangeFun"
          @dataChange="setCheckboxByValueFun"
        />
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">{{ $t('通用.取消') }}</el-button>
        <el-button type="primary" @click="confirmFun">{{ $t('通用.确定') }}</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { TABLE_NAME } from '@/utils/enum/tableName';
import { queryProjectInfoListApi } from '@/api/project/project';

interface Props {
  modelValue?: number | string | null;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  disabled: false,
});

const emit = defineEmits(['update:modelValue', 'select']);

const dialogVisible = ref(false);
const displayName = ref('');
const tableRef = ref<any>(null);

watch(
  () => props.modelValue,
  (val) => {
    if (!val) {
      displayName.value = '';
    }
  }
);

const setCheckboxByValueFun = () => {
  const $table = tableRef.value?.tableRef;
  if (!$table || !props.modelValue) {
    return;
  }

  const tableData = $table.getTableData().fullData;
  const row = tableData.find((row: any) => row.id === props.modelValue);
  if (row) {
    $table.setCheckboxRow(row, true);
  }
};

const openDialogFun = () => {
  if (!props.disabled) {
    dialogVisible.value = true;
  }
};

const checkboxChangeFun = ({ checked, row }: any) => {
  if (checked) {
    const $table = tableRef.value?.tableRef;
    if ($table) {
      $table.clearCheckboxRow();
      $table.setCheckboxRow(row, true);
    }
  }
};

const confirmFun = () => {
  if (!tableRef.value?.tableRef) {
    dialogVisible.value = false;
    return;
  }

  const checkedRows = tableRef.value.tableRef.getCheckboxRecords();

  if (checkedRows.length > 0) {
    const row = checkedRows[0];
    displayName.value = row.projectName;
    emit('update:modelValue', row.id);
    emit('select', row);
  }
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.ep-project-select {
  width: 100%;
  :deep(.el-input) {
    cursor: pointer;
    .el-input__wrapper {
      cursor: pointer;
    }
    .el-input__inner {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.ep-project-select-table {
  height: 620px;
}
</style>
