<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>当前订单状态：{{status(dataSource[0].orderStatus)}}</h3>
      <div class="button">
        <a-button @click="onCancel">返回</a-button>
        <a-button type="danger" @click="onExamine(2)" v-if="pageType == 'audit'">退款</a-button>

      </div>
    </div>

    <a-card title="基本信息">
      <a-row>
        <div>
          <a-table ref="table" size="middle"  bordered :columns="columns"
                   :dataSource="dataSource" :pagination="false" :loading="loading" class="j-table-force-nowrap">
          </a-table>
        </div>
      </a-row>
    </a-card>
    <a-card title="操作信息">
      <a-row>
        <div>
          <a-table ref="table" size="middle"  bordered  :columns="columns2" :pagination="false"
                   :dataSource="dataSource"  :loading="loading" class="j-table-force-nowrap" >
          </a-table>
        </div>
      </a-row>
    </a-card>
  </a-spin>
</template>

<script>
import {filterDictTextByStatic, ORDER_STATUS, PAYMENT_METOD} from "@assets/static";

const mapZoom = [5, 8, 10, 12]
let timer = null
import { getPropertyChargruleListApi, getPropertyDetailApi, auditPropertyApi } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { isMobile, validateCreditCode } from '@/utils/validate'


const columns = [
  {
    title: '订单编号',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '所属小区',
    dataIndex: 'propertyName',
    key: 'propertyName',
    align: 'center',
  },
  {
    title: '业主名称',
    dataIndex: 'userName',
    key: 'userName',
    align: 'center',
  },
  {
    title: '用户账号',
    dataIndex: 'userAccount',
    key: 'userAccount',
    align: 'center',
  },
  {
    title: '支付方式',
    dataIndex: 'paymentMethod',
    key: 'paymentMethod',
    align: 'center',
    customRender: function(text) {
      return filterDictTextByStatic(PAYMENT_METOD, text);
    }
  },
  {
    title: '订单来源',
    dataIndex: 'orderSource',
    key: 'orderSource',
    align: 'center',
  }
]
const columns2 = [
  {
    title: '操作者',
    dataIndex: 'propertyName',
    key: 'propertyName',
    align: 'center',
  },
  {
    title: '操作时间',
    dataIndex: 'creditCode',
    key: 'creditCode',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
    align: 'center',
    customRender: function(text) {
      return filterDictTextByStatic(ORDER_STATUS, text);
    }
  },
  {
    title: '付款状态',
    dataIndex: 'paymentStatus',
    key: 'paymentStatus',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'refundInstructions',
    key: 'refundInstructions',
    align: 'center',
  }
]
export default {
  name: 'PropertySettledForm',
  inject: ['closeCurrent'],

  data() {
    return {
      title: '',
      pageType: '',
      confirmLoading: false,
      costList: [],
      mapRef: null,


      columns: columns,
      columns2: columns2,
      loading: false,
      dataSource: [
        {
          id: 1,
          userAccount: 'admin',
          orderAmount: 100,
          orderSource: '微信',
          paymentMethod: 1,
          orderStatus: 1,
          refundInstructions: '退款说明',
          ownPlatform: '微信',
          propertyName: '小区名称',
          createTime: '2018-01-01'
        },
      ]
    }
  },
  created() {
    this.pageType = this.$route.query.type
  },
  methods: {
    async onLoadCostList() {
      let data = await getPropertyChargruleListApi()
      this.costList = data.result
    },
    async getPageDetail() {
      let { result } = await getPropertyDetailApi({ id: this.$route.query.id })
      this.edit(result)
      if (result.provinceName) {
        this.getLongitude(
          result.provinceName,
          result.provinceName + result.cityName + result.countyName + result.addressInfo,
          mapZoom[3]
        )
      }
    },
    status(text){
      return filterDictTextByStatic(ORDER_STATUS, text);
    },
    onCancel() {
      this.closeCurrent()
    },

    onExamine(type) {
      this.closeCurrent()

    },
    loadData() {
      console.log('不请求')
    }
  },

}
</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>
