<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"
  >
    <div class="container">
      <a-card class="general-card" style="min-height: 50vh">
        <div class="item-container">
          <a-space :size="16" direction="vertical" fill>
            <a-alert :show-icon="false">基本信息</a-alert>
            <a-row
              style="width: 90%; margin: 0 auto; padding: 0px 0px 20px 0px"
              :gutter="[20, 20]"
            >
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    客户名称：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.name"
                      placeholder="客户名称"
                      :not-allow-null="true"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    客户编码：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    {{ detail.customer?.id }}
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    所属地区：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.region_id"
                      :options="regionTreeData"
                      placeholder="所属地区"
                      :not-allow-null="true"
                      :components-type="ComponentsType.CASCADER"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    所属行业：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.industry_id"
                      placeholder="所属行业"
                      :not-allow-null="true"
                      :options="industryList"
                      :components-type="ComponentsType.SELECT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    客户级别：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.level_id"
                      placeholder="客户级别"
                      :options="levelList"
                      :not-allow-null="true"
                      :components-type="ComponentsType.SELECT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    市场负责人：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.bizman_id"
                      placeholder="市场负责人"
                      :options="accountList"
                      :components-type="ComponentsType.SELECT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    客户联系人：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.link_man"
                      placeholder="客户联系人"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    创建日期：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    {{ detail.customer?.created_at }}
                  </div>
                </div>
              </a-col>
              <a-col :span="16">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    经营地址：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.address"
                      placeholder="客户实际经营地址"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="24">
                <div
                  class="editor-descriptions-container"
                  style="align-items: flex-start"
                >
                  <div style="" class="editor-descriptions-label">
                    客户备注：
                  </div>
                  <div class="editor-descriptions-content" style="height: auto">
                    <HoverEditorDetail
                      v-model="modifyParams.memo"
                      placeholder="客户备注"
                      :components-type="ComponentsType.TEXTAREA"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
            </a-row>
            <a-alert :show-icon="false">开票资料</a-alert>
            <a-row
              style="width: 90%; margin: 0 auto; padding: 0px 0px 20px 0px"
              :gutter="[20, 20]"
            >
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    发票抬头：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.invoice_title"
                      placeholder="发票抬头"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    客户税号：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.tax_no"
                      placeholder="客户税号"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    客户开户行：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.bank_name"
                      placeholder="客户开户行"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    开户行账号：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.bank_account"
                      placeholder="客户开户行"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    开户行地址：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.invoice_addr"
                      placeholder="开户行地址"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
              <a-col :span="8">
                <div style="" class="editor-descriptions-container">
                  <div style="" class="editor-descriptions-label">
                    开户行电话：
                  </div>
                  <div class="editor-descriptions-content" style="">
                    <HoverEditorDetail
                      v-model="modifyParams.invoice_phone"
                      placeholder="开户行电话"
                      :components-type="ComponentsType.STRINGINPUT"
                      @modify="modifyDetail"
                    />
                  </div>
                </div>
              </a-col>
            </a-row>
            <!-- <a-space :size="16" direction="vertical" fill>
            <a-descriptions
              size="large"
              :label-style="{
                textAlign: 'right',
                width: '200px',
                paddingRight: '10px',
                fontWeight: 'bold',
                paddingBottom: '30px',
                color: 'rgb(var(--gray-8))'
              }"
              :value-style="{ width: '300px', paddingBottom: '30px' }"
            >
              <template #title>
                <a-alert :show-icon="false">基本信息</a-alert>
              </template>
              <a-descriptions-item label="客户名称：">
                <HoverEditorDetail
                  v-model="modifyParams.name"
                  placeholder="客户名称"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户编码：">
                {{ detail.customer?.id }}
              </a-descriptions-item>
              <a-descriptions-item label="所在地区：">
                <HoverEditorDetail
                  v-model="modifyParams.region_id"
                  :options="regionTreeData"
                  placeholder="所属地区"
                  :components-type="ComponentsType.CASCADER"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="所属行业：">
                <HoverEditorDetail
                  v-model="modifyParams.industry_id"
                  placeholder="所属行业"
                  :options="industryList"
                  :components-type="ComponentsType.SELECT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户级别：">
                <HoverEditorDetail
                  v-model="modifyParams.level_id"
                  placeholder="客户级别"
                  :options="levelList"
                  :components-type="ComponentsType.SELECT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="市场负责人：">
                <HoverEditorDetail
                  v-model="modifyParams.bizman_id"
                  placeholder="市场负责人"
                  :options="accountList"
                  :components-type="ComponentsType.SELECT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户联系人：">
                <HoverEditorDetail
                  v-model="modifyParams.link_man"
                  placeholder="客户联系人"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="联系人电话：">
                <HoverEditorDetail
                  v-model="modifyParams.link_phone"
                  placeholder="客户联系人电话"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>

              <a-descriptions-item label="创建日期：">
                {{ detail.customer?.created_at }}
              </a-descriptions-item>
              <a-descriptions-item label="经营地址：">
                <HoverEditorDetail
                  v-model="modifyParams.address"
                  placeholder="客户实际经营地址"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户备注：" :span="2">
                <HoverEditorDetail
                  v-model="modifyParams.memo"
                  placeholder="客户备注"
                  :components-type="ComponentsType.TEXTAREA"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
            </a-descriptions> -->
            <!-- <a-descriptions
              size="large"
              :label-style="{
                textAlign: 'right',
                width: '200px',
                paddingRight: '10px',
                fontWeight: 'bold',
                paddingBottom: '30px',
                color: 'rgb(var(--gray-8))'
              }"
              :value-style="{ width: '300px', paddingBottom: '30px' }"
            >
              <template #title>
                <a-alert :show-icon="false">开票资料</a-alert>
              </template>
              <a-descriptions-item label="发票抬头：">
                <HoverEditorDetail
                  v-model="modifyParams.invoice_title"
                  placeholder="发票抬头"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户税号：">
                <HoverEditorDetail
                  v-model="modifyParams.tax_no"
                  placeholder="发票抬头"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="客户开户行：">
                <HoverEditorDetail
                  v-model="modifyParams.bank_name"
                  placeholder="客户开户行"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="开户行账号：">
                <HoverEditorDetail
                  v-model="modifyParams.bank_account"
                  placeholder="客户开户行"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="开户行地址：">
                <HoverEditorDetail
                  v-model="modifyParams.invoice_addr"
                  placeholder="开户行地址"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
              <a-descriptions-item label="开户行电话：">
                <HoverEditorDetail
                  v-model="modifyParams.invoice_phone"
                  placeholder="开户行电话"
                  :components-type="ComponentsType.STRINGINPUT"
                  @modify="modifyDetail"
                />
              </a-descriptions-item>
            </a-descriptions> -->
          </a-space>
        </div>
      </a-card>
    </div>
  </vModal>
</template>

<script lang="ts" setup>
import { PropType, nextTick, reactive, ref } from 'vue'
import { ComponentsType } from '@/enums/api'
import HoverEditorDetail from '@/components/hover-editor-detail/index.vue'
import vModal from '@/components/modal/index.vue'
import { getCustomerDetail, modifyCustomer } from '@/api/biz/customer'
import {
  CustomerDetailResParams,
  ModifyCustomerReqParams
} from '@/types/customer'
import { DomainTree } from '@/types/domain'
import Message from '@arco-design/web-vue/es/message'
import { useEmitt } from '@/logics/mitt/useEmitt'

const visibleModal = ref(false) // 是否显示对话框
const { emitter } = useEmitt()
defineProps({
  regionTreeData: {
    type: Array as PropType<DomainTree[]>
  },
  industryList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  levelList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>
  }
})

const detail = reactive<{ customer?: CustomerDetailResParams }>({
  customer: undefined
}) // 客户详情

const modifyParams = ref<ModifyCustomerReqParams>({
  id: ''
})

/**
 * 获取客户详情
 * @param customerId
 */
const getDetail = async (customerId: string) => {
  const customerDetail = await getCustomerDetail(customerId)
  nextTick(() => {
    detail.customer = customerDetail
    modifyParams.value.id = customerDetail.id
    modifyParams.value.name = customerDetail.name
    modifyParams.value.region_id = customerDetail.region_id
    modifyParams.value.level_id = customerDetail.level_id
    modifyParams.value.industry_id = customerDetail.industry_id
    modifyParams.value.link_man = customerDetail.link_man
    modifyParams.value.link_phone = customerDetail.link_phone
    modifyParams.value.address = customerDetail.address
    modifyParams.value.memo = customerDetail.memo
    modifyParams.value.tax_no = customerDetail.tax_no
    modifyParams.value.bank_name = customerDetail.bank_name
    modifyParams.value.bank_account = customerDetail.bank_account
    modifyParams.value.invoice_addr = customerDetail.invoice_addr
    modifyParams.value.invoice_phone = customerDetail.invoice_phone
    modifyParams.value.invoice_title = customerDetail.invoice_title
    modifyParams.value.bizman_id = customerDetail.bizman_id
  })
}

/**
 * 隐藏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 (customerId: string) => {
  await getDetail(customerId)
  visibleModal.value = true
}

// 修改客户信息
const modifyDetail = async () => {
  const params = modifyParams.value
  await modifyCustomer(params)
  emitter.emit('get_customer_list')
  Message.success('修改成功')
}

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 {
      padding-top: 20px;
      :deep(.arco-descriptions-item-label) {
        font-weight: normal;
      }
    }
  }
}
:deep(.arco-alert) {
  text-align: center;
  font-size: 16px;
}
:deep(.arco-table-th) {
  background: none;
}
</style>
