<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container">
      <!-- 搜索区域 -->
      <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="载具类别" />
        <el-form-item>
          <el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="loading" :data="carrierCategoryList" highlight-current-row height="100%" @current-change="handleProcess">
            <el-table-column type="index" label="行号" width="50" align="center" />
            <el-table-column label="载具类别" align="center" prop="name" />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button link type="warning" icon="Edit" @click="handleShowCarrierDialog(scope.row)" v-hasPermi="['business:carrier:edit']"
                  >编辑</el-button
                >
                <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:carrier:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>

    <!-- 右侧区域 -->
    <section class="list-part-container" style="flex: 2">
      <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="载具管理" />
        <el-form-item>
          <el-input placeholder="请输入编号" v-model="queryParams.code" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button type="primary" icon="Plus" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
          <el-button type="warning"> 批量下载二维码</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="loading" :data="carrierList" height="100%">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column type="index" label="行号" width="50" align="center" />
            <el-table-column prop="code" label="载具编号" width="80" align="center" />
            <el-table-column label="状态" width="70" prop="status" align="center">
              <template #default="scope">
                <dict-tag :options="carrier_status" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column prop="creatTime" label="添加时间" width="120" align="center" />
            <el-table-column prop="remark" label="废弃原因" align="center" />
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <el-button link type="warning" icon="Edit" @click="handleShowCarrierDialog(scope.row)" v-hasPermi="['business:carrier:edit']">
                  编辑
                </el-button>
                <el-button link type="info" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:process:remove']">废弃</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination class="pagination-container" background layout="prev, pager, next" :total="total"> </el-pagination>
    </section>

    <!-- 载具类别表单 -->
    <carrier-category-form ref="carrierRef" @handleSaveSuccess="handleRefreshCategory" />

    <!-- 载具表单 -->
    <carrier-form ref="carrierRef" @handleSaveSuccess="handleRefreshCarrier" />
  </div>
</template>

<script setup name="Process">
import { listCategory, listCarrier } from '@/api/business/carrier'
import carrierForm from './form'
import carrierCategoryForm from './formCategory'
const { proxy } = getCurrentInstance()
const { carrier_status } = proxy.useDict('carrier_status')

/** 查询 对象 */
const carrierCategoryList = ref([])
const carrierList = ref([])
const loading = ref(true)
const total = ref(0)

/** 查询对象 */
const queryParams = ref({
  code: '',
  pageNum: 1,
  pageSize: 10
})

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

/** 查询标准工序管理列表 */
function getList() {
  loading.value = false
  handleProcess(carrierCategoryList.value[0])
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 新增按钮操作 */
function handleAdd() {
  proxy.$refs.carrierRef.open()
}
/**工艺名称表点击事件 */
function handleProcess(row) {
  console.log(row)
  carrierList.value = row.carrierList
}
/** 修改按钮操作 */
function handleShowCarrierDialog(id) {
  proxy.$refs.carrierRef.open(id)
}

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

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