<template>
  <div class="jg-page-wrap onlinePayInvoiceDetail-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="onlinePayInvoiceDetail-cont">
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <span class="billno">货架名称：{{ $route.params.shelfName ||'--' }}</span>
          <a-button id="onlinePayInvoiceDetail-seeInfo-btn" type="link" class="button-default" @click="isShowBisiceInfo=!isShowBisiceInfo" style="margin-left:10px;vertical-align:middle;">
            <a-icon :type="isShowBisiceInfo ? 'eye-invisible' : 'eye'"/>
            {{ isShowBisiceInfo?'隐藏':'查看' }}信息
          </a-button>
          <a-button id="onlinePayInvoiceDetail-back-btn" type="link" @click="handleBack" class="button-default"> <a-icon type="rollback" /> 返回列表</a-button>
        </template>
      </a-page-header>
      <div class="sales-detail-body">
        <!-- 数据统计 -->
        <a-card size="small" :bordered="false" class="onlinePayInvoiceDetail-cont" v-show="isShowBisiceInfo">
          <a-descriptions size="small" :column="4">
            <div slot="title" style="display:flex;justify-content:space-between;align-items:center;">
              数据统计
            </div>
            <a-descriptions-item label="账单总金额">{{ detailData&&(detailData.totalAmount||detailData.totalAmount==0)?toThousands(detailData.totalAmount) :'--' }}</a-descriptions-item>
            <a-descriptions-item label="收款金额">{{ detailData&&(detailData.skAmount||detailData.skAmount==0)?toThousands(detailData.skAmount) :'--' }}</a-descriptions-item>
            <a-descriptions-item label="退款中金额">{{ detailData&&(detailData.tkzAmount||detailData.tkzAmount==0)?toThousands(detailData.tkzAmount) :'--' }}</a-descriptions-item>
            <a-descriptions-item label="已退款金额">{{ detailData&&(detailData.tkAmount||detailData.tkAmount==0)?toThousands(detailData.tkAmount) :'--' }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card size="small" :bordered="false" class="pages-wrap">
          <div ref="tableSearch" class="table-page-search-wrapper">
            <a-form layout="inline" id="onlinePayInvoiceDetail-form" @keyup.enter.native="$refs.table.refresh(true)">
              <a-row :gutter="15">
                <a-col :xl="6" :lg="6" :md="12" :sm="24">
                  <a-form-item label="下单时间">
                    <rangeDate id="onlinePayInvoiceDetail-time" ref="rangeDate" :value="orderDate" @change="orderDateChange" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="12" :sm="24">
                  <a-form-item label="付款时间">
                    <rangeDate id="onlinePayInvoiceDetail-qhtime" ref="rangePayDate" :value="payDate" @change="date=>{dataChange(date,'pay')}" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="12" :sm="24">
                  <a-form-item label="退款时间">
                    <rangeDate id="onlinePayInvoiceDetail-time" ref="rangeRefundDate" :value="refundDate" @change="date=>{dataChange(date,'refund')}" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="12" :sm="24">
                  <a-form-item label="采购单号">
                    <a-input id="onlinePayInvoiceDetail-purchaseBillNo" placeholder="请输入采购单号" v-model.trim="queryParam.purchaseBillNo" allowClear/>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="6" :md="12" :sm="24">
                  <a-form-item label="销售单号">
                    <a-input id="onlinePayInvoiceDetail-salesBillNo" placeholder="请输入销售单号" v-model.trim="queryParam.salesBillNo" allowClear/>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="业务状态">
                    <v-select
                      id="onlinePayInvoiceDetail-billStatus"
                      code="SALES_BILL_STATUS"
                      :notIn="['WAIT_SUBMIT','SUPERIOR_CHANGE']"
                      v-model="queryParam.billStatus"
                      allowClear
                      placeholder="请选择业务状态"></v-select>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="财务状态">
                    <v-select id="onlinePayInvoiceDetail-financialStatus" code="FINANCIAL_ONLINE_RECEIVE_STATUS" v-model="queryParam.financialStatus" allowClear placeholder="请选择财务状态"></v-select>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="到账状态">
                    <v-select
                      id="onlinePayInvoiceDetail-receivedMoneyFlag"
                      code="RECEIVED_MONEY_FLAG"
                      :notIn="['2']"
                      v-model="queryParam.receivedMoneyFlag"
                      allowClear
                      placeholder="请选择到账状态"></v-select>
                  </a-form-item>
                </a-col>
                <a-col :xl="24" :lg="24" :md="24" :sm="24" style="text-align:center;">
                  <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="onlinePayInvoiceDetail-refresh" >查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="onlinePayInvoiceDetail-reset">重置</a-button>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="margin-bottom:8px;">
            账单总金额：<strong>{{ countData&&(countData.totalAmount || countData.totalAmount==0) ? toThousands(countData.totalAmount) : '--' }}</strong>；
            其中收款金额：<strong>{{ countData&&(countData.paymentAmount || countData.paymentAmount==0) ? toThousands(countData.paymentAmount) : '--' }}</strong>；
            退款中金额：<strong>{{ countData&&(countData.refundingAmount || countData.refundingAmount==0) ? toThousands(countData.refundingAmount) : '--' }}</strong>；
            已退款金额：<strong>{{ countData&&(countData.refundedAmount || countData.refundedAmount ==0) ? toThousands(countData.refundedAmount) : '--' }}</strong>；
          </div>
          <!-- 列表 -->
          <s-table
            class="sTable"
            ref="table"
            size="small"
            :rowKey="(record) => record.id"
            :columns="columns"
            :data="loadData"
            :defaultLoadData="false"
            bordered>
            <!-- 财务状态 -->
            <template slot="financialStatusInfo" slot-scope="text, record">
              <div v-if="record.financialStatus&&record.financialStatusDictValue">
                <span v-if="record.financialStatus=='REFUNDING'" style="color:#ED1C24;">{{ record.financialStatusDictValue }}</span>
                <span v-else>{{ record.financialStatusDictValue }}</span>
              </div>
              <div v-else>--</div>
            </template>
          </s-table>
        </a-card>
      </div>
    </a-spin>
    <!-- 编辑备注 -->
    <editRemarkModal :openModal="openEditModal" @close="openEditModal=false" @ok="handleEditOk"></editRemarkModal>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import { STable, VSelect } from '@/components'
import rangeDate from '@/views/common/rangeDate.vue'
// 接口
import { queryByBizTradeList, queryShelfSettleRuleCount, queryByBizTradeCount } from '@/api/merchantNew'
export default {
  name: 'OnlinePayInvoiceDetail',
  components: { STable, VSelect, rangeDate },
  mixins: [commonMixin],
  props: {
    outBizSn: { //  有值则为弹框，无值则为页面
      type: [Number, String],
      default: ''
    }
  },
  data () {
    const _this = this
    return {
      spinning: false,
      disabled: false,
      openEditModal: false, // 打开编辑备注弹窗
      orderDate: [],
      payDate: [],
      refundDate: [],
      queryParam: {
        beginDate: undefined, // 下单时间
        endDate: undefined,
        payStartData: undefined, // 付款时间
        payEndData: undefined,
        refundStartData: undefined, // 退款时间
        refundEndData: undefined,
        purchaseBillNo: '', // 采购单号
        salesBillNo: '', // 销售单号
        billStatus: undefined, // 业务状态
        financialStatus: undefined, // 财务状态
        receivedMoneyFlag: undefined// 到账
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.queryParam.buyerSnSource = this.$route.params.sn
        this.queryParam.shelfSn = this.$route.params.shelfSn
        const params = Object.assign(parameter, this.queryParam)
        return queryByBizTradeList(params).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            this.getCount(params)
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
            this.disabled = false
          }
          return data
        })
      },
      detailData: null, //  详情数据
      isShowBisiceInfo: false, // 显示基础内容
      countData: null, // 统计信息
      columns: [
        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
        { title: '下单时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '采购单号', dataIndex: 'purchaseBillNo', width: '8%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '关联销售单号', dataIndex: 'salesBillNo', width: '9%', align: 'center', customRender: function (text) { return text && text != ' ' ? text : '--' } },
        { title: '财务收款单号', dataIndex: 'settleNo', width: '9%', align: 'center', customRender: function (text) { return text && text != ' ' ? text : '--' } },
        { title: '订单金额', dataIndex: 'totalAmount', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '结算方式', dataIndex: 'settleStyleSnDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '付款时间', dataIndex: 'auditDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '退款时间', dataIndex: 'refundData', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '业务状态', dataIndex: 'billStatusDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '财务状态', dataIndex: 'financialStatusDictValue', width: '6%', align: 'center', scopedSlots: { customRender: 'financialStatusInfo' } },
        { title: '到账状态', dataIndex: 'receivedMoneyFlagDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } }
      ]
    }
  },
  methods: {
    // 编辑备注完成
    handleEditOk () {
      this.openEditModal = false
    },
    // 统计
    getCount (val) {
      queryByBizTradeCount(val).then(res => {
        if (res.status == 200) {
          this.countData = res.data
        }
      })
    },
    //  返回
    handleBack () {
      this.$router.push({ name: 'onlinePayInvoiceList' })
    },
    //  详情
    getDetail () {
      queryShelfSettleRuleCount({ shelfSn: this.$route.params.shelfSn, buyerSnSource: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.detailData = res.data
        } else {
          this.detailData = null
        }
      })
    },
    orderDateChange (date) {
      this.queryParam.beginDate = date[0]
      this.queryParam.endDate = date[1]
    },
    dataChange (val, name) {
      this.queryParam[name + 'StartData'] = val[0]
      this.queryParam[name + 'EndData'] = val[1]
    },
    // 重置
    resetSearchForm () {
      this.queryParam = {
        beginDate: undefined, // 下单时间
        endDate: undefined,
        payStartData: undefined, // 付款时间
        payEndData: undefined,
        refundStartData: undefined, // 退款时间
        refundEndData: undefined,
        purchaseBillNo: '', // 采购单号
        salesBillNo: '', // 销售单号
        billStatus: undefined, // 业务状态
        financialStatus: undefined, // 财务状态
        receivedMoneyFlag: undefined// 到账
      }
      this.orderDate = []
      this.payDate = []
      this.refundDate = []
      this.$refs.rangeDate.resetDate([])
      this.$refs.rangePayDate.resetDate([])
      this.$refs.rangeRefundDate.resetDate([])
      this.$refs.table.refresh(true)
    },
    // 页面初始
    pageInit () {
      const vm = this
      vm.$nextTick(() => {
        vm.spinning = false
        vm.disabled = false
        // 查询列表
        vm.$refs.table.refresh(true)
        // 获取单据详情
        vm.getDetail()
      })
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab || this.outBizSn) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    this.pageInit()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
    })
  }
}
</script>

<style lang="less" scoped>
  .onlinePayInvoiceDetail-wrap{
    position: relative;
    height: 100%;
    .billno{
      font-size: 16px;
      font-weight: 600;
      display: inline-block;
      vertical-align: middle;
      color: #333;
      margin-right: 15px;
    }
    .ant-tag-green,.ant-tag-orange{
      vertical-align: middle;
    }
    .onlinePayInvoiceDetail-cont{
      margin-bottom: 10px;
      /deep/ .ant-descriptions-title{
          margin-bottom: 10px;
        }
    }
    .pages-wrap{
        strong{
          color:#f12929;
        }
    }

  }
</style>
