<template>
  <div class="page-container row-container">
    <!-- 工段长表 -->
    <section class="list-part-container" style="flex: 1">
      <!-- 搜索区 -->
      <el-form class="list-search-container" :model="formmanParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="工段长资源分配" />
        <el-form-item label="部门名称：">
          <el-input placeholder="请输入部门名称" v-model="formmanParams.deptName" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item label="工段长名称：">
          <el-input placeholder="请输入工段长名称" v-model="formmanParams.nickName" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleFormmanQuery"><i class="el-icon-thumb" aria-hidden="true" />搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table :data="formmanList" highlight-current-row height="100%">
            <el-table-column type="index" label="行号" width="50px" align="center" />
            <el-table-column label="部门名称" prop="deptName" align="center">
              <template #default="scope">
                <span>{{ scope.row.dept.deptName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工段长名称" prop="nickName" width="120" align="center">
              <template #default="scope">
                <span>{{ scope.row.user.nickName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工段长电话" prop="phoneNumber" width="120" align="center">
              <template #default="scope">
                <span>{{ scope.row.user.phoneNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" prop="sex" width="60" align="center">
              <template #default="scope">
                <span>{{ scope.row.user.sex }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template #default="scope">
                <el-button type="warning" link icon="Edit" @click="addResource(scope.row)">编辑资源</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination class="pagination-container" background layout="prev, pager, next" :total="formmanTotal" />
    </section>
    <!-- 调机表 -->
    <section class="list-part-container" style="flex: 1">
      <!-- 搜索区 -->
      <el-form class="list-search-container" :model="yardmanParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="调机资源分配" />
        <el-form-item label="部门名称：">
          <el-input placeholder="请输入部门名称" v-model="yardmanParams.deptName" />
        </el-form-item>
        <el-form-item label="调机名称：">
          <el-input placeholder="请输入调机名称" v-model="yardmanParams.nickName" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleYardmanQuery"><i class="el-icon-thumb" aria-hidden="true" />搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table :data="yardmanList" highlight-current-row height="100%">
            <el-table-column type="index" label="行号" width="50px" align="center" />
            <el-table-column label="部门名称" prop="deptName" align="center">
              <template #default="scope">
                <span>{{ scope.row.dept.deptName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="调机人员名称" prop="nickName" width="120" align="center">
              <template #default="scope">
                <span>{{ scope.row.user.nickName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="调机人员电话" prop="phoneNumber" width="120" align="center">
              <template #default="scope">
                <span>{{ scope.row.user.phoneNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" prop="sex" width="60" align="center">
              <template #default="scope">
                <span>{{ scope.row.user.sex }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template #default="scope">
                <el-button type="warning" link icon="Edit" @click="addResource(scope.row)">编辑资源</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination class="pagination-container" background layout="prev, pager, next" :total="yardmanTotal" />
    </section>
    <!-- 表单 -->
    <resource-allocation-form ref="resourceAllocationRef" :get-list="getList"></resource-allocation-form>
  </div>
</template>

<script setup name="ResourceAllocation">
import { listResourceAllocation, delResourceAllocation } from '@/api/business/resourceAllocation'
import { getDeptUser } from '@/api/system/user'
import { ref } from 'vue'
import resourceAllocationForm from './form'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
/** 查询 对象 */

const resourceAllocationList = ref([])
/**工段长list */
const formmanList = ref([])
/**调机List */
const yardmanList = ref([])
const formmanTotal = ref(0)
const yardmanTotal = ref(0)
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
/** 工段长查询对象 */
const formmanParams = ref({
  pageNum: 1,
  pageSize: 10,
  isDispatcher: null,
  isFormman: 1,
  isYardman: null
})
/** 调机查询对象 */
const yardmanParams = ref({
  pageNum: 1,
  pageSize: 10,
  isDispatcher: null,
  isFormman: null,
  isYardman: 1
})

/***********************  方法区  ****************************/

/** 查询资源分配列表 */
function getList() {
  loading.value = true
  getformman()
  getYardman()
}
/**查询工段长 */
function getformman() {
  getDeptUser(formmanParams.value).then((res) => {
    formmanList.value = res.rows
  })
}
/**查询调机 */
function getYardman() {
  getDeptUser(yardmanParams.value).then((res) => {
    yardmanList.value = res.rows
  })
}

/** 搜索工段长按钮操作 */
function handleFormmanQuery() {
  formmanParams.value.pageNum = 1
  formmanParams.value.isFormman = 1
  getformman()
}
/** 搜索调机按钮操作 */
function handleYardmanQuery() {
  yardmanParams.value.pageNum = 1
  yardmanParams.value.isYardman = 1
  getYardman()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  proxy.$refs.resourceAllocationRef.open()
}

/** 修改按钮操作 */
function handleUpdate(row) {
  const id = row.id || ids.value
  proxy.$refs.resourceAllocationRef.open(id)
}
/**打开分配资源页面 */
function addResource(row) {
  proxy.$refs.resourceAllocationRef.open(row)
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal
    .confirm('是否确认删除选中的数据项？')
    .then(function () {
      return delResourceAllocation(_ids)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功！')
    })
    .catch(() => {})
}

getList()
</script>
