<template>
  <div>
    <a-card title="查询条件">
      <a-form
        :form="form"
        layout="inline"
        class="search-box"
      >
        <a-form-item
          label="微信订单号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input allowClear v-model="form.wx_order_no" />
        </a-form-item>
        <a-form-item
          label="开始时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker
            v-model="form.start"
            :show-time="{defaultValue: moment('2017-09-09 00:00:00')}"
            placeholder="选择时间"
          />
        </a-form-item>

        <a-form-item
          label="结束时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker
            v-model="form.end"
            :show-time="{defaultValue: moment('2017-09-09 23:59:59')}"
            placeholder="选择时间"
          />
        </a-form-item>

        <a-form-item
          label="游玩开始时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker
            style="width:195px"
            format="YYYY-MM-DD "
            placeholder="选择时间"
            @change="playStartChange"
          />
        </a-form-item>

        <a-form-item
          label="游玩截止时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker
            style="width:195px"
            format="YYYY-MM-DD"
            placeholder="选择时间"
            @change="playEndChange"
          />
        </a-form-item>
        <a-form-item
          label="游客姓名"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.player_name" />
        </a-form-item>

        <a-form-item
          label="游客身份证"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.player_identity" />
        </a-form-item>
        <div class="btn-wrap">
          <a-button
            type="primary"
            html-type="button"
            @click="pagination.current=1,getOrderList()"
          >
            搜索
          </a-button>
        </div>
      </a-form>
    </a-card>

    <a-card title="订单列表">
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="orderList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
        >
          <template
            slot="status"
            slot-scope="text, record"
          >
            <a-tag :color="record.status | statusColor">
              {{ record.status | statusName }}
            </a-tag>
          </template>

          <template
            slot="pay_trade_type"
            slot-scope="text, record"
          >
            <a-tag color="blue">
              {{ record.pay_trade_type | payType }}
            </a-tag>
          </template>

          <template
            slot="pay_transaction_id"
            slot-scope="text, record"
          >
            {{ record.pay_transaction_id }}
          </template>

          <template
            slot="create_time"
            slot-scope="text, record"
          >
            {{ record.create_time }}
          </template>

          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="showDetail(record.id)"
            >
              详细信息
            </a-button>
            <a-popconfirm
              title="确定取消此预约订单？"
              @confirm="cancelOrder(record.id)"
            >
              <a-button
                size="small"
                type="primary"
                v-if="record.status === 'WAIT_USE'"
              >
                取消预约
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-spin>

      <OrderDetail
        v-model="detailVisible"
        :id="currentId"
        :ticketTypeList="ticketTypeList"
        @update="getOrderList()"
      ></OrderDetail>
    </a-card>
  </div>
</template>

<script>
import { getOrder, cancelOrderById } from '@/api/orderSetting/order'
import { getScenic } from '@/api/ticketSetting/scenic'
import { getTicketType } from '@/api/ticketSetting/ticket'
import OrderDetail from './OrderDetail'
import moment from 'moment'

const columns = [
  {
    title: '微信订单号',
    dataIndex: 'wx_order_no',
    key: 'wx_order_no'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  computed: {
    salesChannel () {
      return this.$store.state.app.salesChannel
    },
    payWayList () {
      return this.$store.state.app.payWayList
    }
  },
  created () {
    this.getTicketTypeList()
    this.getOrderList()
    this.getScenic()
  },
  components: {
    OrderDetail
  },
  data () {
    return {
      columns,
      ticketTypeList: [],
      orderList: [],
      scenicList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      layout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      loading: true,
      detailVisible: false,
      currentId: null,
      form: {
        user_id: '',
        batch_type_id: '',
        scenic_id: '',
        order_type: '',
        buyer_identity_card_number: '',
        pay_transaction_id: '',
        pay_way: '',
        buyer_name: '',
        buyer_phone: '',
        channel: '',
        order_no: '',
        ticket_no: '',
        wx_order_no: '',
        wx_ticket_no: '',
        ticket_type_id: '',
        start: moment().startOf('day'),
        end: moment().endOf('day'),
        play_start: '',
        play_end: '',
        player_name: '',
        player_identity: ''
      }
    }
  },
  methods: {
    moment,
    startChange (date) {
      this.form.start = date ? moment(date).format('YYYY-MM-DD HH:mm:ss') : ''
    },
    endChange (date) {
      this.form.end = date ? moment(date).format('YYYY-MM-DD HH:mm:ss') : ''
    },
    playStartChange (date) {
      this.form.play_start = date ? moment(date).format('YYYY-MM-DD') : ''
    },
    playEndChange (date) {
      this.form.play_end = date ? moment(date).format('YYYY-MM-DD') : ''
    },
    ticketTypeFilterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getTicketTypeList () {
      this.loading = true
      const params = {
        pageNum: 0,
        channel: '',
        scenic: '',
        status: ['all'],
        is_reservation: 1,
        type: 'batch'
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
        this.loading = false
        console.log('ticketTypeList111', this.ticketTypeList)
      })
    },
    getScenic () {
      getScenic({
        pageNum: 0,
        pageSize: 0
      }).then(res => {
        console.log('景点列表', res)
        const getSenicList = res.extraInfo.list.filter(e => e.id !== 9999)
        this.scenicList = getSenicList
      })
    },
    handleTableChange (page) {
      this.pagination.current = page.current
      this.getOrderList()
    },
    getOrderList () {
      this.loading = true
      const params = { ...this.form, pageNum: this.pagination.current, pageSize: 10 }
      params.start = params.start ? params.start.format('YYYY-MM-DD HH:mm:ss') : ''
      params.end = params.end ? params.end.format('YYYY-MM-DD HH:mm:ss') : ''
      params.is_reservation = 1
      getOrder(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.orderList = res.extraInfo.list
        console.log('this.orderList111', this.orderList)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    showDetail (id) {
      console.log('this.$store.state.projectConfig', this.$store.state.projectConfig)

      this.detailVisible = true
      this.currentId = id
    },
    cancelOrder (id) {
      this.loading = true
      cancelOrderById(id).then(res => {
      }).finally(() => {
        this.loading = false
        this.$message.success('取消成功')
        this.getOrderList()
      })
    },
    useStartChange (date) {
      this.form.use_date_start = date ? moment(date).format('YYYY-MM-DD') : ''
    },
    useEndChange (date) {
      this.form.use_date_end = date ? moment(date).format('YYYY-MM-DD') : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative; padding-left: 80px;  margin-bottom: 15px; font-size: 14px;
  b {
    position: absolute; top: 0; left: 0;  margin-right: 10px;
  }
}
.ant-form-item {
  width: 264px;
}
::v-deep .ant-input,.select-input,.ant-input-affix-wrapper{
  width: 185px;
}
.checkbox-wrap {
  display: flex;  width: 100%; align-items: center;
  .ant-form-item-label{
    flex-grow: 0; flex-shrink: 0;
  }
  ::v-deep .ant-checkbox-group {
    display: inline;
  }
  .ant-checkbox-wrapper{
    margin-right: 5px;
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
}

</style>
