<template>
  <div class="tab-content">
    <div class="info-section">
      <div class="section-title">业务联系人</div>

      <el-form :model="contactSearchParams" :inline="true" style="margin-bottom: 20px">
        <el-form-item label="姓名">
          <el-input v-model="contactSearchParams.userName" placeholder="请输入姓名" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="contactSearchParams.phone" placeholder="请输入手机号" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="emit('search')">搜索</el-button>
          <el-button icon="Refresh" @click="emit('reset')">重置</el-button>
          <el-button v-if="!isViewMode" type="primary" icon="Plus" @click="emit('add')">新增联系人</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="contactLoading" :data="contactList" border style="width: 100%">
        <!-- <el-table-column prop="supplierName" label="所属供应商" align="center" /> -->
        <el-table-column prop="userNo" label="用户编号" align="center" />
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="departmentNo" label="部门" align="center" />
        <el-table-column prop="position" label="职位" align="center" />
        <el-table-column prop="roleNo" label="角色" align="center" />

        <el-table-column prop="isPrimaryContact" label="主要联系人" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isPrimaryContact"
              active-value="0"
              inactive-value="1"
              @change="emit('change-primary', scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isRegister" label="允许登录供应商端" align="center">
          <template #default="scope">
            <span>{{ scope.row.isRegister === '1' ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="emit('view', scope.row)">查看</el-button>
            <el-button v-if="!isViewMode" link type="primary" @click="emit('edit', scope.row)">编辑</el-button>
            <el-button v-if="!isViewMode" link type="primary" @click="emit('delete', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  contactSearchParams: { phone: string; userName: string };
  contactList: any[];
  contactLoading: boolean;
  isViewMode: boolean;
}>();

const emit = defineEmits<{
  (e: 'search'): void;
  (e: 'reset'): void;
  (e: 'add'): void;
  (e: 'view', row: any): void;
  (e: 'edit', row: any): void;
  (e: 'delete', row: any): void;
  (e: 'change-primary', row: any): void;
}>();
</script>
