<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" style="display: flex">
        <el-form-item class="section-title" label="工段列表"  />
        <el-form-item label="工段编码：" prop="deptCode" style="margin-left: 30px;">
          <el-input v-model.trim="queryParams.deptCode" placeholder="请输入工段编码" clearable style="width: 160px" @keyup.enter="handleQueryDept" />
        </el-form-item>
        <el-form-item label="工段名称：" prop="deptName">
          <el-input v-model.trim="queryParams.deptName" placeholder="请输入工段名称" clearable style="width: 160px" @keyup.enter="handleQueryDept" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQueryDept">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table ref="workSectionTable" v-loading="workSectionLoading" :data="workSectionList" row-key="id" 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>
    </section>

    <!-- 右侧区域 -->
    <section class="list-part-container" style="flex: 2">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" :inline="true">
        <el-form-item class="section-title" label="周转位置" />
        <el-form-item>
          <el-button type="primary" icon="Plus" :disabled="workSectionList.length === 0" @click="handleShowTurnoverFormDialog(null)" v-hasPermi="['business:turnover:add']">新增</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="turnoverLoading" :data="turnoverList" height="100%" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="40" align="center" /> -->
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="周转区名称" prop="code" width="110" align="center" />
            <el-table-column label="状态" width="80" prop="status" align="center">
              <template #default="scope">
                <dict-tag :options="turnover_status" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" align="center" />
            <el-table-column label="操作" width="150" align="center">
              <template #default="scope">
                <el-button link type="warning" icon="Edit" @click="handleShowTurnoverFormDialog(scope.row.id)" v-hasPermi="['business:turnover:edit']">
                  编辑
                </el-button>
                <el-button link type="danger" icon="Delete" @click="handleDeleteTurnover(scope.row)" v-hasPermi="['business:turnover:remove']">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
    <turnover-form ref="turnoverFormRef" @handleSaveSuccess="handleRefreshTurnover" />
  </div>
</template>

<script setup>
import { workSectionTree } from '@/api/system/dept'
import { listTurnover, delTurnover } from '@/api/business/turnover'
import turnoverForm from './form'
import useUserStore from '@/store/modules/user'
import { User } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { turnover_status } = proxy.useDict('turnover_status')

/** 工段变量 */
const workSectionList = ref([])
const workSectionLoading = ref(false)
const currentWorkSection = ref({})
/**周转变量 */
const turnoverList = ref([])
const turnoverLoading = ref(false)
const ids = ref([])
/** 查询对象 */
const queryParams = ref({
  deptCode: '',
  deptName: ''
})

/****************************  工段方法区  ****************************/

/** 获取工段列表 */
function getWorkSections() {
  workSectionLoading.value = true
  //如果当前登录人不是管理员传true；否则传false
  queryParams.value.getType = true
  workSectionTree(queryParams.value).then((res) => {
    workSectionList.value = res.data
    if (workSectionList.value.length > 0) {
      proxy.$refs.workSectionTable.setCurrentRow(workSectionList.value[0])
    }
    else {
      turnoverList.value = []
    }
    workSectionLoading.value = false
  })
}
// 工段列表点击事件
const handleWorkSectionChange = (row) => {
  if (row) {
    currentWorkSection.value = row
    getTurnovers()
  }
}
//工段列表查询
function handleQueryDept() {
  getWorkSections()
}

/****************************  周转区方法区  ****************************/
//获得周转位置
const getTurnovers = () => {
  turnoverLoading.value = true
  listTurnover({ deptId: currentWorkSection.value.id ?? '0' }).then((res) => {
    turnoverList.value = res.data
    turnoverLoading.value = false
  })
}
// 周转区多选事件
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id)
}

/** 打开周转区对话框事件 */
const handleShowTurnoverFormDialog = (id) => {
  proxy.$refs.turnoverFormRef.open({
    deptId: currentWorkSection.value.id,
    id: id
  })
}

/** 刷新周转区事件 */
function handleRefreshTurnover(row) {
  getTurnovers()
}

/** 删除周转区事件 */
function handleDeleteTurnover(row) {
  proxy.$modal
    .confirm('确定删除选中项？')
    .then(() => {
      return delTurnover(row.id)
    })
    .then(() => {
      getTurnovers()
      proxy.$modal.msgSuccess('删除成功！')
    })
    .catch(() => {})
}

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