<template>
    <div class="divBox">
      <div class="selCard">
        <el-form :model="tableForm" ref="searchForm" inline size="small" label-width="85px">
            <el-form-item label="商户名称：" prop="mer_id">
                <el-select
                    v-model="tableForm.mer_id"
                    clearable
                    filterable
                    placeholder="请选择"
                    class="selWidth"
                    @change="getList(1)"
                >
                    <el-option
                    v-for="item in merSelect"
                    :key="item.mer_id"
                    :label="item.mer_name"
                    :value="item.mer_id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="时间选择：">
                <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd HH:mm:ss" format="yyyy/MM/dd HH:mm:ss" size="small" type="datetimerange" placement="bottom-end" placeholder="自定义时间" style="width: 280px;" :picker-options="pickerOptions" @change="onchangeTime" />
            </el-form-item>
            <el-form-item label="订单号：" prop="order_sn">
                <el-input v-model="tableForm.order_sn" placeholder="请输入订单号" clearable class="selWidth" />
            </el-form-item>
            <el-form-item label="结算状态：" prop="status">
                <el-select v-model="tableForm.status" clearable placeholder="请选择" class="selWidth">
                    <el-option label="未处理" value="0" />
                    <el-option label="已处理" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item>
          <el-button type="primary" size="small" @click="getList(1)"
            >搜索</el-button
          >
          <el-button size="small" @click="searchReset()">重置</el-button>
        </el-form-item>
        </el-form>
      </div>
      <el-card class="mt14">
        <el-tabs
          v-if="headeNum.length > 0"
          v-model="tableForm.category"
          @tab-click="getList(1)"
        >
          <el-tab-pane
            v-for="(item, index) in headeNum"
            :key="index"
            :name="item.type.toString()"
            :label="item.title"
          />
        </el-tabs>
        <el-button size="small" type="primary" class="mb20" @click="exports">导出列表</el-button>
        <el-table
          v-loading="listLoading"
          :data="tableData.data"
          size="small"
          class="table"
          highlight-current-row
        >
          <el-table-column label="序号" min-width="90" prop="bill_id"></el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            min-width="150"
          />
          <el-table-column
            prop="order_sn"
            label="订单号"
            min-width="150"
          />
          <el-table-column
            prop="status"
            label="订单状态"
            min-width="150"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" type="success">未处理</el-tag>
              <el-tag v-if="scope.row.status === 1" type="danger">已处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pay_price"
            label="订单支付金额"
            min-width="150"
          />
          <el-table-column
            prop="number"
            label="结算金额"
            min-width="150"
          />
          <el-table-column
            prop="create_time"
            label="结算时间"
            min-width="150"
          />
          <el-table-column
            prop="mark"
            label="详情"
            min-width="150"
          />
        </el-table>
        <div class="block mb20">
          <el-pagination
            background
            :page-size="tableForm.limit"
            :current-page="tableForm.page"
            layout="total, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-card>
  
    </div>
  </template>
  
  <script>
  import createWorkBook from '@/utils/newToExcel.js';
  import { financialBillApi,billExport } from '@/api/accounts'
  import { merSelectApi } from "@/api/product";
  import { roterPre } from '@/settings'
  import timeOptions from '@/utils/timeOptions';
  export default {
    name: 'AccountsSettlement',
    data() {
      return {
        loading: false,
        roterPre: roterPre,
        pickerOptions: timeOptions,
        timeVal: [],
        listLoading: true,
        tableData: {
          data: [],
          total: 0
        },
        tableForm: {
          page: 1,
          limit: 10,
          mer_id: '',
          date: '',
          order_sn:'',
          status:'',
          category:'mer_lock_money'
        },
        merSelect: [],
        ruleForm: {
          status: '0'
        },
        dialogVisible: false,
        rules: {
          status: [
            { required: true, message: '请选择对账状态', trigger: 'change' }
          ]
        },
        headeNum: [
        {
          type: "mer_lock_money",
          title: "冻结中",
        },
        {
          type: "mer_refund_money",
          title: "冻结退款",
        },
        {
          type: "mer_computed_money",
          title: "已完成待解冻",
        },
      ],
        reconciliationId: 0,
        accountDetails: {
          date: '',
          charge: {},
          expend: {},
          income: {}
        }
      }
    },
    computed: {},
    mounted() { 
      this.getMerSelect()
      this.getList('')
    },
    methods: {
    /**重置 */
    searchReset() {
      this.timeVal = [];
      this.tableForm.date = "";
      this.$refs.searchForm.resetFields();
      this.getList(1);
    },
    async exports() {
      let excelData = JSON.parse(JSON.stringify(this.tableForm)), data = []
      excelData.page = 1
      excelData.limit = 200
      let pageCount = 1
      let lebData = {};
      for (let i = 0; i < pageCount; i++) {
        lebData = await this.downData(excelData)
        pageCount = Math.ceil(lebData.count/excelData.limit)
        if (lebData.export.length) {
          data = data.concat(lebData.export)
          excelData.page++
        }  
      }
      createWorkBook(lebData.header, lebData.title, data, lebData.foot,lebData.filename);
      return
    },
    /**订单列表 */
    downData(excelData) {
      return new Promise((resolve, reject) => {
        billExport(excelData).then((res) => {
          return resolve(res.data)
        })
      })
    },
    // 具体日期
    onchangeTime(e) {
        this.timeVal = e
        this.tableForm.date = e ? this.timeVal.join('-') : ''
        this.tableForm.page = 1;
        this.getList(1)
     },
      // 商户列表；
      getMerSelect() {
        merSelectApi()
          .then((res) => {
            this.merSelect = res.data;
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      // 列表
      getList(num) {
        this.listLoading = true
        this.tableForm.page = num ? num : this.tableForm.page;
        financialBillApi(this.tableForm).then(res => {
          this.tableData.data = res.data.list
          this.tableData.total = res.data.count
          this.listLoading = false
        }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
        })
      },
      pageChange(page) {
        this.tableForm.page = page
        this.getList('')
      },
      handleSizeChange(val) {
        this.tableForm.limit = val
        this.chkName = ''
        this.getList('')
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  