<template>
  <el-dialog v-model="dialogVisible" title="选择合同" width="880px">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px">
            <el-form-item label="合同编号" prop="contractCode">
              <el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同状态" prop="contractStatus">
              <el-select v-model="queryParams.contractStatus" placeholder="请选择合同状态" clearable>
                <el-option v-for="dict in contract_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-table :data="contractList" border @row-click="selectContract" style="width: 100%" v-loading="contractLoading" highlight-current-row>
      <el-table-column prop="contractCode" label="合同编号" width="150" />
      <el-table-column prop="contractName" label="合同名称" width="150" />
      <el-table-column prop="businessDirection" label="业务方向" width="120">
        <template #default="scope">
          <dict-tag :options="business_direction" :value="scope.row.businessDirection" />
        </template>
      </el-table-column>
      <el-table-column prop="oneCustomerName" label="客户名称" width="150" />
      <el-table-column prop="contractStatus" label="合同状态" width="100">
        <template #default="scope">
          <dict-tag :options="contract_status" :value="scope.row.contractStatus" />
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-4 flex justify-between items-center">
      <pagination
        v-show="contractTotal > 0"
        :total="contractTotal"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getContractList"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="confirmContractSelection">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ContractSelectDialog">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { listContractInfo } from '@/api/oa/erp/contractInfo';
import { ContractInfoVO, ContractInfoQuery } from '@/api/oa/erp/contractInfo/types';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  contractCategory: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:visible', 'contract-selected']);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { business_direction, contract_status } = toRefs<any>(
  proxy?.useDict('business_direction', 'contract_status')
);

// 响应式数据
const dialogVisible = ref(props.visible);
const selectedContract = ref<ContractInfoVO | null>(null);
const contractList = ref<ContractInfoVO[]>([]);
const contractTotal = ref(0);
const contractLoading = ref(true);
const data = reactive<{ queryParams: ContractInfoQuery }>({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    contractCode: undefined,
    contractName: undefined,
    contractCategory: undefined,
    businessDirection: undefined,
    contractStatus: undefined,
    flowStatus: undefined,
    activeFlag: undefined,
    params: {}
  }
});

const { queryParams } = toRefs(data);

const queryFormRef = ref<ElFormInstance>();

// 监听visible属性变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal;
  if (newVal) {
    selectedContract.value = null;
    queryParams.value.contractCategory = props.contractCategory;
    getContractList();
  }
});

// 监听dialogVisible变化，通知父组件
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal);
});

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getContractList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.value.contractCategory = props.contractCategory;
  handleQuery();
};

/** 查询合同信息列表 */
const getContractList = async () => {
  contractLoading.value = true;
  console.log(queryParams.value)
  const res = await listContractInfo(queryParams.value);
  console.log(res)
  contractList.value = res.rows;
  contractTotal.value = res.total;
  contractLoading.value = false;
};

// 选择合同
const selectContract = (row: ContractInfoVO) => {
  selectedContract.value = row;
};

// 确认合同选择
const confirmContractSelection = () => {
  if (!selectedContract.value) {
    ElMessage.warning('请选择一个合同');
    return;
  }

  emit('contract-selected', selectedContract.value);
  dialogVisible.value = false;
};

// 取消操作
const handleCancel = () => {
  dialogVisible.value = false;
};
</script>

<style scoped>
/* 可以添加组件特定的样式 */
</style>
