<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="超级会员列表" name="first" />
      <el-tab-pane label="赠送超级会员" name="second" />
      <template v-if="activeName === 'first'">
        <div class="filter-container">
          <div class="filter-control">
            <span>机构名称:</span>
            <el-input
              v-model="listQuery.clubName"
              placeholder="机构名称"
              clearable
              @keyup.enter.native="getList"
              @clear="getList"
            />
          </div>
          <div class="filter-control">
            <span>联系人:</span>
            <el-input
              v-model="listQuery.linkMan"
              placeholder="联系人"
              clearable
              @keyup.enter.native="getList"
              @clear="getList"
            />
          </div>
          <div class="filter-control">
            <span>手机号:</span>
            <el-input
              v-model="listQuery.mobile"
              placeholder="手机号"
              clearable
              style="width:160px;"
              @keyup.enter.native="getList"
              @clear="getList"
            />
          </div>
          <div class="filter-control">
            <span>购买套餐:</span>
            <el-select v-model="listQuery.packageId" style="width:120px;" clearable @change="getList">
              <el-option value="" label="请选择" />
              <el-option :value="0" label="系统赠送" />
              <el-option :value="1" label="1个月" />
              <el-option :value="1" label="3个月" />
              <el-option :value="1" label="12个月" />
            </el-select>
          </div>
          <div class="filter-control">
            <span>会员状态:</span>
            <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
              <el-option value="" label="请选择" />
              <el-option value="" label="全部" />
              <el-option :value="1" label="已生效" />
              <el-option :value="2" label="已过期" />
            </el-select>
          </div><br>
          <div class="filter-control">
            <span>购买时间:</span>
            <el-date-picker
              v-model="time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="getList"
            />
          </div>
          <div class="filter-control">
            <span>到期时间:</span>
            <el-date-picker
              v-model="time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerEndOptions"
              @change="getList"
            />
          </div>
          <div class="filter-control">
            <el-button type="primary" @click="getList">查询</el-button>
          </div>
        </div>
        <el-table v-loading="isLoading" :data="tableData" height="550" border style="width: 100%">
          <el-table-column prop="clubName" label="机构名称" width="180" />
          <el-table-column prop="linkMan" label="联系人" width="180" />
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="status" label="会员状态">
            <template slot-scope="{ row }">
              <span v-if="row.status === '1'" class="el-span-status">
                已生效
              </span>
              <span v-else-if="row.status === '2'" class="el-span-notStatus">
                已过期
              </span>
              <span v-else class="el-span-notEffective">
                暂未生效
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="75">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="handleTagsList(row)">购买记录</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 页码 -->
        <pagination
          :total="total"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="20"
          :page.sync="listQuery.pageNum"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </template>
      <template v-else>
        <div class="filter-container">
          <div class="filter-control">
            <el-form :model="form" label-width="120px">
              <el-form-item label="机构" :hidden="!hiddenItem">
                <el-button type="text" size="mini" @click="getclubList()">请选择机构</el-button>
              </el-form-item>
              <el-form-item label="机构" :hidden="hiddenItem">
                <el-table :data="clubData" border>
                  <el-table-column prop="clubId" label="机构Id" />
                  <el-table-column prop="name" label="机构名称" width="150px" />
                  <el-table-column prop="linkMan" label="联系人" />
                  <el-table-column prop="contractMobile" label="手机号" width="120px" />
                  <el-table-column label="操作">
                    <template slot-scope="{ row }">
                      <el-button type="text" @click="deleteClub(row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item label="赠送会员">
                <el-input v-model="form.month" size="mini" style="width: 150px">
                  <template slot="append">个月</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="save()">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
    </el-tabs>
    <!-- 机构弹框 -->
    <el-dialog title="选择机构" :visible.sync="dialogTableVisible" width="50%">
      <div class="filter-container">
        <div class="filter-control">
          <span>标签:</span>
          <el-input
            v-model="clubForm.clubId"
            placeholder="机构Id"
            clearable
          />
        </div>
        <div class="filter-control">
          <span>机构名称:</span>
          <el-input
            v-model="clubForm.clubId"
            placeholder="机构名称"
            clearable
          />
        </div>
        <div class="filter-control">
          <span>机构简称:</span>
          <el-input
            v-model="clubForm.clubId"
            placeholder="机构简称"
            clearable
          />
        </div>
        <div class="filter-control">
          <el-button type="primary">搜索</el-button>
        </div>
      </div>
      <el-table ref="table" :data="clubTableData" height="350px" @select="handleSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column property="clubId" label="机构Id" width="150" />
        <el-table-column property="name" label="机构名称" width="150" />
        <el-table-column property="shortName" label="机构简称" width="200" />
        <el-table-column property="linkMan" label="联系人" />
        <el-table-column property="contractMobile" label="手机号" />
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="pushClub()">确定</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
      </div>
      <!-- 页码 -->
      <pagination
        :total="clubTotal"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="20"
        :page.sync="clubForm.pageNum"
        :limit.sync="clubForm.pageSize"
        @pagination="getclubList"
      />
    </el-dialog>
  </div>
</template>

<script>

import { fetchMemberList, fetchClubList, saveSvip } from '@/api/member/manage/manage'

const defaultListQuery = {
  clubName: '', // 机构名称
  linkMan: '', // 联系人
  mobile: '', // 手机号
  packageId: '', // 购买套餐
  status: '', // 会员状态
  startPayTime: '', // 购买开始时间
  endPayTime: '', // 购买结束时间
  startEndTime: '', //  到期开始时间
  endEndTime: '', // 到期结束时间
  pageNum: 1,
  pageSize: 20
}
export default {
  name: 'MemberList',
  data() {
    const pickerOptions = {
      shortcuts: [
        {
          text: '近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }
      ]
    }
    const pickerEndOptions = {
      shortcuts: [
        {
          text: '近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }
      ]
    }
    return {
      isLoading: true,
      activeName: 'first',
      pickerOptions,
      pickerEndOptions,
      time: '',
      listQuery: Object.assign({}, defaultListQuery),
      // 会员列表总数
      total: 0,
      tableData: [],
      form: {
        clubId: 0,
        userId: 0,
        contractMobile: 0,
        month: 0
      },
      dialogTableVisible: false,
      // 选择机构总数
      clubTotal: 0,
      clubForm: {
        clubId: 0,
        clubName: '',
        sname: '',
        pageNum: 1,
        pageSize: 20
      },
      // 机构选择
      radio: 1,
      hiddenItem: true,
      clubTableData: [],
      // 选择机构
      rows: [],
      // 机构数据
      clubData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 选择机构
    handleSelect(selection, row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
      this.rows = row
      console.log('row', this.rows)
    },
    // 会员列表数据
    async getList() {
      this.isLoading = true
      const res = await fetchMemberList(this.listQuery)
      this.tableData = res.data.results
      this.total = res.data.totalRecord
      this.isLoading = false
    },
    async getclubList() {
      this.dialogTableVisible = true
      const res = await fetchClubList(this.clubForm)
      this.clubTableData = res.data.results
      this.clubTotal = res.data.totalRecord
    },
    pushClub() {
      this.clubData.push(this.rows)
      this.dialogTableVisible = false
      this.row = []
      this.hiddenItem = false
      console.log(this.clubData)
    },
    // 清除机构
    deleteClub(row) {
      this.clubData = []
      this.hiddenItem = true
    },
    async save() {
      this.form.clubId = this.clubData[0].clubId
      this.form.userId = this.clubData[0].userId
      this.form.contractMobile = this.clubData[0].contractMobile
      const res = await saveSvip(this.form)
      if (res.code === 1) {
        this.deleteClub()
      }
    },
    handleTagsList(row) {
      this.$router.push({ path: '/member/member/record-list', query: { clubId: row.clubId, userId: row.userId }})
    }
  }
}

</script>

<style>
.el-span-status {
  color: rgb(16, 230, 8);
}
.el-span-notStatus {
  color: rgb(245, 13, 13);
}
.el-span-notEffective {
  color: rgb(245, 13, 13);
}
</style>
