<template>
  <div class="app-container calendar-list-container">
    <div>
      <el-button class="filter-item" style="margin-bottom: 10px;" @click="newMembershipGrade"
                 type="primary" icon="edit" v-if="memberManagement_btn_add">添加会员等级
      </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  align="center" label="有效期">
        <template scope="scope">
          <span>{{scope.row.endDate}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="65" fixed="right">
        <template scope="scope">
          <el-button size="small" class="el-button el-button--text el-button--small" style="color:red" @click="delMembership(scope.row)" v-if="memberManagement_btn_del">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <div>
      <el-dialog title="增加会员等级" :visible.sync="addMembershipGrade" class="mGrade">
        <el-form :model="add" :rules="rules" ref="membershipGrade" label-width="100px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="会员等级名称" prop="name">
                <el-input type="text" v-model="add.name"
                          placeholder="请填写会员等级名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="等级" prop="level">
                <el-input type="text" v-model="add.level" 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="discount">
                <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="number">
                <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="price">
                <el-input type="text" v-model="add.price" placeholder="请填价格"></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  @click="cancelSetMemberArea('membershipGrade')">取消</el-button>
          <el-button type="primary" @click="save('membershipGrade')">确 定</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 {
        BASE_API: process.env.BASE_API,
        list: [],
        listLoading: true,
        tableKey: 0,
        addMembershipGrade: false,
        add: {
          level: undefined,
          name: undefined,
          discount: undefined,
          number: undefined,
          price: undefined,
          endDate: undefined,
          icon: undefined
        },
        endDatelist: [
          {id: 0, name: '永久'},
          {id: 1, name: '半年'},
          {id: 2, name: '一年'},
          {id: 3, name: '二年'},
          {id: 4, name: '三年'},
          {id: 5, name: '四年'},
          {id: 6, name: '五年'},
        ],
        year: {
          '-1': '永久',
          '0': '半年',
          '1': '一年',
          '2': '二年',
          '3': '三年',
          '4': '四年',
          '5': '五年',
        },
        rules: {
          name: [
            {
              type: 'string',
              required: true,
              message: '请输入消息内容',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 50,
              message: '长度小于 50个字符',
              trigger: 'blur'
            }
          ],
          level: [
            {
              required: true,
              message: '请输入消息内容',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 20,
              message: '长度小于 20个字符',
              trigger: 'blur'
            }
          ]
        },
        memberManagement_btn_add: false,//添加
        memberManagement_btn_del: false,//删除
      }
    },
    created() {
      this.memberManagement_btn_add=this.elements['memberManagement:btn_add'];//添加
      this.memberManagement_btn_del=this.elements['memberManagement:btn_del'];//删除
      this.getList();
    }
    ,
    computed: {
      ...
        mapGetters([
          'elements'
        ]),
      /**
       * 获取token
       */
      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    },
    methods: {
      getList() {
        this.listLoading= true
        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
          this.$refs[refName].resetFields()
        this.add={}
        console.log(JSON.stringify(this.add))
      },
      /**
       * 显示添加窗
       * */
      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
          })
      },
      /**
       * 封面图上传
       * **/
      handleAvatarSuccess(res, file) {


        this.add.icon = res.data;
      },
    }
  }
</script>
<style>
  textarea {
    display: none;
  }

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

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


