<template>
  <div class="subPage">
    <div class="list flex-h">
      <div class="flex-item">
        <div style="text-align:right;margin: 20px 0 0;border:none;">
          <el-button
            size="mini"
            type="warning"
            @click="reback">返回</el-button>
        </div>
        <div>
          <el-table
              :data="info"
              stripe
              style="width: 100%">
              <el-table-column
                prop="CaseName"
                label="所在案场">
              </el-table-column>
              <el-table-column
                prop="CustomerName"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="Phone"
                label="手机号">
              </el-table-column>
              <el-table-column
                prop="FlashBuyName"
                label="活动名称">
              </el-table-column>
              <el-table-column
                prop="CreateDate"
                label="获取时间"
                width="140px">
                <template slot-scope="scope">
                  {{scope.row.CreateDate === '0001-01-01T00:00:00Z' ? '-' : toolClass.dateFormat(scope.row.CreateDate)}}
                </template>
              </el-table-column>
              <el-table-column
                prop="VerifyStatus"
                label="状态">
                <template slot-scope="scope">
                  {{scope.row.VerifyStatus === 'used' ? '已核销' : '未核销'}}
                </template>
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    v-if="scope.row.VerifyStatus !== 'used'"
                    @click="check(scope.row)">核销</el-button>
                  <span v-else>-</span>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <span class="noData" v-if="!info.length && ajaxOff">查不到当前信息，请核对二维码或详情</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapVerifActions } = createNamespacedHelpers('verification')

export default {
  name: '',
  data () {
    return {
      ajaxOff: false,
      info: [],
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
  },
  created () {
    // console.log(this.$route.query.code)
    this.flashbuyVerifyList({
      code: this.$route.query.code,
      caseid: this.$route.query.caseid
    }).then((res) => {
      // console.log(JSON.stringify(res))
      if (res !== null) {
        this.info.push(res)
      }
      this.ajaxOff = true
    })
  },
  methods: {
    ...mapVerifActions([
      'flashbuyVerify',
      'flashbuyVerifyList',
    ]),
    check (item) { // 核销
      this.$confirm('确认核销此卡?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.flashbuyVerify(item.CustomerFlashBuyId).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.flashbuyVerifyList({
            code: this.$route.query.code,
            caseid: this.$route.query.caseid
          }).then((res) => {
            // console.log(JSON.stringify(res))
            if (res !== null) {
              this.info = []
              this.info.push(res)
            }
            this.ajaxOff = true
          })
          // this.$router.push({ name: 'flashbuyVerification' })
        })
      })
    },
    getList () {
      // 1
    },
    afterCheck () {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.getList()
    },
    reback () { // 返回
      this.$router.push({ name: 'flashbuyVerification' })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.subPage {
  .list {
    > div {
      margin: 0 20px;
      > div {
        width: 100%;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-bottom: none;
        margin-top: 20px;
      }
    }
  }
  .noData {
    width: 100%;
    display: block;
    line-height: 40px;
    font-size: 30px;
    color: #ccc;
    text-align: center;
    margin: 40px auto 0;
  }
}
</style>
