<template>
  <div v-loading="pageloading" class="RecSettings">
      <div class="head-title">
        推荐设置
    </div>
    <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
        <el-card style="margin-top:10px" class="box-card">
            <div slot="header" class="clearfix">
                <span>商品详情页推荐设置</span>
            </div>
            <el-form-item label="推荐商品状态">
                <el-switch
                    v-model="addMsg.DetailRecommendStatus"
                    active-color="#409EFF"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="推荐商品显示数量">
                <el-input v-model="addMsg.DetailRecommendNum" style="width:635px" size="small">
                    <el-button slot="append">个</el-button>
                </el-input>
            </el-form-item>
        </el-card>
        <el-card shadow="never" style="margin-top:10px" class="box-card">
            <div slot="header" class="clearfix">
                <span>订单完成后推荐设置</span>
            </div>
            <el-form-item label="推荐商品状态">
                <el-switch
                    v-model="addMsg.OrderCompleteStatus"
                    active-color="#409EFF"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="自定义推荐商品">
                <el-switch
                    v-model="addMsg.IsOrderRecommend"
                    active-color="#409EFF"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
                <span>按商品列表排序显示前10件商品</span>
                <template v-if="addMsg.IsOrderRecommend==1">
                    <div>
                        <div v-for="(item,index) in addMsg.OrderProductList" :key="index" class="goods-item">
                            <div :style="{backgroundImage:'url(' +domainManager().ImageUrl+ item.Image + ')'}" class="goods-pic"></div>
                            <el-button @click="spliceImg(1,index)" class="deleteBtn" size="mini" type="danger" icon="el-icon-close" circle></el-button>
                        </div>
                    </div>
                    <div @click="toggleCheck(1)" class="goods-add">
                        <el-button icon="el-icon-plus"></el-button>
                    </div>
                </template>
            </el-form-item>
        </el-card>
        <el-card shadow="never" style="margin-top:10px" class="box-card">
            <div slot="header" class="clearfix">
                <span>评论后推荐设置</span>
            </div>
            <el-form-item label="推荐商品状态">
                <el-switch
                    v-model="addMsg.CommentRecommentStatus"
                    active-color="#409EFF"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="自定义推荐商品">
                <el-switch
                    v-model="addMsg.IsCommentRecommend"
                    active-color="#409EFF"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
                <span>按商品列表排序显示前10件商品</span>
                <template v-if="addMsg.IsCommentRecommend==1">
                    <div>
                        <div v-for="(item,index) in addMsg.CommentProductList" :key="index" class="goods-item">
                            <div :style="{backgroundImage:'url(' +domainManager().ImageUrl+ item.Image + ')'}" class="goods-pic"></div>
                            <el-button @click="spliceImg(2,index)" class="deleteBtn" size="mini" type="danger" icon="el-icon-close" circle></el-button>
                        </div>
                    </div>
                    <div @click="toggleCheck(2)" class="goods-add">
                        <el-button icon="el-icon-plus"></el-button>
                    </div>
                </template>
            </el-form-item>
        </el-card>
    </el-form>
    <div style="padding:20px;background:#fff;margin-top:10px">
        <el-button @click="Save" size="small" type="primary">保存</el-button>
    </div>
    <!-- 新增规格模板 -->
    <el-dialog title="商品" :visible.sync="ggmbDig" width="960px">
        <div class="searchInput" style="width:250px">
            <el-input style="display:inline-block;width:225px;height:30px"
            placeholder="请输入商品名称搜索"
            v-model="msg.Name"
            size="small"
            @clear="getList"
            clearable>
            </el-input>
            <span @click="getList" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <el-table
            height="450"
            ref="tableData"
            :data="tableData"
            v-loading="loading"
            @selection-change="selectionChange"
            style="width: 100%;margin:20px 0">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            prop="Id"
            width="100"
            label="ID">
            </el-table-column>
            <el-table-column
            prop="Name"
            label="名称">
            </el-table-column>
        </el-table>
        <el-pagination style="text-align:right"
        background
        @current-change="handleCurrentChange"
        :page-size="msg.pageSize"
        layout="prev, pager, next"
        :total="total">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="ggmbDig = false">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: "RecSettings",
    data(){
        return{
            pageloading:false,
            addMsg:{},
            rules:{},
            ggmbDig:false,
            msg:{
                pageIndex:1,
                pageSize:15,
                Name:'',
            },
            total:0,
            loading:false,
            tableData:[],
            commonList:[],
            listType:1,
        }
    },
    created(){
        this.getData();
        this.getList();
    },
    methods:{
        Save(){
            this.apipost("/api/product/SetProductRecommendSetInfo", this.addMsg, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    this.getData();
                    this.Success(res.data.message);
                }else{
                    this.Error(res.data.message);
                }
                
            })
        },
        spliceImg(num,index){
            if(num==1){
                this.addMsg.OrderProductList.splice(index,1)
            }else{
                this.addMsg.CommentProductList.splice(index,1)
            }
        },
        toggleCheck(num){
            this.listType=num;
            this.ggmbDig=true;
            this.$nextTick(()=>{
                this.$refs.tableData.clearSelection();
            })
            
        },
        submitForm(){
            this.commonList.forEach(item=>{
                item.Image=item.CoverImage;
            })
            let commonList=JSON.parse(JSON.stringify(this.commonList)) 
            if(this.listType==1){
                this.addMsg.OrderProductList=this.addMsg.OrderProductList.concat(commonList)
            }else{
                this.addMsg.CommentProductList=this.addMsg.CommentProductList.concat(commonList)
            }
            this.ggmbDig=false;
        },
        selectionChange(val){
            this.commonList=val;
            
        },
        getList(){
            this.loading=true;
            this.apipost("/api/product/GetProductGoodsDialogList", this.msg, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    this.total=res.data.data.count;
                    let pageData=res.data.data.pageData;
                    this.tableData=pageData;
                }
                
            })
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getData(){
            this.pageloading=true;
            this.apipost("/api/product/GetProductRecommendSetInfo",{}, res => {
                this.pageloading=false;
                if(res.data.resultCode==1){
                    this.addMsg=res.data.data;
                }else {
                    this.Error(res.data.message);
                }
            })
        },
    },
};
</script>

<style>
.RecSettings .goods-add .el-button {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
}
.RecSettings .el-button--mini.is-circle{
    padding:4px!important;
}
.RecSettings .deleteBtn {
    position: absolute;
    top: -6px;
    right: -6px;
}
.RecSettings .goods-item ,.RecSettings .goods-add{
    width: 50px;
    height: 50px;
    position: relative;
    border: 1px solid #e2e2e2;
    margin-right: 15px;
    margin-bottom: 15px;
    display: inline-block;
}
.RecSettings .goods-pic {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    background-repeat: no-repeat;
}
</style>
