<template>
  <div>
    <a-card title="查询条件">
      <!-- <h3 class="title">
      <b>订单状态: </b>
      <CheckboxAll
        :options="orderStatus"
        v-model="selectedOrderStatus"
      ></CheckboxAll>
    </h3>

    <h3 class="title">
      <b>支付状态: </b>
      <CheckboxAll
        :options="payStatus"
        v-model="selectedPayStatus"
      ></CheckboxAll>
    </h3> -->
      <a-form
        :form="form"
        layout="inline"
        class="search-box"
      >
        <a-form-item
          label="销售渠道"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select
            style="width: 174px"
            v-model="form.channel"
          >
            <a-select-option key="">
              全部
            </a-select-option>
            <a-select-option
              v-for="item in salesChannel"
              :key="item.name"
            >
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="form.channel==='TERM'"
          label="自助机"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select
            style="width: 174px"
            v-model="form.user_id"
          >
            <a-select-option
              key=""
            >
              全部
            </a-select-option>
            <a-select-option
              v-for="item in termList"
              :key="item.id"
            >
              {{ item.nickname || item.mac }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="OTA订单号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.order_no" />
        </a-form-item>
        <a-form-item
          label="线下票号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.ticket_no" />
        </a-form-item>
        <a-form-item
          label="渠道订单号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.wx_order_no" />
        </a-form-item>
        <a-form-item
          label="渠道票号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.wx_ticket_no" />
        </a-form-item>

        <a-form-item
          label="购票人身份证"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.buyer_identity_card_number" />
        </a-form-item>
        <a-form-item
          label="购票人姓名"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.buyer_name" />
        </a-form-item>
        <a-form-item
          label="购票人手机号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.buyer_phone" />
        </a-form-item>

        <div class="ant-row checkbox-wrap">
          <div
            class="ant-form-item-label"
            style="width:106px"
          >
            <label>订单状态</label>
          </div>
          <div>
            <a-checkbox
              @change="onStatusAllChange($event,Object.entries(orderStatus))"
              :indeterminate="orderStatusIndeterminate"
              :checked="orderStatusCheckAll"
            >
              全部
            </a-checkbox>
            <a-checkbox-group
              v-model="form.status"
              @change="onStatusChange($event,Object.entries(orderStatus))"
            >
              <a-checkbox
                v-for="(item,index) in Object.entries(orderStatus)"
                :value="item[0]"
                :key="index"
              >
                {{ item[1] }}
              </a-checkbox>
            </a-checkbox-group>
          </div>
        </div>

        <div class="ant-row checkbox-wrap">
          <div
            class="ant-form-item-label"
            style="width:106px"
          >
            <label>支付状态</label>
          </div>
          <div>
            <a-checkbox
              @change="onPayStatusAllChange($event,Object.entries(payStatus))"
              :indeterminate="payStatusIndeterminate"
              :checked="payStatusCheckAll"
            >
              全部
            </a-checkbox>
            <a-checkbox-group
              v-model="form.pay_status"
              @change="onPayStatusChange($event,Object.entries(payStatus))"
            >
              <a-checkbox
                v-for="(item,index) in Object.entries(payStatus)"
                :value="item[0]"
                :key="index"
              >
                {{ item[1] }}
              </a-checkbox>
            </a-checkbox-group>
          </div>
        </div>

        <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"
          :scroll="{x: 1800}"
        >
          <template
            slot="channel"
            slot-scope="text, record"
          >
            {{ getChannelText(record.channel) }}
          </template>

          <template
            slot="pay_way"
            slot-scope="text, record"
          >
            {{ record.pay_way | payWayName }}
          </template>

          <template
            slot="ota_status"
            slot-scope="text, record"
          >
            <a-tag>{{ record.ota_distributor_order_status | otaStatusName }}</a-tag>
          </template>

          <template
            slot="pay_status"
            slot-scope="text, record"
          >
            <a-tag :color="record.pay_status | payStatusColor">
              {{ record.pay_status | payStatusName }}
            </a-tag>
          </template>

          <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="default"
              @click="showDetail(record.id)"
            >
              详细信息
            </a-button>
            <a-popconfirm
              title="确定取消订单？"
              @confirm="cancelOrder(record.id)"
            >
              <a-icon
                slot="icon"
                type="question-circle-o"
                style="color: red"
              />
              <a-button
                size="small"
                type="danger"
              >
                退订单
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-spin>

      <OrderDetail
        :order-type="form.channel"
        v-model="detailVisible"
        :id="currentId"
      ></OrderDetail>
    </a-card>
  </div>
</template>

<script>
import { orderStatus, payStatus } from '@/utils/constants'
import { getOrder, cancelOrder } from '@/api/orderSetting/order'
import OrderDetail from './OrderDetail'
import { getTermManager } from '@/api/saleChannel/term'
// import CheckboxAll from '@/components/CheckboxAll'

const columns = [
  {
    title: '渠道',
    dataIndex: 'channel',
    key: 'channel',
    width: 160,
    scopedSlots: { customRender: 'channel' }
  },
  {
    title: '渠道订单号',
    dataIndex: 'wx_order_no',
    key: 'wx_order_no',
    width: 160
  },
  {
    title: 'OTA订单号',
    dataIndex: 'order_no',
    key: 'order_no',
    width: 160
  },
  {
    title: '姓名',
    dataIndex: 'buyer_name',
    key: 'buyer_name',
    width: 120
  },
  {
    title: '手机号',
    dataIndex: 'buyer_phone',
    key: 'buyer_phone',
    width: 160
  },
  {
    title: '支付方式',
    dataIndex: 'pay_way',
    key: 'pay_way',
    width: 120,
    scopedSlots: { customRender: 'pay_way' }
  },
  {
    title: '支付状态',
    dataIndex: 'pay_status',
    key: 'pay_status',
    scopedSlots: { customRender: 'pay_status' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: 'OTA状态',
    dataIndex: 'ota_distributor_order_status',
    key: 'ota_distributor_order_status',
    scopedSlots: { customRender: 'ota_status' }
  },
  {
    title: '支付类型',
    dataIndex: 'pay_trade_type',
    key: 'pay_trade_type',
    width: 100,
    scopedSlots: { customRender: 'pay_trade_type' }
  },
  {
    title: '支付事务号',
    dataIndex: 'pay_transaction_id',
    key: 'pay_transaction_id',
    width: 160,
    scopedSlots: { customRender: 'pay_transaction_id' }
  },
  {
    title: '金额(元)',
    dataIndex: 'price',
    key: 'price',
    width: 100,
    fixed: 'right'
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    width: 160,
    fixed: 'right'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '180px',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  computed: {
    salesChannel () {
      return this.$store.state.app.salesChannel
    }
  },
  created () {
    this.getTermManagerList()
    this.getOrderList()
  },
  components: {
    OrderDetail
    // CheckboxAll
  },
  data () {
    return {
      columns,
      payStatus,
      orderStatus,
      termList: [],
      orderStatusCheckAll: true,
      orderStatusIndeterminate: false,
      payStatusCheckAll: true,
      payStatusIndeterminate: false,
      selectedOrderStatus: [],
      selectedPayStatus: [],
      orderList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      loading: true,
      detailVisible: false,
      currentId: null,
      form: {
        user_id: '',
        buyer_identity_card_number: '',
        buyer_name: '',
        buyer_phone: '',
        channel: '',
        order_no: '',
        ticket_no: '',
        wx_order_no: '',
        wx_ticket_no: '',
        pay_status: Object.keys(payStatus),
        status: Object.keys(orderStatus)
      }
    }
  },
  methods: {
    getChannelText (value) {
      return this.salesChannel.find(i => i.name === value).description
    },
    getTermManagerList () {
      const params = {
        pageNum: 1,
        pageSize: 999,
        status: ['active', 'inactive']
      }
      getTermManager(params).then(res => {
        this.termList = res.extraInfo.list
      })
    },
    handleTableChange (page) {
      this.pagination.current = page.current
      this.getOrderList()
    },
    getOrderList () {
      this.loading = true
      const params = { ...this.form, pageNum: this.pagination.current }
      getOrder(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.orderList = res.extraInfo.list
        this.loading = false
      })
    },
    showDetail (id) {
      this.detailVisible = true
      this.currentId = id
    },
    cancelOrder (id) {
      cancelOrder(id).then(res => {
        this.$message.success('操作成功')
        this.getOrderList()
      })
    },
    onStatusChange (checkedList, options) {
      this.orderStatusIndeterminate = !!checkedList.length && (checkedList.length < options.length)
      this.orderStatusCheckAll = checkedList.length === options.length
    },
    onStatusAllChange (e) {
      this.form.status = e.target.checked ? Object.keys(this.orderStatus) : []
      this.orderStatusIndeterminate = false
      this.orderStatusCheckAll = e.target.checked
    },
    onPayStatusChange (checkedList, options) {
      this.payStatusIndeterminate = !!checkedList.length && (checkedList.length < options.length)
      this.payStatusCheckAll = checkedList.length === options.length
    },
    onPayStatusAllChange (e) {
      this.form.pay_status = e.target.checked ? Object.keys(this.payStatus) : []
      this.payStatusIndeterminate = false
      this.payStatusCheckAll = e.target.checked
    }
  }
}
</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: 320px;
}
.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>
