<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="售票员"
        style="margin-right: 10px"
        prop="keyWords1"
      >
        <el-select v-model="form.keyWords1">
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in salesList"
            :key="item.id"
            :label="item.nickName"
            :value="item.nickName">
          </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
          :disabled="loading"
          type="primary"
          @click="getList"
        >
          查询
        </el-button>
      </div>
    </el-form>
    <div class="table-box">
      <div class="block-title">
        查询结果
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="ticketSpotName"
          label="售票点"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          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-button
              type="text"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="downloadLog(scope.row)">
              下载
            </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="getList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <ElDialog
      title="交班信息"
      width="1000px"
      v-model="dialogVisible"
    >
      <InfoDialog
        :user-info="userInfo"
        :ticket-data="ticketData"
        :cash-data="cashData"
        :member-data="memberData"
      ></InfoDialog>
    </ElDialog>
  </div>
</template>
<script>
import { getHandOverList, getHandOverStatisticsById } from '@/api/systemSetting/manager.js'
import { getTicketSpotList } from '@/api/ticketSpot'
import ElDialog from '@/components/Dialog'
import InfoDialog from './handOverLog/InfoDialog'
import moment from 'moment'

export default {
  name: 'handOverLog',
  components: {
    ElDialog,
    InfoDialog
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    }
  },
  data () {
    return {
      ticketSpotList: [],
      form: {
        keyWords1: '',
        keyWords2: '',
        startDate: new Date(moment().startOf('day').valueOf()),
        endDate: new Date(moment().endOf('day').valueOf()),
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      userInfo: {},
      ticketData: [],
      cashData: [],
      memberData: [],
      dialogVisible: false,
      loading: false
    }
  },
  async mounted () {
    const searchParams = JSON.parse(sessionStorage.getItem('统计表-交班记录汇总-查询条件'))
    if (searchParams) {
    // 如果存在查询条件，则设置到组件的数据中
      this.form = searchParams // 记住上次搜索条件
    }
    await this.getTicketSpotList()
    this.getList()
  },
  methods: {
    getTicketSpotList () {
      this.loading = true
      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 () {
      this.loading = true
      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
      }).finally(() => {
        this.loading = false
        sessionStorage.setItem('统计表-交班记录汇总-查询条件', JSON.stringify(this.form)) // 下次记住
      })
    },
    checkInfo (item) {
      this.loading = true
      getHandOverStatisticsById({ id: item.id }).then(res => {
        this.userInfo = item
        this.ticketData = res.data
        this.cashData = res.cash_data
        this.memberData = res.member_data
        this.dialogVisible = true
      }).finally(() => {
        this.loading = false
      })
    },
    downloadLog (data) {
      if (!data.downloadUrl) {
        this.$message.error('暂无下载地址')
        return
      }
      window.location.href = data.downloadUrl
    }
  }
}
</script>
