<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 slot-scope="scope">
          <span>{{ scope.row.level }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图标">
        <template slot-scope="scope">
          <span>
            <img class="image" :src="scope.row.icon" />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="大图标">
        <template slot-scope="scope">
          <span>
            <img class="image" :src="scope.row.bigIcon" />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品图片">
        <template slot-scope="scope">
          <span>
            <img class="image" :src="scope.row.itemImg" />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="折扣">
        <template slot-scope="scope">
          <span>{{ scope.row.discount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="免费天数">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="佣金比例">
        <template slot-scope="scope">
          <span>{{ scope.row.extract }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分红比例">
        <template slot-scope="scope">
          <span>{{ scope.row.shareAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否分红">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShare"
            @change="changeIsInAppShare(scope.row)"
            active-color="#13ce66"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否在APP显示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            @change="changeIsInAppShow(scope.row)"
            active-color="#13ce66"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="有效期">
        <template slot-scope="scope">
          <span>{{ scope.row.endDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-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="佣金比例">
                <el-input-number
                  type="number"
                  :min="0"
                  :max="100"
                  :step="1"
                  :precision="0"
                  v-model="add.extract"
                  placeholder="佣金比例"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="分红比例">
                <el-input
                  type="number"
                  min="0"
                  v-model="add.shareAmount"
                  placeholder="请输入0-100，例：80%输入80"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="是否分红">
                <el-switch v-model="add.isShare" active-color="#13ce66">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="是否在APP显示" label-width="100">
                <el-switch v-model="add.isShow" active-color="#13ce66">
                </el-switch>
              </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";
import { itemPage } from "../../../api/vehicle/upkeep";

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");
    },
    //编辑
    changeIsInAppShare(row) {
      this.changeRowStatus(row);
    },
    changeIsInAppShow(row) {
      this.changeRowStatus(row);
    },
    changeRowStatus(row) {
      this.activeId = row.id;
      let membership = JSON.parse(JSON.stringify(row));
      membership.endDate = membership.endDate - 1;
      membership.id = this.activeId;
      membership.isShow = Number(membership.isShow);
      membership.isShare = Number(membership.isShare);
      update(membership).then((data) => {
        if (data.status == 200) {
          this.$notify.success({
            title: "操作成功",
            message: `success`,
          });
        } else {
          this.$notify.warning({
            title: "操作失败",
            message: `failed`,
          });
        }
        this.getList();
      });
    },
    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,
        extract: row.extract,
        endDate: row.endDate,
        icon: row.icon,
        bigIcon: row.bigIcon,
        itemImg: row.itemImg,
        shareAmount: row.shareAmount,
        isShow: Boolean(row.isShow),
        isShare: Boolean(row.isShare),
      };
      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.list.map((item) => {
          item.isShow = Boolean(item.isShow);
          item.isShare = Boolean(item.isShare);
        });
        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;
      membership.isShow = Number(membership.isShow);
      membership.isShare = Number(membership.isShare);
      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>


