<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="120px"
    >
      <el-form-item
        label="预订单号"
        prop="keyWords1"
      >
        <el-input
          v-model="form.keyWords1"
          clearable></el-input>
      </el-form-item>

      <el-form-item
        label="状态"
        prop="keyWords2"
      >
        <el-select
          clearable
          v-model="form.keyWords2">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </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>

      <div class="btn-wrap">
        <el-button @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getAgencyPreOrderList(true)"
        >
          搜索
        </el-button>
        <el-button
            size="mini"
            type="primary"
            @click="exportExcel(true)">
            导出
          </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        预订订单列表
      </div>
      <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column
          label="#"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          label="学校名称"
          prop="school_name"
          v-if="isHuiHuangCustom"
        >
        </el-table-column>
        <el-table-column
          label="酒店名称"
          prop="hotel_name"
          v-if="isHuiHuangCustom"
        >
        </el-table-column>
        <el-table-column
          label="预订单号"
          width="200"
          prop="travel_agency_orderNo"
          v-if="!isHuiHuangCustom"
        >
          <template slot-scope="scope">
            {{ scope.row.pre_no }}
            <el-tooltip
              content="复制"
              placement="top"
              effect="dark">
              <i
                class="el-icon-document"
                v-clipboard="()=>scope.row.pre_no"
                v-clipboard:success="copySuccess"
                v-clipboard:error="copyError"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="发码模式"
          prop="num_type"
          v-if="!isHuiHuangCustom"
        >
          <template slot-scope="scope">
            {{ scope.row.num_type===1?'一码多人':'一码一人' }}
          </template>
        </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="createManagerName"
        >
        </el-table-column>
        <el-table-column
          label="审核人"
          prop="auditManagerName"
        >
        </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="audit_remark"
          min-width="120"
        >
          <template slot-scope="scope">
            <Ellipsis
              v-if="scope.row.audit_remark"
              :content="scope.row.audit_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="90"
          label="状态"
          prop="status"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tag :type="getStatus(scope.row.status).color">
              {{ getStatus(scope.row.status).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="210"
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <!--
            <el-button
              size="mini"
              @click="$refs.editDialog.show(scope.row)"
              v-if="scope.row.status==='WAIT_AUDIT'"
            >
              编辑
            </el-button>
             -->
            <el-button
              size="mini"
              @click="$refs.editDialog.show(scope.row)"
              v-if="enableEditAndAuditForAll || scope.row.status==='WAIT_AUDIT'"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              @click="$refs.auditDialog.show(scope.row)"
            >
              详情
            </el-button>
            <el-popconfirm
              title="确认删除"
              @confirm="confirm(scope.row.id)"
            >
              <el-button
                style="margin-left:10px"
                slot="reference"
                size="mini"
                type="danger">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column
          width="90"
          fixed="right"
          label="审核"
        >
          <template slot-scope="scope">
            <!--
            <el-button
              v-if="scope.row.status==='WAIT_AUDIT'"
              size="mini"
              type="primary"
              @click="$refs.auditDialog.show(scope.row,true)">
              审核
            </el-button>
            -->
            <el-button
              v-if="enableEditAndAuditForAll || scope.row.status==='WAIT_AUDIT'"
              size="mini"
              type="primary"
              @click="$refs.auditDialog.show(scope.row,true)">
              审核
            </el-button>
          </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="getAgencyPreOrderList()"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <AuditDialog
      ref="auditDialog"
      @update="getAgencyPreOrderList(true)"></AuditDialog>

    <EditDialog
      ref="editDialog"
      @update="getAgencyPreOrderList(true)"></EditDialog>
  </div>
</template>

<script>
import { preorderList, preorderDelete, preorderListExport } from '@/api/order'
import checkPermission from '@/utils/checkPermission'
import Ellipsis from '@/components/Ellipsis'
import AuditDialog from './preOderList/AuditDialog'
import EditDialog from './preOderList/EditDialog'

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: 'CANCELED',
    color: 'info'
  },
  {
    label: '已出票',
    value: 'SUCCESS',
    color: 'warning'
  }
]

export default {
  components: {
    Ellipsis,
    AuditDialog,
    EditDialog
  },
  created () {
    this.getAgencyPreOrderList()
    if (['huihuang', 'demo'].includes(this.projectName)) {
      this.enableEditAndAuditForAll = true
    }
  },
  computed: {
    isHuiHuangCustom () {
      return this.appName.indexOf('') >= 0
    },
    agencyList () {
      return this.$store.state.app.agencyList
    }
  },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      appName: process.env.VUE_APP_PROJECT_NAME,
      enableEditAndAuditForAll: false, // 仅宏村和demo时为true
      total: 0,
      loading: false,
      tableData: [],
      guideList: [],
      statusList,
      form: {
        keyWords1: '', // 预订单号
        keyWords2: '', // 旅行社名称
        /*
        keyWords3: '', // 导游名称
        keyWords4: '', // 状态
        keyWords5: '', // 预订操作人
        */
        // 创建时间 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
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    checkPermission,
    // 是否是‘售检票系统’定制
    goToDownload () {
      this.$confirm('报表已导出，是否跳转到报表下载页？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/queryReport/reportList')
      }).catch(() => {
      })
    },
    // /preorder/export
    exportExcel (flag) {
      this.loading = true
      console.log('点击导出')
      if (flag) { this.form.pageNum = 1 }
      const formForExport = this.form
      formForExport.pageSize = 9999 // 全量导出
      preorderListExport(formForExport).then(res => {
        this.$message.success('导出成功。')
        console.log('导出')
        this.goToDownload()
      }).finally(() => {
        this.loading = false
      })
    },
    createTickets (data) {
      this.$router.push({ name: 'preOrderGroup' })
      // 传递到全局
      this.$store.dispatch('preOrderGroup/setPreOrderInfo', data)
    },
    getStatus (status) {
      return this.statusList.find(i => i.value === status) || { label: '无', color: 'info' }
    },
    getPayType (value) {
      return payTypeOptions.find(i => i.value === value) || { label: '无', color: 'info' }
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getAgencyPreOrderList()
    },
    getAgencyPreOrderList (goFirst) {
      this.loading = true
      goFirst && (this.form.pageNum = 1)
      preorderList(this.form).then(res => {
        this.tableData = res?.data.list
        this.total = res?.data.total
        this.loading = false
      })
    },
    confirm (id) {
      preorderDelete({ id }).then(res => {
        this.$message.success('删除成功')
        this.getAgencyPreOrderList()
      })
    },
    copySuccess () {
      this.$message.success('复制成功')
    },
    copyError () {
      this.$message.error('复制失败')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon-document{
  cursor: pointer;
}
</style>
