<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="addLotteryActivities">新增抽奖活动</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.status" 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.name"
              clearable>
            </el-input>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary"
          @click="searchList">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="defaultCaseId"
            label="案场"
            width="180">
            <template slot-scope="scope">
              {{returnCaseName(scope.row.CaseId)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="Name"
            label="活动名称">
            <template slot-scope="scope">
              <router-link style="color: #409EFF;" :to="{name: 'editLotteryActivities', query: {id: scope.row.Id, isread: 1}}">{{scope.row.Name}}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="BeginDate"
            label="开始时间">
            <template slot-scope="scope">
              <span v-if="scope.row.BeginDate !== '0001-01-01T00:00:00Z'">{{toolClass.dateFormat(scope.row.BeginDate, 'yyyy-MM-dd')}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="EndDate"
            label="结束时间">
            <template slot-scope="scope">
              <span v-if="scope.row.EndDate !== '0001-01-01T00:00:00Z'">{{toolClass.dateFormat(scope.row.EndDate, 'yyyy-MM-dd')}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="JoinedNum"
            label="已参与人数">
          </el-table-column>
          <el-table-column
            prop="Status"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.Status === 0 ? '已停用' : new Date(scope.row.EndDate).getTime() > new Date().getTime() && scope.row.Status === 1 ? '已启用' : '已结束'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.Status === 0"
                @click="deleteActivityItem(scope.row.Id)"
                size="mini"
                type="danger">删除</el-button>
              <el-button
                v-if="scope.row.Status === 1 && new Date(scope.row.EndDate).getTime() > new Date().getTime()"
                size="mini"
                type="warning"
                @click="toStopActivity(scope.row.Id)">停用</el-button>
              <el-button
                v-if="scope.row.Status === 0"
                size="mini"
                type="success"
                @click="toOpenActivity(scope.row.Id)">启用</el-button>
              <el-button
                size="mini"
                type="success" @click="editActivity(scope.row.Id)">编辑</el-button>
              <el-button
                size="mini"
                type="success"
                @click="getShareListInfo(scope.row.Id)">分享记录</el-button>
              <el-button
                size="mini"
                type="success"
                @click="getRecordListInfo(scope.row.Id)">抽奖记录</el-button>
              <el-button
                v-if="new Date(scope.row.EndDate).getTime() > new Date().getTime()"
                size="mini"
                type="primary"
                v-clipboard:copy="clientUrl + '/game/luckdraw/#/?lotteryId=' + scope.row.Id"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                >点击复制链接</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <div style="margin-bottom:20px;">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="postData.page"
        :page-size="postData.pagesize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="分享记录"
      :visible.sync="showShareList"
      width="1000px"
      @closed="emptyShareList"
      center>
      <div class="popupSearch">
        <div style="width:200px;">
          <el-input
            placeholder="请输入用户手机号"
            v-model="sharePostData.tel"
            clearable>
          </el-input>
        </div>
        <el-button
          type="primary"
          @click="searchShareList">搜索</el-button>
      </div>
      <div style="border:1px solid #eee;border-bottom:none;margin-top:20px;">
        <el-table
          :data="shareList"
          style="width: 100%">
          <el-table-column
            prop="CaseId"
            label="案场"
            width="180">
            <template slot-scope="scope">
              {{returnCaseName(scope.row.CaseId)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="FromCustomerName"
            label="用户昵称">
          </el-table-column>
          <el-table-column
            prop="FromCustomerWxname"
            label="用户姓名">
          </el-table-column>
          <el-table-column
            prop="FromCustomerTel"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="ToCustomerWxname"
            label="被分享用户昵称">
          </el-table-column>
          <el-table-column
            prop="ToCustomerName"
            label="被分享用户姓名">
          </el-table-column>
          <el-table-column
            prop="ToCustomerTel"
            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>
      </div>
      <div style="padding-bottom:20px;">
        <el-pagination
          @current-change="cutSharePage"
          :current-page.sync="sharePostData.page"
          :page-size="sharePostData.pagesize"
          layout="prev, pager, next, jumper"
          :total="shareTotal">
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog
      title="抽奖记录"
      :visible.sync="showRecordsList"
      width="1000px"
      @closed="emptyRecordsList"
      center>
      <div class="popupSearch">
        <div style="width:200px;">
          <el-input
            placeholder="请输入用户手机号"
            v-model="recordsPostData.tel"
            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="recordsList"
          style="width: 100%">
          <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="PrizeName"
            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="WriteoffDate"
            label="核销时间">
            <template slot-scope="scope">
              <span v-if="scope.row.WriteoffDate !== '0001-01-01T00:00:00Z'">{{toolClass.dateFormat(scope.row.WriteoffDate, 'yyyy-MM-dd')}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="Status"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.Status == '0' ? '未核销' : '已核销'}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding-bottom:20px;">
        <el-pagination
          @current-change="cutReocrdPage"
          :current-page.sync="recordsPostData.page"
          :page-size="recordsPostData.pagesize"
          layout="prev, pager, next, jumper"
          :total="recordsTotal">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapActivityLuckDrawActions } = createNamespacedHelpers('activityLuckDraw')
export default {
  data () {
    return {
      showShareList: false,
      showRecordsList: false,
      statusList: [{
        id: '',
        value: '不限状态'
      }, {
        id: '0',
        value: '已停用'
      }, {
        id: '1',
        value: '已启用'
      }, {
        id: '9',
        value: '已结束'
      }],
      tableData: [],
      postData: {
        caseid: '', // 案场id
        page: 1, // 当前页码
        pagesize: 10, // 请求数据量
        name: '', // 活动名称
        status: '', // 状态
      },
      total: 0, // 数据条数
      recordsPostData: {
        page: 1, // 当前页码
        pagesize: 5, // 请求数据量
        tel: '', // 电话号码
      },
      recordsTotal: 0, // 数据条数
      recordsList: [], // 抽奖记录
      sharePostData: {
        page: 1, // 当前页码
        pagesize: 5, // 请求数据量
        tel: '', // 电话号码
      },
      shareTotal: 0, // 数据条数
      shareList: [], // 分享记录
    }
  },
  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
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    ...mapActivityLuckDrawActions([
      'getLuckdrawList',
      'getRecordsList',
      'getShareList',
      'deleteLuckdraw',
      'openActivity',
      'stopActivity',
    ]),
    onCopy () {
      this.$message({
        type: 'success',
        message: '复制成功！'
      })
    },
    onError () {
      this.$message({
        type: 'error',
        message: '复制失败！'
      })
    },
    toOpenActivity (id) { // 开启活动
      this.$confirm('确认开启此活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.openActivity(id).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    toStopActivity (id) { // 停用活动
      this.$confirm('确认停用此活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.stopActivity(id).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    deleteActivityItem (id) { // 删除活动
      this.$confirm('确认删除此活动?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLuckdraw(id).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    emptyRecordsList () {
      this.recordsList = []
      this.recordsPostData.page = 1
      this.recordsPostData.tel = ''
      this.recordsTotal = 1
    },
    emptyShareList () {
      this.shareList = []
      this.sharePostData.page = 1
      this.sharePostData.tel = ''
      this.shareTotal = 1
    },
    searchRecordList () { // 搜索抽奖记录列表
      this.recordsPostData.page = 1
      this.recordsTotal = 1
      this.toGetRecordList()
    },
    searchShareList () { // 搜索分享记录列表
      this.sharePostData.page = 1
      this.shareTotal = 1
      this.toGetShareList()
    },
    getShareListInfo (id) { // 获取分享记录列表
      this.currentShareId = id
      this.sharePostData.page = 1
      this.shareTotal = 1
      this.showShareList = true
      this.toGetShareList()
    },
    toGetShareList () { // 获取分享记录
      this.getShareList({
        id: this.currentShareId,
        payload: this.sharePostData
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.shareList = []
        this.shareList = res.list
        this.sharePostData.page = res.page
        this.shareTotal = res.pagenum
      })
    },
    getRecordListInfo (id) { // 获取抽奖记录列表
      this.currentRecordId = id
      this.recordsPostData.page = 1
      this.recordsTotal = 1
      this.showRecordsList = true
      this.toGetRecordList()
    },
    toGetRecordList () { // 获取抽奖记录
      this.getRecordsList({
        id: this.currentRecordId,
        payload: this.recordsPostData
      }).then((res) => {
        console.log(JSON.stringify(res))
        this.recordsList = []
        this.recordsList = res.list
        this.recordsPostData.page = res.page
        this.recordsTotal = res.pagenum
      })
    },
    editActivity (id) {
      this.$router.push({
        name: 'editLotteryActivities',
        query: {
          id,
        }
      })
    },
    handleCurrentChange (val) {
      this.$data.postData.page = val
      this.getList()
    },
    cutSharePage (val) { // 分享记录分页切换
      this.$data.sharePostData.page = val
      this.toGetShareList()
    },
    cutReocrdPage (val) { // 分享抽奖分页切换
      this.$data.recordsPostData.page = val
      this.toGetRecordList()
    },
    redirection (pathName) { // 重定向
      this.$router.push({ name: pathName })
    },
    getList () { // 获取数据列表
      this.getLuckdrawList({
        ...this.postData
      }).then((res) => {
        this.tableData = res.list
        this.postData.page = res.page
        this.total = res.pagenum
      })
    },
    returnCaseName (id) {
      for (var n = 0; n < this.cases.length; n++) {
        if (id === this.cases[n].CaseId) {
          return this.cases[n].CaseName
        }
      }
    },
    addLotteryActivities () {
      this.$router.push({ name: 'addLotteryActivities' })
    },
    searchList () {
      this.postData.page = 1
      this.total = 1
      this.getList()
    },
    exportExcel () {
      var url = this.$api.activityManager.excelActivity.url
      url = url.replace(':id', this.currentRecordId)
      window.open(`${this.toolClass.ReplaceOrg(url)}?token=${localStorage.getItem('JWT')}&tel=` + this.recordsPostData.tel, '_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>
