<template>
<div class="app-container calendar-list-container">
  <!-- 筛选条件 -->
  <div class="filter-container">
    <el-input @keyup.enter.native="handleSearch" style="width: 200px;" clearable class="filter-item" placeholder="昵称" v-model="params.search_like_nickname"></el-input>
    <el-input @keyup.enter.native="handleSearch" style="width: 140px;" clearable class="filter-item" placeholder="姓名" v-model="params.search_eq_name"></el-input>
    <el-input @keyup.enter.native="handleSearch" style="width: 170px;" clearable class="filter-item" placeholder="手机号" v-model="params.search_eq_mobile"></el-input>
    <el-select v-model="params.search_eq_status" style="width: 120px" class="filter-item" clearable placeholder="状态">
      <el-option v-for="item in options.statu"
        :key="item.value"
        :label="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 v-if="hasAddPermission()" class="filter-item pull-right" type="success" icon="edit" @click="handleCreate">{{$t('message.add')}}</el-button>
    <el-button class="filter-item pull-right" type="success" icon="edit" @click="shows">批量送卡</el-button>
    <el-checkbox class="filter-item pull-right" :indeterminate="isIndeterminate" v-model="checkAll"
    style="top: 15px;" @change="handleCheckAllChange">全选</el-checkbox>
  </div>

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

      <!-- 昵称 -->
      <el-table-column align="center" label="选择">
        <template scope="scope">
          <el-checkbox-group v-model="memberId" @change="handleCheckedCitiesChange(scope.row.id)">
            <el-checkbox :label="scope.row.id">{{scope.row.ids}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>

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

      <el-table-column align="center" label="用户人脸">
        <template scope="scope">
          <img :src="scope.row.faceUrl" style="width:100px;height:auto">
        </template>
      </el-table-column>

      <!-- 图像 -->
      <el-table-column align="center" label="图像">
        <template scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:50px;height:50px;margin-top:8px"/>
          <img v-if="!scope.row.avatar" :src="imgpath" style="width:50px;height:50px;margin-top:8px"/>
        </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>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <!-- 手机号码-->
      <el-table-column align="center" label="手机号">
        <template scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>

      <!-- 余额 -->
      <el-table-column align="center" label="余额">
        <template scope="scope">
          <span>{{scope.row.money}}</span>
        </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 v-if="scope.row.status === 0" 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 size="small" type="text" @click="handleEdit(scope.row.id)">查看</el-button>
        <el-button size="small" type="text" @click="showUploadFace(scope.row.id)">上传人脸</el-button>
        <el-button size="small" type="text" @click="showimg(scope.row.id)">送卡</el-button>
        <el-button v-if="hasEditPermission() && scope.row.status === 0" size="small" type="text" @click="handleAddEdit(scope.row.id)">编辑</el-button>
      </template>
    </el-table-column>
  </Pagination>
  <el-dialog title="赠送会员卡" :visible.sync="dialogFormVisible">
    <div style="margin-bottom: 10px">
      <span>请选择对应的场馆：</span>
      <el-select v-model="venue" clearable filterable placeholder="场馆" @change="getid">
        <el-option
          v-for="(item, i) in list"
          :key="i"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <span>请选择场馆会员卡：</span>
    <el-select v-model="venueCard" clearable placeholder="场馆会员卡" @change="getform">
      <el-option
        v-for="item in venueCardlist"
        :key="item.cardType"
        :label="item.name"
        :value="item.cardType">
      </el-option>
    </el-select>
    <div v-if="this.form.cardType === '免费卡'" style="margin-top: 10px">
      <span>请选择免费卡可用时间段：</span>
      <el-date-picker class="filter-item"
        v-model="form.date" style="display: inline-flex;width:230px"
        type="daterange"
        placeholder="请选择免费卡日期范围"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions0"
        @change="gettime">
      </el-date-picker>
      <div v-if="!show" style="margin-top:20px">
        <span>免费卡从<span>{{form.starTime}}</span>开始,至<span>{{form.endTime}}</span>结束,确认赠送?</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="giveCard()">赠送</el-button>
      <el-button @click="dialogFormVisible = false">关  闭</el-button>
    </div>
  </el-dialog>
  <el-dialog title="上传人脸" :visible.sync="isShowUploadFace">
      <el-upload
          class="avatar-uploader"
          action="/api/member/upload/face"
          :data="face"
          name="file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
  </el-dialog>
</div>
</template>

<script>
import { updateStatus, createCard } from '@/api//member'
import waves from '@/directive/waves.js'// 水波纹指令
import Pagination from '@/components/Pagination'
import Status from '@/components/Status'
import { findVenue, find } from '@/api//venue'
import { findVenueCard } from '@/api//venue/card'
import { } from '@/api//venue/card'
import moment from 'moment'
import hasPermission from '@/utils/permission'

const cityOptions = []
export default {
  name: 'member_list',
  components: { Pagination, Status },
  directives: {
    waves
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      list: [],
      show: true,
      face: {
        memberId: undefined
      },
      imgpath:
        'https://yingdd.oss-cn-hangzhou.aliyuncs.com/278b03e2ed25ae206ab95d9e5e111ab2.png',

      isShowUploadFace: false,
      checkAll: false,
      checkedCities: [],
      memberId: cityOptions,
      isIndeterminate: true,
      form: {
        id: undefined,
        starTime: '',
        endTime: '',
        cardType: '',
        cardTypes: '',
        venueId: '',
        venueType: '',
        date: [],
        platformId: ''
      },
      venueCardlist: [],
      dialogFormVisible: false,
      checked: true,
      params: {
        search_eq_status: undefined,
        search_like_nickname: undefined,
        search_eq_mobile: undefined,
        search_eq_name: undefined
      },
      options: {
        statu: [
          {
            value: 0,
            label: '正常'
          },
          {
            value: 1,
            label: '禁用'
          }
        ]
      },
      venue: '',
      venueCard: ''
    }
  },
  created() {
    findVenue().then(response => {
      this.list = response.card
    })
  },
  methods: {
    handleAvatarSuccess(res) {
      if (res.err_code !== 0) {
        this.$message({
          message: res.err_msg,
          type: 'warning'
        })
      } else {
        this.showUploadFace = false
        this.handleSearch()
      }
    },
    showUploadFace(id) {
      this.isShowUploadFace = true
      this.face.memberId = id
    },
    /**
     * 送卡弹框
     */
    showimg(id) {
      this.venue = ''
      this.venueCard = ''
      this.show = true
      this.form.cardTypes = ''
      this.form.date.splice(0, this.form.date.length)
      this.starTime = undefined
      this.endTime = undefined
      this.dialogFormVisible = true
      this.memberId = ''
      this.memberId = id
    },

    /**
     * 批量送卡弹框
     */
    shows(row) {
      if (this.memberId.length === 0) {
        // console.log(cityOptions.length);
        // console.log(this.memberId.length);
        this.$message({
          message: '请选择用户！',
          type: 'warning'
        })
        return
      }
      this.dialogFormVisible = true
    },

    gettime() {
      if (this.form.date != null) {
        this.form.endTime = moment(this.form.date[1]).format(
          'YYYY-M-D HH:mm:ss'
        )
        this.form.starTime = moment(this.form.date[0]).format(
          'YYYY-M-D HH:mm:ss'
        )
        this.show = false
      }
    },

    giveCard(id) {
      if (this.venue === '') {
        this.$message({
          message: '请选择场馆！',
          type: 'warning'
        })
        return
      }
      if (this.venueCard === '') {
        this.$message({
          message: '请选择场馆会员卡！',
          type: 'warning'
        })
        return
      }
      if (this.form.cardType === '免费卡') {
        if (this.form.date != null && this.form.endTime !== '') {
          this.form.endTime = moment(this.form.date[1]).format(
            'YYYY-M-D HH:mm:ss'
          )
          this.form.starTime = moment(this.form.date[0]).format(
            'YYYY-M-D HH:mm:ss'
          )
        } else {
          this.$message({
            message: '请选择免费卡有效时间段！',
            type: 'warning'
          })
          return
        }
      }
      if (
        this.form.starTime === this.form.endTime &&
        this.form.cardType === '免费卡'
      ) {
        this.$message({
          message: '所选时间段无效！',
          type: 'warning'
        })
        return
      }
      this.dialogFormVisible = false
      createCard(
        this.memberId,
        this.form.cardType,
        this.form.venueType,
        this.form.platformId,
        this.form.venueId,
        this.form.starTime,
        this.form.endTime
      )
      this.memberId = cityOptions
    },

    getform(id) {
      // console.log("aaa", this.venueCard);
      // console.log(this.venueCardlist);
      for (let i = 0; i < this.venueCardlist.length; i++) {
        if (this.venueCard === this.venueCardlist[i].cardType) {
          this.cardType = this.venueCardlist[i].name
        }
      }
      // console.log(this.cardType, 11111111111111)
      this.form.cardType = this.cardType
      this.form.endTime = ''
      this.form.starTime = ''
      this.form.id = this.venueCard
      // this.findById(this.form.id)
    },

    /**
     * 查询场馆以及场馆对应会员卡
     */
    getid(id) {
      this.clearable = false
      this.venueCard = ''
      this.form.id = this.venueCard
      find(id).then(response => {
        this.form.venueId = response.venue.id
        this.form.venueType = response.venue.type
        this.form.platformId = 1
      })
      findVenueCard(this.venue).then(response => {
        this.venueCardlist = response.card
        this.venueCardlist.push({
          cardType: '5',
          name: '免费卡',
          platformId: 1
        })
      })
    },

    /**
     * 查询场馆会员卡信息
     */
    // findById(id) {
    //   findCard(id).then(response => {
    //     alert(11111)
    //     this.form.cardType = response.venueCard.name
    //     this.form.cardTypes = response.venueCard.cardType
    //     this.form.venueId = response.venueCard.venueId
    //     this.form.venueType = response.venueCard.venueType
    //     this.form.platformId = response.venueCard.platformId
    //   })
    // },

    /**
     * 搜索用户
     */
    handleSearch() {
      this.$refs.pagination.handleSearch()
    },

    /**
     * 编辑用户
     */
    handleEdit(id) {
      this.$router.push({ path: '/member/edit', query: { id: id }})
    },

    handleAddEdit(id) {
      this.$router.push({ path: '/member/addEdit', query: { id: id }})
    },
    /**
     * 创建用户
     */
    handleCreate() {
      this.$router.push({ path: '/member/add' })
    },

    /**
     * 更新用户状态
     */
    handleUpdateStatus(row, status) {
      updateStatus(row.id, status).then(response => {
        this.$refs.pagination.pageRequest()
      })
    },

    handleCheckAllChange(val) {
      var idList = this.$refs.pagination.data
      cityOptions.splice(0, cityOptions.length)
      if (val === true) {
        for (var i = 0; i < idList.length; i++) {
          cityOptions.push(idList[i].id)
          this.memberId = cityOptions
        }
      }
      if (val === false) {
        cityOptions.splice(0, cityOptions.length)
      }
      this.cityOptions = []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.memberId.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.memberId.length
    },

    /**
     * 删除用户
     */
    findCard() {
    },
     /**
     * 是否编辑权限
     */
    hasEditPermission() {
      return hasPermission('member:addEdit')
    },
     /**
     * 是否添加
     */
    hasAddPermission() {
      return hasPermission('member:add')
    }
  }
}
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>