<template>
  <el-card>
    <div
      slot="header"
      class="card-title">
      <span>请选择已审核订单</span>

      <el-form
        class="searchForm"
        ref="form"
        inline
        label-width="120px">
        <el-form-item label="旅行社名称">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="getList(true)">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      border
      ref="table"
      :data="tableData"
      @row-click="handleRowClick"
      highlight-current-row
      v-loading="loading"
    >
      <el-table-column
        label="旅行社名称"
        prop="travelAgencyName"
      >
      </el-table-column>
      <el-table-column
        label="导游名称"
        prop="guide_name"
      >
      </el-table-column>

      <el-table-column
        label="人数"
        prop="number"
      >
      </el-table-column>
      <el-table-column
        label="游玩时间"
        prop="play_date"
        min-width="120"
      >
      </el-table-column>

      <el-table-column
        label="审批人"
        prop="audit_manager_name"
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        width="140"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | formatTime }}
        </template>
      </el-table-column>

      <el-table-column
        width="120"
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <!-- <el-link
            v-if="scope.row.type==='TICKET'&&scope.row.ticket_order&&scope.row.ticket_order.length"
            @click.stop.prevent="batchImport(scope.row)">
            加入订单
          </el-link> -->
          <el-link
            @click.stop.prevent="$refs.auditDialog.show(scope.row,true)"
          >
            详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page.sync="form.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="form.pageSize"
      @size-change="handleSizeChange"
      @current-change="getList()"
      style="padding:10px 0 0"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>

    <AuditDialog ref="auditDialog"></AuditDialog>
  </el-card>
</template>

<script>
import { getAgencyPreOrderList } from '@/api/travelAgency'
import AuditDialog from '@/pages/agency/preOderList/AuditDialog'
import mixin from './mixin'
import moment from 'moment'

const payTypeOptions = [
  {
    label: '到付',
    value: 1,
    color: 'success'
  },
  {
    label: '预付',
    value: 2,
    color: 'danger'
  }
]

const statusList = [
  {
    label: '待审核',
    value: 'WAIT_AUDIT',
    color: 'primary'
  },
  {
    label: '已审核',
    value: 'APPROVE',
    color: 'success'
  },
  {
    label: '已拒绝',
    value: 'REFUSE',
    color: 'danger'
  },
  {
    label: '已出票',
    value: 'SUCCESS',
    color: 'warning'
  }
]

export default {
  mixins: [mixin],
  components: {
    AuditDialog
  },
  created () {
    this.getList()
  },
  data () {
    return {
      orderId: '',
      keyControl: 2, // 键盘控制：1,2,3标识选中顺序
      isFocus: false, // 当前组件是否选中
      loading: false,
      tableData: [],
      total: 0,
      form: {
        keyWords1: '', // 预订单号
        keyWords2: '', // 旅行社名称
        keyWords3: '', // 导游名称
        keyWords4: 'APPROVE', // 状态
        keyWords5: '', // 预订操作人
        pageNum: 1,
        pageSize: 3
      }
    }
  },
  methods: {
    getStatus (status) {
      return statusList.find(i => i.value === status) || { label: '无', color: 'info' }
    },
    getPayType (value) {
      return payTypeOptions.find(i => i.value === value) || { label: '无', color: 'info' }
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList (flag) {
      this.loading = true
      if (flag) { this.form.pageNum = 1 }
      getAgencyPreOrderList(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
        res.list[0] && this.$refs.table.setCurrentRow(res.list[0])
        this.$emit('input', res.list[0] ? res.list[0] : null)
      }).finally(() => {
        this.loading = false
      })
    },
    handleRowClick (row, column, event) {
      this.$emit('input', row)
    },
    batchImport (row) {
      let list = []
      list = row.ticket_order.map(v => {
        let obj = { // 组装单种票结构
          id: v.ticketTypeId,
          ticketName: v.ticketTypeName,
          count: v.number,
          price: v.unit_price,
          tickets: []
        }
        let singleTicket = { // 组装单张票结构
          ticketTypeId: v.ticketTypeId,
          checkNum: '',
          price: v.unit_price || 0,
          guestName: '',
          guestPhone: '',
          guestIdentify: '',
          discountPrice: v.unit_price || 0,
          face: {},
          payDateBegin: new Date(moment(row.play_date).startOf('day').valueOf()),
          playDateEnd: new Date(moment(row.play_date).endOf('day').valueOf())
        }
        obj.tickets = []
        for (var i = 0; i < v.number; i++) { // 预订单中number多少 加多少张票
          obj.tickets.push(JSON.parse(JSON.stringify(singleTicket))) // 必须深拷贝
        }
        if (v.info) {
          let ids = JSON.parse(v.info)
          if (ids.length) { // 有身份证信息 加到每张票中
            obj.tickets.forEach((item, index) => {
              ids[index] && (item.guestIdentify = ids[index])
            })
          }
        }
        return obj
      })
      this.$emit('batch', list)
    }
  }
}
</script>

<style lang="scss" scoped>
.searchForm {
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}
.dialog-info {
  position: relative;
  ::v-deep .el-form-item {
    display: flex;
  }
}
::v-deep .el-table__body tr.current-row>td {
    background-color: #f7ce60;
}
.statusTag{
  transform:scale(1.6); position: absolute; right: 20px;top: 0px;
}
</style>
