<template>
  <el-tabs type="border-card" @tab-click="clickTab">
    <el-tab-pane label="物料盘点">
      <div class="mainContentBox">
        <avue-crud
          :option="option1"
          v-model:page="page1"
          v-model:search="search1"
          v-model="form1"
          :table-loading="loading"
          @search-change="handleQuery"
          @search-reset="resetQuery"
          @size-change="handleQuery"
          @current-change="handleQuery"
          @row-del="rowDel"
          @row-save="rowSave"
          :data="pageData1"
        >
          <template #menu="{ size, row, index }">
            <el-button
              icon="el-icon-view"
              text
              @click="openDialog(row, 0)"
              type="primary"
              :size="size"
            >
              查看</el-button
            >
            <el-button
              text
              @click="openDialog(row, 1)"
              type="primary"
              :size="size"
              >流程<template #icon>
                <svg-icon icon-class="liucheng"></svg-icon> </template
            ></el-button>
            <el-button
              icon="el-icon-delete"
              text
              v-if="row.state === '0'"
              @click="rowDel(row)"
              type="primary"
              :size="size"
              >删除</el-button
            >
          </template>
        </avue-crud>
      </div>
    </el-tab-pane>
    <el-tab-pane label="库位盘点">
      <div class="mainContentBox">
        <avue-crud
          :option="option2"
          v-model:page="page2"
          v-model:search="search2"
          v-model="form2"
          :table-loading="loading"
          @search-change="handleQuery"
          @search-reset="resetQuery"
          @size-change="handleQuery"
          @current-change="handleQuery"
          @row-del="rowDel"
          @row-save="rowSave"
          :data="pageData2"
        >
          <template #menu="{ size, row, index }">
            <el-button
              icon="el-icon-info"
              text
              @click="openDialog(row, 0)"
              type="primary"
              :size="size"
            >
              查看</el-button
            >
            <el-button
              icon="el-icon-edit"
              text
              @click="openDialog(row, 1)"
              type="primary"
              :size="size"
              >流程</el-button
            >
            <el-button
              icon="el-icon-delete"
              text
              v-if="row.state === '0'"
              @click="rowDel(row)"
              type="primary"
              :size="size"
              >删除</el-button
            >
          </template>
        </avue-crud>
      </div>
    </el-tab-pane>
    <el-tab-pane label="计划盘点">
      <div class="mainContentBox">
        <avue-crud
          :option="option3"
          v-model:page="page3"
          v-model:search="search3"
          v-model="form3"
          :table-loading="loading"
          @search-change="handleQuery"
          @search-reset="resetQuery"
          @size-change="handleQuery"
          @current-change="handleQuery"
          @row-del="rowDel"
          @row-save="rowSave"
          :data="pageData3"
        >
          <template #menu="{ size, row, index }">
            <el-button
              icon="el-icon-info"
              text
              @click="openDialog(row, 0)"
              type="primary"
              :size="size"
            >
              查看</el-button
            >
            <el-button
              icon="el-icon-edit"
              text
              @click="openDialog(row, 1)"
              type="primary"
              :size="size"
              >流程</el-button
            >
            <el-button
              icon="el-icon-delete"
              text
              v-if="row.state === '0'"
              @click="rowDel(row)"
              type="primary"
              :size="size"
              >删除</el-button
            >
          </template>
        </avue-crud>
      </div>
    </el-tab-pane>
    <el-dialog
      v-model="dialog1.visible"
      :title="dialog1.title"
      width="950px"
      @close="dialog1.visible = false"
    >
      <choice-item-page @materialInfo="materialInfo" />
    </el-dialog>
    <el-dialog
      v-model="dialog0.visible"
      :title="dialog0.title"
      width="80%"
      @close="dialog0.visible = false"
    >
      <order-page queryType="1" @orderInfo="orderInfo" />
    </el-dialog>

    <el-dialog
      v-model="dialog2.visible"
      :title="dialog2.title"
      width="80%"
      @close="dialog2.visible = false"
    >
      <div class="card-container">
        <el-card style="width: 70%" shadow="always">
          <div ref="toPrintRef">
            <el-row style="text-align: center">
              <el-col :span="24"><el-text tag="b">盘点计划单</el-text></el-col>
            </el-row>
            <el-row>
              <el-col :span="14"></el-col>
              <el-col :span="5"
                ><el-text tag="p" v-if="showObj.taskNo">{{
                  showObj.taskNo
                }}</el-text></el-col
              >
              <el-col :span="5"></el-col>
            </el-row>

            <el-table
              class="print-table"
              v-loading="loading"
              :data="tableDataList"
              border
            >
              <el-table-column label="序号" type="index" width="60" />
              <el-table-column label="仓库" prop="houseNo" width="60" />
              <el-table-column label="库区" prop="houseArea" width="60" />
              <el-table-column label="库位" prop="locationNo" width="60" />
              <el-table-column label="物料编号" prop="materialCode" />
              <el-table-column label="物料名称" prop="materialName" />
              <el-table-column
                label="物料规格"
                prop="materialModel"
                v-if="showObj.type === 1"
              />
              <el-table-column label="剩余数量" prop="surplusNum" width="90" />
              <el-table-column label="实际数量" prop="workCode">
                <template v-slot="{ row }">
                  <el-text v-if="showObj.state != '0' || viewPage === 0">{{
                    row.actualNum
                  }}</el-text>
                  <el-input type="number" v-else v-model="row.actualNum" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <el-card style="width: 28%" shadow="always">
          <template #header>
            <div class="card-header">
              <span>流程</span>
            </div>
            <el-timeline style="max-width: 500px">
              <el-timeline-item center type="success" placement="top">
                <el-card>
                  <h4>计划</h4>
                  <el-form
                    ref="maintenanceInfoForm2"
                    size="small"
                    label-width="auto"
                    style="max-width: 400px"
                  >
                    <el-form-item label="申请人员" prop="created">
                      <el-text tag="p">{{ showObj.creator }}</el-text>
                    </el-form-item>
                    <el-form-item label="申请时间">
                      <el-text tag="p">{{ showObj.created }}</el-text>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-timeline-item>
              <el-timeline-item
                center
                placement="top"
                :type="showObj.state > 0 ? 'success' : 'primary'"
              >
                <el-card>
                  <h4>盘点</h4>
                  <el-form
                    size="small"
                    label-width="auto"
                    style="max-width: 400px"
                  >
                    <el-form-item label="盘点人员" prop="auditUser">
                      <el-text tag="p">{{ showObj.checkUser }}</el-text>
                    </el-form-item>
                    <el-form-item
                      label="审核人员"
                      v-if="viewPage === 1 && showObj.state === '0'"
                    >
                      <el-text
                        tag="p"
                        v-if="
                          showObj.checkUser != username && showObj.state === '0'
                        "
                        >待盘点</el-text
                      >
                      <el-select
                        size="small"
                        filterable
                        v-if="
                          showObj.checkUser === username &&
                          showObj.state === '0'
                        "
                        v-model="showObj.auditUser"
                        placeholder="请选择审核人员"
                        clearable
                      >
                        <el-option
                          v-for="option in userList"
                          :key="option.userName"
                          :label="option.nickName"
                          :value="option.userName"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="盘点时间" v-if="showObj.checkTime">
                      <el-text tag="p">{{ showObj.checkTime }}</el-text>
                    </el-form-item>
                    <el-form-item style="margin-left: 35%">
                      <el-button
                        type="primary"
                        v-if="
                          viewPage === 1 &&
                          showObj.checkUser === username &&
                          showObj.state === '0'
                        "
                        @click="saveForm(1)"
                        >保 存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-timeline-item>
              <el-timeline-item
                center
                placement="top"
                :type="
                  showObj.state === '2' || showObj.state === '3'
                    ? 'success'
                    : 'primary'
                "
              >
                <el-card>
                  <h4>审核</h4>
                  <el-form
                    size="small"
                    label-width="auto"
                    v-if="showObj.state > 0"
                    style="max-width: 400px"
                  >
                    <el-form-item label="审核人">
                      <el-text tag="p">{{ showObj.auditUser }}</el-text>
                    </el-form-item>
                    <el-form-item label="审核结果">
                      <el-text
                        tag="p"
                        v-if="showObj.state === '2' || showObj.state === '3'"
                        >{{
                          showObj.state === "2" ? "通过" : "未通过"
                        }}</el-text
                      >
                      <el-text
                        tag="p"
                        v-else-if="
                          viewPage === 0 ||
                          (showObj.state === '1' &&
                            showObj.auditUser != username)
                        "
                        >待审核</el-text
                      >
                      <el-radio-group v-else v-model="showObj.auditState">
                        <el-radio :value="2">通过</el-radio>
                        <el-radio :value="3">不通过</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审核时间" v-if="showObj.auditTime">
                      <el-text tag="p">{{ showObj.auditTime }}</el-text>
                    </el-form-item>
                    <el-form-item style="margin-left: 35%">
                      <el-button
                        type="primary"
                        v-if="
                          viewPage === 1 &&
                          showObj.checkUser === username &&
                          showObj.state === '1'
                        "
                        @click="saveForm(2)"
                        >审 核</el-button
                      >
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </template>
        </el-card>
      </div>
    </el-dialog>
  </el-tabs>
</template>
<script setup>
import { useUserStoreHook } from "@/store/index";
import {
  queryPlanPage,
  deleteCheckPlan,
  saveCheckPlan,
  queryByTaskNo,
  saveDetails,
  auditPlan,
} from "@/api/storage";
import { getUserList } from "@/api/system/user";
import dictDataUtil from "@/common/configs/dictDataUtil";
import { ref } from "vue";
const { username } = useUserStoreHook().user;
// 弹窗对象
const dialog0 = reactive({
  title: "订单选择",
  visible: false,
});
const dialog1 = reactive({
  title: "物料选择",
  visible: false,
});
const dialog2 = reactive({
  title: "计划流程",
  visible: false,
});
const search1 = ref({});
const search2 = ref({});
const search3 = ref({});
const option1 = ref({});
const option2 = ref({});
const option3 = ref({});
const pageData1 = ref([]);
const pageData2 = ref([]);
const pageData3 = ref([]);
const tableDataList = ref([]);
const form1 = ref({
  type: 1,
  materialCode: null,
  materialName: null,
  materialModel: null,
  unit: null,
});
const form2 = ref({ type: 2 });
const form3 = ref({
  type: 3,
  planNo: null,
  materialCode: null,
  materialName: null,
  materialModel: null,
});
const page1 = ref({ total: 0, currentPage: 1, pageSize: 10 });
const page2 = ref({ total: 0, currentPage: 1, pageSize: 10 });
const page3 = ref({ total: 0, currentPage: 1, pageSize: 10 });
const loading = ref(false);
const showObj = ref({});
const clickTag = ref(0);
const viewPage = ref(0);
const openDialog = (row, type) => {
  showObj.value = row;
  viewPage.value = type;
  queryByTaskNo(row.taskNo).then((data) => {
    tableDataList.value = data.data;
    dialog2.visible = true;
  });
};
const userList = ref([]);
const saveForm = (type) => {
  if (type === 1) {
    if (!showObj.value.auditUser) {
      ElMessage.warning("请选择审核人员");
      return;
    }
    showObj.value.state = 1;
    let params = { ...showObj.value, details: tableDataList.value };
    saveDetails(params).then((data) => {
      if (data.code === "200") {
        ElMessage.success(data.msg);
        dialog2.visible = false;
        handleQuery(null, null);
      } else {
        showObj.value.state = 0;
        ElMessage.error(data.msg);
      }
    });
  } else {
    showObj.value.state = showObj.value.auditState;
    auditPlan(showObj.value).then((data) => {
      if (data.code === "200") {
        ElMessage.success(data.msg);
        dialog2.visible = false;
        handleQuery(null, null);
      } else {
        showObj.value.state = "1";
        ElMessage.error(data.msg);
      }
    });
  }
};
const materialInfo = (value) => {
  form1.value.materialCode = value.materialCode;
  form1.value.materialName = value.materialName;
  form1.value.materialModel = value.spec;
  form1.value.unit = value.unitDictValue;
  dialog1.visible = false;
};
const orderInfo = (value) => {
  form3.value.planNo = value.orderCode;
  form3.value.materialCode = value.materialCode;
  form3.value.materialName = value.materialName;
  form3.value.materialModel = value.materialModel;
  dialog0.visible = false;
};
const permission = reactive({
  delBtn: true,
  addBtn: true,
  editBtn: true,
  menu: true,
});
option1.value = {
  border: true,
  align: "center",
  menuAlign: "center",
  search: true,
  viewBtn: false,
  delBtn: false,
  editBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "盘点单号",
      prop: "taskNo",
      width: 145,
      overHidden: true,
      display: false,
    },
    {
      label: "仓库编码",
      prop: "houseNo",
      type: "select",
      width: 90,
      overHidden: true,
      search: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.warehouse_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "仓库编码不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "产品编码",
      prop: "materialCode",
      search: true,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "订单编号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({ value, column }) => {
        if (column.boxType) {
          dialog1.visible = true;
        }
      },
    },
    {
      label: "产品名称",
      prop: "materialName",
      search: true,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "产品名称不能为空",
          trigger: "trigger",
        },
      ],
      disabled: true,
    },
    {
      label: "产品规格",
      overHidden: true,
      disabled: true,
      prop: "materialModel",
    },
    {
      label: "单位",
      disabled: true,
      prop: "unit",
      width: 80,
      overHidden: true,
    },
    {
      label: "盘点状态",
      prop: "state",
      width: 100,
      overHidden: true,
      type: "select",
      display: false,
      dicUrl: dictDataUtil.request_url + "check_plan_state",
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    {
      label: "盘点人员",
      prop: "checkUser",
      rules: [
        {
          required: true,
          message: "请选择盘点人员",
          trigger: "blur",
        },
      ],
      width: 150,
      overHidden: true,
      type: "select",
      dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/user/list",
      dicMethod: "post",
      props: {
        label: "userName", // 下拉菜单显示的字段
        value: "userName", // 下拉菜单值的字段
      },
    },
    {
      label: "盘点时间",
      width: 150,
      overHidden: true,
      prop: "checkTime",
      display: false,
    },
    {
      label: "创建人",
      width: 120,
      overHidden: true,
      prop: "creator",
      display: false,
    },
    {
      label: "创建日期",
      width: 160,
      overHidden: true,
      prop: "created",
      display: false,
    },
  ],
};
option2.value = {
  border: true,
  align: "center",
  menuAlign: "center",
  search: true,
  delBtn: false,
  viewBtn: false,
  editBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "盘点单号",
      prop: "taskNo",
      width: 145,
      overHidden: true,
      display: false,
    },
    {
      label: "仓库编码",
      prop: "houseNo",
      type: "select",
      overHidden: true,
      search: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.warehouse_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "仓库编码不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "盘点库区",
      prop: "houseArea",
      search: true,
      overHidden: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.warehouse_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "仓库编码不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "盘点库位",
      prop: "locationNo",
      search: true,
      overHidden: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.warehouse_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "仓库编码不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "盘点状态",
      prop: "state",
      type: "select",
      display: false,
      width: 100,
      overHidden: true,
      dicUrl: dictDataUtil.request_url + "check_plan_state",
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    {
      label: "盘点人员",
      prop: "checkUser",
      rules: [
        {
          required: true,
          message: "请选择盘点人员",
          trigger: "blur",
        },
      ],
      overHidden: true,
      type: "select",
      dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/user/list",
      dicMethod: "post",
      props: {
        label: "userName", // 下拉菜单显示的字段
        value: "userName", // 下拉菜单值的字段
      },
    },
    {
      label: "盘点时间",
      overHidden: true,
      prop: "checkTime",
      display: false,
    },
    {
      label: "创建人",
      overHidden: true,
      prop: "creator",
      display: false,
    },
    {
      label: "创建日期",
      overHidden: true,
      prop: "created",
      display: false,
    },
  ],
};
option3.value = {
  border: true,
  align: "center",
  menuAlign: "center",
  search: true,
  viewBtn: false,
  delBtn: false,
  editBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "盘点单号",
      prop: "taskNo",
      width: 145,
      overHidden: true,
      display: false,
    },
    {
      label: "计划编号",
      prop: "planNo",
      search: true,
      width: 145,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "计划编号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({ value, column }) => {
        if (column.boxType) {
          dialog0.visible = true;
        }
      },
    },
    {
      label: "产品编码",
      prop: "materialCode",
      search: true,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "产品编码不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "产品名称",
      prop: "materialName",
      search: true,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "产品名称不能为空",
          trigger: "trigger",
        },
      ],
      disabled: true,
    },
    {
      label: "产品规格",
      overHidden: true,
      disabled: true,
      prop: "materialModel",
    },
    {
      label: "盘点状态",
      prop: "state",
      width: 100,
      overHidden: true,
      display: false,
      type: "select",
      dicUrl: dictDataUtil.request_url + "check_plan_state",
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    {
      label: "盘点人员",
      prop: "checkUser",
      rules: [
        {
          required: true,
          message: "请选择盘点人员",
          trigger: "blur",
        },
      ],
      width: 150,
      overHidden: true,
      type: "select",
      dicData: userList,
      props: {
        label: "userName", // 下拉菜单显示的字段
        value: "userName", // 下拉菜单值的字段
      },
    },
    {
      label: "盘点时间",
      width: 150,
      overHidden: true,
      prop: "checkTime",
      display: false,
    },
    {
      label: "创建人",
      width: 150,
      overHidden: true,
      prop: "creator",
      display: false,
    },
    {
      label: "创建日期",
      width: 160,
      overHidden: true,
      prop: "created",
      display: false,
    },
  ],
};
const handleQuery = (params, done) => {
  loading.value = true;
  let querySearch = {};
  if (clickTag.value === 1) {
    querySearch = {
      type: clickTag.value,
      pageSize: page1.value.pageSize,
      pageNo: page1.value.currentPage,
      ...params,
    };
  } else if (clickTag.value === 2) {
    querySearch = {
      type: clickTag.value,
      pageSize: page2.value.pageSize,
      pageNo: page2.value.currentPage,
      ...params,
    };
  } else {
    querySearch = {
      type: clickTag.value,
      pageSize: page3.value.pageSize,
      pageNo: page3.value.currentPage,
      ...params,
    };
  }
  queryPlanPage(querySearch)
    .then(({ data }) => {
      if (clickTag.value === 1) {
        pageData1.value = data.records;
        page1.value.total = data.totalCount;
        page1.value.currentPage = data.pageNo;
        page1.value.pageSize = data.pageSize;
      } else if (clickTag.value === 2) {
        pageData2.value = data.records;
        page2.value.total = data.totalCount;
        page2.value.currentPage = data.pageNo;
        page2.value.pageSize = data.pageSize;
      } else {
        pageData3.value = data.records;
        page3.value.total = data.totalCount;
        page3.value.currentPage = data.pageNo;
        page3.value.pageSize = data.pageSize;
      }
    })
    .finally(() => {
      loading.value = false;
      if (done) {
        done();
      }
    });
};
const rowDel = (form) => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
    .then(() => {
      deleteCheckPlan({ id: form.id })
        .then((data) => {
          ElMessage({
            message: data.msg,
            type: "success",
          });
          handleQuery(null, null);
        })
        .finally(() => {});
    })
    .catch(() => {
      // catch error
    });
};
const rowSave = (form, done, loading) => {
  loading();
  let params = { type: clickTag.value, ...form };
  saveCheckPlan(params).then((data) => {
    if (data.code === "200") {
      handleQuery(null, null);
      done();
    } else {
      ElMessage.error(data.msg);
      done();
    }
  });
};
const clickTab = (targetName) => {
  clickTag.value = parseInt(targetName.index) + 1;
  handleQuery(null, null);
};
const resetQuery = () => {};
onMounted?.(() => {
  clickTag.value = 1;
  handleQuery(null, null);

  getUserList({}).then((data) => {
    userList.value = data.data;
  });
});
</script>

<style scoped>
:deep(.card-container .el-form-item) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15px; /* 根据需要调整高度 */
}

:deep(.el-timeline-item) {
  padding-bottom: 0px;
  position: relative;
}
.card-container {
  display: flex;
  justify-content: space-around;
}
</style>
