<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 align="center" label="等级序号">
        <template scope="scope">
          <span>{{scope.row.level}}</span>
        </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>
            <img class="image" :src="scope.row.icon" />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="大图标">
        <template scope="scope">
          <span>
            <img class="image" :src="scope.row.bigIcon" />
          </span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="商品图片">
        <template scope="scope">
          <span>
            <img class="image" :src="scope.row.itemImg" />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="折扣">
        <template scope="scope">
          <span>{{scope.row.discount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="免费天数">
        <template scope="scope">
          <span>{{scope.row.number}}</span>
        </template>
      </el-table-column>
      <el-table-column 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="操作" 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>
          <el-button
            size="small"
            class="el-button el-button--text el-button--small"
            @click="compileShip(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-dialog :title="vipTitle" :visible.sync="addMembershipGrade" class="mGrade" @close='cllsePop'>
        <el-form :model="add" :rules="rules" ref="membershipGrade" label-width="110px">
          <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="number"
                  min="0"
                  v-model="add.level"
                  placeholder="请填会员等级"
                  v-enterNumber
                  :disabled="forbid"
                ></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="请选择有效期"
                  :disabled="forbid"
                >
                  <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="number"
                  min="0"
                  v-model="add.discount"
                  placeholder="请填写折扣"
                  :disabled="forbid"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="免费天数" prop="number">
                <el-input
                  type="number"
                  min="0"
                  v-model="add.number"
                  placeholder="请填免费天数"
                  v-enterNumber
                  :disabled="forbid"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="价格" prop="price">
                <el-input
                  type="number"
                  min="0"
                  v-model="add.price"
                  placeholder="请填价格"
                  :disabled="forbid"
                ></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-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="handleAvatarSuccessBig"
                list-type="picture"
              >
                <img
                  v-if="$utils.isString(add.bigIcon) && !$utils.isEmpty(add.bigIcon)"
                  :src="add.bigIcon"
                  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-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="product"
                list-type="picture"
              >
                <img
                  v-if="$utils.isString(add.itemImg) && !$utils.isEmpty(add.itemImg)"
                  :src="add.itemImg"
                  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,
  update
} from "src/api/admin/member/index";
import { mapGetters } from "vuex";
import { getToken } from "src/utils/auth";

export default {
  name: "membershipGrade",
  data() {
    return {
      forbid: false,
      vipTitle: "增加会员等级",
      BASE_API: process.env.BASE_API,
      list: [],
      listLoading: true,
      tableKey: 0,
      addMembershipGrade: false,
      activeId:'',
      add: {
        level: undefined,
        name: undefined,
        discount: undefined,
        number: undefined,
        price: undefined,
        endDate: undefined,
        icon: undefined,
        bigIcon: null,
        itemImg:null
      },
      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: {
    cllsePop(){
      // console.log('0000');
      this.cancelSetMemberArea('membershipGrade')
    },
    //编辑
    compileShip(row) {
      console.log(row);
      this.vipTitle = "编辑会员等级";
      this.forbid = true;
      this.addMembershipGrade = true;
      this.add = {
        level: row.level,
        name: row.name,
        discount: row.discount,
        number: row.number,
        price: row.price,
        endDate: row.endDate,
        icon: row.icon,
        bigIcon: row.bigIcon,
        itemImg:row.itemImg
      };
      this.activeId = row.id
    },
    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 = {};
    },
    /**
     * 显示添加窗
     * */
    newMembershipGrade() {
      this.forbid = false;
      this.addMembershipGrade = true;
    },
    /**
     * 新建会员等级
     * **/
    save(refName) {
      let membership = JSON.parse(JSON.stringify(this.add));
      membership.endDate = membership.endDate - 1;
      membership.id = this.activeId
      if (this.vipTitle == "增加会员等级") {
        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;
        });
      } else {
        update(membership).then(data => {
          if (data.status == 200) {
            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;
    },

    //大图标
    handleAvatarSuccessBig(res) {
      this.add.bigIcon = res.data;
    },
    //商品展示
    product(res) {
      this.add.itemImg = res.data;
    }
  }
};
</script>
<style>
textarea {
  display: none;
}

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

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


