<template>
  <vModal
    v-model:visible="visibleModal"
    title="合同详情"
    width="60%"
    :hide-cancel="true"
    ok-text="关闭"
    :body-style="{ paddingTop: 0 }"
    @modal-handle-ok="modelHandleOk"
    @modal-handle-cancel="modelHandleCancel"
  >
    <ContractComponent
      :is-auth-customer="isAuthCustomer"
      container-height="80vh"
      :contract-id="contractId"
      :customer-list="customerList"
      :account-list="accountList"
    />
  </vModal>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import vModal from '@/components/modal/index.vue'
import ContractComponent from '../../project/components/detail/contract.vue'

const visibleModal = ref(false) // 是否显示对话框
defineProps({
  isAuthCustomer: {
    type: Boolean
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  customerList: {
    type: Array as PropType<{ id: string; name: string }[]>
  }
})

const contractId = ref()

/**
 * 隐藏model 对话框，重置表单
 */
const modelHandleCancel = () => {}

/**
 * 点击确认按钮时，cb(false)时不会继续后续操作
 * @param cb 回调函数，
 */
const modelHandleOk = async (cb: (closed: boolean) => void) => {
  return cb(true)
}

/**
 * 显示级别modal
 * @param type modal 类型
 * @param item
 */
const showDetailModal = async (id: string) => {
  contractId.value = id
  visibleModal.value = true
}

defineExpose({ showDetailModal }) // 暴露子组件的方法或者数据
</script>

<style lang="less" scoped>
.container {
  padding: 5px 20px 0px 20px;
  .general-card {
    :deep(.arco-card-header) {
      padding: 20px 20px 0 20px;
    }
    .item-container {
      :deep(.arco-descriptions-item-label) {
        font-weight: normal;
      }
    }
  }
}
:deep(.arco-alert) {
  text-align: center;
  font-size: 16px;
}
:deep(.arco-table-th) {
  background: none;
}
:deep(.arco-modal-body) {
  padding-top: 0;
}
</style>
