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

      <button
        @click="fakeSelectAuditRow"
        v-if="false">
        重新选中
      </button>
      <el-form
        class="searchForm"
        ref="form"
        :model="form"
        inline
        label-width="120px">
        <el-form-item label="预订单号">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords1"></el-input>
        </el-form-item>

        <!-- 游玩时间 keyWords3 -->
        <el-form-item
          label="游玩时间"
          prop="keyWords3">
          <el-date-picker
            :clearable="true"
            :editable="true"
            v-model="form.keyWords3"
            value-format="yyyy-MM-dd"
            type="date"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 下单备注 keyWords4 -->
        <el-form-item label="下单备注">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords4"></el-input>
        </el-form-item>
        <!-- 学校名称 keyWords5 -->
        <el-form-item label="学校名称">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords5"></el-input>
        </el-form-item>
        <!-- 酒店名称 keyWords6 -->
        <el-form-item label="酒店名称">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords6"></el-input>
        </el-form-item>
        <!-- 联系人 keyWords7 -->
        <el-form-item label="联系人">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords7"></el-input>
        </el-form-item>
        <!-- 联系电话 keyWords8 -->
        <div></div>
        <el-form-item label="联系电话">
          <el-input
            clearable
            size="mini"
            v-model="form.keyWords8"></el-input>
        </el-form-item>
        <!-- 创建时间 startDate/endDate  -->
        <el-form-item
          label="创建起始时间"
          prop="startDate">
          <el-date-picker
            v-model="form.startDate"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="创建截止时间"
          prop="endDate">
          <el-date-picker
            default-time="23:59:59"
            v-model="form.endDate"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="padding-left: 350px;">
          <el-button
            size="mini"
            type="primary"
            @click="getList(true)">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="exportExcel(true)">
            导出
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="reset()">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      border
      ref="table"
      :data="tableData"
      @row-click="handleRowClick"
      highlight-current-row
      :row-class-name="tableRowClassName"
      v-loading="loading"
    >
      <el-table-column
        label="学校名称"
        prop="school_name"
      >
      </el-table-column>
      <el-table-column
        label="酒店名称"
        prop="hotel_name"
      >
      </el-table-column>
      <el-table-column
        label="联系人"
        prop="contact_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="remark"
        min-width="120"
      >
        <template slot-scope="scope">
          <Ellipsis
            v-if="scope.row.remark"
            :content="scope.row.remark"
            :length="10"></Ellipsis>
          <span v-else>无</span>
        </template>
      </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)"
          >
            详情
          </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 { preorderList, preorderDetail, preorderListExport } from '@/api/order'
import AuditDialog from '@/pages/sellManage/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 {
      currentRowIndex: '',
      orderId: '',
      keyControl: 2, // 键盘控制：1,2,3标识选中顺序
      isFocus: false, // 当前组件是否选中
      loading: false,
      tableData: [],
      total: 0,
      form: {
        keyWords1: '', // 预订单号
        keyWords2: 'APPROVE', //  状态
        pageNum: 1,
        pageSize: 3,
        // 创建时间 startDate/endDate
        startDate: '', // new Date(moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')),
        endDate: '', // new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')),
        keyWords3: '', // 游玩时间 keyWords3
        keyWords4: '', // 下单备注 keyWords4
        keyWords5: '', // 学校名称 keyWords5
        keyWords6: '', // 酒店名称 keyWords6
        keyWords7: '', // 联系人 keyWords7
        keyWords8: ''// 联系电话 keyWords8
      },
      dateOption: {
        // 日历禁用日期
        disabledDate (theTime) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(theTime).isBefore(startTime)
        }
      }
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    goToDownload () {
      this.$confirm('报表已导出，是否跳转到报表下载页？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/queryReport/reportList')
      }).catch(() => {
      })
    },
    fakeSelectAuditRow () {
      console.log('模拟再次选中')
      if (this.currentRowIndex !== '') {
        this.handleRowClick(this.$refs.table.data[this.currentRowIndex])
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      row.row_index = rowIndex
    },
    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 }
      preorderList(this.form).then(res => {
        this.tableData = res?.data.list
        this.total = res?.data.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
      })
    },
    // /preorder/export
    exportExcel (flag) {
      this.loading = true
      console.log('点击导出')
      if (flag) { this.form.pageNum = 1 }
      preorderListExport(this.form).then(res => {
        this.$message.success('导出成功。')
        console.log('导出')
        this.goToDownload()
      }).finally(() => {
        this.loading = false
      })
    },
    async handleRowClick (row, column, event) {
      const { extraInfo } = await preorderDetail(row.id)
      row.travellers = extraInfo.travellers
      this.$emit('input', row)
      // ElementUI 中 el-table 获取当前选中行的index
      this.currentRowIndex = row.row_index
    },
    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>
