<template>
<div class="app-container calendar-list-container">
  <!-- 筛选条件 -->
  <div class="filter-container">
    <el-input v-model="params.search_like_name" placeholder="篮球馆名称" style="width: 200px" clearable class="filter-item" ></el-input>
    <el-input v-model="params.search_like_phone" placeholder="联系人号码" style="width: 150px" clearable class="filter-item"></el-input>
    <el-select v-model="params.search_eq_status" style="width: 120px" class="filter-item" clearable :placeholder="$t('message.status')">
        <el-option
          v-for="item in options.status"
          :key="item.value"
          :label="$t(item.label)"
          :value="item.value">
        </el-option>
      </el-select>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleSearch">搜索</el-button>
    <el-button class="filter-item pull-right" type="success" icon="edit" @click="handleCreate">添加</el-button>
  </div>

  <!-- 列表数据 -->
  <Pagination uri="/venues" :request-params="params" ref="pagination" :showIndex="false">

      <!-- 列表图片 -->
      <el-table-column align="center" label="列表图片">
        <template scope="scope">
          <img :src="scope.row.listImage" width="50px" hight="50px"/>
        </template>
      </el-table-column>

      <!-- 店名称 -->
      <el-table-column align="center" label="店名称">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <!-- 地址 -->
      <el-table-column align="center" label="地址">
        <template scope="scope">
          <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>

      <!-- 单次金额 -->
      <el-table-column align="center" label="进场金额（一次）">
        <template scope="scope">
          <span>￥{{scope.row.price}}</span>
        </template>
      </el-table-column>

      <!-- 联系人 -->
      <el-table-column align="center" label="联系人">
        <template scope="scope">
          <span>{{scope.row.contact}}</span>
        </template>
      </el-table-column>

      <!-- 联系人号码 -->
      <el-table-column align="center" label="联系人号码">
        <template scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>

       <el-table-column align="center" label="状态">
        <template scope="scope">
          <Status :status="scope.row.status"></Status>
        </template>
      </el-table-column>

       <el-table-column align="center" label="场馆人数">
        <template scope="scope">
          <span v-text="scope.row.number"></span>
        </template>
      </el-table-column>

      
      <el-table-column align="center" label="微信二维码">
        <template scope="scope">
          <img :src="scope.row.codeUrl" @click="openCodeUrl(scope.row.codeUrl)" style="width:100px;height:100px;cursor:pointer">          
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column align="center" label="创建时间">
        <template scope="scope">
          <span>{{scope.row.createdTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>

    <el-table-column label="操作" align="center" width="150">
      <template scope="scope">
        <el-button size="small" v-if="scope.row.status === 0" type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button size="small"  v-if="scope.row.id === 32"  type="text" @click="clear(scope.row.id)">清空人数</el-button>
        <el-button size="small" v-if="scope.row.status === 0" type="text" @click="handleEditCard(scope.row.id)">会员卡配置</el-button>
        <el-button v-if="scope.row.status === 0" class="danger" size="small" type="text" @click="handleUpdateStatus(scope.row, 1)">禁用</el-button>
        <el-button v-if="scope.row.status === 1" size="small" type="text" @click="handleUpdateStatus(scope.row, 0)">启用</el-button>        
        <el-button v-if="!scope.row.codeUrl" size="small" type="text" @click="generateCodeUrl(scope.row)">生成二维码</el-button>        
        <el-button v-if="scope.row.status === 0" size="small" type="text" @click="handShowVenue(scope.row.id)">进场记录</el-button>        
      </template>
    </el-table-column>
  </Pagination>
</div>
</template>
<script>
import { remove, updateStatus, generate, clear } from '@/api//venue'
import waves from '@/directive/waves.js'// 水波纹指令
import Pagination from '@/components/Pagination'
import { getType } from '@/utils/constants.js'
import { statusVenueOptions } from '@/utils/constants'
import Status from '@/components/Status'

export default {
  name: 'venue_list',
  components: { Pagination, Status },
  directives: {
    waves
  },
  data() {
    return {
      params: {
        search_like_name: '',
        search_like_phone: '',
        search_eq_type: 1,
        search_eq_status: ''
      },
      options: {
        status: statusVenueOptions
      }
    }
  },
  created() {
  },
  methods: {
    clear(id) {
      clear(id).then(response => {
        this.$refs.pagination.pageRequest()
      })
    },
    openCodeUrl(url) {
      window.open(url)
    },
    generateCodeUrl(row) {
      generate(row.id).then(response => {
        this.$refs.pagination.pageRequest()
      })
    },
    handleEditCard(id) {
      this.$router.push({ path: '/venue/card/index', query: { id: id, type: 1 }})
    },
    /**
     * 篮球进场记录
     */
    handShowVenue(id) {
      this.$router.push({ path: '/venue/show', query: { venueId: id }})
    },
    /**
     * 搜索场馆
     */
    handleSearch() {
      this.$refs.pagination.handleSearch()
    },

    /**
     * 编辑场馆
     */
    handleEdit(id) {
      this.$router.push({ path: '/venue/edit', query: { id: id, type: 1 }})
    },

    /**
     * 创建场馆
     */
    handleCreate() {
      this.$router.push({ path: '/venue/edit', query: { type: 1 }})
    },
    getType(type) {
      return getType(type)
    },
    /**
     * 删除场馆
     */
    handleDelete(row) {
      this.$confirm('确认删除该场馆？').then(_ => {
        remove(row.id).then(response => {
          this.$refs.pagination.removeItem(row)
        })
      }).catch(_ => {})
    },
    handleUpdateStatus(row, status) {
      updateStatus(row.id, status).then(response => {
        this.$refs.pagination.pageRequest()
      })
    }
  }
}
</script>

