<template>
  <el-drawer
    v-model="visible"
    title="编辑联系人"
    size="70%"
    :modal="false"
    @close="handleClose"
    destroy-on-close
  >
    <div class="drawer-content">
      <el-form ref="contactPersonRef" :model="form" :rules="rules" label-width="100px" v-loading="loading">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本信息" name="basic">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="人员编号" prop="contactNo">
                  <el-input v-model="form.contactNo" placeholder="请输入人员编号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" prop="contactName">
                  <el-input v-model="form.contactName" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%">
                    <el-option label="男" value="0" />
                    <el-option label="女" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker clearable
                    v-model="form.birthday"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择生日"
                    style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色" prop="roleName">
                  <el-input v-model="form.roleName" placeholder="请输入角色" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="工作信息" name="work">
             <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="客户名称" prop="customerName">
                  <el-input v-model="form.customerName" placeholder="请输入客户名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" prop="deptName">
                  <el-input v-model="form.deptName" placeholder="请输入部门" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="工作内容" prop="jobContent">
                  <el-input v-model="form.jobContent" type="textarea" placeholder="请输入内容" :rows="4" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="扩展信息" name="extra">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="form.age" placeholder="请输入年龄" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="籍贯" prop="nativePlace">
                  <el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否抽烟" prop="isSmoke">
                  <el-radio-group v-model="form.isSmoke">
                    <el-radio value="1">是</el-radio>
                    <el-radio value="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否喝酒" prop="isDrink">
                  <el-radio-group v-model="form.isDrink">
                    <el-radio value="1">是</el-radio>
                    <el-radio value="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="家庭地址" prop="region">
                  <div style="display: flex; gap: 10px; width: 100%">
                    <el-cascader
                      v-model="form.region"
                      :options="areaOptions"
                      :props="{ label: 'areaName', value: 'id', children: 'children' }"
                      placeholder="请选择省/市/县"
                      style="width: 250px"
                      clearable
                    />
                    <el-input v-model="form.homeAddressDetail" placeholder="请输入详细地址" style="flex: 1" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="联系方式" name="contact">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入手机号码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="座机" prop="officePhone">
                  <el-input v-model="form.officePhone" placeholder="请输入座机" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="办公地址" prop="addressDetail">
                  <el-input v-model="form.addressDetail" placeholder="请输入办公地址" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="其他" name="other">
             <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :rows="4" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup name="ContactPersonEdit">
import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getContactPerson, updateContactPerson } from "@/api/customer/contactPerson";
import { listProvinceWithCities } from "@/api/customer/addressArea";

const proxy = getCurrentInstance().proxy;
const router = useRouter();
const route = useRoute();

const visible = ref(false);
const loading = ref(false);
const activeTab = ref("basic");

const areaOptions = ref([]);

const data = reactive({
  form: {
    region: []
  },
  rules: {
    contactName: [
      { required: true, message: "姓名不能为空", trigger: "blur" }
    ],
  }
});

const { form, rules } = toRefs(data);

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

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

/** 获取详情 */
function loadData(id) {
  loading.value = true;
  getContactPerson(id).then(response => {
    const resData = response.data;
    // 初始化 region 数组用于回显
    resData.region = [];
    if (resData.homeProvinceId) resData.region.push(resData.homeProvinceId);
    if (resData.homeCityId) resData.region.push(resData.homeCityId);
    if (resData.homeAreaId) resData.region.push(resData.homeAreaId);
    
    form.value = resData;
    loading.value = false;
  });
}

onMounted(async () => {
  const resArea = await listProvinceWithCities();
  areaOptions.value = resArea.data || [];
});

/** 提交按钮 */
function submitForm() {
  proxy.$refs["contactPersonRef"].validate(valid => {
    if (valid) {
      // 转换地理位置 ID
      if (form.value.region && form.value.region.length > 0) {
        form.value.homeProvinceId = form.value.region[0];
        form.value.homeCityId = form.value.region[1];
        form.value.homeAreaId = form.value.region[2] || null;
      }
      
      updateContactPerson(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        visible.value = false;
        emit('success');
      });
    }
  });
}

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

defineExpose({ open });
</script>

<style scoped lang="scss">
.drawer-content {
  padding: 20px;


}
.drawer-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
}

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