<template>
  <div class="await">
    <div class="search">
      <BaseNewForm
        ref="searchForm"
        :spanNumber="8"
        :formRow="SearchformRow"
        :ruleForm="searchForm"
        :isFunBtn="false"
        @onSelect="searchSelectChangeHandle"
        :newFlag="true"
        :formRule="false"
      ></BaseNewForm>
      <div class="btn">
        <el-button type="primary" @click="searchHandle">搜索</el-button>
        <el-button @click="resizeSearchHandle">重置</el-button>
      </div>
    </div>
    <div class="maintable">
      <div class="left">
        <div class="btn" style="margin-bottom: 5px">
          <el-button @click="anewProofPrepareHandle">恢复制单</el-button>
        </div>
        <BaseTable
          ref="mainTable"
          :showSelect="true"
          @onSelectionChange="onSelectionChange"
          :tableData="tableData"
          :showIndex="true"
          :tableColumn="tableColumn"
          :tabLoading="mainTabLoading"
          :tableHeight="'60vh'"
          @onFunc="tableButtonHandle"
          :border="false"
        >
          <template v-slot:receipt_status="{ row: scope }">
            <div>{{ status[scope.row["receipt_status"]] }}</div>
          </template>
        </BaseTable>
        <div class="footer">
          <basePage
            :pageModel="pageModel"
            @update:pageModel="currentChangeHandle"
          ></basePage>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseNewForm from "./compoments/baseNewForm";
import BaseTable from "./compoments/baseTable";
import basePage from "./compoments/basePage.vue";
import baseDialog from "./compoments/baseDialog.vue";
import baseNewSelect from "./compoments/baseNewSelect.vue";
import ToString from "./utils/numChange";
import { deepClone } from "@/utils/index.js";
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
export default {
  data() {
    return {
      // 制单状态字典
      status: {
        1: "未制单",
        2: "已制单",
        3: "不制单",
      },
      mainFunData: [
        {
          type: "view",
          text: "查看",
          color: "#5a9cf8",
        },
      ],

      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10,
      },
      mainTabLoading: false,
      searchForm: {},
      SearchformRow: [
        {
          elCol: [
            {
              type: "input",
              title: "标题",
              id: "receipt_title",
              row: 8,
            },
            {
              type: "newSelect",
              title: "单据类型",
              id: "receipt_type",
              journalingType: "receiptConf",
              row: 8,
            },
          ],
        },
      ],
      tableData: [],
      tableColumn: [
        {
          id: "receipt_title",
          title: "标题",
        },
        {
          id: "receipt_type_name",
          title: "单据类型",
        },
        {
          id: "receipt_status",
          title: "制单状态",
        },
      ],
      checkTable: [],
    };
  },
  components: {
    BaseNewForm,
    BaseTable,
    basePage,
    baseDialog,
    baseNewSelect,
  },
  methods: {
    //恢复制单方法
    async anewProofPrepareHandle() {
      if (this.checkTable.length) {
        let obj = { ids: [] };
        this.checkTable.forEach((item) => obj["ids"].push(item.id));
        const res = await getUserModuleApi(
          {
            tl: "sys_voucherService",
            as: "sys_voucherService",
            dj: "anewProofPrepare",
          },
          obj
        );
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "恢复成功！",
          });
          this.initMainTableHandele(this.searchForm);
        }
      }
    },
    async initMainTableHandele(obj = {}) {
      const res = await getUserModuleApi(
        {
          tl: "sys_voucherService",
          as: "sys_voucherService",
          dj: "queryVoucherPage",
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          receipt_status: "3",
          ...obj,
        }
      );
      if (res.status == 200) {
        this.pageModel.total = res.attribute.total;
        this.tableData = res.attribute.list;
      }
    },
    onSelectionChange(val) {
      this.checkTable = val;
    },
    tableButtonHandle(val, item) {
      this.dialogSwitch = true;
    },

    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
        this.initMainTableHandele(this.searchForm);
      });
    },
    onSubmitHandle() {},
    searchSelectChangeHandle(val, index, indexRow, row) {},
    searchHandle() {
      this.initMainTableHandele(this.searchForm);
    },
    resizeSearchHandle() {
      this.searchForm = {};
    },
  },
  computed: {},
  created() {
    this.initMainTableHandele();
  },
};
</script>

<style scoped lang="scss">
.await {
  width: 100%;
  .search {
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    .btn {
      display: flex;
      justify-content: flex-end;
    }
  }
  .maintable {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .left {
      background-color: #fff;
      padding: 20px;
      border-radius: 20px;
      width: 100%;
      > .footer {
        margin-top: 20px;
      }
    }
    .right {
      margin-left: 20px;
      background-color: #fff;
      border-radius: 20px;
      width: 25%;
      position: relative;
      > .wrap {
        padding: 20px;
        .title {
          font-size: 20px;
          margin-bottom: 20px;
        }
        > .footer {
          position: absolute;
          bottom: 20px;
          right: 10px;
        }
      }
    }
  }
}
.dialog {
  .receipts {
    text-align: center;
    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .date {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .demonstration {
        margin-right: 30px;
      }
      .datepick {
        width: 200px;
      }
    }
    .main {
      margin-top: 10px;
      border: 1px solid #000;

      > .top {
        padding: 10px 10px 0;
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          text-align: left;
          .select {
            width: 130px;
          }
          .input {
            margin-left: 10px;
            width: 100px;
          }
        }
        .right {
        }
      }
      > .table {
        padding: 0 10px 0;
        margin-top: 10px;
      }
      > .footer {
        border-top: 1px solid #000;
        margin-top: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        font-weight: 700;
        > .left {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          > .top {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .left {
              margin-right: 20px;
            }
          }
          > .bottom {
            margin-top: 10px;
            display: flex;
            justify-content: flex-start;
          }
        }
        > .right {
          padding: 20px;
          text-align: left;
          border: 1px solid #ccc;
          width: 80%;
          margin-left: 20px;
          height: 80px;
          display: flex;
          .chunk {
            margin-right: 20px;
            display: flex;
          }
        }
      }
    }
    footer {
      padding: 20px;
      margin-top: 20px;
      background-color: #e1e3e8;
      height: 80px;
      font-weight: 800;
      > .top {
        text-align-last: left;
        > .chunk {
          display: flex;
          font-weight: 800;
        }
      }
      > .bottom {
        margin-top: 10px;
        text-align-last: left;
        display: flex;
        .chunk {
          margin-right: 20px;
          display: flex;
          font-weight: 800;
        }
      }
    }
  }
}
</style>
