<template>
  <div class="page-container row-container">
    <!-- 工段长表 -->
    <section class="list-part-container" style="flex:2">
      <!-- 搜索区 -->
      <el-form class="list-search-container" ref="queryRef" :inline="true" style="display: flex;" >
        <el-form-item class="section-title" label="工段资源分配" />
        <el-form-item >
          <el-form-item label="工段编码：" prop="deptCode" >
            <el-input v-model.trim="queryParams.deptCode" placeholder="请输入工段编码" clearable style="width: 120px" @keyup.enter="handleQueryUser" />
          </el-form-item>
          <el-form-item label="工段名称：" prop="deptName"  >
            <el-input v-model.trim="queryParams.deptName" placeholder="请输入工段名称" clearable style="width: 120px" @keyup.enter="handleQueryUser" />
          </el-form-item>
          <el-form-item>
            <el-button type="info" icon="Search" @click="handleQueryUser">搜索</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="workSectionTable" :data="deptList" v-loading="workSectionLoading" height="100%" highlight-current-row @current-change="handleWorkSectionChange">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="工段编码" prop="deptCode" width="80" align="center" />
            <el-table-column label="工段名称" prop="label" align="center" />
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <!-- <pagination v-show="formmanTotal > 0" :total="formmanTotal" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="" /> -->
    </section>
    <!-- 调机表 -->
    <section class="list-part-container" style="flex:2">
      <!-- 搜索区 -->
      <el-form class="list-search-container" :model="yardmanParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="调机" />
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="yardmanTable" :data="yardmanList" v-loading="yardmanLoading" height="100%" border highlight-current-row @current-change="handelYardmanListChange">
            <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 ? 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>
        </div>
      </div>
      <pagination v-show="yardmanTotal > 0" :total="yardmanTotal" v-model:page="yardmanParams.pageNum" v-model:limit="yardmanParams.pageSize" @pagination="getYardman" />
    </section>
    <section class="list-part-container" style="flex: 1">
      <!-- 搜索区 -->
      <el-form class="list-search-container" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="调机设备分配" />
        <el-form-item>
          <el-button type="primary" icon="Plus" @click="handleEquipmentAdd()" v-hasPermi="['business:resource_allocation:add']">分配</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table :data="resourceAllocationList" border style="width: 100%" v-loading="resourceAllocationLoading" height="100%">
            <el-table-column label="设备类别" prop="categoryName" width="150" align="center" />
            <el-table-column label="设备名称" prop="equipmentName" width="150" align="center" />
            <el-table-column label="设备规格" prop="standard" width="150" align="center" />
          </el-table>
        </div>
      </div>
      <pagination v-show="equipmentTotal > 0" :total="equipmentTotal" v-model:page="equipmentParams.pageNum" v-model:limit="equipmentParams.pageSize" @pagination="handelYardmanListChange" />
    </section>
    <!-- 表单 -->
    <resource-allocation-form ref="resourceAllocationRef" :get-list="getList" :multiple-selected="handleequipmentDetailSelected"></resource-allocation-form>
  </div>
</template>

<script setup name="ResourceAllocation">
import { workSectionTree } from '@/api/system/dept'
import { getDeptUser } from '@/api/system/user'
import { listResourceAllocation, saveResourceAllocation } from '@/api/business/resourceAllocation'
import { getResourceAllocation } from '@/api/business/equipment'
import { ref } from 'vue'
import resourceAllocationForm from './form'
const { proxy } = getCurrentInstance()

const workSectionLoading = ref(false)
const yardmanLoading = ref(false)
const resourceAllocationLoading = ref(false)

/**工段长list */
const deptList = ref([])
/**调机List */
const yardmanList = ref([])
/**设备分配List */
const resourceAllocationList = ref([])
const resourceAllocationInfo = ref([])
const formmanTotal = ref(0)
const yardmanTotal = ref(0)
const yardmanRow = ref({})
const equipmentTotal = ref(0)
const ids = ref([])
const deptId = ref(0)

const data = reactive({
  /**工段资源分配 */
  queryParams: {
    deptCode: '',
    deptName: ''
  },
  /**调机查询对象*/
  yardmanParams: {
    pageNum: 1,
    pageSize: 10,
    isYardman: 1
  },
  /**调机设备查询对象 */
  equipmentParams: {
    pageNum: 1,
    pageSize: 10,
    isYardman: 1
  }
})
const { yardmanParams, equipmentParams, queryParams } = toRefs(data)
/***********************  方法区  ****************************/

/** 查询资源分配列表 */
function getList() {
  getForman()
}
/**查询工段长 */
function getForman() {
  workSectionLoading.value = true
  workSectionTree(queryParams.value).then((res) => {
    deptList.value = res.data
    workSectionLoading.value = false
    if (deptList.value.length > 0) {
      proxy.$refs.workSectionTable.setCurrentRow(deptList.value[0])
    }
  })
}
function handleQueryUser() {
  getForman()
}
function handleWorkSectionChange(row) {
  if (row) {
    yardmanParams.value.deptId = row.id
    yardmanRow.value = row
    getYardman()
  }
}
/** 查询分配设备 */
function handelYardmanListChange(row) {
  resourceAllocationLoading.value = true
  if (row) {
    yardmanRow.value.deptUserId = row.id
    equipmentParams.value.deptUserId = row.id
    getEquipmentList()
    resourceAllocationLoading.value = false
  }
  /**查询设备 */

  function getEquipmentList() {
    getResourceAllocation(equipmentParams.value).then((res) => {
      if (res.code === 200) {
        resourceAllocationList.value = res.rows
        equipmentTotal.value = res.total
      }
    })
  }
}

/**查询调机 */
function getYardman() {
  yardmanLoading.value = true
  getDeptUser(yardmanParams.value).then((res) => {
    yardmanList.value = res.rows
    yardmanTotal.value = res.total
    if (yardmanList.value.length > 0) {
      proxy.$refs.yardmanTable.setCurrentRow(yardmanList.value[0])
    }
    yardmanLoading.value = false
  })
}
/** 设备多选带回 */
function handleequipmentDetailSelected(selection) {
  resourceAllocationInfo.value = []
  for (var i = 0; i < selection.length; i++) {
    var resourceAllocationDetails = {}
    resourceAllocationDetails.equipmentId = selection[i].equipmentId
    resourceAllocationDetails.deptUserId = yardmanRow.value.deptUserId
    resourceAllocationInfo.value.push(resourceAllocationDetails)
  }
  saveResourceAllocation(resourceAllocationInfo.value).then((res) => {
    if (res.code === 200) {
      getResourceAllocation(equipmentParams.value).then((res) => {
        if (res.code === 200) {
          resourceAllocationList.value = res.rows
          resourceAllocationLoading.value = false
        }
      })
      proxy.$message({
        type: 'success',
        message: '新增成功'
      })
    }
  })
}

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

onMounted(() => {
  getList()
})
</script>
