<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-select class="select-input" 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 class="select-input" 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="支付方式" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-select class="select-input" v-model="form.pay_way">
            <a-select-option key="">
              全部
            </a-select-option>
            <a-select-option v-for="(item, index) in payWayList" :key="index" :value="item.name">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="交易流水号" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-input allowClear v-model="form.pay_transaction_id" />
        </a-form-item>

        <a-form-item label="OTA订单号" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-input allowClear v-model="form.order_no" />
        </a-form-item>

        <a-form-item label="线下票号" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-input allowClear v-model="form.ticket_no" />
        </a-form-item>

        <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-input allowClear v-model="form.wx_ticket_no" />
        </a-form-item>

        <a-form-item label="票种" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="ticketTypeFilterOption"
            class="select-input"
            v-model="form.ticket_type_id">
            <a-select-option key="">
              全部
            </a-select-option>
            <a-select-option v-for="item in ticketTypeList" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="门票类型" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-select class="select-input" v-model="form.order_type">
            <a-select-option key="">
              全部
            </a-select-option>
            <a-select-option key="TICKET">
              门票
            </a-select-option>
            <a-select-option key="MEMBER">
              线上会员
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="景点" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-select show-search option-filter-prop="children" class="select-input" v-model="form.scenic_id">
            <a-select-option key="">
              全部
            </a-select-option>
            <a-select-option v-for="item in scenicList" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </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 allowClear v-model="form.buyer_identity_card_number" />
        </a-form-item>

        <a-form-item label="购票人姓名" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-input allowClear v-model="form.buyer_name" />
        </a-form-item>

        <a-form-item label="购票人手机号" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-input allowClear v-model="form.buyer_phone" />
        </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>

        <a-form-model-item
          label="销售人员"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="ticketTypeFilterOption"
            class="select-input"
            v-model="form.salesUserId"
            @change="getSecondSalesUserList"
          >
            <a-select-option
              key=""
            >
              全部
            </a-select-option>
            <a-select-option
              v-for="ticket in salesUserList"
              :key="ticket.id"
            >
              {{ ticket.name }} - {{ ticket.real_name||ticket.nick_name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item
          label="二级销售人员"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="ticketTypeFilterOption"
            class="select-input"
            v-model="form.secondSalesUserId"
          >
            <a-select-option
              key=""
            >
              全部
            </a-select-option>
            <a-select-option
              v-for="ticket in secondSalesUserList"
              :key="ticket.id"
            >
              {{ ticket.name }} - {{ ticket.real_name||ticket.nick_name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-item
          label="备注"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input allowClear v-model="form.remark" />
        </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-popconfirm
        v-if="['demo','YINXIANGMAZU'].includes(project_name)&& allowProrate"
        slot="extra"
        title="确定通过审核？"
        @confirm="wxProrateBybatches(true)">
        <a-button size="small" type="default" >
          批量审核
        </a-button>
      </a-popconfirm>

      <a-popconfirm
        v-if="['demo','YINXIANGMAZU'].includes(project_name)&& allowProrate"
        slot="extra"
        title="确定驳回审核？"
        @confirm="wxProrateBybatches(false)">
        <a-button size="small" type="danger" >
          批量驳回
        </a-button>
      </a-popconfirm>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="orderList"
          :pagination="pagination"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,getCheckboxProps}"
          :row-key="record => record.id"
          @change="handleTableChange"
          :scroll="{ x: 2600 }">
          <template slot="channel" slot-scope="text, record">
            {{ getChannelText(record.channel) }}
          </template>

          <template slot="salesUser" slot-scope="text, record">
            {{ record.salesUser && (record.salesUser.real_name||record.salesUser.name||record.salesUser.nick_name) }}
          </template>

          <template slot="secondSalesUser" slot-scope="text, record">
            {{ record.secondSalesUser && (record.secondSalesUser.real_name||record.secondSalesUser.nick_name||record.secondSalesUser.name) }}
          </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="wx_prorate_status" slot-scope="text, record">
            <a-tag v-if="record.wx_prorate_status" :color="record.wx_prorate_status | prorateStatusColor">
              {{ record.wx_prorate_status | prorateStatusName }}
            </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-button
              size="small"
              type="primary"
              v-if="record.wx_prorate_status === 'PRORATING'"
              @click="$refs.prorateDetail.show(record.id)">
              分佣详情
            </a-button>
            <a-button size="small" type="primary" @click="$refs.tickets.show(record.id)">
              门票列表
            </a-button>
            <a-popconfirm
              title="确定分佣？"
              v-if="!['YINXIANGMAZU'].includes(project_name)&&allowProrate&&record.wx_prorate_status==='WAIT_PRORATE'&&record.pay_status==='PAYED'"
              @confirm="wxProrate(record.id)">
              <a-button size="small" type="primary" :loading="record.loading">
                分佣
              </a-button>
            </a-popconfirm>
            <a-button
              size="small"
              type="primary"
              v-if="
                allowExchangeCard &&
                  record.status === 'WAIT_PAY' &&
                  record.price === 0
              "
              @click="checkOrder(record)"
              :loading="record.loading">
              通过
            </a-button>
            <a-popconfirm
              title="确定通过审核？"
              v-if="
                !allowExchangeCard &&
                  record.status === 'WAIT_PAY' &&
                  record.price === 0
              "
              @confirm="checkOrder(record, true)">
              <a-button size="small" type="primary" :loading="record.loading">
                通过
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              v-if="record.status === 'WAIT_PAY' && record.price === 0"
              title="确定拒绝审核？"
              @confirm="checkOrder(record, false, 'refuse')">
              <a-button size="small" type="danger" :loading="record.loading">
                拒绝
              </a-button>
            </a-popconfirm>
            <a-popconfirm title="确定取消订单？" @confirm="cancelOrderById(record)">
              <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>
      <Tickets @update="getOrderList" ref="tickets"></Tickets>
      <ProrateDetail @update="getOrderList" ref="prorateDetail"></ProrateDetail>

      <BindExchangeCode v-model="codeVisible" @update="getOrderList" :current-order="currentOrder"></BindExchangeCode>
    </a-card>

    <a-modal
      :confirmLoading="confirmLoading"
      :visible="cancelOrdersVisible"
      title="批量退单"
      @cancel="cancelOrdersVisible = false"
      @ok="handleCancelOrder">
      <a-form-model ref="cancelForm" :model="cancelForm">
        <a-form-model-item label="已选择订单id" v-bind="layout" prop="name" style="width:100%">
          <a-tag v-for="(item, index) in selectedRowKeys" :key="index">
            {{ item }}
          </a-tag>
        </a-form-model-item>
        <a-form-model-item
          label="操作备注"
          v-bind="layout"
          prop="name"
          style="width:100%"
          :rules="{
            required: true,
            message: '请填写备注信息'
          }">
          <a-textarea v-model="cancelForm.name" style="width:100%"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getTicketType } from '@/api/ticketSetting/ticket'
import { orderStatus, payStatus, prorateStatus } from '@/utils/constants'
import { getOrder, cancelOrderById, cancelOrder, checkConvertibleOrder, wxProrate, wxProrateAuth } from '@/api/orderSetting/order'
import { getTermManager } from '@/api/saleChannel/term'
import { getScenic } from '@/api/ticketSetting/scenic'
import OrderDetail from './OrderDetail'
import BindExchangeCode from './BindExchangeCode'
import moment from 'moment'
import Tickets from '../orderSetting/components/Tickets'
import { getSalesUserList } from '@/api/marketingSetting/salesUser'
import ProrateDetail from '../marketingSetting/components/Tickets'

const columns = [
  {
    title: '渠道',
    dataIndex: 'channel',
    key: 'channel',
    width: 120,
    scopedSlots: { customRender: 'channel' }
  },
  {
    title: '渠道订单号',
    dataIndex: 'wx_order_no',
    key: 'wx_order_no',
    minWidth: 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: 'salesUser',
    key: 'salesUser',
    width: 120,
    scopedSlots: { customRender: 'salesUser' }

  },
  {
    title: '二级销售人员',
    dataIndex: 'secondSalesUser',
    key: 'secondSalesUser',
    width: 120,
    scopedSlots: { customRender: 'secondSalesUser' }

  },
  {
    title: '支付方式',
    dataIndex: 'pay_way',
    key: 'pay_way',
    width: 120,
    scopedSlots: { customRender: 'pay_way' }
  },
  {
    title: '支付状态',
    dataIndex: 'pay_status',
    key: 'pay_status',
    width: 120,
    scopedSlots: { customRender: 'pay_status' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 120,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: 'OTA状态',
    dataIndex: 'ota_distributor_order_status',
    key: 'ota_distributor_order_status',
    width: 120,
    scopedSlots: { customRender: 'ota_status' }
  },
  {
    title: '分佣状态',
    dataIndex: 'wx_prorate_status',
    key: 'wx_prorate_status',
    scopedSlots: { customRender: 'wx_prorate_status' }
  },
  {
    title: '支付类型',
    dataIndex: 'pay_trade_type',
    key: 'pay_trade_type',
    width: 120,
    scopedSlots: { customRender: 'pay_trade_type' }
  },
  {
    title: '支付流水号',
    dataIndex: 'pay_transaction_id',
    key: 'pay_transaction_id',
    width: 120,
    scopedSlots: { customRender: 'pay_transaction_id' }
  },
  {
    title: '金额(元)',
    dataIndex: 'price',
    key: 'price',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    width: 160
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 80
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 400,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  computed: {
    salesChannel () {
      return this.$store.state.app.salesChannel
    },
    payWayList () {
      return this.$store.state.app.payWayList
    },
    allowExchangeCard () {
      return this.$store.state.app.projectConfig.exchange_ticket_model
    },
    // 是否允许分佣
    allowProrate () {
      return this.$store.state.app.projectConfig.wx_prorate_type
    }
  },
  created () {
    this.getTicketTypeList()
    this.getTermManagerList()
    this.getOrderList()
    this.getScenic()
    this.getSalesUserList()
    this.getSecondSalesUserList()
  },
  components: {
    OrderDetail,
    Tickets,
    ProrateDetail,
    BindExchangeCode
  },
  data () {
    return {
      project_name: localStorage.mgt_project,
      columns,
      payStatus,
      prorateStatus,
      orderStatus,
      termList: [],
      confirmLoading: false,
      currentOrder: {}, // 当前订单
      cancelForm: {
        name: ''
      },
      ticketTypeList: [],
      selectedRowKeys: [],
      orderStatusCheckAll: true,
      orderStatusIndeterminate: false,
      payStatusCheckAll: true,
      payStatusIndeterminate: false,
      cancelOrdersVisible: false,
      selectedOrderStatus: [],
      selectedPayStatus: [],
      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,
      codeVisible: false, // 绑定兑换卡
      currentId: null,
      form: {
        user_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: '',
        pay_status: Object.keys(payStatus),
        status: Object.keys(orderStatus),
        player_name: '',
        player_identity: '',
        salesUserId: '',
        secondSalesUserId: '',
        remark: ''
      },
      salesUserList: [],
      secondSalesUserList: []
    }
  },
  methods: {
    moment,
    // 审核订单
    checkOrder (record, active, type) {
      if (!this.allowExchangeCard || type) {
        const params = {
          id: record.id,
          active: active
        }
        checkConvertibleOrder(params).then(() => {
          this.$message.success('操作成功')
          this.getOrderList()
        })
      } else {
        this.codeVisible = true
        this.currentOrder = record
      }
    },

    // 微信分佣
    wxProrate (id) {
      wxProrate(id).then(() => {
        this.$message.success('操作成功')
        this.getOrderList()
      })
    },
    wxProrateBybatches (status) {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('至少选择一个订单')
        return
      }
      wxProrateAuth({ orderIds: this.selectedRowKeys, isPass: status }).then(res => {
        if (res && res.resCode === 200) {
          this.$message.success('操作成功')
          this.getOrderList()
        }
        console.log('%c [ res ]-688', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      }
      )
    },
    getTicketTypeList () {
      this.ticketTypeLoading = true
      const params = {
        channel: this.currentChannel,
        scenic: this.currentScenic,
        type: '',
        pageNum: 0,
        pageSize: 0
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
      })
    },
    ticketTypeFilterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getChannelText (value) {
      const channel = this.salesChannel.find(i => i.name === value)
      return channel ? channel.description : ''
    },
    getTermManagerList () {
      const params = {
        pageNum: 1,
        pageSize: 999,
        status: ['active', 'inactive']
      }
      getTermManager(params).then(res => {
        this.termList = res.extraInfo.list
      })
    },
    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 () {
      // if (this.form.pay_transaction_id && !this.form.pay_way) {
      //   return this.$message.error('请选择具体支付方式')
      // }
      this.loading = true

      const params = { ...this.form, pageNum: this.pagination.current }

      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.pay_status = this.payStatusCheckAll ? [] : params.pay_status
      params.status = this.orderStatusCheckAll ? [] : params.status
      params.is_sales_sell = 1

      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
    },
    cancelOrderById (record) {
      cancelOrderById(record.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
    },
    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') : ''
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    getCheckboxProps (record) {
      return {
        props: {
          disabled: record.wx_prorate_status !== 'WAIT_AUDIT'
        }
      }
    },
    cancelOrders () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择订单')
        return
      }
      this.cancelOrdersVisible = true

      this.$nextTick(() => {
        this.$refs.cancelForm.resetFields()
      })
    },
    handleCancelOrder () {
      this.$refs.cancelForm.validate(valid => {
        if (valid) {
          console.log(this.selectedRowKeys, this.cancelForm.name)
          this.confirmLoading = true
          cancelOrder({
            ids: this.selectedRowKeys,
            name: this.cancelForm.name
          }).then(res => {
            this.$message.success('已提交')
            this.selectedRowKeys = []
            this.getOrderList()
            this.cancelOrdersVisible = false
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    getSalesUserList () {
      const params = {
        pageNum: 0,
        pageSize: 0
      }
      getSalesUserList(params).then(res => {
        this.salesUserList = res.extraInfo.list
      })
    },
    getSecondSalesUserList (id) {
      const params = {
        pageNum: 0,
        pageSize: 0,
        saleType: 2
      }

      if (id) {
        params.parent_sales_user_id = id
        this.form.secondSalesUserId = ''
      }

      getSalesUserList(params).then(res => {
        this.secondSalesUserList = res.extraInfo.list
      })
    }
  }
}
</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>
