
<template>
  <div 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="name">
                    <el-select style="width:293px;" size="small" v-model="addMsg.name" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="等级名称" prop="name">
                    <el-input style="width:293px;" size="small" v-model="addMsg.name"></el-input>
                </el-form-item>
                <el-form-item class="discount commonLabel" label="折扣" prop="name">
                    <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.name" class="input-with-select">
                        <el-button slot="append">折</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="会员状态" prop="name">
                    <el-switch
                        v-model="addMsg.name"
                        active-color="#409EFF"
                        active-value="100"
                        inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="会员图标" prop="name">
                    <el-button @click="openChangeDig" size="small">选择文件</el-button>
                    <div><img style="width:80px;height:80px" src="../../assets/img/default.png" alt=""></div>
                </el-form-item>
                <el-form-item label="会员背景色" prop="name">
                    <el-button @click="openChangeDig" size="small">选择文件</el-button>
                    <div><img style="width:80px;height:80px" src="../../assets/img/default.png" alt=""></div>
                </el-form-item>
                <el-form-item label="累计金额自动升级">
                    <el-switch
                        v-model="addMsg.name"
                        active-color="#409EFF"
                        active-value="100"
                        inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item class="commonLabel" label="升级条件" prop="name">
                    <el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容" v-model="addMsg.name" 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.name"
                        active-color="#409EFF"
                        active-value="100"
                        inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item class="commonLabel" label="购买价格" prop="name">
                    <el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入购买价格" v-model="addMsg.name" class="input-with-select">
                        <el-button slot="append">元</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="h会员权益(多条)">
                    <div style="width:700px;">
                        <el-table class="setTable"
                            :data="tableData"
                            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="val" placeholder="请输入内容"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            width="180px"
                            label="权益图标">
                                <template slot-scope="scope">
                                    <el-button @click="openChangeDig" size="small">选择图片</el-button>
                                    <img style="margin-left: 10px;width:50px;height:50px" src="../../assets/img/default.png" 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="val">
                                    </el-input>
                                </template>
                            
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            width="80px"
                            label="操作">
                                <template>
                                    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                        <img style="width:32px;height:32px" src="../../assets/img/userman/del.png" alt="">
                                    </el-tooltip>
                                </template>    
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <i class="el-icon-plus" style="font-weight: bolder;margin-left:5px;color:#409EFF"></i>
                        <span style="color: rgb(53, 53, 53);font-size: 14px;">新增权益</span>
                    </div>
                </el-form-item>
                <el-form-item label="会员规则" prop="name">
                    
                </el-form-item>
            </el-form> 
            
    </div>
    <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="dialogVisible = false">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
        <ChooseImg></ChooseImg>   
    </el-dialog>
  </div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        currentPage4:3,
        changeState:false,
        val:'',
        addMsg:{},
        dialogVisible:false,
        value:'',
        options:[],
        tableData:[
            {ID:'111'}
        ],
        msg:{
            pageIndex:1,
            pageSize:15,
        },
        total:0,
        rules: {
                name: [
                    { required: true, message: '新手机号', trigger: 'blur' }
                ],
            },

        
      };
    },
    created() {

    },
    methods: {
        openChangeDig(){
            this.changeState=true;
        },
        goUrl(){
            this.$router.push({
                name: 'MembershipGrade',
                query: {
                    blank: "y"
                }
            });
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getList(){

        },

    },
    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>
