<template>
  <a-card :bordered="false">
    <!-- 搜索条件 -->
    <div class="orderCenter-searchForm">
      <a-form layout="inline" ref="searchForm">
        <a-row :gutter="48">
          <a-col :span="8">
            <a-form-item label="创建时间">
              <a-range-picker v-model="time" :placeholder="['开始时间','结束时间']" @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="关联订单号">
              <a-input v-model.trim="searchForm.num" placeholder="请输入" allowClear style="width: 200px;" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="网点名称">
              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button type="" @click="resetForm">重置</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :span="8">
            <a-form-item label="服务项目">
              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="退款状态">
              <v-select v-model="searchForm.name" placeholder="请选择" allowClear style="width: 200px;"></v-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 合计 -->
    <div class="total">
      <a-alert message="合计: 40单, 实收: 2000元" type="info" show-icon />
    </div>
    <!-- 列表 -->
    <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
      <!-- 退款状态 -->
      <span slot="status" slot-scope="text, record">
        <template></template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
  import {
    STable,
    VSelect
  } from '@/components'
  export default {
    components: {
      STable,
      VSelect
    },
    data() {
      return {
        // 查询参数
        searchForm: {
          beginDate: null,
          endDate: null,
          name: '',
          num: ''
        },
        time: null,
        columns: [{
            title: '创建时间',
            dataIndex: 'createTime',
            minWidth: '100',
            align: 'center'

          },
          {
            title: '交易流水号',
            dataIndex: 'createTime',
            minWidth: '100',
            align: 'center'

          },
          {
            title: '关联订单号',
            dataIndex: 'createTime',
            width: '100',
            align: 'center'

          },
          {
            title: '网点名称',
            dataIndex: 'createTime',
            minWidth: '100',
            align: 'center'

          },
          {
            title: '退款项目',
            dataIndex: 'createTime',
            minWidth: '100',
            align: 'center'

          },
          {
            title: '退款金额(￥)',
            dataIndex: 'createTime',
            minWidth: '40',
            align: 'center'

          },
          {
            title: '退款人',
            dataIndex: 'createTime',
            minWidth: '100',
            align: 'center'

          },
          {
            title: '退款状态',
            dataIndex: 'createTime',
            minWidth: '100',
            align: 'center',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '备注',
            dataIndex: 'status',
            minWidth: '100',
            align: 'center',
          },
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
          //   if (res.status == 200) {
          //     const no = (res.data.pageNo - 1) * res.data.pageSize
          //     for (let i = 0; i < res.data.list.length; i++) {
          //       const _item = res.data.list[i]
          //       _item.no = no + i + 1
          //       _item.status = _item.status + '' === '1'
          //     }
          //     return res.data
          //   }
          // })
        }
      }
    },
    methods: {
      // 创建时间change
      onChange(dates, dateStrings) {
        if ((dates, dateStrings)) {
          this.searchForm.beginDate = dateStrings[0]
          this.searchForm.endDate = dateStrings[1]
        }
        console.log(this.searchForm.beginDate, this.searchForm.endDate)
      },
      // 重置
      resetForm() {
        this.$refs.searchForm.resetFields()
        this.$refs.table.refresh(true)
      },
    },
  }
</script>

<style>
  .orderCenter-searchForm,
  .addButton {
    margin-bottom: 0;
  }

  .orderCenter-searchForm .ant-form-inline .ant-form-item {
    margin-bottom: 15px;
  }

  .total {
    margin-bottom: 15px;
  }
</style>
