<template>
  <div class="sheetOrderPool pagePadding">
    <div style="padding: 5px 0 10px 0">
      <el-row :gutter="10" style="padding: 0 0 10px 0">
        <el-col :span="6" style="width: 470px">
          <el-select
            v-model="code"
            multiple
            filterable
            :size="searchSize"
            remote
            style="width: 100%"
            :multiple-limit="1"
            reserve-keyword
            placeholder="请输入公司名称"
            :remote-method="remoteMethod"
            :loading="selectLoading"
            class="setWidth"
          >
            <el-option
              v-for="item in activeOptions"
              :key="item.companyNo"
              :label="item.companyName"
              :value="item.companyNo"
            />
          </el-select>
        </el-col>
        <el-col :span="6" style="width: 380px">
          <el-input
            v-model="parmValue.sequenceNo"
            :size="searchSize"
            placeholder="请输入确认单编号"
          ></el-input>
        </el-col>
        <el-col
          :span="6"
          style="float: right; width: 66px; padding: 0; text-align: right"
        >
          <el-button
            v-if="powers.some((item) => item == '002')"
            :size="searchSize"
            type="primary"
            style="margin-left: 10px"
            @click="searchList"
          >
            刷新
          </el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="padding: 0 0 10px 0">
        <el-col :span="6" style="width: 340px">
          <number-range
            :start="parmValue.total_low"
            :end="parmValue.total_up"
            :type="1"
            :width="'154px'"
            :title="'订单总额'"
            :size="searchSize"
            @numReturned="numReturned($event, 0)"
          />
        </el-col>
        <el-col :span="7" style="width: 170px">
          <el-select
            style="width: 100%"
            :size="searchSize"
            v-model="parmValue.pay_status"
            clearable
            @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
            "
            placeholder="关联资金状态"
          >
            <el-option
              v-for="item in capitalType"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="6" style="width: 340px">
          <number-range
            :start="parmValue.online"
            :end="parmValue.online"
            :type="1"
            :width="'154px'"
            :title="'资金未核销'"
            :size="searchSize"
            @numReturned="numReturned($event, 1)"
          />
        </el-col>

        <el-col
          :span="6"
          style="float: right; width: 66px; padding: 0 0; text-align: right"
        >
          <el-button
            type="warning"
            v-if="powers.some((item) => item == '024')"
            :size="searchSize"
            @click="restSearch"
          >
            重置
          </el-button>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6" style="width: 340px">
          <period-date-picker
            :start="parmValue.starttime"
            :end="parmValue.endtime"
            :type="1"
            :width="'154px'"
            :size="searchSize"
            @timeReturned="timeReturned($event)"
          />
        </el-col>
        <el-col :span="7" style="width: 170px">
          <el-select
            style="width: 100%"
            :size="searchSize"
            v-model="parmValue.inv_status"
            @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
            "
            clearable
            placeholder="关联发票状态"
          >
            <el-option
              v-for="item in invoiceType"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="width: 340px">
          <number-range
            :start="parmValue.inv_low"
            :end="parmValue.inv_up"
            :type="1"
            :width="'154px'"
            :title="'发票未核销'"
            :size="searchSize"
            @numReturned="numReturned($event, 2)"
        /></el-col>
        <el-col
          :span="6"
          style="float: right; width: 54px; text-align: right; padding: 0"
        >
          <el-button
            :size="searchSize"
            type="primary"
            icon="el-icon-search"
            @click="searchList"
          />
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      stripe
      v-loading="loading"
      border
      :size="size"
      style="width: 100%"
      row-key="id"
      :expand-row-keys="expands"
    >
      <el-table-column type="expand">
        <template #default="props">
          <el-table
            style="width: 100%"
            :size="'mini'"
            :data="props.row.good"
            stripe
            max-height="350"
            border
          >
            <el-table-column
              label="产品编号"
              prop="goodNo"
              show-overflow-tooltip
              width="125"
            >
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="goodname"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="品牌"
              prop="brand"
              width="80"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="单位"
              prop="unit"
              width="80"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column label="数量" width="65" show-overflow-tooltip>
              <template #default="scope">{{ scope.row.num }} </template>
            </el-table-column>
            <el-table-column label="单价" width="90" show-overflow-tooltip>
              <template #default="scope"
                >{{ scope.row.price }}
              </template></el-table-column
            >
            <el-table-column label="总价" width="105" show-overflow-tooltip
              ><template #default="scope">{{ scope.row.total_fee }} </template>
            </el-table-column>
            <el-table-column
              label="资金已核销金额"
              width="105"
              prop="apay_fee"
              show-overflow-tooltip
            />
            <el-table-column
              prop="paying_fee"
              label="资金处理中的金额"
              show-overflow-tooltip
              min-width="120"
            ></el-table-column>
            <el-table-column
              label="资金待核销金额"
              width="105"
              show-overflow-tooltip
              ><template #default="scope">{{ scope.row.wpay_fee }} </template>
            </el-table-column>
            <el-table-column
              label="关联资金状态"
              width="105"
              show-overflow-tooltip
              ><template #default="scope">
                <el-tag
                  type="danger"
                  :size="tablebtnSize"
                  v-if="scope.row.pay_status === '1'"
                  >未核销</el-tag
                >
                <el-tag
                  type="warning"
                  :size="tablebtnSize"
                  v-else-if="scope.row.pay_status === '2'"
                  >部分核销</el-tag
                >
                <el-tag type="" :size="tablebtnSize" v-else>全部核销</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="发票已核销金额"
              width="105"
              show-overflow-tooltip
              ><template #default="scope">{{ scope.row.ainv_fee }} </template>
            </el-table-column>
            <el-table-column
              prop="inving_fee"
              label="发票处理中的金额"
              show-overflow-tooltip
              min-width="120"
            ></el-table-column>
            <el-table-column
              label="发票待核销金额"
              width="105"
              show-overflow-tooltip
              ><template #default="scope">{{ scope.row.winv_fee }} </template>
            </el-table-column>
            <el-table-column
              label="关联发票状态"
              width="105"
              show-overflow-tooltip
              ><template #default="scope">
                <el-tag
                  type="danger"
                  :size="tablebtnSize"
                  v-if="scope.row.inv_status === '1'"
                  >未核销</el-tag
                >
                <el-tag
                  type="warning"
                  :size="tablebtnSize"
                  v-else-if="scope.row.inv_status === '2'"
                  >部分核销</el-tag
                >
                <el-tag type="" :size="tablebtnSize" v-else>全部核销</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column
        prop="sequenceNo"
        label="确认单号"
        show-overflow-tooltip
        width="140"
      ></el-table-column>
      <el-table-column
        prop="companyNo"
        label="企业编码"
        show-overflow-tooltip
        width="130"
      ></el-table-column>

      <el-table-column
        prop="customer"
        label="企业名称"
        show-overflow-tooltip
        min-width="170"
      ></el-table-column>
      <el-table-column
        prop="contactor"
        label="联系人"
        show-overflow-tooltip
        min-width="70"
      ></el-table-column>
      <el-table-column
        prop="sales_name"
        label="业务员"
        show-overflow-tooltip
        min-width="70"
      ></el-table-column>
      <el-table-column
        prop="total_fee"
        label="订单总金额"
        show-overflow-tooltip
        min-width="110"
      ></el-table-column>
      <el-table-column
        label="关联资金信息"
        show-overflow-tooltip
        align="center"
      >
        <el-table-column
          prop="apay_fee"
          label="已核销金额"
          show-overflow-tooltip
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="pay_fee"
          label="处理中的金额"
          show-overflow-tooltip
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="wpay_fee"
          label="未核销金额"
          show-overflow-tooltip
          min-width="110"
        ></el-table-column>
        <el-table-column label="核销状态" show-overflow-tooltip min-width="90">
          <template slot-scope="scope">
            <el-tag
              type="danger"
              :size="tablebtnSize"
              v-if="scope.row.pay_status === '1'"
              >未核销</el-tag
            >
            <el-tag
              type="warning"
              :size="tablebtnSize"
              v-else-if="scope.row.pay_status === '2'"
              >部分核销</el-tag
            >
            <el-tag type="" :size="tablebtnSize" v-else>全部核销</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="关联发票信息"
        show-overflow-tooltip
        align="center"
      >
        <el-table-column
          prop="ainv_fee"
          label="已核销金额"
          show-overflow-tooltip
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="inv_fee"
          label="处理中的金额"
          show-overflow-tooltip
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="winv_fee"
          label="未核销金额"
          show-overflow-tooltip
          min-width="110"
        ></el-table-column>
        <el-table-column label="核销状态" show-overflow-tooltip min-width="90">
          <template slot-scope="scope">
            <el-tag
              type="danger"
              :size="tablebtnSize"
              v-if="scope.row.inv_status === '1'"
              >未核销</el-tag
            >
            <el-tag
              type="warning"
              :size="tablebtnSize"
              v-else-if="scope.row.inv_status === '2'"
              >部分核销</el-tag
            >
            <el-tag type="" :size="tablebtnSize" v-else>全部核销</el-tag>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column
        prop="createdTime"
        label="创建时间"
        show-overflow-tooltip
        min-width="145"
      ></el-table-column>
    </el-table>
    <div
      class="Pagination"
      style="text-align: right; margin-top: 10px"
      v-show="count > 0"
    >
      <el-pagination
        :size="searchSize"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="parmValue.page"
        :page-sizes="[15, 50, 100]"
        :page-size="parmValue.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/InvoiceSales/sheetOrderPool";
import { mapGetters } from "vuex";
import PeriodDatePicker from "@/components/PeriodDatePicker";
import numberRange from "@/components/numberRange";
import { invoiceType, capitalType } from "@/assets/js/linkType";
import resToken from "@/mixins/resToken";
export default {
  name: "sheetOrderPool",
  mixins: [mixinPage, resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "sheetOrderPool"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      code: [],
      selectLoading: false,
      invoiceType: invoiceType,
      capitalType: capitalType,
      loading: false,
      showModel: false,
      isDetail: false,
      modelId: 0,
      parmValue: {
        starttime: "", // 起始时间
        endtime: "", //结束时间
        sequenceNo: "", // 订单编号
        companyNo: "", // 客户企业编码
        page: 1, // 页码
        size: 15, // 每页显示条数
        total_low: "", //最小金额
        total_up: "", //最大金额
        pay_status: "", //资金核销状态
        inv_status: "", //发票核销状态
        inv_low: "", //发票未核销最小金额
        inv_up: "", //发票未核销最大金额
        pay_low: "", //资金未核销最小金额
        pay_up: "", //资金未核销最大金额
      },
      count: 0, // 总条数
      tableData: [],
    };
  },

  mounted() {
    this.searchList();
  },
  components: {
    PeriodDatePicker,
    numberRange,
  },
  methods: {
    restSearch() {
      this.parmValue = {
        starttime: "", // 起始时间
        endtime: "", //结束时间
        sequenceNo: "", // 订单编号
        companyNo: 2, // 客户企业编码
        page: 1, // 页码
        size: 15, // 每页显示条数
        total_low: "", //最小金额
        total_up: "", //最大金额
        pay_status: "", //资金核销状态
        inv_status: "", //发票核销状态
        inv_low: "", //发票未核销最小金额
        inv_up: "", //发票未核销最大金额
        pay_low: "", //资金未核销最小金额
        pay_up: "", //资金未核销最大金额
      };
      this.searchList();
    },
    numReturned(e, type) {
      if (type === 0) {
        this.parmValue.total_low = e.lower; //最小金额
        this.parmValue.total_up = e.online; //最大金额
      } else if (type === 1) {
        this.parmValue.pay_low = e.lower; //最小金额
        this.parmValue.pay_up = e.online; //最大金额
      } else {
        this.parmValue.inv_low = e.lower; //最小金额
        this.parmValue.inv_up = e.online; //最大金额
      }
    },
    openModal(id, isDetail) {
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
    },
    async deleteById(id) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.delete({ id });
          if (res && res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async timeReturned(e) {
      if (e.startTime !== "") {
        this.parmValue.starttime = e.startTime;
      } else {
        this.parmValue.starttime = "";
      }

      if (e.endTime !== "") {
        this.parmValue.endtime = e.endTime;
      } else {
        this.parmValue.endtime = "";
      }
      if (this.parmValue.starttime !== "" && this.parmValue.endtime !== "") {
        this.parmValue.page = 1;
        await this.searchList();
      }
    },
    async searchList() {
      if (
        (this.parmValue.starttime !== "" && this.parmValue.endtime === "") ||
        (this.parmValue.starttime === "" && this.parmValue.endtime !== "")
      ) {
        this.$message.warning("时间区间有误！");
        return;
      }
      if (
        (this.parmValue.total_low !== "" && this.parmValue.total_up === "") ||
        (this.parmValue.total_low === "" && this.parmValue.total_up !== "")
      ) {
        this.$message.warning("订单总额区间有误！");
        return;
      }
      if (
        (this.parmValue.pay_low !== "" && this.parmValue.pay_up === "") ||
        (this.parmValue.pay_low === "" && this.parmValue.pay_up !== "")
      ) {
        this.$message.warning("资金未核销总额区间有误！");
        return;
      }
      if (
        (this.parmValue.inv_low !== "" && this.parmValue.inv_up === "") ||
        (this.parmValue.inv_low === "" && this.parmValue.inv_up !== "")
      ) {
        this.$message.warning("发票未核销总额区间有误！");
        return;
      }
      this.parmValue.companyNo = this.code.join(",");
      this.loading = true;
      let res = await asyncRequest.list(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
        this.count = Number(res.data.count);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.count = 0;
      }
      this.loading = false;
    },
    async statusConfirm(id, status) {
      console.log(id, status);
      let str = status === "1" ? "禁用" : "启用";
      await this.$confirm("确定要改为" + str, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          const model = {
            id: id,
            status: status === "1" ? "0" : "1",
          };
          const res = await asyncRequest.status(model);
          if (res && res.code === 0) {
            this.loading = false;
            this.$notify.success({
              title: "状态修改成功！",
              message: "",
            });
            await this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.loading = false;
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.activeOptions = [];
        const res = await asyncRequest.clist({
          page: 1,
          size: 100,
          company: query,
        });
        if (res && res.code === 0 && res.data && res.data.list) {
          this.activeOptions = res.data.list;
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      } else {
        this.activeOptions = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>
   <style lang="scss" scoped>
.sheetOrderPool {
}
</style>
  
};
