<template>
  <el-drawer
    v-model="visible"
    size="85%"
    :modal="false"
    @close="handleClose"
    destroy-on-close
    class="custom-detail-drawer"
  >
    <template #header>
      <div class="detail-header">
        <div class="company-name">{{ form.customerName }}</div>
      </div>
    </template>

    <div class="detail-container" v-loading="loading">
      <div class="main-content">
        <!-- 左侧可切换内容区 -->
        <div class="info-left">
          <!-- 顶部 Tab 栏 (移入左侧区域，确保与右侧对齐) -->
          <div class="tabs-bar">
            <div class="tabs-left-area">
              <div class="tab-item" :class="{ active: activeTab === 'info' }" @click="activeTab = 'info'">资料</div>
              <div class="tab-item" :class="{ active: activeTab === 'care' }" @click="handleCareTabClick">客户关怀</div>
            </div>
          </div>

          <div class="info-content-scroll">
            <!-- 资料内容 -->
            <template v-if="activeTab === 'info'">
              <div class="action-bar">
                <el-button type="primary" icon="Edit" @click="handleUpdate">编辑</el-button>
              </div>

              <div class="info-section">
                <div class="section-title">个人信息</div>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">人员编号</span><span class="value">{{ form.contactNo }}</span></el-col>
                  <el-col :span="8"><span class="label">姓名</span><span class="value">{{ form.contactName }}</span></el-col>
                  <el-col :span="8"><span class="label">联系人类型</span><span class="value">{{ form.roleId == '1' ? '公司职员' : (form.roleId == '2' ? '关系资源人' : '') }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">性别</span><span class="value">{{ form.gender == '0' ? '男' : (form.gender == '1' ? '女' : '') }}</span></el-col>
                  <el-col :span="8"><span class="label">年龄</span><span class="value">{{ form.age }}</span></el-col>
                  <el-col :span="8"><span class="label">籍贯</span><span class="value">{{ form.nativePlace }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">生日</span><span class="value">{{ form.birthday ? form.birthday.substring(0, 10) : '' }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="24"><span class="label">描述</span><span class="value">{{ form.remark }}</span></el-col>
                </el-row>
              </div>

              <div class="info-section">
                <div class="section-title">办公信息</div>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">归属公司</span><span class="value">{{ form.belongCompanyId }}</span></el-col>
                  <el-col :span="8"><span class="label">客户名称</span><span class="value">{{ form.customerName }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">在职状态</span><span class="value">{{ form.status == '0' ? '在职' : (form.status == '1' ? '离职' : '') }}</span></el-col>
                  <el-col :span="8"><span class="label">手机号码</span><span class="value">{{ form.phone }}</span></el-col>
                  <el-col :span="8"><span class="label">部门</span><span class="value">{{ form.deptName }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">职位</span><span class="value">{{ form.roleName }}</span></el-col>
                  <el-col :span="8"><span class="label">办公座机</span><span class="value">{{ form.officePhone }}</span></el-col>
                  <el-col :span="8">
                    <span class="label">办公地址</span>
                    <span class="value">{{ form.addressDetail }}</span>
                  </el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="24"><span class="label">工作内容</span><span class="value">{{ form.jobContent }}</span></el-col>
                </el-row>
              </div>

              <div class="info-section">
                <div class="section-title">家庭信息</div>
                <el-row class="info-row">
                  <el-col :span="24"><span class="label">家庭住址</span><span class="value">{{ form.homeAddress }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">家庭情况</span><span class="value">{{ form.familyStatus }}</span></el-col>
                  <el-col :span="8"><span class="label">爱好</span><span class="value">{{ form.hobby }}</span></el-col>
                  <el-col :span="8"><span class="label">性格特征</span><span class="value">{{ form.character }}</span></el-col>
                </el-row>
                <el-row class="info-row">
                  <el-col :span="8"><span class="label">是否抽烟</span><span class="value">{{ form.isSmoke == '1' ? '是' : '否' }}</span></el-col>
                  <el-col :span="8"><span class="label">是否喝酒</span><span class="value">{{ form.isDrink == '1' ? '是' : '否' }}</span></el-col>
                </el-row>
              </div>
            </template>

            <!-- 客户关怀表格内容 -->
            <template v-else-if="activeTab === 'care'">
              <div class="care-content">
                <div class="action-bar">
                  <el-button type="primary" icon="Plus" @click="handleCareAdd">新增</el-button>
                </div>
                <el-table :data="careList" border stripe class="care-table" :header-cell-style="{ background: '#f8fafc', color: '#333' }">
                  <el-table-column label="单据编号" align="center" prop="receiptId" />
                  <el-table-column label="登记日期" align="center" prop="createTime">
                    <template #default="scope">
                      <span>{{ scope.row.createTime ? scope.row.createTime.substring(0, 10) : '' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="联系人" align="center" prop="contactPerson" />
                  <el-table-column label="关怀类型" align="center" prop="concernType">
                    <template #default="scope">
                      <span>{{ translateDict(scope.row.concernType, careTypeOptions) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额" align="center" prop="amount" />
                  <el-table-column label="操作" align="center" width="120">
                    <template #default="scope">
                      <el-button link type="primary" @click="handleCareDetail(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </div>
        </div>

        <!-- 右侧：通用业务活动组件 (贴顶渲染以实现平行对齐) -->
        <BusinessActivity 
          v-if="form.id"
          :business-id="form.id" 
          business-type="contact"
          :info-data="form"
          class="info-right"
        >
          <template #management>
            <div class="sidebar-grid">
              <div class="sidebar-item">
                <span class="label">创建日期</span>
                <span class="value">{{ form.createTime ? form.createTime.substring(0, 10) : '' }}</span>
              </div>
              <div class="sidebar-item">
                <span class="label">创建人</span>
                <span class="value">{{ form.createByName || form.createBy || '超级管理员' }}</span>
              </div>
              <div class="sidebar-item">
                <span class="label">修改日期</span>
                <span class="value">{{ form.updateTime ? form.updateTime.substring(0, 10) : '' }}</span>
              </div>
              <div class="sidebar-item">
                <span class="label">最后修改人</span>
                <span class="value">{{ form.updateByName || form.updateBy || '' }}</span>
              </div>
            </div>
          </template>
        </BusinessActivity>
      </div>
    </div>
    <!-- 编辑抽屉 -->
    <contact-edit ref="editRef" @success="loadData(form.id)" />
    <!-- 新增客户关怀抽屉 -->
    <care-add ref="careAddRef" @success="handleCareTabClick" />
    <!-- 客户关怀详情 -->
    <care-detail ref="careDetailRef" />
  </el-drawer>
</template>

<script setup name="ContactPersonDetail">
import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getContactPerson } from "@/api/customer/contactPerson";
import { getCustomerInfo } from "@/api/customer/customerInfo/index";
import { listCare } from "@/api/customer/crmCare";
import BusinessActivity from '../../common/businessActivity.vue';
import ContactEdit from './edit.vue';
import CareAdd from '../care/add.vue';
import CareDetail from '../care/detail.vue';

const proxy = getCurrentInstance().proxy;
const { care_type: careTypeOptions } = toRefs(reactive(proxy.useDict("care_type")));
const router = useRouter();
const route = useRoute();

const visible = ref(false);
const loading = ref(false);
const activeTab = ref('info');
const form = ref({});
const careList = ref([]);
const editRef = ref(null);
const careAddRef = ref(null);
const careDetailRef = ref(null);

const open = (id) => {
  visible.value = true;
  if (id) {
    loadData(id);
  }
};

const emit = defineEmits(['success']);

/** 获取详情 */
function loadData(id) {
  loading.value = true;
  getContactPerson(id).then(response => {
    form.value = response.data;
    // 如果接口未直接返回客户名称，尝试通过客户ID获取
    if (!form.value.customerName && form.value.customerId) {
      getCustomerInfo(form.value.customerId).then(res => {
        if (res.data && res.data.customerName) {
          form.value.customerName = res.data.customerName;
        }
      });
    }
    loading.value = false;
  });
}

/** 切换到关怀 Tab */
function handleCareTabClick() {
  activeTab.value = 'care';
  getCareList();
}

/** 获取关怀列表 */
function getCareList() {
  loading.value = true;
  listCare({ personnelNumber: form.value.id }).then(response => {
    careList.value = response.rows || [];
    loading.value = false;
  }).catch(() => {
    loading.value = false;
    careList.value = [];
  });
}

/** 查看关怀详情 */
function handleCareDetail(row) {
  careDetailRef.value.open(row.id);
}

/** 客户关怀新增 */
function handleCareAdd() {
  careAddRef.value.open({
    customerName: form.value.customerName,
    customerId: form.value.customerId,
    contactName: form.value.contactName,
    contactId: form.value.id, // 关键：传入联系人ID
    phone: form.value.phone,
    officePhone: form.value.officePhone,
    profession: form.value.profession,
    department: form.value.deptName,
    salesman: form.value.salesman
  });
}

/** 修改按钮操作 */
function handleUpdate() {
  editRef.value.open(form.value.id);
}

/** 关闭抽屉 */
function handleClose() {
  visible.value = false;
  emit('success');
}

/** 字典翻译 */
function translateDict(value, options) {
  if (!options || !value) return value;
  const item = options.find(o => String(o.value) === String(value));
  return item ? item.label : value;
}

onMounted(() => {
});

defineExpose({ open });
</script>

<style scoped lang="scss">
.custom-detail-drawer {
  :deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 0 20px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
  }
  :deep(.el-drawer__body) {
    padding: 0;
  }
}

.detail-header {
  .company-name {
    font-size: 16px;
    color: #333;
  }
}

.detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tabs-bar {
  display: flex;
  padding: 0 30px; // 与 BusinessActivity 的 padding 对齐
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  height: 56px; // 统一页签高度，对齐右侧 56px
  align-items: center;
  
  .tabs-left-area {
    flex: 1;
    display: flex;
    gap: 30px;
    height: 100%; // 强制撑满
  }
  
  .tabs-right-area {
    width: 450px;
    display: flex;
    padding-left: 30px; 
  }
  
  .tab-item {
    height: 100%; // 物理高度撑满
    display: flex;
    align-items: center;
    justify-content: center; // 文字垂直水平居中
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;
    
    &.active {
      color: #409eff;
      font-weight: 500 !important;
      &::after {
        content: '';
        position: absolute;
        bottom: -1px; // 精准贴线
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background-color: #409eff;
        border-radius: 2px;
        z-index: 1;
      }
    }

    &.active-manage {
       color: #409eff;
       &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #409eff;
      }
    }
  }
}

.main-content {
  flex: 1;
  display: flex;
  padding: 0; // 移除全局 padding
  overflow: hidden; // 由内部容器负责滚动
  gap: 0;
}

.info-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.info-content-scroll {
  flex: 1;
  padding: 20px 30px;
  overflow-y: auto;
}

.info-right {
  width: 400px; // 适当加宽右侧面板
  border-left: 1px solid #f0f0f0;
}

.care-content {
  width: 100%;
}

.care-table {
  margin-top: 10px;
}

.action-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;

  :deep(.el-button--primary) {
    background-color: #4da1ff !important;
    border-color: #4da1ff !important;
    border-radius: 4px;
    padding: 7px 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    
    &:hover {
      opacity: 0.9;
    }
    
    .el-icon {
      font-size: 14px;
    }
  }
}

.info-section {
  margin-bottom: 30px;
  
  .section-title {
    font-size: 15px;
    color: #409eff;
    margin-bottom: 15px;
    font-weight: 500;
  }
}

.info-row {
  margin-bottom: 15px;
  line-height: 1.6;
  
  .el-col {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .label {
    min-width: 60px;
    color: #999;
    font-size: 13px;
    flex-shrink: 0;
  }
  
  .value {
    color: #333;
    font-size: 13px;
    word-break: break-all;
  }
}


.sidebar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 10px; padding: 15px 0; }
.sidebar-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  .label { color: #999; width: 80px; flex-shrink: 0; }
  .value { color: #333; }
}

/* 强制所有字体不加粗 */
:deep(*) {
  font-weight: 400 !important;
}
</style>
