<template>
  <a-card>
    <a-spin :spinning="loading">
      <a-card class="detail-card" :bordered="false" title="基本信息">
        <detail-list>
          <detail-list-item term="订单编号">{{ orderBundle.number ? orderBundle.number : '--' }}</detail-list-item>
          <detail-list-item term="订单来源">{{ dataSourceName ? dataSourceName : '--' }}</detail-list-item>
          <detail-list-item term="下单时间">{{ orderBundle.orderDate ? orderBundle.orderDate : '--' }}</detail-list-item>
          <detail-list-item term="订单状态">{{ palyStatus ? palyStatus :'--' }}</detail-list-item>
          <detail-list-item term="客户信息">{{ custInfo ? custInfo : '--' }}</detail-list-item>
          <detail-list-item term="应付金额">￥{{ orderBundle.totalAmount ? orderBundle.totalAmount :'--' }}</detail-list-item>
          <detail-list-item term="支付时间" v-if="isPay">{{ payDate ? payDate : '--' }}</detail-list-item>
          <detail-list-item term="支付金额" v-if="isPay">￥{{ orderBundle.payedAmount ? orderBundle.payedAmount : '--' }}</detail-list-item>
        </detail-list>
      </a-card>
      <a-card class="detail-card" :bordered="false" title="服务内容">
        <a-table
          :columns="columns"
          rowKey="id"
          :dataSource="customerBundleItemList"
          bordered
          :pagination="false">
          <span slot="no" slot-scope="text, record, index">
            <template>
              {{ index + 1 }}
            </template>
          </span>
          <span slot="hexiao" slot-scope="text, record, index">
            <template>
              <a-button type="primary" v-if="!isRund && record.isDelay " @click="yanQi(record)" id="PurchasedServiceDetail-yanQi">延期</a-button>
              <span v-else>--</span>
            </template>
          </span>
        </a-table>
      </a-card>
      <!-- 使用记录 -->
      <a-card class="detail-card" :bordered="false" title="使用记录">
        <a-table
          :columns="usedColumns"
          rowKey="id"
          :dataSource="verificationList"
          bordered
          v-if="verificationList && verificationList.length > 0"
          :pagination="false">
          <span slot="no" slot-scope="text, record, index">
            <template>
              {{ index + 1 }}
            </template>
          </span>
        </a-table>
        <div class="detail-card-info" v-else>
          此订单没有使用记录
        </div>
      </a-card>
      <!-- 取消购买 -->
      <a-card class="detail-card" :bordered="false" style="text-align: center;">
        <a-button v-if="!verificationList && salesChannelSettleStatus== 'NOT_SETTLE' && palyStatus =='已支付' " type="primary" @click="canselBuy" id="PurchasedServiceDetail-canselBuy">取消购买</a-button>
        <a-button style="margin-left: 20px;" @click="toList">返回列表</a-button>
      </a-card>
      <!-- 延期弹窗 -->
      <yanQi-modal :yanQiData="yanQiData" :yanqiModal="yanqiModal" @close="canselYq"></yanQi-modal>
    </a-spin>
  </a-card>
</template>

<script>
import { customerBundleDetail, orderCancel } from '@/api/customerBundle'
import { getLookUpDataBy } from '@/api/data'
import { PageView } from '@/layouts'
import { STable } from '@/components'
import yanQiModal from './yanQiModal.vue'
import DetailList from '@/components/tools/DetailList'
import _ from 'lodash'
import moment from 'moment'
const DetailListItem = DetailList.Item
export default {
  name: 'OrderAdd',
  components: {
    PageView,
    DetailList,
    DetailListItem,
    STable,
    yanQiModal
  },
  computed: {
    palyStatus () {
      const _playStatus = _.find(this.palyStatusList, ['code', this.orderBundle.orderFlag])
      if (_playStatus) {
        if (_playStatus.code === 'CAEL' || _playStatus.code === 'SYCA') {
          return '已取消'
        }
        return _playStatus.dispName
      }
      return ''
    },
    palyStatusStr () {
      const _playStatus = _.find(this.palyStatusList, ['code', this.orderBundle.orderFlag])
      if (_playStatus) {
        if (_playStatus.code === 'SYCA') {
          return '超时未支付自动取消'
        }
        return _playStatus.dispName
      }
      return ''
    },
    isPay () {
      return this.orderBundle.orderFlag === 'PAED'
    },
		isRund(){
			return this.orderBundle.orderFlag === 'RUND'
		},
    isCancel () {
      return this.orderBundle.orderFlag === 'CAEL' || this.orderBundle.orderFlag === 'SYCA'
    },
    payDate () {
      return _.get(this, 'paymentDetailList.payDate')
    },
    custInfo () {
      let info = null
      if (this.customer) {
        info = this.customer.name
        if (info) {
          info = info + '-' + this.customer.mobile
        } else {
          info = this.customer.mobile
        }
      } else {
        info = this.orderBundle.custMobile
        if (this.orderBundle.vehicleNumber) {
          info += '(' + this.orderBundle.vehicleNumber + ')'
        }
      }
      return info
    }

  },
  data () {
    return {
      form: this.$form.createForm(this),
      loading: false,
      // showBackNum:true,
      customerCoupon: {},
      palyStatusList: [],
      yanqiModal: false,
      hexiaoModal: false,
      buyModal: false,
      orderBundleId: '',
      yanQiData: null,
      hxCustomerBundleItemId: '',
      dataSourceName: '',
      salesChannelSettleStatus: '', // 结算状态
      customer: null,
      orderBundle: {},
      payDetail: {},
      verificationList: [],
      customerBundleItemList: [],
      coupon: {},
      columns: [
        {
          title: '服务名称',
          dataIndex: 'itemName',
          width: 100,
          align: 'center'
        },
        {
          title: '到期时间',
          dataIndex: 'expiryDate',
          width: 100,
          align: 'center'
        },
        {
          title: '购买数量',
          dataIndex: 'times',
          width: 100,
          align: 'center'
        },
        {
          title: '剩余次数',
          dataIndex: 'remainTimes',
          width: 100,
          align: 'center'
        },
        {
          title: '已用次数',
          dataIndex: 'usedTimes',
          width: 100,
          align: 'center'
        },
        {
          title: '过期次数',
          dataIndex: 'expiryTimes',
          width: 100,
          align: 'center'
        },
        {
          title: '退款次数',
          dataIndex: 'refundTimes',
          width: 100,
          align: 'center'
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          scopedSlots: {
            customRender: 'hexiao'
          }
        }
      ],
      usedColumns: [{
        title: '序号',
        scopedSlots: {
          customRender: 'no'
        },
        width: 60,
        align: 'center'
      },
      {
        title: '服务名称',
        dataIndex: 'itemName',
        width: 100,
        align: 'center'
      },
      {
        title: '使用时间',
        dataIndex: 'usedTime',
        width: 100,
        align: 'center'
      },
      {
        title: '使用门店',
        dataIndex: 'usedStoreName',
        width: 100,
        align: 'center'
      },
      {
        title: '核销单号',
        dataIndex: 'bizNum',
        width: 200,
        align: 'center'
      },
      {
        title: '门店结算金额',
        dataIndex: 'accountPrice',
        width: 100,
        align: 'center'
      }
      ]

    }
  },
  created () {
    this.initPage()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      console.log(vm.$route.params.id)
      // vm.clear()
      if (to.query.id) {
        vm.initPage()
      }
    })
  },
  methods: {
    moment,
    // 不可选日期
    disabledDate (current) {
      return current && current < moment().subtract(1, 'days')
    },
    initPage () {
      const _this = this
      this.loading = true
      getLookUpDataBy({
        type: 'PAY_STATUS'
      }).then(res => {
        if (res.status === '200') {
          _this.palyStatusList = res.data
        }
        return customerBundleDetail({
          id: _this.$route.params.id
        })
      }).then(res => {
        if (res.status + '' === '200') {
          const _data = res.data
          _this.orderBundleId = _data.orderBundleId
          _this.customer = _data.customer
          _this.dataSourceName = _data.dataSourceName
          _this.salesChannelSettleStatus = _data.salesChannelSettleStatus
          _this.orderBundle = _data.orderBundle
          if (_data.paymentDetailList && _data.paymentDetailList.length) {
            _this.paymentDetailList = _data.paymentDetailList[0]
          }
          _this.coupon = _data.coupon
          if (_data.customerCoupon) {
            _this.customerCoupon = _data.customerCoupon
          }
          _this.customerBundleItemList = _data.customerBundleItemList
          _this.customerBundleItemList.map((item, index) => {
            // item.no = index + 1
            item.isDelay = item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false
          })
          _this.verificationList = _data.verificationList
        }
        this.loading = false
      })
    },
    // 延期
    yanQi (row) {
      this.yanQiData = row
      this.yanqiModal = true
    },
    // 关闭延期弹窗
    canselYq () {
      this.initPage()
      this.yanQiData = null
      this.yanqiModal = false
    },
    // 取消购买
    canselBuy () {
      this.$confirm({
        title: '取消购买',
        content: '取消购买后，套餐内所有服务的剩余次数变为0，用户无法再使用套餐。确认取消购买吗？',
        onOk: () => {
          orderCancel({
            id: this.$route.params.id
          }).then(res => {
            if (res.status == 200) {
              this.$message.info(res.message)
              this.$router.push({ name: 'PurchasedServiceList' })
            }
          })
        },
        onCancel () {}
      })
    },
    toList () {
      this.$router.push({ name: 'PurchasedServiceList' })
    },
    // quxiao
    canselGM () {
      this.buyModal = false
      this.hxCustomerBundleItemId = ''
    }
  }
}
</script>

<style scoped>
	.detail-card+.detail-card {
		margin-top: 10px;
	}

	.detail-card-info {
		text-align: center;
		font-size: 1.1em;
	}

	.button-row {
		padding-top: 20px;
		text-align: center;
	}

	.button-row .ant-btn {
		margin-left: 20px;
	}
</style>
