<template>
  <div class="back-color">
    <t-layout style="height: 90%; background-color: #f5f7fb">
      <t-header class="scarch-box">
        <t-form
          ref="form"
          :data="formData"
          label-width="calc(2em + 40px)"
          layout="inline"
          scroll-to-first-error="smooth"
          class="scarch-from"
          @reset="resetting"
          @submit="headerQuery"
        >
          <div style="margin-left: 1rem">
            <t-form-item label="票据编号:" name="billserial">
              <t-input v-model="formData.billserial" maxlength="10"></t-input>
            </t-form-item>

            <t-form-item label="报损日期:" name="breakDate">
              <t-date-picker v-model="formData.breakDate" clearable />
            </t-form-item>
            <t-form-item
              label="票据类型:"
              name="billType"
              style="margin-bottom: 0.3rem"
            >
              <t-select
                v-model="formData.billType"
                placeholder="请选择票据类型"
                clearable
              >
                <t-option
                  v-for="item in billType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></t-option>
              </t-select>
            </t-form-item>
            <t-form-item
              label="报损状态:"
              name="breakStatus"
              style="margin-bottom: 0.3rem"
            >
              <t-select
                v-model="formData.breakStatus"
                placeholder="请选择报损状态"
                clearable
              >
                <t-option
                  v-for="item in breakStatus"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></t-option>
              </t-select>
            </t-form-item>
          </div>
          <t-form-item style="margin-right: 1rem">
            <t-button theme="primary" type="submit">查询</t-button>
            <t-button theme="primary" type="reset">重置</t-button>
          </t-form-item>
        </t-form>
      </t-header>
      <t-content class="table-box">
        <div class="table-header">
          <div>
            <h4 style="font-size: 110%">票据报损列表</h4>
          </div>
          <div>
            <t-button theme="primary" size="small" @click="breakageAdd">
              <template #icon><add-icon /></template>
              新增报损票据
            </t-button>
            <t-button
              shape="circle"
              theme="primary"
              @click="refresh"
              style="margin-left: 0.8rem"
            >
              <template #icon><load-icon /></template>
            </t-button>
          </div>
        </div>
        <t-base-table
          hover
          row-key="index"
          :loading="loading"
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          class="table"
          :max-height="550"
        >
          <template #breakNum="{ row }">
            {{ `${row.breakNum}张` }}
          </template>
          <template #billType="{ row }">
            <div v-for="item in billType" :key="item">
              <span v-if="row.billType === item.value">{{ item.label }}</span>
            </div>
          </template>
          <template #breakStatus="{ row }">
            <div v-for="item in breakStatus" :key="item">
              <t-tag
                v-if="row.breakStatus === item.value"
                :theme="tagColor(row.breakStatus)"
                variant="light"
              >
                {{ item.label }}
              </t-tag>
            </div>
          </template>
          <template #status="slotProps">
            <t-button
              theme="default"
              variant="text"
              size="small"
              @click="breakEdit(slotProps)"
              :disabled="
                slotProps.row.breakStatus === 0 ||
                slotProps.row.breakStatus === 1
              "
              >修改</t-button
            >
            <t-popconfirm
              content="确认删除吗"
              @confirm="breakDelete(slotProps)"
            >
              <t-button
                theme="default"
                variant="text"
                size="small"
                :disabled="slotProps.row.breakStatus === 0"
                >删除</t-button
              >
            </t-popconfirm>
          </template>
        </t-base-table>
      </t-content>
    </t-layout>
    <t-space>
      <t-dialog
        ref="postForm"
        v-model:visible="visiblePost"
        :header="headerTitle"
        width="40%"
        :confirm-on-enter="true"
        :on-close="closePost"
        :confirm-btn="null"
        :cancel-btn="null"
      >
        <t-space direction="vertical" style="width: 100%">
          <div>
            <t-form
              ref="formDialog"
              scroll-to-first-error="smooth"
              label-align="left"
              :rules="FORM_RULES"
              :data="dialogData"
              :colon="true"
              @submit="breakSub"
              label-width="calc(2em + 55px)"
              layout="inline"
              @reset="onReset"
            >
              <t-form-item
                label="票据编号"
                name="billserial"
                :span="10"
                style="margin-bottom: 0.5rem"
              >
                <t-input
                  v-model="dialogData.billserial"
                  placeholder="请输入票据编号"
                  maxlength="10"
                ></t-input>
              </t-form-item>
              <t-form-item
                label="操作员"
                name="operator"
                :span="10"
                style="margin-bottom: 0.5rem"
              >
                <t-input
                  v-model="dialogData.operator"
                  placeholder="请输入操作员"
                ></t-input>
              </t-form-item>
              <t-form-item
                label="票据类型"
                name="billType"
                :span="12"
                style="width: 16rem; margin-bottom: 0.5rem"
              >
                <t-select
                  v-model="dialogData.billType"
                  clearable
                  placeholder="请选择票据类型"
                >
                  <t-option
                    v-for="item in billType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </t-select>
              </t-form-item>
              <t-form-item
                label="报损数量"
                name="breakNum"
                :span="12"
                style="margin-bottom: 0.5rem"
              >
                <t-input
                  type="number"
                  v-model="dialogData.breakNum"
                  placeholder="请输入报损数量"
                ></t-input>
              </t-form-item>

              <t-form-item
                label="报损时间"
                name="breakDate"
                :span="10"
                style="width: 16rem; margin-bottom: 0.5rem"
              >
                <t-date-picker
                  v-model="dialogData.breakDate"
                  placeholder="请选择报损时间"
                  clearable
                />
              </t-form-item>
              <t-form-item
                label="报损原因"
                name="breakInfo"
                style="width: 33.6rem"
              >
                <t-textarea
                  v-model="dialogData.breakInfo"
                  placeholder="请输入备注"
                ></t-textarea>
              </t-form-item>
              <t-form-item />
              <t-form-item>
                <t-space size="small">
                  <t-button theme="primary" type="submit">提交</t-button>
                  <t-button theme="default" variant="base" type="reset"
                    >重置</t-button
                  >
                </t-space>
              </t-form-item>
            </t-form>
          </div>
        </t-space>
      </t-dialog>
    </t-space>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
import { useBreakage } from "@/stores/billBreakage";

// 数据
const loading = ref(false);
const visiblePost = ref(false);
const breakageList = useBreakage();
const tableData = ref([]);
const data = ref([]);
const headerTitle = ref("");
// 表格表头
const columns = ref([
  {
    colKey: "serial-number",
    title: "序号",
    width: 50,
  },
  {
    colKey: "billserial",
    title: "票据编号",
    align: "center",
    width: "100",
  },
  {
    colKey: "billType",
    title: "票据类型",
    align: "center",
    width: "100",
  },
  {
    colKey: "breakNum",
    title: "报损数量",
    align: "center",
    width: "100",
  },
  {
    colKey: "breakDate",
    title: "报损日期",
    align: "center",
    width: "100",
  },
  {
    colKey: "operator",
    title: "操作员",
    align: "center",
    width: "100",
  },
  {
    colKey: "breakStatus",
    title: "报损状态",
    align: "center",
    width: "100",
  },
  {
    colKey: "breakInfo",
    title: "报损原因",
    ellipsis: true,
    align: "center",
    width: "100",
  },
  {
    colKey: "status",
    title: "操作",
    width: 120,
    align: "center",
    fixed: "right",
  },
]);

// 票据类型
const billType = ref([
  { label: "票据类型1", value: 0 },
  { label: "票据类型2", value: 1 },
  { label: "票据类型3", value: 2 },
  { label: "票据类型4", value: 3 },
  { label: "票据类型5", value: 4 },
]);

// 审批状态
const breakStatus = ref([
  { label: "审核中", value: 0 },
  { label: "审核通过", value: 1 },
  { label: "审核拒绝", value: 2 },
]);

// 获取票据列表
const tableList = async () => {
  loading.value = true;
  tableData.value = await breakageList.getBreakageList();
  data.value = await breakageList.getBreakageList();
  pagination.value.total = tableData.value.length;
  const timerId = setTimeout(() => {
    loading.value = false;
    clearInterval(timerId);
  }, 300);
};

// 判断tag标签的颜色
const tagColor = (value) => {
  switch (value) {
    case 0:
      return "warning";
    case 1:
      return "success";
    case 2:
      return "danger";
  }
};
// 刷新列表
const refresh = () => {
  tableList();
};

// 弹出框表单
const dialogData = ref({
  billserial: "",
  operator: "",
  billType: "",
  breakNum: Number,
  breakDate: "",
  breakInfo: "",
});

// 查询表单
const formData = ref({
  billserial: "",
  billType: "",
  breakStatus: "",
  breakDate: "",
});

// 分页
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 50,
});

// 查询表单重置
const resetting = () => {
  formData.value = {
    billserial: "",
    billType: "",
    breakStatus: "",
    breakDate: "",
  };
  getNewTable();
};

// 查询
const headerQuery = () => {
  tableData.value = data.value;
  if (
    formData.value.billserial === "" &&
    (formData.value.billType === undefined || formData.value.billType === "") &&
    (formData.value.breakStatus === undefined ||
      formData.value.breakStatus === "") &&
    formData.value.breakDate === ""
  ) {
    getNewTable();
  } else {
    const list = tableData.value.filter((item) => {
      let arrList;
      if (formData.value.billserial === item.billserial) {
        arrList = item;
      }
      if (formData.value.billType === item.billType) {
        arrList = item;
      }
      if (formData.value.breakStatus === item.breakStatus) {
        arrList = item;
      }
      if (formData.value.breakDate === item.breakDate) {
        arrList = item;
      }
      if (
        formData.value.billserial === "" &&
        formData.value.billType === "" &&
        formData.value.breakStatus === "" &&
        formData.value.breakDate === ""
      ) {
        arrList = item;
      }
      return arrList;
    });
    tableData.value = list;
    // @ts-expect-error
    pagination.value.total = list.length;
  }
};
// 打开窗口
const breakageAdd = () => {
  visiblePost.value = true;
  headerTitle.value = "新增报损票据";
  dialogData.value = {
    billserial: "",
    operator: "",
    billType: "",
    breakNum: Number,
    breakDate: "",
    breakInfo: "",
  };
};

// 关闭窗口
const closePost = () => {
  visiblePost.value = false;
};
// 表单校验
const FORM_RULES = {
  billserial: [{ required: true, message: "请输入票据编号", trigger: "blur" }],
  billType: [{ required: true, message: "请选择票据类型", trigger: "change" }],
  breakNum: [{ required: true, message: "请输入报损数量", trigger: "blur" }],
  breakDate: [{ required: true, message: "请选择报损日期", trigger: "change" }],
  operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
  breakInfo: [{ required: true, message: "请输入报损原因", trigger: "blur" }],
};

// 新增
const breakSub = async ({ validateResult, firstError }) => {
  if (validateResult === true) {
    dialogData.value.breakStatus = 0;
    await breakageList.addBreakageList(dialogData.value);
    getNewTable();
    MessagePlugin.success("提交成功");
    visiblePost.value = false;
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
  }
};

// 修改
const breakEdit = (item) => {
  headerTitle.value = "修改报损票据";
  visiblePost.value = true;
  tableData.value.forEach((itemTable) => {
    if (itemTable.id === item.row.id) {
      dialogData.value = itemTable;
    }
  });
};

// 删除
const breakDelete = async (itme) => {
  await breakageList.deleteBreakageList(itme.row);
  getNewTable();
};

// 弹出框表单重置
const onReset = () => {};

// 判断menuManagement里面是否存在数据
const getNewTable = () => {
  let arr = JSON.parse(localStorage.getItem("breakageList"));
  if (arr) {
    tableData.value = arr.breakageList;
    data.value = arr.breakageList;
    pagination.value.total = tableData.value.length;
  } else {
    tableList();
  }
};

onMounted(() => {
  getNewTable();
});
</script>

<style scoped lang="less">
.scarch-box {
  width: 100%;
  background-color: @base-white-color;
  margin-bottom: 2rem;
  .scarch-from {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.table-box {
  height: 42rem;
  background-color: @base-white-color;
  padding: 1rem;
  padding-top: 0;
  .table-header {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
:deep(.t-form__controls-content) {
  justify-content: space-between;
}
</style>
