<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-dialog :title="title" height="100%" v-model="visible" @close="cancel" width="1000px" append-to-body draggable>
    <template #header>
      <div>
        <span style="color: #fff">资源分配</span>
      </div>
    </template>
    <div class="page-container form-container">
      <!-- 工序分配 -->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-if="jobStatus" label="工序分配" name="process">
          <!-- 工段长表 -->
          <section class="list-part-container" style="flex: 1;">
            <el-form class="list-search-container" :inline="true">
              <el-form-item class="section-title" label="我的工序：" />
            </el-form>
            <!-- 列表区 -->
            <el-table :data="formmanList" highlight-current-row height="200px">
              <el-table-column type="index" label="行号" width="50px" align="center" />
              <el-table-column label="工序步骤编号" prop="processCode" align="center" />
              <el-table-column label="工序编码" prop="processCode" align="center" />
              <el-table-column label="工序简称" prop="processAlias" align="center" />
              <el-table-column label="图纸" align="center" />
              <el-table-column v-if="!editStatus" label="操作" width="100px" align="center">
                <template #default="scope">
                  <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row,'formman')">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </section>
          <!-- 工序库 -->
          <section v-if="!editStatus" class="list-part-container" style="flex: 1;">
            <!-- 搜索区 -->
            <el-form class="list-search-container" :model="form" ref="queryRef" :inline="true">
              <el-form-item class="section-title" label="可用工序：" />
              <el-form-item label="工序编码：">
                <el-input placeholder="请输入工序编码" v-model="queryParams.processCode" />
              </el-form-item>
              <el-form-item label="工序简称：">
                <el-input placeholder="请输入工序简称" v-model="queryParams.processAlias" />
              </el-form-item>
              <el-form-item>
                <el-button type="info" icon="Search" @click="handleProcessClick"><i class="el-icon-thumb" aria-hidden="true" />搜索</el-button>
              </el-form-item>
            </el-form>
            <!-- 列表区 -->
            <el-table :data="processList" highlight-current-row height="100%">
              <el-table-column type="index" label="行号" width="50px" align="center" />
              <el-table-column label="工序步骤编号" prop="processCode" align="center" />
              <el-table-column label="工序编码" prop="processCode" align="center" />
              <el-table-column label="工序简称" prop="processAlias" align="center" />
              <el-table-column label="图纸" align="center" />
              <el-table-column label="操作" width="100px" align="center">
                <template #default="scope">
                  <el-button type="warning" link icon="Plus" @click="handleProcessRowClick(scope.row,'formman')">分配</el-button>
                </template>
              </el-table-column>

            </el-table>
          </section>
        </el-tab-pane>

        <!-- 设备分配 -->
        <el-tab-pane label="设备分配" name="equiment">
          <!-- 工段长表 -->
          <section class="list-part-container" style="flex: 1;">
            <el-form class="list-search-container" :inline="true">
              <el-form-item class="section-title" label="我的设备：" />
            </el-form>
            <!-- 列表区 -->
            <el-table :data="yardmanList" highlight-current-row height="200px">
              <el-table-column type="index" label="行号" width="50px" align="center" />
              <el-table-column label="设备名称" prop="equipmentCode" align="center" />
              <el-table-column label="使用部门编码" prop="usageDeptCode" width="150px" align="center" />
              <el-table-column label="报废日期" prop="scrappingDate" align="center" />
              <el-table-column label="设备状态" prop="equipmentStatusCode" width="80" align="center">
                <template #default="scope">
                  <dict-tag :options="automatic_data_acquisition_status" :value="scope.row.equipmentStatusCode" />
                </template>
              </el-table-column>
              <el-table-column v-if="!editStatus" label="操作" width="100px" align="center">
                <template #default="scope">
                  <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row,'yardman')">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </section>
          <!-- 工序库 -->
          <section v-if="!editStatus" class="list-part-container" style="flex: 1;">
            <!-- 搜索区 -->
            <el-form class="list-search-container" :model="form" ref="queryRef" :inline="true">
              <el-form-item class="section-title" label="可用设备：" />
              <el-form-item label="使用部门编码：">
                <el-input placeholder="请输入使用部门编码" v-model="queryParams.usageDeptCode" />
              </el-form-item>
              <el-form-item label="设备名称：">
                <el-input placeholder="请输入设备名称" v-model="queryParams.equipmentCode" />
              </el-form-item>
              <el-form-item>
                <el-button type="info" icon="Search" @click="handleEquipmentClick"><i class="el-icon-thumb" aria-hidden="true" />搜索</el-button>
              </el-form-item>
            </el-form>
            <!-- 列表区 -->
            <el-table :data="equipmentList" highlight-current-row height="100%">
              <el-table-column type="index" label="行号" width="50px" align="center" />
              <el-table-column label="设备名称" prop="equipmentCode" align="center" />
              <el-table-column label="使用部门编码" prop="usageDeptCode" width="150px" align="center" />
              <el-table-column label="报废日期" prop="scrappingDate" align="center" />
              <el-table-column label="设备状态" prop="equipmentStatusCode" width="80" align="center">
                <template #default="scope">
                  <dict-tag :options="automatic_data_acquisition_status" :value="scope.row.equipmentStatusCode" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100px" align="center">
                <template #default="scope">
                  <el-button type="warning" link icon="Plus" @click="handleProcessRowClick(scope.row,'yardman')">分配</el-button>
                </template>
              </el-table-column>

            </el-table>
          </section>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button v-if="editStatus" type="primary" icon="Finished" @click="editStatus = false">编辑</el-button>
      <el-button v-if="!editStatus" type="primary" icon="Finished" @click="restart">取消编辑</el-button>
      <el-button v-if="!editStatus" type="primary" icon="Finished" @click="submitForm">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { listProcess } from '@/api/system/process'
import { listEquipmentDetail } from '@/api/business/equipmentDetail'
import { saveResourceAllocation, listResourceAllocation } from '@/api/business/resourceAllocation'
const { proxy } = getCurrentInstance()
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: null
  }
})
const { getList } = toRefs(props)
/** 字典数组区 */
const { automatic_data_acquisition_status } = proxy.useDict('automatic_data_acquisition_status')
/** 表单抽屉 页变量 */
const activeName = ref('equiment')
const title = ref('')
const loading = ref(false)
const formmanList = ref([])
const yardmanList = ref([])
const processList = ref([])
const equipmentList = ref([])
const queryParams = ref({})
/**判断页面是否是设备 */
const ids = ref([])
//工段长可以显示两个页面
const jobStatus = ref(false)
const multiple = ref(true)
const visible = ref(false)
const editStatus = ref(false)
const product = ref({})
const isFullscreen = ref(false)
const webHost = import.meta.env.VITE_APP_BASE_API
/**添加一条工序资源 */
const resourceRow = {
  processCode: '',
  processAlias: '',
  processId: null,
  id: null,
  deptUserId: null,
  equipmentId: null,
  usageDeptCode: null,
  scrappingDate: null,
  equipmentStatusCode: null
}
const data = reactive({
  form: {},
  rules: {}
})
const { form, rules } = toRefs(data)
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(row) {
  reset()
  visible.value = true
  editStatus.value = true

  if (row) {
    form.value = row
    listResourceAllocation({ deptUserId: form.value.id }).then((response) => {
      if (response.code === 200) {
        console.log(response.rows)
        formmanList.value = response.rows.filter((item) => item.processId !== '0')
        yardmanList.value = response.rows.filter((item) => item.equipmentId !== '0')
      }
    })
    /**如果是工段长的话 */
    if (row.isFormman) {
      jobStatus.value = true
      /**查询工序列表 */
      getProcess()
    }
    /**查询设备列表 */
    getEquipment()
  }
}
/**查询工序列表 */
function getProcess() {
  console.log(queryParams.value)
  listProcess(queryParams.value).then((res) => {
    processList.value = res.rows
  })
}
/**查询设备列表 */
function getEquipment() {
  listEquipmentDetail(queryParams.value).then((response) => {
    if (response.code === 200) {
      equipmentList.value = response.rows
    }
  })
}
/**工序搜索按钮 */
function handleProcessClick() {
  getProcess()
}
/**设备搜索按钮 */
function handleEquipmentClick() {
  getEquipment()
}

/** 取消按钮 */
function cancel() {
  visible.value = false
  reset()
}
/**图纸版本选择 */
function currentSeqenceChange(val) {
  //将选择的label也赋值给technologyVersion
  const item = technologicalOptions.value.filter((item) => item.value == val)
  form.value.technologyVersion = item[0].label
  console.log(form.value.technologyVersion)
}
/** 表单重置 */
function reset() {
  form.value = {}
  formmanList.value = []
  yardmanList.value = []
  processList.value = []
  equipmentList.value = []
  proxy.resetForm('productRef')
}
/**标签页点击事件 */
function handleClick(tab, event) {
  queryParams.value = {}
}

/** 提交按钮 */
function submitForm() {
  console.log(activeName.value)
  if (activeName.value == 'equiment') {
    /**因为是独立保存所以要保存两遍 */
    saveResourceAllocation(yardmanList.value).then((res) => {
      if (res.code === 200) {
        open(form.value)
      }
    })
  } else {
    saveResourceAllocation(formmanList.value).then((res) => {
      if (res.code === 200) {
        open(form.value)
      }
    })
  }
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id)
  equipmentSingle.value = selection.length != 1
  equipmentMultiple.value = !selection.length
}
/**分配工序 */
function handleProcessRowClick(row, msg) {
  const newObject = JSON.parse(JSON.stringify(resourceRow))
  newObject.processCode = row.processCode
  newObject.processAlias = row.processAlias
  newObject.processId = row.id
  newObject.deptUserId = form.value.id
  newObject.equipmentId = row.equipmentId
  newObject.usageDeptCode = row.usageDeptCode
  newObject.equipmentCode = row.equipmentCode
  newObject.scrappingDate = row.scrappingDate
  newObject.equipmentStatusCode = row.equipmentStatusCode
  if (msg == 'formman') {
    formmanList.value.push(newObject)
  }
  if (msg == 'yardman') {
    yardmanList.value.push(newObject)
  }
}

function handleDelete(row, msg) {
  if (msg == 'formman') {
    const index = formmanList.value.findIndex((item) => item == row)
    formmanList.value.splice(index, 1)
  }
  if (msg == 'yardman') {
    const index = yardmanList.value.findIndex((item) => item == row)
    yardmanList.value.splice(index, 1)
  }
}
/**取消编辑 */
function restart() {
  editStatus.value = false
  open(form.value)
}
/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>