
<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 100"
                        :key="index"
                        :label="`等级${index+1}`"
                        :value="index+1">
                        </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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+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="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+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 label="会员规则" prop="MemberSpecification">
                    
                </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 ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        icon1:'',
        icon2:'',
        icon3:'',
        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:[
            {ID:'111'}
        ],
        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,
      };
    },
    created() {
        if(this.$route.query.GradeId){
            this.GradeId=this.$route.query.GradeId;
            this.getData()
        }
    },
    methods: {
        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 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
                }
                
            })
        },

    },
    mounted() {
      
    }
  };

</script>
<style>

.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>
