<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click="addSnapUpList">新增抢购活动</el-button>
        </div>
        <ul>
          <li>
            <el-select v-model="CaseId" placeholder="请选择案场">
              <el-option
                key=""
                label="所有案场"
                value="">
              </el-option>
              <el-option
                v-for="item in cases"
                :key="item.CaseId"
                :label="item.CaseName"
                :value="item.CaseId">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-select v-model="postData.flashbuystatus" placeholder="请选择状态">
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-input
              placeholder="请输入活动名称"
              v-model="postData.flashbuyname"
              clearable>
            </el-input>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary"
          @click="getList">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="CaseName"
            label="案场"
            width="180">
          </el-table-column>
          <el-table-column
            prop="FlashBuyName"
            label="活动名称">
            <template slot-scope="scope">
              <router-link style="color: #409EFF;" :to="{name: 'editSnapUpList', query: {id: scope.row.FlashBuyId, isread: 1}}">{{scope.row.FlashBuyName}}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="FlashBuyStatus"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.FlashBuyStatus === 'active' ? '已启用' : scope.row.FlashBuyStatus === 'inactive' ? '已停用' : '已结束'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.FlashBuyStatus !== 'active'"
                size="mini"
                type="danger"
                @click="deleteFlashbuyItem(scope.row.FlashBuyId)">删除</el-button>
              <el-button
                v-if="scope.row.FlashBuyStatus === 'active'"
                size="mini"
                type="warning"
                @click="stopFlashBuy(scope.row.FlashBuyId)">停用</el-button>
              <el-button
                size="mini"
                type="success"
                @click="editFlashbuy(scope.row.FlashBuyId)">编辑</el-button>
              <el-button
                v-if="scope.row.FlashBuyStatus === 'inactive'"
                size="mini"
                type="success"
                @click="openFlashBuy(scope.row.FlashBuyId)">启用</el-button>
              <el-button
                size="mini"
                type="success"
                @click="getRecords(scope.row.FlashBuyId)">抢购记录</el-button>
              <el-button
                size="mini"
                type="primary"
                v-clipboard:copy="clientUrl + '/wechat/user.html#/rush?flashBuyId=' + scope.row.FlashBuyId"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                >点击复制链接</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="postData.page"
      :page-size="postData.pagesize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog
      title="抢购记录"
      :visible.sync="showFlashbuyRecordsList"
      width="1000px"
      @closed="emptyFlashbuyRecordsList"
      center>
      <div class="popupSearch">
        <div style="width:200px;">
          <el-input
            placeholder="请输入手机号"
            v-model="flashbuyPostData.phone"
            clearable>
          </el-input>
        </div>
        <el-button
          type="primary"
          @click="searchRecordList">搜索</el-button>
        <el-button
          type="success" @click="exportExcel">导出Excel</el-button>
      </div>
      <div style="border:1px solid #eee;border-bottom:none;margin-top:20px;">
        <el-table
          :data="flashbuyRecordsList"
          style="width: 100%">
          <!-- <el-table-column
            prop="CaseName"
            label="案场">
          </el-table-column> -->
          <el-table-column
            prop="Name"
            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="CreateDate"
            label="获取时间">
            <template slot-scope="scope">
              <span v-if="scope.row.CreateDate !== '0001-01-01T00:00:00Z'">{{toolClass.dateFormat(scope.row.CreateDate, 'yyyy-MM-dd')}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="VerifyDate"
            label="核销时间">
            <template slot-scope="scope">
              <span v-if="scope.row.VerifyDate !== '0001-01-01T00:00:00Z'">{{toolClass.dateFormat(scope.row.VerifyDate, 'yyyy-MM-dd')}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="VerifyStatus"
            label="核销状态">
            <template slot-scope="scope">
              {{scope.row.VerifyStatus === 'useable' ? '未核销' : '已核销'}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding-bottom:20px;">
        <el-pagination
          @current-change="cutFlashbuyPage"
          :current-page.sync="flashbuyPostData.page"
          :page-size="flashbuyPostData.pagesize"
          layout="prev, pager, next, jumper"
          :total="flashbuyTotal">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapActivityFlashbuyActions } = createNamespacedHelpers('activityFlashbuy')
export default {
  data () {
    return {
      currentFlashbuyId: '',
      showFlashbuyRecordsList: false,
      statusList: [{ // 状态列表
        id: '',
        value: '不限状态'
      }, {
        id: 'active',
        value: '已启用'
      }, {
        id: 'inactive',
        value: '已停用'
      }, {
        id: 'over',
        value: '已结束'
      }],
      tableData: [],
      postData: { // 表格搜索条件
        caseid: '', // 案场id
        page: 1, // 当前页码
        pagesize: 10, // 请求数据量
        flashbuyname: '', // 活动名称
        flashbuystatus: '', // 状态
      },
      total: 0, // 数据条数
      flashbuyPostData: {
        page: 1, // 当前页码
        pagesize: 5, // 请求数据量
        phone: '', // 手机号
      },
      flashbuyTotal: 0,
      flashbuyRecordsList: [], // 抢购记录列表
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default,
      clientUrl: x => x.app.clientUrl,
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    ...mapActivityFlashbuyActions([
      'getFlashbuyList',
      'getFlashbuyRecordsById',
      'deleteFlashbuy',
      'updateFlashbuyStatus',
    ]),
    onCopy () {
      this.$message({
        type: 'success',
        message: '复制成功！'
      })
    },
    onError () {
      this.$message({
        type: 'error',
        message: '复制失败！'
      })
    },
    openFlashBuy (id) { // 启用
      this.updateFlashbuyStatus({
        id,
        status: 'active'
      }).then(() => {
        this.getList()
      })
    },
    stopFlashBuy (id) { // 停用
      this.updateFlashbuyStatus({
        id,
        status: 'inactive'
      }).then(() => {
        this.getList()
      })
    },
    deleteFlashbuyItem (id) { // 删除抢购活动
      this.$confirm('确认删除此活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteFlashbuy(id).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getRecords (id) { // 获取记录
      this.currentFlashbuyId = id
      this.showFlashbuyRecordsList = true
      this.toGetFlashbuyRecordsList()
    },
    cutFlashbuyPage (val) {
      this.$data.flashbuyPostData.page = val
      this.toGetFlashbuyRecordsList()
    },
    emptyFlashbuyRecordsList () { // 清空搜索数据
      this.flashbuyPostData.page = 1
      this.flashbuyPostData.phone = ''
      this.flashbuyTotal = 1
      this.flashbuyRecordsList = []
    },
    toGetFlashbuyRecordsList () { // 获取抢购记录列表
      this.getFlashbuyRecordsById({
        id: this.currentFlashbuyId,
        info: this.flashbuyPostData
      }).then((res) => {
        // console.log(JSON.stringify(res))
        res.list = res.list || []
        this.flashbuyRecordsList = res.list
        this.flashbuyPostData.page = res.page
        this.flashbuyTotal = res.pagenum
      })
    },
    searchRecordList () { // 搜索抢购记录
      this.flashbuyPostData.page = 1
      this.flashbuyTotal = 1
      this.toGetFlashbuyRecordsList()
    },
    editFlashbuy (id) {
      this.$router.push({ name: 'editSnapUpList', query: { id } })
    },
    toGetFlashbuyList () {
      this.getFlashbuyList(this.postData).then((res) => {
        // console.log(JSON.stringify(res))
        this.postData.page = res.page
        this.total = res.pagenum
        this.tableData = res.list
      })
    },
    handleCurrentChange (val) {
      this.postData.page = val
      this.toGetFlashbuyList()
    },
    redirection (pathName) { // 重定向
      this.$router.push({ name: pathName })
    },
    getList () { // 获取数据列表
      this.postData.page = 1
      this.total = 1
      this.toGetFlashbuyList()
    },
    addSnapUpList () {
      this.$router.push({ name: 'addSnapUpList' })
    },
    exportExcel () {
      var url = this.$api.activityManager.excelFlashbuy.url
      url = url.replace(':id', this.currentFlashbuyId)
      window.open(`${this.toolClass.ReplaceOrg(url)}?token=${localStorage.getItem('JWT')}&phone=` + this.flashbuyPostData.phone, '_blank')
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
table {
  button {
    margin-bottom: 10px;
  }
}
.popupSearch {
  width: 100%;
  text-align: right;
  font-size: 0;
  & > * {
    display: inline-block;
    margin-left: 10px;
  }
}
</style>
