
<template>
  <div class="setMember usersList">
    <div class="head-title">
        <span @click="goUrl" class="blue">会员等级</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="input" 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="textarea">
                                    </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">
      <el-row style="border: 1px solid rgb(227, 227, 227);">
          <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
               <el-button style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组</el-button>
               <div style="margin:20px 0">    
                    <el-input v-model="val" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
               </div>
               <div class="el-scrollbar" style="height: 450px; width: 100%;">
                   <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
                       <div class="el-scrollbar__view">
                            <li  class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
                               <i class="el-icon-tickets"></i> 
                               <span>全部</span>
                            </li> 
                            <li v-for="item in 9" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
                                <div flex="dir:left box:last">
                                    <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
                                        <i class="el-icon-tickets"></i> 
                                        <span>羊肚菌</span>
                                    </el-col> 
                                    <el-col class="blue" :span="6">
                                        <span>编辑</span> | <span>删除</span>
                                    </el-col>
                                </div>
                            </li>
                        </div>
                    </div>
                </div>
          </el-col>
          <el-col :span="18">
                <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
                    <el-input size="small" style="width:250px" placeholder="请输入内容" v-model="val">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div class="basefix app-attachment-list">
                    <div class="app-attachment-item app-attachment-upload">
                        <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
                            <i class="el-icon-upload"></i> 
                            <input type="file" accept="image/*" multiple="multiple" style="display: none;">
                        </div>
                    </div>
                    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                        <div class="el-tooltip item app-attachment-item" >
                            <img src="https://cdnimg.iotweixin.com/uploads/mall1285/20200422/58aac71950e2d86e6d7138484a3f7f7e.jpg" class="app-attachment-img" style="width: 100px; height: 100px;"> 
                            <div class="app-attachment-name">微信图片_20200422125658.jpg</div>
                        </div> 
                    </el-tooltip>
                    
                </div>
                <div>
                    <el-pagination style="text-align:right"
                    background
                    :current-page="currentPage4"
                    @current-change="handleCurrentChange"
                    :page-size="msg.pageSize"
                    layout="prev, pager, next,jumper"
                    :total="total">
                    </el-pagination>
                </div>
          </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="changeState = false">选定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    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 .app-attachment-name {
    color: #666666;
    margin-top: 5px;
    font-size: 13px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.setMember .app-attachment-item .app-attachment-img {
    display: block;
}
.setMember .app-attachment-upload i {
    font-size: 30px;
    color: #909399;
}
.setMember .app-attachment-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 120px;
    height: 140px;
    margin: 7.5px;
    text-align: center;
    padding: 10px 10px 0;
}
.setMember .app-attachment-upload {
    box-shadow: none;
    border: 1px dashed #b2b6bd;
    height: 100px;
    width: 100px;
    margin: 17.5px;
    padding: 0;
}
.setMember .app-attachment-list{
    padding: 5px;
}
.setMember .appendInput .el-input__inner{
    border-right: none;

}
.setMember .appendInput .el-input-group__append{
    background-color: #fff!important;
    border-left: none;
    padding: 0 15px;
}
.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>
