<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}">
              <a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
                <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-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="handleSearch">查询</a-button>
            <a-button type="" @click="handleRest">重置</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.itemName }}</a-select-option>
              </a-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="orderTotal">{{ orderTotal || 0 }} 单</span><strong style="margin-left: 15px;">实收：</strong><span
        v-model="paymentAmountTotal">{{ paymentAmountTotal || 0 }} 元</span>
    </div>
    <!-- 列表 -->
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 状态 -->
      <span slot="orderStatus" slot-scope="text">
        {{ $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="couponAmount" slot-scope="text, record">
        <template v-if=" record.orderStatus != 'CANCELED' ">{{ record.couponAmount }}</template>
        <template v-else-if=" record.orderStatus == 'CANCELED' ">{{ 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>
    <!-- 查看详情弹窗 -->
    <order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
  </a-card>
</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import getDate from '../../libs/getDate.js'
import {
  orderCenterList,
  itemList,
  storeList,
  orderTotal
} from '../../api/order.js'
import OrderDetailModal from './OrderDetailModal.vue'
import moment from 'moment'
export default {
  name: 'OrderCenter',
  components: {
    STable,
    VSelect,
    OrderDetailModal
  },
  data () {
    return {
      storeId: [], // 网点名称
      // 查询参数
      searchForm: {
        beginDate: null, // 创建的开始时间
        endDate: null, // 创建的结束时间
        storeIdList: [], // 网点名称
        orderNo: '', // 单号
        itemId: undefined, // 服务项目
        customerMobile: '', // 手机号码
        orderStatus: '' // 状态
      },
      orderTotal: '', // 合计开单数量
      paymentAmountTotal: '', // 合计实收金额
      itemOptionData: [], // 服务项目数据
      storeOptionData: [], // 网点名称数据
      openDetailModal: false, // 查看详情弹窗 默认关闭
      detailId: null, // 初始化id
      // 将默认当天时间日期回显在时间选择框中
      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: 'couponAmount',
        minWidth: '40',
        align: 'center',
        scopedSlots: {
          customRender: 'couponAmount'
        }
      },
      {
        title: '实收(￥)',
        dataIndex: 'paymentAmount',
        minWidth: '40',
        align: 'center',
        scopedSlots: {
          customRender: 'paymentAmount'
        }

      },
      {
        title: '状态',
        dataIndex: 'orderStatus',
        minWidth: '40',
        align: 'center',
        scopedSlots: {
          customRender: 'orderStatus'
        }
      },
      {
        title: '操作',
        dataIndex: 'action',
        minWidth: '40',
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }

      }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
        this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
        this.searchForm.storeIdList = this.storeId
        return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
          // console.log(res,'0000000000000000000')
          if (res.status == 200) {
            return res.data
            this.getTotal()
          }
        })
      }
    }
  },
  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)
    },
    // 获取服务项目数据
    getItemListData () {
      itemList({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        // console.log(res, '-----------')
        if (res.status == 200) {
          this.itemOptionData = res.data.list || []
        } else {
          this.itemOptionData = []
        }
      })
    },
    // 获取网点名称数据
    getStoreListData () {
      storeList({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        // console.log(res, '-----------')
        if (res.status == 200) {
          this.storeOptionData = res.data.list || []
        } else {
          this.storeOptionData = []
        }
      })
    },
    // 合计
    getTotal () {
      const params = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        storeIdList: this.searchForm.storeIdList,
        orderNo: this.searchForm.orderNo,
        itemId: this.searchForm.itemId,
        customerMobile: this.searchForm.customerMobile,
        orderStatus: this.searchForm.orderStatus
      }
      params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
      params.endDate == null ? params.endDate = getDate.getToday().endtime : null
      params.storeIdList = this.storeId
      orderTotal(params).then(res => {
        console.log(res, '--------')
        if (res.status == 200) {
          this.orderTotal = res.data.orderNum || 0
          this.paymentAmountTotal = res.data.paymentAmount || 0
        }
      })
    },
    // 查看详情--跳转到对应的详情页
    seeDetail (record) {
      // 将当前行的id传递给详情页
      this.openDetailModal = true
      this.detailId = record.id
    },
    // 退款---暂不做
    // refund(row) {
    //   const _this = this
    //   this.$confirm({
    //     title: '警告',
    //     content: '确认退款后 款项将通过原渠道退回 且不可撤回，确认退款?',
    //     okText: '确定',
    //     cancelText: '取消',
    //     // onOk() {
    //
    //     // }
    //   })
    // },
    // 查询
    handleSearch () {
      this.$refs.table.refresh()
      this.getTotal()
    },
    // 重置
    handleRest () {
      this.searchForm.beginDate = getDate.getToday().starttime
      this.searchForm.endDate = getDate.getToday().endtime
      this.time = [
        moment(getDate.getToday().starttime, this.dateFormat),
        moment(getDate.getToday().endtime, this.dateFormat)
      ]
      this.storeId = []
      this.searchForm.orderNo = ''
      this.searchForm.itemId = undefined
      this.searchForm.customerMobile = ''
      this.searchForm.orderStatus = ''
      // this.$refs.searchForm.resetFields()
      this.$refs.table.refresh()
      this.getTotal()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getItemListData()
      vm.handleRest()
      vm.getStoreListData()
    })
  }
}
</script>
<style lang="less">
	.orderCenter-searchForm {

		// 搜索框的下间距
		.ant-form-item {
			margin-bottom: 10px;
		}
	}

	// 合计
	.total {
		margin: 15px 0 25px;
		width: 100%;
		background-color: #e6f7ff;
		border: 1px solid #91d5ff;
		padding: 8px 15px 8px 27px;
		border-radius: 4px;

		.iconImg {
			color: #1890FF;
			margin-right: 10px;
		}
	}
</style>
