<template>
  <div class="container2" id="shijian">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="待处理" name="no" />
      <el-tab-pane label="审核完成" name="ok" />
    </el-tabs>
    <div class="header">
      <Search
        :searchOptions="searchForm"
        :keepState="true"
        ref="searchRef"
        @dataList="getData"
      />
    </div>
    <div class="table">
      <el-table :data="tableData" border>
        <el-table-column prop="workOrderCode" label="工单编码" />
        <el-table-column prop="materialModel" label="产品规格" />
        <el-table-column prop="orderCode" label="订单编码" />
        <el-table-column prop="orderName" label="订单名称" />
        <el-table-column prop="materialCode" label="物料编号" />
        <el-table-column prop="materialName" label="物料名称" />
        <el-table-column prop="batchNum" label="批量"/>
        <el-table-column
          prop="currentUserName"
          label="审核人"
          overhidden="true"
        />
        <el-table-column prop="formType" label="随工单类型">
          <template #default="{ row }">
            {{
              (formTypeDictionary.find(item => item.dictValue === String(row.formType)) || {}).dictLabel
              || row.formType
            }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="审核状态">
          <template #default="{ row }">
            <div :style="{ color: getColorByState(row.state) }">
              {{ getTextByState(row.state) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created" label="创建时间" />
        <el-table-column
          align="center"
          width="160"
          prop=""
          label="操作"
          id="opear"
        >
          <template #default="{ row }">
            <el-button
              v-if="row.state === 0 || row.state === 2"
              type="primary"
              link
              @click="handleFill(row)"
              >填报</el-button
            >
            <el-button
              link
              v-if="
                row.state === 1 &&
                userStore.user.username == row.currentUserName
              "
              @click="handle(row)"
              type="primary"
              >处理</el-button
            >
            <el-button link @click="toDetail(row)" type="primary"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="currentOption.total"
        :page="currentOption.page"
        :limit="currentOption.limit"
        :pageSizes="currentOption.pageSizes"
        v-model:page="currentOption.page"
        v-model:limit="currentOption.limit"
        @pagination="getData"
      />
      <FillCom ref="fillRef" @finish="getData"></FillCom>
      <Detail ref="detailRef"></Detail>
      <Handle4 ref="handle4Ref" @finish="getData"></Handle4>
      <Handle5 ref="handle5Ref" @finish="getData"></Handle5>
    </div>
  </div>
</template>

<script setup>
import Search from "@/components/Search/index.vue";
import { useSpcStore, useUserStore, useDictionaryStore } from "@/store";
const { dicts } = useDictionaryStore();
import { getInspectionData } from "@/api/statistic/inspectionReport.ts";
import Detail from "@/views/statistic/inspectionReport/detail.vue";
import FillCom from "@/views/statistic/inspectionReport/FillCom.vue";
import Handle4 from "@/views/statistic/inspectionReport/handle4.vue";
import Handle5 from "@/views/statistic/inspectionReport/handle5.vue";

defineOptions({
  name: "SPCInspectionReport",
});
const userStore = useUserStore();
const auditTypes = dicts.unqualified_audit_type;
const fillRef = ref(null);
const formTypeDictionary = dicts.excel_type;
const currentOption = reactive({
  total: 0,
  page: 1,
  limit: 10,
});
const tableData = ref([]);
const searchRef = ref(null);
const searchForm = [
  {
    label: "工单号",
    prop: "workOrderCode",
    type: "input",
  },
  {
    label: "订单号",
    prop: "orderCode",
    type: "input",
  },
  {
    label: "物料型号",
    prop: "materialModel",
    type: "input",
  },
];

const getData = async (obj) => {
  const { data, code } = await getInspectionData({
    ...searchRef.value.searchForm,
    pageNo: currentOption.page,
    pageSize: currentOption.limit,
  });
  if (code == "200") {
    tableData.value = data.records;
    currentOption.total = data.totalCount;
  }
};

const handleFill = (row) => {
  fillRef.value && fillRef.value.showDrawer(row); // 填报
};

// const toAdd = () => {
//   addRef.value && addRef.value.showDrawer();
// };

// const toDelete = async (row) => {
//   const res = await deleteFeedback(row.id);
//   currentOption.page = 1;
//   getData();
// const { code } = await deleteData({ id });
// if (code == "200") {
//   ElMessage.success("操作成功");
//   getData();
// }
// };

// 处理相关
const handle4Ref = ref(null);
const handle5Ref = ref(null);

const handle = (row) => {
  console.log("row:", row);
  if (row.remark4 && !JSON.parse(row.remark4).content) {
    handle4Ref.value && handle4Ref.value.showDrawer(row); // 处理
  } else if (row.remark5 && !JSON.parse(row.remark5).content) {
    handle5Ref.value && handle5Ref.value.showDrawer(row); // 处理
  } else {
    ElMessage.info("该工单正在处理中。。。");
  }
};

// 详情
const detailRef = ref(null);
const toDetail = (row) => {
  detailRef.value && detailRef.value.showDrawer(row); // 详情
};
const getTextByAuditType = (state) => {
  if (state) {
    const item = auditTypes.filter((v) => {
      console.log(
        "dictValue:" +
          v.dictValue +
          ",state:" +
          state +
          "..." +
          (v.dictValue === state)
      );
      return v.dictValue === state;
    });
    if (item.length > 0) {
      return item[0].dictLabel;
    }
  }
};
// 审核状态0待处理 1 审核中 2 审核驳回 3 审核完成
const getTextByState = (state) => {
  switch (state) {
    case 0:
      return "待处理";
    case 1:
      return "审核中";
    case 2:
      return "审核驳回";
    case 3:
      return "审核完成";
    default:
      return "";
  }
};
const getColorByState = (state) => {
  switch (state) {
    case 0:
      return "#59acbb";
    case 1:
      return "#bba559";
    case 2:
      return "#d96868";
    case 3:
      return "#67c23a";
    default:
      return "";
  }
};
const activeName = ref("no");

onMounted(() => {
  searchRef.value.searchForm.state = "0";
  getData();
});
watch(
  () => activeName.value,
  (val) => {
    if (val == "ok") {
      searchRef.value.searchForm.state = "3";
    } else {
      searchRef.value.searchForm.state = "0";
    }
    getData();
  }
);
</script>

<style scoped lang="scss">
.container2 {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: auto;
  }
  .table {
    flex: 1;
    padding-bottom: 20px;
  }
  .formView {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .formTitle {
      text-align: center;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .formStyle {
      width: 400px;
    }
  }
}
</style>
<style lang="scss">
#shijian {
  .is-active {
    background-color: #f5f7fa;
  }
}
</style>
