<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{title}}</h3>
      <div class="button">
        <a-button @click="toReturn">返回</a-button>
        <a-button type="primary" @click="toReconciliation()" v-if="pageType == 'add'">申请结算</a-button>
      </div>
    </div>

    <j-form-container :disabled="true" v-if="pageType == 'detail'">
      <a-form-model ref="form" :model="model" slot="detail">
        <a-card title="基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="结算单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.balanceNum" placeholder="结算单号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.createTime" placeholder="提交时间"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.createBy" placeholder="提交人" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="结算总金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.balanceMoney" placeholder="结算总金额" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="账单数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.balanceCount" placeholder="账单数量" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="结算方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.balanceWay" placeholder="结算方式" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="银行卡" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.bankCard" placeholder="银行卡" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="结算日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="detailInfo.balanceDate" placeholder="结算日期" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>
    <a-card title="对账信息" style="margin: 10px 0;">
      <!-- <a-button slot="extra" type="primary" @click="onStatements()" v-if="pageType == 'add'">选择对账单</a-button> -->
      <div>
        <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
          :dataSource="shareBenefitsList" :pagination="false" :loading="loading" class="j-table-force-nowrap">
          <span slot="orderSource" slot-scope="text, record">
            <template v-if="record.orderSource === 'miniapp'">小程序</template>
          </span>
          <span slot="reconciliationStatus" slot-scope="text, record">
            <a-tag color="orange" v-if="record.reconciliationStatus === 1">未对账</a-tag>
            <a-tag color="blue" v-else-if="record.reconciliationStatus === 2">对账待审核</a-tag>
            <a-tag color="green" v-else-if="record.reconciliationStatus === 3">已对账</a-tag>
            <a-tag color="red" v-else-if="record.reconciliationStatus === 4">对账驳回</a-tag>
          </span>
        </a-table>
      </div>
    </a-card>
    <a-card title="操作信息" v-if="recordList.length > 0">
      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="recordColumns"
        :dataSource="recordList" :pagination="false" :loading="loading" class="j-table-force-nowrap">
        <span slot="payStatus" slot-scope="text, record">
          <template v-if="record"></template>已付款
        </span>
        <span slot="reconciliationStatus" slot-scope="text, record">
          <a-tag v-if="record.reconciliationStatus === 2">结算待审核</a-tag>
          <a-tag v-else-if="record.reconciliationStatus === 3">已结算</a-tag>
          <a-tag v-else-if="record.reconciliationStatus === 4">结算驳回</a-tag>
        </span>
      </a-table>
    </a-card>
  </a-spin>
</template>

<script>
const mapZoom = [5, 8, 10, 12]
let timer = null
import { shareBalanceByDepId } from '@/api/api'
import { httpAction } from '@/api/manage'
//import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const columns = [
  {
    title: '订单编号',
    dataIndex: 'orderNum',
    key: 'orderNum',
    align: 'center',
  },
  {
    title: '提交时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '买家名称',
    dataIndex: 'buyerName',
    key: 'buyerName',
    align: 'center',
  },
  {
    title: '分利金额',
    dataIndex: 'shareMoney',
    key: 'shareMoney',
    align: 'center',
  },
  {
    title: '订单金额',
    dataIndex: 'totalMoney',
    key: 'totalMoney',
    align: 'center',
  },
  // {
  //   title: '支付方式',
  //   dataIndex: 'payWay',
  //   key: 'payWay',
  //   align: 'center',
  // },
  {
    title: '订单来源',
    dataIndex: 'orderSource',
    scopedSlots: { customRender: 'orderSource' },
    key: 'orderSource',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'reconciliationStatus',
    scopedSlots: { customRender: 'reconciliationStatus' },
    key: 'reconciliationStatus',
    align: 'center',
  },
  {
    title: '所属平台',
    dataIndex: 'propertyName',
    key: 'propertyName',
    align: 'center',
  },
  {
    title: '所属小区',
    dataIndex: 'communityName',
    key: 'communityName',
    align: 'center',
  },
]
export default {
  name: 'SettlementDetails',
  inject: ['closeCurrent'],
  data() {
    return {
      title: '详情',
      pageType: '',
      pcaa: this.$Jpcaa,
      model: {},
      info: {},
      detailInfo: {},
      loading:false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visibleStatements: false,
      confirmLoading: false,
      shareBenefitsList: [],
      selectionRows: [],
      selectedRowKeys: [],
      visibleReconciliation: false,
      url: {
        queryById: '/property-central/partners/shareBalance/queryById',
        add: '/property-central/partners/shareBalance/add',
        //list: '/property-central/partners/shareBenefit/listBalance',
      },
      columns: columns,
      dataStatements: [],
      recordList:[],
      recordColumns: [
        {
          title: '操作人',
          dataIndex: 'createBy',
          key: 'createBy',
          align: 'center',
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
        },
        {
          title: '订单状态',
          dataIndex: 'reconciliationStatus',
          scopedSlots: { customRender: 'reconciliationStatus' },
          key: 'reconciliationStatus',
          align: 'center',
        },
        {
          title: '付款状态',
          dataIndex: 'payStatus',
          scopedSlots: { customRender: 'payStatus' },
          key: 'payStatus',
          align: 'center',
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          key: 'remarks',
          align: 'center',
        },
      ],
    }
  },
  created() {
    this.pageType = this.$route.query.type
    if (this.$route.query.type == 'add') {
      this.title = '新增'
    } else if (this.$route.query.type == 'detail') {
      this.title = '详情'
    }
    if (this.$route.query.id) {
      this.getPageDetail()
    }
  },
  methods: {
    async getPageDetail() {
      let { result } = await shareBalanceByDepId({ id: this.$route.query.id })
      this.recordList = result.list
      this.detailInfo = result.shareBalance
      this.shareBenefitsList = result.shareBenefitsList
    },
    toReturn() {
      this.closeCurrent()
      this.$router.go(-1)
    },
    handleCancel(e) {
      this.visibleReconciliation = false
    },
  },
  mounted() {},
}
</script>
<style lang="less" scoped>
.title-top {
  background: #fff;
  padding: 0 25px;
  line-height: 50px;
  height: 50px;
  margin-bottom: 5px;
  h3 {
    font-weight: bold;
    display: inline-block;
  }
  .button {
    float: right;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
</style>
<style>
.area-select {
  width: 100% !important;
}
</style>