<template>
    <div class="app-content">
        <div class="form-wrap">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
                <el-form-item label="名称" prop="goodsName">
                    <el-input v-model="ruleForm.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="已售" prop="sold">
                    <el-input v-model="ruleForm.sold"></el-input>
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                    <el-input v-model="ruleForm.stock"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="categoryIdList">
                    <el-checkbox-group v-model="ruleForm.categoryIdList">
                        <el-checkbox
                                border
                                v-for="(item, index) in categoryData"
                                :label="item.id"
                                :key="index"
                                size="small"
                                @change="selChangeDialogFn($event, item)"
                        >{{ item.categoryName }}
                        </el-checkbox
                        >
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="款式" prop="goodsStyle">
                    <el-checkbox-group v-model="ruleForm.goodsStyle" @change="changeStyleFn">
                        <el-checkbox label="1" name="goodsStyle" true-label="1" false-label="0">
                            <span>多款式</span>
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="ruleForm.price"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="shopImg">
                    <div class="list-wrap">
                        <!--<cl-upload v-model="ruleForm.shopImg"  :props="{multiple:true}"></cl-upload>-->

                        <elxUpload
                                :limit="4"
                                :fileList.sync="fileList_show"
                                @success="fromToData"
                                @handleRemove="fromToData"
                        ></elxUpload>
                    </div>
                    <div>
                        <el-button type="primary" size="small" @click="imgStoreModal = true"
                        >从图库选择
                        </el-button
                        >
                    </div>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt/>
                    </el-dialog>
                </el-form-item>
                <el-form-item label="商品简介" prop="content">
                    <cl-editor-quill v-model="ruleForm.content" @load="editor"></cl-editor-quill>
                    <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
                </el-form-item>
                <el-form-item label="节假日自动涨价 ">
                    <el-checkbox-group v-model="ruleForm.autoRise">
                        <el-checkbox label="1" name="autoRise" true-label="1" false-label="0">
                            <span>需要</span>
                        </el-checkbox>
                        <el-popover
                                placement="top"
                                width="100"
                                trigger="hover"
                                v-model="autoPricePopover"
                        >
                            <p>特定节日商品会自动进行涨价 无需手动调价</p>
                            <div style="text-align: right; margin-top: 10px">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="autoPricePopover = false"
                                >涨价设置
                                </el-button
                                >
                            </div>
                            <el-button
                                    type="text"
                                    icon="el-icon-question"
                                    slot="reference"
                            ></el-button>
                            <!-- <el-button slot="reference">删除</el-button> -->
                        </el-popover>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="配送方式">
                    <el-checkbox-group v-model="ruleForm.needSend">
                        <el-checkbox label="1" name="type" true-label="1" false-label="0">
                            <span>到店自提</span>
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="运费">
                    <el-radio-group v-model="ruleForm.freightType">
                        <el-radio label="0">
                            <span>按距离收费</span>
                        </el-radio>
                        <el-popover
                                placement="top"
                                width="100"
                                trigger="hover"
                                v-model="chargePopover"
                        >
                            <p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
                            <div style="text-align: right; margin-top: 10px">
                                <el-button size="mini" type="primary" @click="chargePopover = false"
                                >修改
                                </el-button
                                >
                            </div>
                            <el-button
                                    type="text"
                                    icon="el-icon-question"
                                    slot="reference"
                                    class="question-btn"
                            ></el-button>
                            <!-- <el-button slot="reference">删除</el-button> -->
                        </el-popover>
                        <el-radio label="1">
                            <span>免运费</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm',1)">上架出售</el-button>
                    <el-button @click="submitForm('ruleForm',0)">加入仓库</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 从图库选择 -->
        <el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="600px">
            <div class="store-modal-content">
                <div class="select-wrap flex-center-start">
                    <div style="width: 80px">选择分类</div>
                    <el-select
                            v-model="imgStoreVal"
                            placeholder="选择分类"
                            size="mini"
                            :clearable="true"
                            style="width: 200px"
                            @change="selChangeFn"
                    >
                        <el-option
                                v-for="(item, index) in categoryData"
                                :key="index"
                                :label="item.categoryName"
                                :value="item.id"
                        >{{ item.categoryName }}
                        </el-option
                        >
                    </el-select>
                    <!-- <div style="width: 80px">选择分类</div>
                    <el-select
                        v-model="imgStoreVal"
                        size="small"
                        placeholder="请选择"
                        style="width: 200px"
                    >
                        <el-option
                            v-for="item in imgStoreOpt"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select> -->
                </div>
                <div class="img-store-wrap">
                    <el-checkbox-group v-model="imgStoreArr" class="list-store" @change="setCheckImg">
                        <div
                                class="list-checkbox"
                                v-for="(item, index) in imgStoreData"
                                :key="index">
                            <el-checkbox :label="item.imgUrl+''">
                                <div class="list-img">
                                    <img :src="item.imgUrl" alt="图库图片"/>
                                </div>
                            </el-checkbox>
                        </div>
                    </el-checkbox-group>
                </div>
                <!-- <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="100"
                    layout="total, prev, pager, next"
                    :total="1000"
                >
                </el-pagination> -->
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="imgStoreModal = false">取 消</el-button>
                <el-button type="primary" size="small" @click="checkImage"
                >确 定
                </el-button
                >
            </div>
        </el-dialog>
        <!-- 选择款式 -->
        <el-dialog title="选择款式" :visible.sync="styleStoreModal" width="800px">
            <div class="style-modal-content">
                <el-form :inline="true" :model="styleStoreData" class="demo-form-inline">
                    <div
                            class="flex-center-between"
                            v-for="(item, index) in styleStoreData"
                            :key="index"
                    >
                        <el-form-item label="款式名称">
                            <el-input v-model="item.styleName" placeholder="款式名称"></el-input>
                        </el-form-item>
                        <el-form-item label="价格">
                            <el-input v-model="item.price" placeholder="价格"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" class="flex-center">
                            <cl-upload v-model="item.shopImg" :props="{multiple:true}"></cl-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="styleDelFn(index)"
                            >删除
                            </el-button
                            >
                        </el-form-item>
                    </div>
                </el-form>
                <el-button type="primary" size="small" @click="styleFormAddFn">新增</el-button>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="styleStoreModal = false">取 消</el-button>
                <el-button type="primary" size="small" @click="styleStoreModal = false"
                >确 定
                </el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import elxUpload from '@/components/common/elx-upload.vue';

    export default {
        name: 'goods-add',
        data() {
            return {
                ruleForm: {
                    goodsName: '',
                    sold: '',
                    stock: '',
                    categoryIdList: [],
                    goodsStyle: '0',
                    price: '',
                    autoRise: '1',
                    needSend: '0',
                    shopImg: [],
                    freightType: '0'
                },

                rules: {
                    goodsName: [{required: true, message: '请输入名称', trigger: 'blur'}],
                    categoryIdList: [{required: true, message: '请选择分类', trigger: 'blur'}],
                    stock: [{required: true, message: '必填', trigger: 'blur'}],
                    price: [{required: true, message: '必填', trigger: 'blur'}],
                    sold: [{required: true, message: '必填', trigger: 'blur'}],
                    goodsStyle: [{required: true, message: '必填', trigger: 'blur'}],
                    shopImg: [{required: true, message: '必填', trigger: 'blur'}],
                    content: [{required: true, message: '必填', trigger: 'blur'}],

                },
                // 图片展示
                fileList_show: [],
                dialogImageUrl: '',
                dialogVisible: false,
                // 需要自动涨价
                autoPricePopover: false,
                // 距离收费
                chargePopover: false,
                // 从图库中选择
                imgStoreData: [],
                imgStoreModal: false,
                imgStoreVal: '',
                imgStoreOpt: [],
                imgStoreArr: [],
                currentPage: 1,
                // 款式选择
                styleStoreModal: false,
                styleStoreData: [],
                styleForm: {
                    styleName: '',
                    price: '',
                    img: ''
                }
            };
        },
        components: {
            elxUpload
        },
        computed: {
            ...mapGetters({categoryData: 'category'}),
            ...mapGetters(['token'])
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.pageParams = this.$route.query
                if (this.pageParams.editType == '2') {
                    this.$service.goods.detail({id: this.pageParams.id}).then(res => {
                        this.ruleForm = res
                        this.fliterData(res)
                        console.log(this.ruleForm)
                    })
                }
                this.$store.dispatch('getCategory');
                this._getImgStore();
            },
            _getImgStore() {
                return this.$service.imgStore
                    .list({
                        page: 1,
                        categoryId: this.imgStoreVal
                    })
                    .then(res => {
                        this.imgStoreData = res.list;
                    });
            },
            // api
            addFn(type) {
                let form = JSON.parse(JSON.stringify(this.ruleForm));
                let status = type // 0加入仓库 ,1上架

                let serverType = 'add'
                if (this.pageParams.editType  == '2') {
                    serverType = 'update'
                   delete form.shortImgList
                   delete form.imgList
                   delete form.smallImgList
                }
                this.$service.goods[serverType]({
                    ...form,
                    goodsStyleList: this.styleStoreData
                }).then(res => {
                    this.resetForm('ruleForm');
                    this.$message.success('添加成功！');
                    this.$router.push('/goods/list');
                });
            },

            //编辑的时候初始化数据
            fliterData(res) {
                // 图片
                let list=res.smallImgList
                let list2=res.imgList
                let list3=res.shortImgList
                let newList = []
                for (let i = 0; i < list.length; i++) {
                    newList.push({url: list[i],showBBGG:list2[i]})
                }
                this.ruleForm.shopImg = list3
                this.fileList_show = newList
                console.log( this.fileList_show, this.ruleForm.shopImg)

                // 商品分类
               this.ruleForm.categoryIdList= res.categoryIdList.map(String)
            },
            //上传图片组件逻辑
            fromToData({file, fileList}) {
                let list = []
                // console.log( file, fileList)
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].response) {
                        list.push(fileList[i].response.shortUrl)
                    }
                }
                this.$set( this.ruleForm,'shopImg',list)
                console.log(this.ruleForm.shopImg)
            },
            // operate
            changeStyleFn(val) {
                console.log(val);
                if (val) {
                    // this.styleFormAddFn()
                    this.styleStoreModal = true;
                }
            },
            selChangeDialogFn(status, item) {
                console.log(status, item);
            },
            submitForm(formName, type) {
                this.$refs[formName].validate(valid => {
                    console.log(valid)
                    if (valid) {
                        this.addFn(type);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            checkImage() {
                this.imgStoreModal = false
            },
            setCheckImg(val) {
                this.$set(this.ruleForm, 'shopImg', this.ruleForm.shopImg.concat(val))
                console.log(this.ruleForm.shopImg, val)
            },

            // 编辑器
            editor(ref) {
                console.log(ref);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            // 图库选择
            selChangeFn(e) {
                this.imgStoreVal = e;
            },
            // 款式选择弹窗
            styleDelFn(index) {
                this.styleStoreData.splice(index, 1);
            },
            styleFormAddFn() {
                let form = JSON.parse(JSON.stringify(this.styleForm));
                this.styleStoreData.push(form);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .form-wrap {
        // width: 60%;
        .question-btn {
            position: relative;
            right: 28px;
        }
    }

    .cl-editor-quill {
        /deep/ .editor {
            height: 300px;
        }
    }

    // 图库选择
    .store-modal-content {
        .select-wrap {
            margin-bottom: 20px;
        }
        .img-store-wrap {
            .list-store {
                @include disFlex(center, flex-start);
                flex-wrap: wrap;
                .list-checkbox {
                    position: relative;
                    margin-bottom: 10px;
                    /deep/ .el-checkbox__input {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                    }
                }
                .list-img {
                    width: 100px;
                    height: 100px;
                }
            }
        }
    }

    // 风格选择
    .style-modal-content {
        /deep/ .upload-wrap {
            width: 60px !important;
            height: 60px !important;
        }
    }
</style>
