<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-drawer
      v-model="visible"
      size="80%"
      direction="rtl"
      :close-on-press-escape="false"
  >
    <div class="page-container form-container">
      <div class="form-btns-container">
        <span class="title-label"
        ><el-icon>
            <Document/>
          </el-icon>
          联系人详情</span
        >
        <el-button
            type="primary"
            icon="Check"
            style="margin-right: 10px;margin-left: 10px;"
            @click="handleSave"
        >保 存
        </el-button
        >
        <el-button icon="Close" @click="handleCancel">取 消</el-button>
      </div>
      <!-- 搜索区域 -->
      <el-form class="list-search-container" :inline="true">
        <el-form-item>
          <el-button
              type="warning"
              icon="Plus"
              @click="handleAddConcacts()"
          >添加人员
          </el-button
          >
          <el-button
              type="danger"
              icon="Delete"
              :disabled="selections.length == 0"
              @click="handleDelete"
          >批量删除
          </el-button
          >
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <el-table
            ref="equipmentTable"
            v-loading="loading"
            row-key="id"
            @selection-change="handleSelectionChange"
            :data="contactsList"
            height="100%"
        >
          <el-table-column type="selection" width="40" align="center"/>
          <el-table-column type="index" label="行号" width="50" align="center" />
          <el-table-column label="姓名" prop="name" align="center">
            <template #default="scope">
              <el-input
                v-model.trim="scope.row.name"
                placeholder="请输入姓名"
              />
            </template>
          </el-table-column>
          <el-table-column label="职务" prop="rule" align="center">
            <template #default="scope">
              <el-input
                v-model.trim="scope.row.rule"
                placeholder="请输入职务"
              />
            </template>
          </el-table-column>
          <el-table-column label="电话" prop="phoneNumber" align="center">
            <template #default="scope">
              <el-input
                v-model.trim="scope.row.phoneNumber"
                placeholder="请输入电话"
              />
            </template>
          </el-table-column>
          <el-table-column label="邮箱" prop="email" align="center">
            <template #default="scope">
              <el-input
                v-model.trim="scope.row.email"
                placeholder="请输入邮箱"
              />
            </template>
          </el-table-column>
          <el-table-column label="是否默认联系人" align="center" prop="status" width="200">
							<template #default="scope">
							<el-switch
								v-model="scope.row.isDefault"
								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
								:active-value="1"
								:inactive-value="0"
								active-text="是"
    							inactive-text="否"
								@change="handleChangeAuditStatus(scope.row)"
								/>
							</template>
						</el-table-column>
        </el-table>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import {saveSupplierContacts, getSupplierContacts} from "@/api/business/supplier";
const {proxy} = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
/** 表单抽屉 页变量 */
const selections = ref([]);
const loading = ref(false);
const info = ref({})
const contactsList = ref([]);
const visible = ref(false);
const detailsRow = {
  id: null,
  name: "",
  rule: "",
  phoneNumber: "",
  email:"",
  isDefault:0
};

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (data) => {
  loading.value = true;
  info.value = data
  getSupplierContacts({supplierId: data.id}).then(res =>{
    if(res.code == 200) {
      contactsList.value = res.data
    }
  })
  loading.value = false;
  visible.value = true;
};

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
}
//添加人员
function handleAddConcacts() {
  const newDetail = JSON.parse(JSON.stringify(detailsRow));
  newDetail.supplierId = info.value.id
  newDetail.supplierName = info.value.name
  contactsList.value.push(newDetail)
}
function handleChangeAuditStatus(row) {
 if(row.isDefault == 1) {
  var defaultList = contactsList.value.filter(item => {return item.isDefault == 1 && item!=row})
  console.log(defaultList)
  if (defaultList.length > 0) {
    contactsList.value = contactsList.value.map(item => {
      if (item.isDefault == 1) {
        return defaultList[0] === item ? { ...item, isDefault: 0 }: item ;
      }
      return item;
    });
  }
 }
}

/**批量删除 */
function handleDelete() {
 contactsList.value = contactsList.value.filter(
      (item) => !selections.value.some((selectedItem) => selectedItem === item)
  );
}

/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false;
}

/** 提交按钮 */
const handleSave = () => {
  var flag = true
  for(let i = 0; i < contactsList.value.length; i++) {
    if(contactsList.value[i].name =="") {
      proxy.$modal.msgError("第"+(i+1)+"行姓名不能为空");
      return;
    }
    if(contactsList.value[i].phoneNumber =="") {
      proxy.$modal.msgError("第"+(i+1)+"行电话不能为空");
      return;
    }
  }
  if(contactsList.value.length == 0) {
    flag = false
    proxy.$modal.msgError("请添加联系人");
  }
  let isDefaultList = contactsList.value.filter(item => { return item.isDefault == 1
  })
  if(isDefaultList.length == 0) {
    flag = false
    proxy.$modal.msgError("请设置默认联系人");
  }
  if(flag) {
  saveSupplierContacts(contactsList.value).then(res => {
    if(res.code == 200) {
      proxy.$modal.msgSuccess("保存成功");
      visible.value = false;
      emit("handleSaveSuccess");
    }
  })
}
    }



/** 取消按钮 */
const handleCancel = () => {
  visible.value = false;
  reset();
};

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
