<template>
  <div v-loading="loading" class="setMember usersList">
    <div class="head-title">
      <span @click="goUrl" class="blue point">会员等级</span> / 会员设置
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
        <el-form-item label="会员等级" prop="Grade">
          <el-select style="width:293px;" size="small" v-model="addMsg.Grade" placeholder="请选择">
            <el-option v-for="(item,index) in numList" 
            :key="index" :label="`等级${index+1}`" 
            :value="item.Id"
            :disabled="item.dis"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="等级名称" prop="Name">
          <el-input style="width:293px;" size="small" v-model="addMsg.Name" placeholder="请输入等级名称"></el-input>
        </el-form-item>
        <el-form-item class="discount commonLabel" label="折扣" prop="Discount">
          <el-tooltip class="item" effect="dark" content="请输入0.1~10之间的数字" placement="top-start">
            <i class="elzk el-tooltip el-icon-info"></i>
          </el-tooltip>
          <el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容"
            v-model="addMsg.Discount" class="input-with-select">
            <el-button slot="append">折</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="会员状态" prop="Enabled">
          <el-switch v-model="addMsg.Enabled" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item label="会员图标" prop="Icon">
          <el-button @click="openChangeDig('Icon')" size="small">选择文件</el-button>
          <div>
            <img v-if="addMsg.IconPath==''" style="width:80px;height:80px" src="../../assets/img/default.png" alt="">
            <img v-else style="width:80px;height:80px"
              :src="getIconLink(addMsg.IconPath)" alt="">
          </div>
        </el-form-item>
        <el-form-item label="会员背景色" prop="BackgroundImage">
          <el-button @click="openChangeDig('BackgroundImage')" size="small">选择文件</el-button>
          <div>
            <img v-if="addMsg.BackgroundImagePath==''" style="width:80px;height:80px" src="../../assets/img/default.png"
              alt="">
            <img v-else style="width:80px;height:80px"
              :src="getIconLink(addMsg.BackgroundImagePath)" alt="">
          </div>
        </el-form-item>
        <el-form-item label="累计金额自动升级">
          <el-switch v-model="addMsg.IsAutoUpGrade" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item class="commonLabel" label="升级条件" prop="UpGradeMoney">
          <el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容"
            v-model="addMsg.UpGradeMoney" class="input-with-select">
            <template slot="prepend">累计完成订单金额满</template>
            <el-button slot="append">元</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="会员是否可购买">
          <el-switch v-model="addMsg.IsMemberBuy" active-color="#409EFF" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
        <el-form-item class="commonLabel" label="购买价格" prop="MemberBuyMoney">
          <el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入购买价格"
            v-model="addMsg.MemberBuyMoney" class="input-with-select">
            <el-button slot="append">元</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="h会员权益(多条)">
          <div v-if="addMsg.EquityList.length>0" style="width:700px;">
            <el-table class="setTable" :data="addMsg.EquityList" border style="margin-bottom:20px">
              <el-table-column prop="ID" width="180px" label="权益标题">
                <template slot-scope="scope">
                  <el-input style="width:159px" size="small" v-model="scope.row.Title" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="address" width="180px" label="权益图标">
                <template slot-scope="scope">
                  <el-button @click="openChangeDig('qy',scope.$index)" size="small">选择图片</el-button>
                  <img v-if="scope.row.ImagePath==''" style="margin-left: 10px;width:50px;height:50px"
                    src="../../assets/img/default.png" alt="">
                  <img v-else style="margin-left: 10px;width:50px;height:50px"
                    :src="getIconLink(scope.row.ImagePath)" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="address" width="500px" label="权益内容">
                <template slot-scope="scope">
                  <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.Content">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="address" width="80px" label="操作">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                    <img @click.prevent="Delete(scope.$index)" style="width:32px;height:32px"
                      src="../../assets/img/userman/del.png" alt="">
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="point">
            <i class="el-icon-plus" style="font-weight: bolder;margin-left:5px;color:#409EFF"></i>
            <span @click="addEquityList" style="color: rgb(53, 53, 53);font-size: 14px;">新增权益</span>
          </div>
        </el-form-item>
        <el-form-item class="hygz" label="会员规则" prop="MemberSpecification">
          <div style="width:455px">
            <UE :defaultMsg="addMsg.MemberSpecification" :config="config" ref="ue"></UE>
          </div>
        </el-form-item>
      </el-form>

    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import UE from '@/components/global/UE.vue'
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg,
      UE
    },
    data() {
      return {
        loading: false,
        defaultMsg: '',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
        },
        currentPage4: 3,
        changeState: false,
        val: '',
        addMsg: {
          EquityList: [],
          Id: 0,
          Grade: '',
          Name: '',
          Discount: 0,
          Enabled: 2,
          Icon: '',
          BackgroundImage: '',
          IsAutoUpGrade: 1,
          UpGradeMoney: '',
          IsMemberBuy: 1,
          MemberBuyMoney: '',
          MemberSpecification: '',
          MallBaseId: this.getLocalStorage().MallBaseId,
        },
        dialogVisible: false,
        value: '',
        options: [],
        tableData: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
        },
        total: 0,
        rules: {
          Grade: [{
            required: true,
            message: '请选择会员等级',
            trigger: 'change'
          }],
          Name: [{
            required: true,
            message: '请输入等级名称',
            trigger: 'blur'
          }],
          Discount: [{
            required: true,
            message: '请输入折扣',
            trigger: 'blur'
          }],
          UpGradeMoney: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }],
          MemberBuyMoney: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }],
        },
        imgType: '',
        imgIndex: -1,
        GradeId: 0,
        gradeList:[],
        numList:[],
      };
    },
    created() {
      this.numList=[]
      for(let i=1;i<101;i++){
        let obj={
          Id:i,
          dis:false,
        }
        this.numList.push(obj)
      }
    },
    mounted() {
      this.$refs.ue.InitData();
      if (this.$route.query.GradeId) {
        this.GradeId = this.$route.query.GradeId;
        this.getData()
      }
      this.getgradeList();
      
    },
    methods: {
      input(){},
      openChangeDig(str, index) {
        this.imgType = str;
        this.changeState = true;
        this.imgIndex = index;
      },
      SelectId(msg) {
        this.changeState = false;
        if (this.imgType == 'Icon') {
          this.addMsg.Icon = msg.selectId;
          this.addMsg.IconPath = msg.url;
        }
        if (this.imgType == 'BackgroundImage') {
          this.addMsg.BackgroundImage = msg.selectId;
          this.addMsg.BackgroundImagePath = msg.url;
        }
        if (this.imgType == 'qy') {
          let imgIndex = this.imgIndex;
          this.addMsg.EquityList[imgIndex].Image = msg.selectId;
          this.addMsg.EquityList[imgIndex].ImagePath = msg.url;
        }
      },
      addEquityList() {
        let obj = {
          Id: 0,
          Title: '',
          Content: '',
          Image: '',
          ImagePath: '',
        };
        this.addMsg.EquityList.push(obj)
      },
      Delete(index) {
        this.addMsg.EquityList.splice(index, 1);
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let content = this.$refs.ue.getUEContent();
            this.addMsg.MemberSpecification = content;
            let cmd = "/api/user/SetMemberGradeInfo";
            this.apipost(cmd, this.addMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.goUrl();

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },

      goUrl() {
        this.$router.push({
          name: 'MembershipGrade',
          query: {
            blank: "y"
          }
        });
      },
      getData() {
        this.loading = true;
        this.apipost("/api/user/GetMemberGradeInfo", {
          GradeId: this.GradeId
        }, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.addMsg.MallBaseId = this.getLocalStorage().MallBaseId;
            this.defaultMsg=this.addMsg.MemberSpecification;
          }

        })
      },
      getgradeList(){
        this.apipost("/api/user/GetMemberGrade", {}, res => {
          if (res.data.resultCode == 1) {
            this.gradeList = res.data.data;
            
            this.numList.forEach(item=>{
              this.gradeList.forEach(val=>{
                if(item.Id==val){
                  item.dis=true;
                }
              })
            })
            
          }

        })
      },

    },
  };

</script>
<style>
  .setMember .hygz .el-form-item__content {
    line-height: inherit !important;
  }

  .setMember .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .setMember .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .setMember .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .setMember .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .setMember .el-form-item {
    position: relative;
  }

  .usersList .blue {
    color: #409EFF;

  }

  .usersList .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>
