<template>
  <div class="app-container calendar-list-container">
    <div>
      <el-button class="filter-item" style="margin-left: 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="membershipGrade(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <div>
      <el-dialog title="增加会员等级" :visible.sync="addMembershipGrade" class="member">
        <el-form :model="add" ref="userMembership" label-width="100px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="会员等级名称" prop="buyCount">
                <el-input type="text"  v-model="add.name"
                          placeholder="请填写会员等级名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="有效期" prop="endDate">
                  <el-select class="filter-item" v-model="add.endDate" placeholder="请选择有效期">
                    <el-option v-for="(val, key, index) in endDatelist " :key="val.id" :label="val.name"
                               :value="val.id"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="折扣" prop="buyCount">
                <el-input type="text"  v-model="add.discount"
                          placeholder="请填写折扣"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="免费天数" prop="totalNumber">
                <el-input type="text" v-model="add.number" placeholder="请填免费天数"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="价格" prop="rentFreeDays" placeholder="请填价格">
                <el-input type="text" v-model="add.price"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="价格" prop="rentFreeDays" placeholder="请填价格">
                <el-input type="text" v-model="add.price"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="图标" :style="{display:'block'}">
              <el-upload
                class="upload-demo"
                :headers="getHeaderWithToken"
                :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                list-type="picture">
                <img v-if="$utils.isString(add.icon) && !$utils.isEmpty(add.icon)" :src="add.icon" style="width:300px;max-height:300px;">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
              </el-upload>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancelSetMemberArea('userMembership')">取消</el-button>
          <el-button type="primary" @click="saveMember('userMembership')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import {getMembers, delMembershipGrade,addMembershipGrade} from 'src/api/admin/member/index'
  import {mapGetters} from 'vuex';
  import {getToken} from 'src/utils/auth';
  export default {
    name: 'membershipGrade',
    data() {
      return {
        list: [],
        listLoading: true,
        tableKey: 0,
        addMembershipGrade: false,
        BASE_API: process.env.BASE_API,
        add: {
          level: undefined,
          name: undefined,
          discount: undefined,
          number: undefined,
          price: undefined,
          endDate: undefined,
          icon:undefined
        },
        endDatelist:[
          // {id:-1,name:'永久'},
          {id:0,name:'半年'},
          {id:1,name:'一年'},
          {id:2,name:'二年'},
          {id:3,name:'三年'},
          {id:4,name:'四年'},
          {id:5,name:'五年'},
        ]
      }
    },
    created() {
      this.getList();
    }
    ,
    computed: {
      ...
        mapGetters([
          'elements'
        ]),
      /**
       * 获取token
       */
      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    }
    ,
    methods: {
      getList() {
        getMembers().then(
          res => {
            res.data.endDate = (res.data.endDate == '-1') ? '永久' : res.data.endDate
            this.list = res.data
            this.listLoading = false;
          }
        )
      },
      /**
       * 删除会员等级
       * */
      delete(row) {
        delMembershipGrade(row.id).then(res => {

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

        })
      },
      newMembershipGrade(){
        this.addMembershipGrade=true
      },
      /**
       * 新建会员等级
       * **/
      save(){
        addMembershipGrade(this.add).then(
          res => {
            if (res.rel) {
              this.$notify.success({
                title: '成功',
                message: `success`
              })
            } else {
              this.$notify.warning({
                title: '失败',
                message: `failed`
              })
            }
            this.getList()

          }
        )
      },
      /**
       * 封面图上传
       * **/
      handleAvatarSuccess(res, file){
        this.add.icon = res.data;
      },
    }
  }
</script>
<style>
  textarea{
    display: none;
  }
  .image {
    width: 50px;
    height: 50px;
  }

</style>


