<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <p style="font-size: 18px; float:left;">结算对账</p>
      </div>
      <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

         <el-form-item label="账单状态" prop="status">
           <el-select v-model="queryParams.status" placeholder="请选择账单状态 0待确认 1 已确认 2已结算" clearable size="small">
             <el-option label="请选择字典生成" value="" />
           </el-select>
         </el-form-item>
         <el-form-item label="开始日期" prop="time">
           <el-input
             v-model="queryParams.time"
             placeholder="请输入账单生成时间"
             clearable
             size="small"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
         <el-form-item label="结束日期" prop="confirm_time">
           <el-input
             v-model="queryParams.confirm_time"
             placeholder="请输入确认账单时间"
             clearable
             size="small"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
           <el-form-item>
               <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             </el-form-item>
       </el-form> -->

      <el-table v-loading="loading" :data="verifyrecordList" @selection-change="handleSelectionChange"
                :height="tableHeight">
        <el-table-column label="账单编号" align="center" prop="Id"/>
        <el-table-column label="生成时间" align="center" :formatter="formatTime" prop="Time"/>
        <!--<el-table-column label="商户id" align="center" prop="ShopId" />-->
        <!-- <el-table-column label="实付金额" align="center" prop="Money" /> -->
        <!--<el-table-column label="应付金额" align="center" prop="OrgMoney" />-->
        <el-table-column label="订单结算" align="center" prop="BillMoney"/>
        <el-table-column label="运费结算" align="center" prop="Freight"/>
        <!-- <el-table-column label="店铺优惠金额" align="center" prop="DiscMoney" /> -->
        <el-table-column label="退款金额" align="center" prop="RefundMoney"/>
        <el-table-column label="实际结算" align="center" prop="RealBillMoney"/>
        <!--<el-table-column label="平台优惠" align="center" prop="PtDiscMoney" />-->
        <el-table-column label="账单状态 " :formatter="formatStatus" align="center" prop="Status"/>
        <el-table-column label="确认时间" align="center" :formatter="formatTime" prop="ConfirmTime"/>
        <el-table-column label="账单详情" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDeatil(scope.row)"
            >查看详情
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 添加或修改商户账单对话框 -->
      <el-dialog v-loading="loading" :title="title" :visible.sync="open" width="80%" append-to-body>
        <el-table v-loading="loading" :data="form">
          <el-table-column label="ID" align="center" prop="Id"/>
          <el-table-column label="订单号" align="center" prop="OrderSn"/>
          <el-table-column label="店铺ID" align="center" prop="ShopId"/>
          <el-table-column label="店铺名称" align="center" prop="StoreName"/>
          <el-table-column label="付款时间" align="center" prop="Paytime"/>
          <el-table-column label="退款时间" align="center" prop="RefundSuccessTime"/>
          <el-table-column label="订单结算时间" align="center" :formatter="formatTime" prop="BillBalanceTime"/>
          <el-table-column label="商品名称" align="center" prop="GoodsName"/>
          <el-table-column label="商品ID" align="center" prop="GoodsId"/>
          <el-table-column label="商品数量" align="center" prop="Quantity"/>
          <el-table-column label="应付金额" align="center" prop="OrgMoney"/>
          <el-table-column label="运费金额" align="center" prop="Freight"/>
          <el-table-column label="优惠金额" align="center" prop="DpqMoney"/>
          <el-table-column label="结算金额" align="center" prop="SellerMoney"/>
          <el-table-column label="收方姓名" align="center" prop="Shipname"/>
          <el-table-column label="收方手机号" align="center" prop="Tel"/>
          <el-table-column label="订单状态" align="center" prop="Status" :formatter="formatStatus"/>
        </el-table>

        <div slot="footer" class="dialog-footer">

          <el-button v-if="isBlance" type="primary" @click="submitForm">确 定 订 单</el-button>

          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  import {
    listVerifyrecord,
    getVerifyrecord,
    delVerifyrecord,
    addVerifyrecord,
    updateVerifyrecord,
    autoVerifyAccount
  } from '@/api/module/verifyrecord'
  import {dateFormat} from '@/utils'

  export default {
    name: "verifyrecord",
    data() {
      return {
        fullHeight: '',
        tableHeight: null,
        //是否结算
        isBlance: true,
        billId: 0,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商户账单表格数据
        verifyrecordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        sellerId: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          shopId: 0,
          money: null,
          org_money: null,
          freight: null,
          bill_money: null,
          disc_money: null,
          refund_money: null,
          real_bill_money: null,
          integral_cost_money: null,
          pt_disc_money: null,
          score_back: null,
          status: null,
          time: null,
          confirm_time: null,
        },
        // 表单参数
        form: {},
        //数据个数
        count: 0,
        // 表单校验
        rules: {
          status: [
            {required: true, message: "账单状态 0待确认 1 已确认 2已结算不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.sellerId = this.$store.state.user.sellerid;
      this.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })

    },
    watch: {
      fullHeight(val, oldval) {
        this.tableHeight = val - 130
      }
    },
    methods: {
      //状态  0待确认 1 已确认 2已结算
      formatStatus(row, s, value, i) {
        var status = value
        var msg = ""
        if (status == 2) {
          msg = "已结算"
        } else if (status == 1) {
          msg = "已确认"
        } else {
          msg = "待确认"
        }
        return msg
      },
      //格式化时间
      formatTime(row, s, value, i) {
        var Time = value
        var newtime = ""
        if (Time > 0) {
          newtime = dateFormat(Time * 1000, "Y-m-d H:i:s");
        }
        return newtime
      },
      /** 查询商户账单列表 */
      getList() {
        this.loading = true;
        listVerifyrecord(this.queryParams).then(response => {
          this.verifyrecordList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          shop_id: null,
          money: null,
          org_money: null,
          freight: null,
          bill_money: null,
          disc_money: null,
          refund_money: null,
          real_bill_money: null,
          integral_cost_money: null,
          pt_disc_money: null,
          score_back: null,
          status: 0,
          time: null,
          confirm_time: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },

      /** 查看详情操作 */
      handleDeatil(row) {
        this.loading = true;
        const id = row.Id
        this.billId = id
        if (row.Status > 0) {
          this.isBlance = false;
        }
        getVerifyrecord(id).then(response => {
          this.form = response.data;
          this.count = response.data.length;
          this.open = true;
          this.title = "查看详情";
          this.loading = false;

        });
      },
      autoDuizhang(id) {
        autoVerifyAccount({id: id}).then(response => {
          if (response.code === 0) {
            this.loading = false;
            this.msgSuccess("对账成功");
            this.open = false;
            this.getList();
          } else {
            this.msgError("对账失败");
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        if (this.billId != null) {
          this.loading = true;
          updateVerifyrecord({id: this.billId}).then(response => {
            if (response.code === 0) {
              this.loading = false;
              this.msgSuccess("确认成功,正在进行自动对账请稍后......");
              this.open = false;
              this.autoDuizhang(this.billId)
              this.getList();
            } else {
              this.msgError("确认失败");
            }
          });
        } else {
          this.msgError("确认失败");
        }
      },
    } //methods结束
  };
</script>
<style scoped lang="scss" type="text/stylus">

</style>
