<template>
  <el-dialog title="客户信息"
             :model-value="showDetail"
             :center="true"
             :before-close="handleClose"
             @open="openDetail"
             width="500px">
    <el-descriptions border :labelStyle="{'text-align':'right'}" :column="1">
      <el-descriptions-item label="编号: ">{{ detail.id }}</el-descriptions-item>
      <el-descriptions-item label="名称: ">{{ detail.customerName }}</el-descriptions-item>
      <el-descriptions-item label="邮箱: ">{{ detail.contacterEmail }}</el-descriptions-item>
      <el-descriptions-item label="联系人:">{{ detail.customerContacter }}</el-descriptions-item>
      <el-descriptions-item label="联系电话: ">{{ detail.contacterPhone }}</el-descriptions-item>
      <el-descriptions-item label="联系地址: ">{{ detail.customerAddress }}</el-descriptions-item>
      <el-descriptions-item label="合同起止时间: ">{{ parseTime(detail.startTime) }} - {{ parseTime(detail.endTime) }}</el-descriptions-item>
      <el-descriptions-item label="客户类型: ">
        <template #default="scope">
          <dict-tag :options="props.adsCustomerTypeDict" :value="detail.customerType"/>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="状态:  ">
        <template #default="scope">
          <el-switch
              v-model="detail.status"
              active-value="ENABLE"
              active-color="#67C23A"
              inactive-value="DISABLE"
              disabled
          ></el-switch>
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script setup>
import {ref, reactive} from "vue";
// import {getCustomer} from "@/api/adsdesk/user/customer"

const {proxy} = getCurrentInstance();

const detail = ref({})

const props = defineProps({
  showDetail: {
    type: Boolean,
    default: false
  },
  customerId: {
    type: String,
    default: null
  },
  adsCustomerTypeDict: {
    type: Object,
    default: {}
  }
})

function openDetail() {
  getCustomer(props.customerId).then(response => {
    detail.value = response.data;
  })
}

function handleClose() {
  proxy.$emit("closeDetail");
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>