<template>
  <div id="subscription">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <picture-list
      ref="pictureList"
      :info="statisticsData"
      :list="showTabList"
    ></picture-list>
    <table-list
      rowKey="orderId"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
      @addClick="addFunc"
    >
      <template slot="customize">
        <el-button type="primary">批量导入</el-button>
        <el-button
          type="primary"
          @click="exportData"
          v-hasRole="derivePermission"
          >批量导出</el-button
        >
        <el-button>导入模板</el-button>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text">删除</el-button>
        <el-button type="text">认款</el-button>
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search"
    />
    <dislog :dialogVisible.sync="dialogVisible" @search="search" />
  </div>
</template>

<script>
import pictureList from "@/components/Comon/pictureList.vue";
import { exportFn } from "@/utils/index.js";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import dislog from "./dislog.vue";
export default {
  name: "Subscription",
  components: {
    pictureList,
    searchBoxNew,
    tableList,
    pagination,
    dislog,
  },
  data() {
    return {
      statisticsData: {},
      showTabList: [
        {
          label: "到账金额",
          prop: "orderProfitTotal",
          img: "盈亏",
        },
        {
          label: "已认款",
          prop: "orderProfitTotal",
          img: "合同金额",
        },
        {
          label: "待认款",
          prop: "orderProfitTotal",
          img: "已收款",
        },
      ],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "认款管理",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: false,
        openCheckMore: true,
        changeWidth: "120px",
        custom: false,
        backFatherBtn: {
          status: false,
          title: "配置下单填选模板",
        },
      },
      //搜索
      formList: [
        {
          prop: "businessFullName",
          placeholder: "业务归属",
          scope: "select",
          options: [
            { label: "学校", value: 1 },
            { label: "咨询", value: 2 },
          ],
        },
        {
          prop: "businessFullName",
          placeholder: "收款账户",
          scope: "select",
          options: [
            { label: "公户", value: 1 },
            { label: "非公户", value: 2 },
          ],
        },
        {
          prop: "businessFullName",
          placeholder: "认款类型",
          scope: "select",
          options: [
            { label: "自动", value: 1 },
            { label: "手动", value: 2 },
          ],
        },
        {
          prop: "businessFullName",
          placeholder: "认款状态",
          scope: "select",
          options: [
            { label: "待认款", value: 1 },
            { label: "已认款", value: 2 },
            { label: "已撤销", value: 3 },
          ],
        },
        {
          placeholder: "时间",
          prop1: "startTime",
          prop2: "endTime",
          placeholder1: "订单开始日期",
          placeholder2: "订单结束日期",
          scope: "moreDataPicker",
          Diszing: true,
        },
        {
          prop: "keyword",
          placeholder: "输入订单号",
        },
        {
          prop: "userCard",
          placeholder: "输入下单企业",
        },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "收款账户类型",
          prop: "businessNames",
          scope: "isOptions",
          hidden: true,
          options: [
            { label: "已完单", value: 1 },
            { label: "未完单", value: 0 },
          ],
        },
        {
          label: "收款账户信息",
          prop: "posterTempName",
          hidden: true,
        },
        {
          label: "到账金额",
          prop: "posterTempName",
          hidden: true,
        },
        {
          label: "付款账户信息",
          prop: "posterTempName",
          hidden: true,
        },
        {
          label: "到账时间",
          prop: "posterTempName",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "下单企业",
          prop: "posterTempName",
          hidden: true,
        },
        {
          label: "认款类型",
          prop: "finishStatus",
          scope: "isOptions",
          hidden: true,
          options: [
            { label: "已完单", value: 1 },
            { label: "未完单", value: 0 },
          ],
        },
        {
          label: "认款状态",
          prop: "checkStatus",
          scope: "isOptions",
          hidden: true,
          options: [
            {
              label: "待审核",
              value: 0,
            },
            {
              label: "已通过",
              value: 1,
            },
          ],
        },
        {
          label: "业务归属",
          prop: "studentCheckStatus",
          scope: "isOptions",
          hidden: true,
          options: [
            {
              label: "待审核",
              value: 0,
            },
            {
              label: "已审核",
              value: 1,
            },
          ],
        },
        {
          label: "关联订单",
          prop: "startTime",
          hidden: true,
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      dialogVisible: false,
    };
  },
  created() {
    this.search();
    this.getStatistics(this.formData);
  },
  methods: {
    exportData() {
      var data = JSON.parse(JSON.stringify(this.formData));
      if (data.roleId === 0 || data.roleId === 1) {
        data.refundStatusList = "0,3,4";
      }
      if (data.roleId === 2) {
        data.refundStatusList = "2,3";
      }
      this.$api.systemtoporderexport(data).then((res) => {
        if (res.msg) {
          exportFn(res.msg, `导出数据`);
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    addFunc() {
      this.dialogVisible = true;
    },
    getStatistics(datas) {
      var data = JSON.parse(JSON.stringify(datas));
      delete data.pageNum;
      delete data.pageSize;
      this.$api.systemtoporderstatistics(data).then((res) => {
        this.statisticsData = res.data || {};
      });
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      this.getStatistics(data);
      this.$api
        .systemtoporderlist(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
  },
};
</script>

<style lang="scss" scoped></style>
