<template>
  <el-dialog
    title="集中周转"
    v-model="visible"
    width="1000px"
    height="400px"
    @close="close"
    append-to-body
    draggable
  >
    <el-form
      ref="dialogForm"
      :model="queryParams"
      :inline="true"
      style="padding-top: 16px"
    >
    <el-form-item label="工段：" label-width="70" prop="label">
      {{ deptName }}
      </el-form-item>
      <el-form-item label="员工编码：" prop="userName" label-width="90">
        <el-input
          v-model.trim="queryParams.userName"
          type="text"
          @keydown.enter.prevent
          style="width: 150px"
          placeholder="请输入员工编码"
          :clearable="true"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="info" icon="Search" @click="handleSearch"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item label="是否集中周转：" prop="isCentralizedTurnover">
        <el-switch
          v-model="queryParams.isCentralizedTurnover"
          active-text="是"
          :active-value="1"
          inactive-text="否"
          :inactive-value="0"
          @change="handleSwitchChange"
        />
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="primary" :disabled="!innerSwitch" @click="handleAddInnerTurnoverUser"
          >添加周转人员</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="innerTurnoverList"
      size="small"
      v-loading="loading"
      border
      height="370px"
    >
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column
        label="员工编码"
        align="center"
        prop="userName"
        width="96"
      />
      <el-table-column
        label="员工姓名"
        align="center"
        prop="nickName"
        width="96"
      />
      <el-table-column
        label="手机号码"
        prop="phoneNumber"
        width="150"
        align="center"
      />
      <el-table-column label="性别" prop="sex" width="60" align="center" />
      <el-table-column
        label="使用单位"
        prop="usageCompanyName"
        width="220"
        align="center"
      />
      <el-table-column label="备注" prop="remark" align="center" />
      <el-table-column label="操作"  align="center">
							<template #default="scope">
								<el-button link type="danger" icon="Delete" @click="handleDeletedUser(scope.row)" >删除</el-button>
							</template>
						</el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Check"
          @click="handleSubmit"
        >
          确 定
        </el-button>
        <el-button type="danger" icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
    <!-- 工段员工添加 -->
    <dialog-person ref="dialogPersonRef" :multiple-selected="handleMultipleSelectedPerson" />
  </el-dialog>
</template>
<script setup>
import { listInnerTurnover,addInnerTurnover } from "@/api/business/innerTurnover";
import dialogPerson from './person'
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
/** 集中周转变量 */
const total = ref(0);
const innerTurnoverList = ref([]);
const visible = ref(false);
const deptName = ref(null)
const loading = ref(false);
const innerSwitch = ref(true);
const queryParams = ref({
  userName: "",
  deptId:null
});

/**
 * 对话框打开 事件
 */
function open(data) {
  visible.value = true;
  console.log(data)
  deptName.value = data.label
  queryParams.value.deptId = data.id
  queryParams.value.isCentralizedTurnover = data.isCentralizedTurnover
  getList();
}
//添加周转人员
function handleAddInnerTurnoverUser() {
  let data = {
    deptId: queryParams.value.deptId,
    hasAdded: innerTurnoverList.value.length > 0 ? innerTurnoverList.value.map(item => item.userId) : []
  }
  proxy.$refs.dialogPersonRef.open(data)
}

/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false;
}
/**
 * 加载数据
 */
function getList() {
  loading.value = true;
  listInnerTurnover(queryParams.value).then((res) => {
    innerTurnoverList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}
function handleSwitchChange(val) {
  innerSwitch.value = true
  if(val == 0) {
    innerSwitch.value = false
  }
}
function handleMultipleSelectedPerson(selection) {
  innerTurnoverList.value.push(...selection);
}
function handleDeletedUser(row) {
  innerTurnoverList.value.splice(innerTurnoverList.value.indexOf(row), 1);
}
function handleSubmit() {
  if(queryParams.value.isCentralizedTurnover == 1 &&innerTurnoverList.value.length == 0) {
    proxy.$modal.msgError('集中周转工段至少添加一位人员')
  }else{
    innerTurnoverList.value.forEach(element => {
      element.deptId = queryParams.value.deptId
    });
    let data ={
      deptId:queryParams.value.deptId,
      innerTurnoverList:innerTurnoverList.value,
      isCentralizedTurnover:queryParams.value.isCentralizedTurnover
    }
    addInnerTurnover(data).then(res => {
      if(res.code == 200) {
        proxy.$modal.msgSuccess('设置成功')
        close()
       emit("handleSaveSuccess")
      }
    }
)
  }
}


/**  搜索 事件 */
function handleSearch() {
  getList();
}

defineExpose({
  open,
});
</script>
