<template>
  <a-card :bordered="false">
    <!-- 搜索条件 -->
    <div class="orderCenter-searchForm">
      <a-form ref="searchForm">
        <a-row :gutter="48">
          <a-col :span="8">
            <a-form-item label="创建时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
              <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
              <v-select v-model="searchForm.storeId" mode="multiple" placeholder="请选择" allowClear></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
              <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear/>
            </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="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
              <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
                <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
              </a-select>
              <!-- <v-select v-model="searchForm.itemId" placeholder="请选择" allowClear></v-select> -->
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
              <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear maxLength="11" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
              <v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear></v-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 合计 -->
    <div class="total" >
      <a-icon type="info-circle" class="iconImg"/>
      <strong>合计：</strong><span v-model="countHJ">{{countHJ}} 单</span><strong style="margin-left: 15px;">实收：</strong><span v-model="incomeHJ">{{incomeHJ}} 元</span>
    </div>
    <!-- 列表 -->
    <s-table ref="table" size="default" :showPagination="false" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
      <!-- 状态 -->
      <span slot="orderStatus" slot-scope="text, record">
        {{ $refs.orderStatus.getNameByCode(text) }}
      </span>
      <!-- 实收金额 -->
      <span slot="paymentAmount" slot-scope="text, record">
        <template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
        <template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
      </span>
      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" @click="seeDetail(record)">查看</a-button>
        <a-button type="danger" @click="refund(record)">退款</a-button>
      </span>
    </s-table>
  </a-card>
</template>

<script>
  import { STable, VSelect } from '@/components'
  import getDate from '../../libs/getDate.js'
  import { orderCenterList } from '../../api/order.js'
  import moment from 'moment'
  export default {
    components: {
      STable,
      VSelect
    },
    data() {
      return {
        // 查询参数
        searchForm: {
          beginDate: null,    // 创建的开始时间
          endDate: null,      // 创建的结束时间
          storeId: '',        // 网点名称
          orderNo: '',        // 单号
          itemId:'',          // 服务项目
          customerMobile:'',  // 手机号码
          orderStatus:''      // 状态
        },
        pageNo:1,
        pageSize:10,
        countHJ:'40',
        incomeHJ:'2000',
        itemOptionData:[],    // 服务项目数据
        time: [
          moment(getDate.getToday().starttime, this.dateFormat),
					moment(getDate.getToday().endtime, this.dateFormat)
        ],
        dateFormat: 'YYYY-MM-DD',
        columns: [{
            title: '下单时间',
            dataIndex: 'orderTime',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '单号',
            dataIndex: 'orderNo',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '网点名称',
            dataIndex: 'storeName',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '服务项目',
            dataIndex: 'itemName',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '手机号码',
            dataIndex: 'customerMobile',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '应收(￥)',
            dataIndex: 'payableAmount',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '实收(￥)',
            dataIndex: 'paymentAmount',
            minWidth: '40',
            align: 'center',
            scopedSlots: {
              customRender: 'paymentAmount'
            }

          },
          {
            title: '优惠(￥)',
            dataIndex: 'couponAmount',
            minWidth: '40',
            align: 'center'
          },
          {
            title: '状态',
            dataIndex: 'orderStatus',
            minWidth: '40',
            align: 'center',
            scopedSlots: {
              customRender: 'orderStatus'
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            minWidth: '40',
            align: 'center',
            scopedSlots: {
              customRender: 'action'
            }

          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return orderCenterList({
            pageNo:this.pageNo,
            pageSize:this.pageSize}).then(res=>{
            console.log(res,'--------------')
            if(res.status == 200){
              // for (let i = 0; i < res.data.list.length; i++) {
              //       const _item = res.data.list[i]
              //       // _item.status = _item.status + '' === '1'
              //     }
                  return res.data.list
            }
          })
          
          
          // this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
          // this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
          // return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
          //   console.log(res,'0000000000000000000')
          //   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.list
          //   }
          // })
        }
      }
    },
    methods: {
      moment,
      // 创建时间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)
      },
      // 合计
      getTotal(){},
      // 查看详情--跳转到对应的详情页
      seeDetail(row) {
        this.$router.push({name: 'OrderDetail',query: {id: row.id}
        })
      },
      // 退款
      refund(row) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: '确认退款后 款项将通过原渠道退回 且不可撤回，确认退款?',
          okText: '确定',
          cancelText: '取消',
          // onOk() {
          // 	deleteItem({
          // 		id: row.id
          // 	}).then(res => {
          // 		if (res.status == 200) {
          // 			_this.$message.success('退款成功')
          // 			_this.$refs.table.refresh()
          // 		}
          // 	})
          // }
        })
      },
      // 重置
      resetForm() {
        this.$refs.searchForm.resetFields()
        this.$refs.table.refresh()
      }
    }
  }
</script>
<style lang="less">
  .orderCenter-searchForm,
  .addButton {
    margin-bottom: 0;
  }

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

  .total {
    margin-bottom: 24px;
    width:100%;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    padding: 8px 15px 8px 27px;
    border-radius: 4px;
    .iconImg{
      color: #1890FF;
      margin-right: 10px;
    }
  }
</style>
