<template>
  <div class='p-2'>
    <transition :enter-active-class='proxy?.animate.searchAnimate.enter'
                :leave-active-class='proxy?.animate.searchAnimate.leave'>
      <div v-show='showSearch' class='mb-[10px]'>
        <el-card shadow='hover'>
          <el-form ref='queryFormRef' :model='queryParams' :inline='true'>

            <el-form-item label='计划日期' style='width: 300px'>
              <el-date-picker
                v-model='dateRange'
                value-format='YYYY-MM-DD'
                type='daterange'
                range-separator='-'
                start-placeholder='开始日期'
                end-placeholder='结束日期'
              ></el-date-picker>
            </el-form-item>
            <el-form-item label='工序名称' prop='processId'>
              <el-select v-model='queryParams.processId' placeholder='请选择所属工序' @keyup.enter='handleQuery'>
                <el-option
                  v-for='item in processInfoList'
                  :key='item.processId'
                  :label='item.processName'
                  :value='item.processId'
                />
              </el-select>
            </el-form-item>
            <el-form-item label='机台名称' prop='machineId'>
              <el-select v-model='queryParams.machineId' placeholder='请选择机台名称' clearable @keyup.enter='handleQuery'>
                <el-option
                  v-for='item in machineInfoList'
                  :key='item.machineId'
                  :label='item.machineName'
                  :value='item.machineId'
                />
              </el-select>
            </el-form-item>
            <el-form-item label='班次名称' prop='shiftId'>
              <el-select v-model='queryParams.shiftId' placeholder='请选择班次名称' clearable @keyup.enter='handleQuery'>
                <el-option
                  v-for='item in shiftList'
                  :key='item.shiftId'
                  :label='item.shiftName'
                  :value='item.shiftId'
                />
              </el-select>
            </el-form-item>
            <el-form-item label='班组名称' prop='classTeamId'>
              <el-select v-model='queryParams.classTeamId' placeholder='请选择班组名称' clearable @keyup.enter='handleQuery'>
                <el-option
                  v-for='item in classTeamList'
                  :key='item.classTeamId'
                  :label='item.teamName'
                  :value='item.classTeamId'
                />
              </el-select>
            </el-form-item>
            <el-form-item label='计划编号' prop='planCode'>
              <el-input v-model='queryParams.planCode' placeholder='请输入计划编号' clearable @keyup.enter='handleQuery' />
            </el-form-item>
            <el-form-item label='物料名称' prop='materialName'>
              <el-input v-model='queryParams.materialName' placeholder='请输入物料名称' clearable @keyup.enter='handleQuery' />
            </el-form-item>
            <el-form-item>
              <el-button type='primary' icon='Search' @click='handleQuery'>搜索</el-button>
              <el-button icon='Refresh' @click='resetQuery'>重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow='never'>
      <template #header>
        <el-row :gutter='10' class='mb8'>
          <el-col :span='1.5'>
            <el-button type='warning' plain icon='Download' @click='handleExport'
                       v-hasPermi="['mes:baseWorkshopInfo:export']">导出
            </el-button>
          </el-col>
          <right-toolbar v-model:showSearch='showSearch' :columns='columns' :search='true'
                         @queryTable='getList'></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading='loading' :data='reportList'>
        <!--        <el-table-column type='selection' width='55' align='center' />-->
        <el-table-column label='物料名称' align='center' prop='materialName' v-if='columns[0].visible' width='300' />
        <el-table-column label='计划数' align='center' prop='planNumber' v-if='columns[1].visible' />
        <el-table-column label='实际数量' align='center' prop='actualNumber' v-if='columns[2].visible' />
        <el-table-column label='偏差数' align='center' prop='deviationNumber' v-if='columns[3].visible' />
        <el-table-column label='完成率' align='center' prop='completionRate' v-if='columns[4].visible' />
      </el-table>

      <pagination v-show='total > 0' :total='total' v-model:page='queryParams.pageNum'
                  v-model:limit='queryParams.pageSize' @pagination='getList' />
    </el-card>

  </div>
</template>

<script setup name='ReportPlanCompletionRate' lang='ts'>
import { listPlanCompletionRateReport } from '@/api/mes/prodReport';
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
import { getProdBaseMachineInfoList } from '@/api/mes/prodBaseMachineInfo';
import { getBaseShiftInfoList } from '@/api/mes/baseShiftInfo';
import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));

const reportList = ref<[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();

const dateRange = ref<string[]>(['', '']);

/** 查询工序下拉树结构 */
const processInfoList = ref([]);
const getProcessInfoListSelect = async () => {
  let res = await getProcessInfoList(null);
  processInfoList.value = res.data;
};

/** 查询机台下拉树结构 */
const machineInfoList = ref([]);
const getProdBaseMachineInfoListSelect = async () => {
  let res = await getProdBaseMachineInfoList(null);
  machineInfoList.value = res.data;
};

/** 获取班次下拉框 */
const shiftList = ref([]);
const getShiftSelect = async () => {
  let res = await getBaseShiftInfoList(null);
  shiftList.value = res.data;
};

/**获取班组下拉框 */
const classTeamList = ref([]);
const getClassTeamSelect = async () => {
  let res = await getBaseClassTeamInfoList(null);
  classTeamList.value = res.data;
};

// 列显隐信息
const columns = ref<FieldOption[]>([
  { key: 0, label: `物料名称`, visible: true },
  { key: 1, label: `计划数`, visible: true },
  { key: 2, label: `实际数量`, visible: true },
  { key: 3, label: `偏差数`, visible: true },
  { key: 4, label: `完成率`, visible: true }
]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  processId: 18,
  machineId: undefined,
  beginDate: '',
  endDate: '',
  params: {}
});

/** 查询车间信息列表 */
const getList = async () => {
  loading.value = true;
  queryParams.value.beginDate = dateRange.value?.[0];
  queryParams.value.endDate = dateRange.value?.[1];
  const res = await listPlanCompletionRateReport(queryParams.value);
  reportList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

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

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  //初始化日期
  const nowDate = proxy?.parseTime(new Date(), '{y}-{m}-{d}');
  dateRange.value = [nowDate, nowDate];
  queryParams.value.processId = 18;
  handleQuery();
};


/** 导出按钮操作 */
const handleExport = () => {
  queryParams.value.beginDate = dateRange.value?.[0];
  queryParams.value.endDate = dateRange.value?.[1];
  proxy?.download('mes/prodReport/planCompletionRateReport/export', {
    ...queryParams.value
  }, `生产计划完成率报表_${new Date().getTime()}.xlsx`);
};

onMounted(() => {
  resetQuery();
  getProcessInfoListSelect();
  getProdBaseMachineInfoListSelect();
  getShiftSelect();
  getClassTeamSelect();
  getList(); // 初始化列表数据
});
</script>
