<template>
  <el-card>
    <div
      slot="header"
      class="card-title">
      <span>订单明细</span>

      <el-link
        type="primary"
        @click="$emit('clear')">
        清空订单
      </el-link>
    </div>
    <div>
      <div class="btn-wrap">
        <span class="item">
          支付方式：
          <el-radio-group
            fill="#379143"
            v-model="payChannel">
            <el-radio-button
              v-for="val in payChannelOptions"
              :key="val"
              :value="val"
              :label="val"></el-radio-button>
          </el-radio-group>
        </span>
      </div>
      <div class="btn-wrap">
        <div>
          <span class="item">实付金额：
            <el-input-number
              :min="0"
              :precision="2"
              :controls="false"
              v-model.number="actualMoney"></el-input-number>
          </span>
          <span class="item">备注：
            <el-input
              clearable
              v-model="remark"
              style="width:200px"></el-input>
          </span>
        </div>

        <el-button
          type="primary"
          class="warn-btn item"
          :disabled="value.length===0"
          @click="handleConfirm">
          确认出票
        </el-button>
      </div>

      <div class="btn-wrap">
        <span class="item price">总数：<b>{{ totalCount }}</b> 张</span>
        <span class="item price">总价：<b>{{ orderPrice }}</b> 元</span>
        <span class="item price">{{ payBack>0?'找零':'还需支付' }}：<b>{{ Math.abs(payBack) }}</b> 元</span>
        <span class="item">
          <PrintSmallTicketCheckbox v-model="autoPrintSmallTicket"></PrintSmallTicketCheckbox>
          <el-checkbox
            v-model="autoPrint"
            style="margin:10px"
            @change="handleAutoPrintChange"
          >
            自动打印
          </el-checkbox>
        </span>
      </div>
    </div>

    <el-table
      border
      :data="value">
      <el-table-column
        prop="ticketName"
        label="票种名称"
        width="180">
      </el-table-column>
      <el-table-column label="游玩日期">
        <template slot-scope="scope">
          {{ scope.row.payDateBegin | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价">
      </el-table-column>
      <el-table-column
        prop="total"
        label="小计">
      </el-table-column>
      <el-table-column
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.row)"
            type="text">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <Confirm
      :remark="remark"
      :tickets="tickets"
      :order-items="value"
      :form-data="formData"
      :order-price="orderPrice"
      :total-count="totalCount"
      :pay-channel="payChannel"
      @complete="handleComplete"
      ref="confirm"></Confirm>
  </el-card>
</template>

<script>
import mixin from './mixin'
import Confirm from './Confirm'
import PrintSmallTicketCheckbox from '../common/PrintSmallTicketCheckbox'
export default {
  mixins: [mixin],
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Confirm,
    PrintSmallTicketCheckbox
  },
  computed: {
    payBack () {
      if (this.actualMoney === undefined) {
        return -this.orderPrice
      } else {
        return this.$NP.minus(this.actualMoney, this.orderPrice)
      }
    },
    totalCount () {
      return this.value.reduce((init, item) => {
        return init + item.count
      }, 0)
    },
    orderPrice () {
      return this.value.reduce((init, item) => {
        let price = this.$NP.times(item.count, item.price)
        return this.$NP.plus(init, price)
      }, 0)
    },
    tickets () {
      return this.value.reduce((init, item) => {
        return init.concat(item.tickets)
      }, [])
    }
  },
  data () {
    return {
      payChannel: '',
      actualMoney: 0,
      remark: '',
      formData: {},
      autoPrint: this.$localStore.get('autoPrint'),
      autoPrintSmallTicket: this.$localStore.get('autoPrintSmallTicket')
    }
  },
  methods: {
    handleConfirm () {
      this.formData = this.$parent.$parent.$refs.formInfo.form
      this.formData.remark = this.remark
      this.$refs.confirm.show()
    },
    changePayChannel (n) {
      if (this.confirmVisible) return

      let i = this.payChannelOptions.findIndex(channel => channel === this.payChannel)
      let l = this.payChannelOptions.length
      let j = (i - n + l) % l
      this.payChannel = this.payChannelOptions[j]
    },
    PageUp () {
      this.changePayChannel(1)
    },
    PageDown () {
      this.changePayChannel(-1)
    },
    handleDelete (item) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        const idx = this.value.findIndex(i => i.keyId === item.keyId)
        this.value.splice(idx, 1)
      })
    },
    handleAutoPrintChange (val) {
      this.$localStore.set('autoPrint', val)
    },
    handleComplete () {
      this.$emit('clear')
      this.remark = ''
      this.$localStore.get('defaultPayWay') && this.setPayWay()
      this.$parent.$parent.$refs.orderRecord.getOrderList()
    },
    setPayWay () {
      const payment = this.$localStore.get('defaultPayWay') || this.payChannelOptions[0]

      this.payChannel = this.payChannelOptions.indexOf(payment) < 0 ? this.payChannelOptions[0] : payment
    }
  },
  watch: {
    orderPrice (val) {
      this.actualMoney = val
    },
    payChannelOptions: {
      handler (val) {
        if (val.length) {
          this.setPayWay()
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin-left: 20px;
}
.price-info {
  padding: 10px 0;  text-align: right; background: #fff;
}
.btn-wrap {
  display: flex; width: 100%; margin-bottom: 10px; font-size: 14px; justify-content: space-between; align-items: center;

  .el-input {
    display: inline-block; width: 100px;
  }
}

</style>
