<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1400px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="工作日期" prop="workDate">
          <el-date-picker
            v-model="queryParams.workDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            @change="handleQuery"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-160px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-text>&nbsp;&nbsp;&nbsp;</el-text>
      </el-col>
      <el-col :span="8">
        <el-form-item label="班别" prop="groupType">
          <el-select
            v-model="queryParams.groupType"
            placeholder="请选择班别"
            clearable
            @change="handleQuery"
            class="!w-180px"
          >
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.MES_GROUP_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <ContentWrap>
          <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
            <el-table-column
              label="工作日期"
              align="center"
              prop="workDate"
              :formatter="dateFormatter2"
              width="140px"
            />
            <el-table-column label="工位" align="center" prop="orgName" sortable />
<!--            <el-table-column label="班别" align="center" prop="groupType">-->
<!--              <template #default="scope">-->
<!--                <dict-tag :type="DICT_TYPE.MES_GROUP_TYPE" :value="scope.row.groupType" />-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="工人" align="center" prop="workerName" sortable/>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button
                  link
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  v-hasPermi="['mes:org-worker:delete']"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </ContentWrap>
      </el-col>
      <el-col :span="14">
        <!-- 列表 -->
        <ContentWrap>
          <el-table v-loading="loading" :data="listReport" :stripe="true" :show-overflow-tooltip="true">
            <!-- 子表的列表 -->
            <el-table-column type="expand">
              <template #default="scope">
                <el-tabs model-value="produceReportDetail">
                  <el-tab-pane label="生产报工明细" name="produceReportDetail">
                    <ProduceReportDetailList :report-id="scope.row.id" />
                  </el-tab-pane>
                </el-tabs>
              </template>
            </el-table-column>
            <el-table-column
              label="报工日期"
              align="center"
              prop="reportDate"
              :formatter="dateFormatter2"
              width="130px"
            />
            <el-table-column label="工位" align="center" prop="orgName" sortable/>
            <el-table-column label="工人" align="center" prop="userName" width="130px" sortable/>
            <el-table-column label="工序" align="center" prop="orgType">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.MES_ORG_TYPE" :value="scope.row.orgType" />
              </template>
            </el-table-column>
<!--            <el-table-column label="班别" align="center" prop="groupType">-->
<!--              <template #default="scope">-->
<!--                <dict-tag :type="DICT_TYPE.MES_GROUP_TYPE" :value="scope.row.groupType" />-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="状态" align="center" fixed="right" prop="reportStatus">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.MES_RECORD_STATUS" :value="scope.row.reportStatus" />
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getListReport"
          />
        </ContentWrap>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {useUserStore} from "@/store/modules/user";
import {dateFormatter, dateFormatter2} from "@/utils/formatTime";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import {OrgWorkerApi, OrgWorkerVO} from "@/api/mes/orgworker";
import ProduceReportDetailList
  from "@/views/mes/producereport/components/ProduceReportDetailList.vue";
import {ProduceReportApi, ProduceReportVO} from "@/api/mes/producereport";

/** 生产报工单 表单 */
defineOptions({ name: 'AdminViewDayWorkerReport' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userStore = useUserStore()
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const listReport = ref<ProduceReportVO[]>([]) // 列表的数据
const totalReport = ref(0) // 列表的总页数

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '未报工清单'
  queryParams.workDate=[getCurrentDate() +" 00:00:00",getCurrentDate() +" 23:59:59"]
  await getList()
  await getListReport()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
}

const loading = ref(true) // 列表的加载中
const list = ref<OrgWorkerVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orgId: undefined,
  workDate: [],
  reportDate: [],
  groupType: undefined,
  orgType: undefined,
  workerId: undefined,
  reportId: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
  getListReport()
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await OrgWorkerApi.getOrgWorkerPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await OrgWorkerApi.deleteOrgWorker(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 查询列表 */
const getListReport = async () => {
  loading.value = true
  try {
    queryParams.reportDate = queryParams.workDate
    const data = await ProduceReportApi.getProduceReportPage(queryParams)
    listReport.value = data.list
    totalReport.value = data.total
  } finally {
    loading.value = false
  }
}
const getCurrentDate = () =>{
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  if(month<10){month = '0'+month}
  let day = now.getDate();
  if(day<10)day = '0'+day;
  return year + "-" + month + "-" + day;
}
</script>
