<script setup>
import { ref } from 'vue'

const props = defineProps({
  isOpenCustomDtl: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '客户信息'
  },
  companyInfo: {
    type: Object,
  }
})

const emit = defineEmits(['cancelHandle'])


function cancelHandle() {
  emit('cancelHandle');
}
</script>
<template>
  <el-dialog
    :model-value="isOpenCustomDtl"
    :close-on-click-modal="false"
    :modal-append-to-body='false'
    @close="cancelHandle"
    custom-class="customDtl_Dia"
    center
    width="50%"
  >
    <template #header>
      <div style="display:flex;align-items:center;">
        <span style="font-size:16px;">{{title}}</span>
      </div>
    </template>
		<ul class="custom_dtl">
			<li>
				客户名称：{{companyInfo.CompanyName}}
			</li>
			<li>
				社会信用码：{{companyInfo.CreditCode}}
			</li>
			<li>
				地址：{{companyInfo.Address}}
			</li>
			<li>
				客户类型：{{companyInfo.CompanyType}}
			</li>
			<li>
				客户状态：{{companyInfo.Status}}
			</li>
			<li>
				客户来源：{{companyInfo.Source}}
			</li>
			<li>
				行业：{{companyInfo.IndustryName}}
			</li>
			<li>
				所属销售：{{companyInfo.SellerName}}
			</li>
			<li>
				申请理由：{{companyInfo.ApplyReasons||'无'}}
			</li>
		</ul>
		<div style="display:flex;justify-content:center;margin:60px 0 40px;">
			<el-button type="primary" style="width:80px;marginRight:24px;" @click="cancelHandle">知道了</el-button>
		</div>
	</el-dialog>
</template>
<style scoped lang="scss">
.customDtl_Dia { 
	:deep(.el-dialog__header ,.el-dialog__close.el-icon.el-icon-close) {
	 background: #fff;
	 color: #000;
	}
	.custom_dtl {
		padding: 20px 20px 10px;
		border: 1px solid #DCDFE6;
		font-size: 16px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		li {
			margin-right: 100px;
			margin-bottom: 20px;
			min-width: 250px;
		}
	}
}
</style>