<template>
  <div>
    <el-form
      class="search-box"
      inline>
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="售票点"
        prop="keyWords2"
      >
        <el-select v-model="form.keyWords2">
          <el-option
            v-for="item in ticketSpotList"
            :key="item.id"
            :value="item.id"
            :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交班时间">
        <el-date-picker
          type="datetime"
          v-model="form.startDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
          default-time="23:59:59"
          type="datetime"
          v-model="form.endDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getList"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          @click="exportVisible = true"
        >
          导出
        </el-button>
      </div>
    </el-form>
    <div class="table-box">
      <div class="block-title">
        查询结果
      </div>
      <el-table
        border
        stripe
        :data="tableData">
        <el-table-column
          prop="ticketSpotName"
          label="售票点"
        >
        </el-table-column>
        <el-table-column
          label="上班时间"
        >
          <template slot-scope="scope">
            {{ scope.row.hand_over_start_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="交班时间"
        >
          <template slot-scope="scope">
            {{ scope.row.hand_over_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-link>
            <el-link
              type="primary"
              size="mini"
              @click="downloadLog(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()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <ElDialog
      title="交班信息"
      width="1000px"
      v-model="dialogVisible"
    >
      <InfoDialog
        :user-info="userInfo"
        :log-id="logId"
      ></InfoDialog>
    </ElDialog>
    <el-dialog
      title="导出交班统计"
      v-model="exportVisible">
      <ExportDialog></ExportDialog>
    </el-dialog>
  </div>
</template>
<script>
import { getHandOverList } from '@/api/systemSetting/manager.js'
import { getTicketSpotList } from '@/api/ticketSpot'
import ElDialog from '@/components/Dialog'
import InfoDialog from './myHandOverLog/InfoDialog'
import ExportDialog from './myHandOverLog/ExportDialog'
import moment from 'moment'

export default {
  components: {
    ElDialog,
    InfoDialog,
    ExportDialog
  },
  data () {
    return {
      ticketSpotList: [],
      form: {
        keyWords1: this.$store.getters.name,
        keyWords2: '',
        startDate: new Date(moment().startOf('day').valueOf()),
        endDate: new Date(moment().endOf('day').valueOf()),
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      logId: 0,
      userInfo: {},
      dialogVisible: false,
      exportVisible: false
    }
  },
  async mounted () {
    await this.getTicketSpotList()
    this.getList()
  },
  methods: {
    getTicketSpotList () {
      return getTicketSpotList({
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        let list = res.list
        list.unshift({
          name: '全部',
          id: ''
        })
        this.ticketSpotList = list
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      getHandOverList(this.form).then(res => {
        this.total = res.total
        res.list.forEach(item => {
          let spot = this.ticketSpotList.find(s => s.id === item.ticket_spot_id)
          item.ticketSpotName = spot ? spot.name : ''
        })
        this.tableData = res.list
      })
    },
    checkInfo (item) {
      this.logId = item.id
      this.userInfo = item
      this.dialogVisible = true
    },
    downloadLog (data) {
      if (!data.downloadUrl) {
        this.$message.error('暂无下载地址')
        return
      }
      window.location.href = data.downloadUrl
    }
  }
}
</script>
