<template>
  <el-dialog title="中介详情维护" :visible.sync="dialogVisible" width="1100px" append-to-body>
    <div class="section-header">
      <span>中介基本信息</span>
      <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="$emit('edit-person')">编辑中介信息</el-button>
    </div>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="姓名">{{ detailData.name || '-' }}</el-descriptions-item>
      <el-descriptions-item label="证件号">{{ detailData.personId || '-' }}</el-descriptions-item>
      <el-descriptions-item label="人员类型">{{ detailData.personType || '-' }}</el-descriptions-item>
      <el-descriptions-item label="中介子类型">{{ detailData.personSubType || detailData.relationType || '-' }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ formatGender(detailData.gender) }}</el-descriptions-item>
      <el-descriptions-item label="证件类型">{{ detailData.idType || '-' }}</el-descriptions-item>
      <el-descriptions-item label="职位">{{ detailData.position || '-' }}</el-descriptions-item>
      <el-descriptions-item label="手机号码">{{ detailData.mobile || '-' }}</el-descriptions-item>
      <el-descriptions-item label="微信号">{{ detailData.wechatNo || '-' }}</el-descriptions-item>
      <el-descriptions-item label="所在公司">{{ detailData.company || '-' }}</el-descriptions-item>
      <el-descriptions-item label="企业统一信用码">{{ detailData.socialCreditCode || '-' }}</el-descriptions-item>
      <el-descriptions-item label="联系地址" :span="2">{{ detailData.contactAddress || '-' }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
    </el-descriptions>

    <div class="section-header">
      <span>亲属信息</span>
      <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="$emit('add-relative')">新增亲属</el-button>
    </div>
    <el-table :data="relativeList" border>
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="证件号" prop="personId" />
      <el-table-column label="关联关系" prop="personSubType" />
      <el-table-column label="手机号码" prop="mobile" />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="$emit('edit-relative', { ...scope.row, recordType: 'RELATIVE' })">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="$emit('delete-relative', { ...scope.row, recordType: 'RELATIVE' })">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="section-header">
      <span>关联机构信息</span>
      <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="$emit('add-enterprise-relation')">新增关联机构</el-button>
    </div>
    <el-table :data="enterpriseRelationList" border>
      <el-table-column label="机构名称" prop="enterpriseName" />
      <el-table-column label="统一社会信用代码" prop="socialCreditCode" />
      <el-table-column label="关联职务" prop="relationPersonPost" />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="$emit('edit-enterprise-relation', { ...scope.row, recordType: 'ENTERPRISE_RELATION' })">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="$emit('delete-enterprise-relation', { ...scope.row, recordType: 'ENTERPRISE_RELATION' })">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "DetailDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: () => ({})
    },
    relativeList: {
      type: Array,
      default: () => []
    },
    enterpriseRelationList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        this.dialogVisible = val;
      }
    },
    dialogVisible(val) {
      this.$emit("update:visible", val);
    }
  },
  methods: {
    formatGender(gender) {
      if (gender === "M") return "男";
      if (gender === "F") return "女";
      if (gender === "O") return "其他";
      return gender || "-";
    }
  }
};
</script>

<style scoped>
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 12px;
  font-weight: 600;
}
</style>
