<template>
  <div class="app-container calendar-list-container">
    <div>
      <el-button class="filter-item" style="margin-bottom: 10px;" @click="newMembershipGrade"
                 type="primary" icon="edit">添加会员等级
      </el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
              style="width: 100%">
      <el-table-column width="205" align="center" label="等级序号">
        <template scope="scope">
          <span>{{scope.row.level}}</span>
        </template>
      </el-table-column>
      <el-table-column width="205" align="center" label="名称">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="205" align="center" label="图标">
        <template scope="scope">
          <span> <img class="image" :src="scope.row.icon"/></span>
        </template>
      </el-table-column>
      <el-table-column width="205" align="center" label="折扣">
        <template scope="scope">
          <span>{{scope.row.discount}}</span>
        </template>
      </el-table-column>
      <el-table-column width="205" align="center" label="免费天数">
        <template scope="scope">
          <span>{{scope.row.number}}</span>
        </template>
      </el-table-column>
      <el-table-column width="205" align="center" label="价格">
        <template scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column width="205" align="center" label="有效期">
        <template scope="scope">
          <span>{{scope.row.endDate}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="212">
        <template scope="scope">
          <el-button size="small" type="danger" @click="delMembership(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import {getToken} from 'src/utils/auth';

  export default {
    name: 'membershipGrade',
    data() {
      return {

      }
    },
    created() {
      this.getList();
    }
    ,
    computed: {
      ...
        mapGetters([
          'elements'
        ]),
      /**
       * 获取token
       */
      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    },
    methods: {
      getList() {
        getMembers().then(
          res => {
            for (let dataKey of res.data) {
              if (dataKey.endDate == 0) {
                dataKey.endDate = '半年'
              } else {
                dataKey.endDate = dataKey.endDate ? this.year[dataKey.endDate] : ''
              }

            }
            this.list = res.data
            this.listLoading = false;
          }
        )
      },
      /**
       * 删除会员等级
       * */
      delMembership(row) {
        delMembershipGrade(row.id).then(res => {

          if (res.rel) {
            this.$notify.success({
              title: '成功',
              message: `success`
            })
          } else {
            this.$notify.warning({
              title: '失败',
              message: `failed`
            })
          }
          this.getList()

        })
      },
      /**
       * 关闭清除
       * */
      cancelSetMemberArea(refName) {
        this.addMembershipGrade = false
        if (this.$refs[refName]) {
          this.$refs[refName].resetFields()
        }
      },
      /**
       * 显示添加窗
       * */
      newMembershipGrade() {
        this.addMembershipGrade = true
      },
      /**
       * 新建会员等级
       * **/
      save(refName) {
        let membership = JSON.parse(JSON.stringify(this.add))
        membership.endDate = membership.endDate - 1
        addMembershipGrade(membership).then(
          res => {

            if (!res.rel) {
              this.$notify.success({
                title: '成功',
                message: `success`
              })
            } else {
              this.$notify.warning({
                title: '失败',
                message: `failed`
              })
            }
            this.getList()
            if (this.$refs[refName]) {
              this.$refs[refName].resetFields()
            }
            this.addMembershipGrade = false
          })
      }
    }
  }
</script>
<style>

  .image {
    width: 50px;
    height: 50px;
  }

  .mGrade .el-dialog--small {
    width: 500px;
  }
</style>
