<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-select
          clearable
          v-model="form.keyWords1">
          <el-option
            label="团队预约"
            value="TEAM_BOOKING">
          </el-option>
          <el-option
            label="临时团队"
            value="TEMP_BOOKING">
          </el-option>
          <el-option
            label="行政预约"
            value="GOV_BOOKING">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="渠道"
        prop="keyWords2"
      >
        <el-select
          clearable
          v-model="form.keyWords2">
          <el-option
            label="线下"
            value="OFFLINE">
          </el-option>
          <el-option
            label="线上"
            value="ONLINE">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="审核状态"
        prop="keyWords3"
      >
        <el-select
          clearable
          v-model="form.keyWords3">
          <el-option
            label="待审核"
            value="WAIT_AUDIT">
          </el-option>
          <el-option
            label="已审核"
            value="AGREE">
          </el-option>
          <el-option
            label="已拒绝"
            value="REFUSE">
          </el-option>
          <el-option
            label="已出票"
            value="SUCCESS">
          </el-option>
        </el-select>
      </el-form-item>
      <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
        label="预约起始时间"
        prop="payDateBegin">
        <el-date-picker
          v-model="form.payDateBegin"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="预约截止时间"
        prop="playDateEnd">
        <el-date-picker
          default-time="23:59:59"
          v-model="form.playDateEnd"
          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
          type="primary"
          @click="exportStatist">
          导出
        </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="单位"
          prop="company"
        >
        </el-table-column>
        <el-table-column
          label="参观人数"
          prop="booking_num"
        >
        </el-table-column>
        <el-table-column
          label="是否讲解"
          prop="is_need_explain"
        >
          <template slot-scope="scope">
            {{ scope.row.is_need_explain===0?'不需要':'需要' }}
          </template>
        </el-table-column>
        <el-table-column
          label="讲解状态"
          prop="explain_status"
        >
          <template slot-scope="scope">
            {{ explain_status_enum[scope.row.explain_status] }}
          </template>
        </el-table-column>
        <el-table-column
          label="预约时间"
          prop="booking_play_date"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          label="预约状态"
          prop="status"
        >
          <template slot-scope="scope">
            <el-tag :type="statusTypeEnum[scope.row.status]">
              {{ statusEnum[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="240"
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="$refs.editDialog.show(scope.row)"
              v-if="scope.row.status==='WAIT_AUDIT'|| scope.row.status==='AGREE'"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              @click="$refs.auditDialog.show(scope.row)"
            >
              详情
            </el-button>

            <el-button
              v-if="['AGREE','SUCCESS'].includes(scope.row.status)&&scope.row.is_need_explain===1&&scope.row.explain_status==='WAIT_EXPLAIN'"
              size="mini"
              type="primary"
              @click="startExplain(scope.row.id)"
            >
              开始讲解
            </el-button>

            <el-button
              v-if="scope.row.status==='AGREE'&&scope.row.is_need_explain===1&&scope.row.explain_status==='EXPLAINING'"
              size="mini"
              type="primary"
              @click="endExplain(scope.row.id)"
            >
              结束讲解
            </el-button>
          </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>
          </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 { list, exportList, startExplain, endExplain } from '@/api/lf'
import checkPermission from '@/utils/checkPermission'
import AuditDialog from './preOrderList/AuditDialog'
import EditDialog from './preOrderList/EditDialog'

export default {
  components: {
    AuditDialog,
    EditDialog
  },
  created () {
    this.getAgencyPreOrderList()
  },
  computed: {
    agencyList () {
      return this.$store.state.app.agencyList
    }
  },
  data () {
    return {
      total: 0,
      loading: false,
      tableData: [],
      form: {
        startDate: '',
        endDate: '',
        payDateBegin: '',
        playDateEnd: '',
        keyWords1: '',
        keyWords2: '',
        keyWords3: '',
        pageNum: 1,
        pageSize: 10
      },
      statusEnum: {
        WAIT_AUDIT: '待审核',
        AGREE: '已审核',
        REFUSE: '已拒绝',
        SUCCESS: '已出票'
      },
      statusTypeEnum: {
        WAIT_AUDIT: 'info',
        AGREE: 'success',
        REFUSE: 'danger',
        SUCCESS: ''
      },
      explain_status_enum: {
        NONE: '无需讲解',
        WAIT_EXPLAIN: '待讲解',
        EXPLAINING: '讲解中',
        EXPLAINED: '已讲解'
      }
    }
  },
  methods: {
    checkPermission,
    createTickets (data) {
      this.$router.push({ name: 'preOrderGroup' })
      // 传递到全局
      this.$store.dispatch('preOrderGroup/setPreOrderInfo', data)
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getAgencyPreOrderList()
    },
    getAgencyPreOrderList (goFirst) {
      this.loading = true
      goFirst && (this.form.pageNum = 1)
      list(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
        this.loading = false
      })
    },
    exportStatist () {
      exportList(this.form).then(res => {
        this.$message.success('导出成功。')
        this.goToDownload()
      })
    },
    startExplain (id) {
      this.$confirm('确认开始讲解?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        startExplain({ id }).then(res => {
          this.$message.success('开始讲解')
          this.getAgencyPreOrderList()
        })
      })
    },
    endExplain (id) {
      this.$confirm('确认结束讲解?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        endExplain({ 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>
