<template>
    <div>
        <table class="tb1">
            <thead>
            <tr>
                <th rowspan="2">id</th>
                <th :colspan="types1.item.length" class="th-sx">
                    属性
                    <Button  class="btn" type="warning" v-on:click="neditorType()">添加</Button>
                </th>
                <th rowspan="2">数量</th>
                <th rowspan="2">价格</th>
                <th rowspan="2">图片</th>
                <th rowspan="2">操作</th>
            </tr>

            <tr>
                <template v-for="item in types1.item">
                    <th class="th-type">
                        {{item.type_name}}
                        <Button  class="btn" type="info" v-on:click="editorType(item.type_id)">编辑</Button>
                    </th>
                </template>

            </tr>

            </thead>
            <tbody>
            <template v-for="(tb,index) in tbitem1">
                <tr>
                    <td>{{index+1}}</td>
                    <template v-for="tbc in tb.childs">
                        <template v-if="index%tbc.rowCount==0">
                            <td :rowspan="tbc.rowCount">{{tbc.name}}</td>
                        </template>
                    </template>
                    <td>{{tb.count}}</td>
                    <td>{{tb.price}}</td>
                    <td><img :src="tb.imgurl" style="width: 120px;height: 120px; margin: 20px;"/></td>
                    <td>
                        <Button  class="btn" type="primary"   v-on:click="changePrice(tb.id)">编辑</Button>
                    </td>
                </tr>

            </template>
            </tbody>
        </table>

        <div>
            <!--修改属性 规格-->
            <Modal
                    v-model="modal2"
                    title="编辑产品规格"
                    footer-hide
                    @on-cancel="editorCancel"
            >

                <Form  label-position="right" :label-width="100"  >
                    <FormItem label="属性名称" >
                        <Row>
                            <Col span="12">
                            <Input v-model="type_item.type_name"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="规格名称" >
                        <Row>
                            <Col span="12">
                            <Input v-model="type_child_name"></Input>
                            </Col>
                            <Col span="12">
                            <Button size="large" type="info"  class="margin-left" v-on:click="addTypeChild">添加</Button>
                            </Col>
                        </Row>

                    </FormItem>
                    <FormItem label="规格：" >
                        <template v-for="child in type_item.type_child">
                            <Button class="margin" type="primary" v-on:click="deleteTypeChild(child.child_id)">
                                {{child.child_name}}
                                <Icon type="ios-close-circle-outline" size="24" color="#f90" />
                            </Button>
                        </template>
                    </FormItem>


                    <FormItem label="">
                        <Row>
                            <Col span="12">
                            <Button size="large" type="success"  style="padding:8px 24px;" v-on:click="editorOk">
                                确定
                                <Icon type="md-checkmark" />
                            </Button>
                            </Col>
                            <Col span="12">
                            <Button size="large" type="error"  v-on:click="deleteType">
                                <Icon type="ios-alert-outline" />
                                删除该属性</Button>
                            </Col>
                        </Row>

                    </FormItem>

                </Form>

            </Modal>

            <!--添加产品-->
            <Modal
                    v-model="modal3"
                    title="添加产品规格"
                    footer-hide
            >

                <Form  label-position="right" :label-width="100"  >
                    <FormItem label="属性名称" >
                        <Row>
                            <Col span="12">
                            <Input v-model="ntype_name"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="规格名称" >
                        <Row>
                            <Col span="12">
                            <Input v-model="type_child_name"></Input>
                            </Col>
                            <Col span="12">
                            <Button size="large" type="info"  class="margin-left" v-on:click="naddTypeChild">添加</Button>
                            </Col>
                        </Row>

                    </FormItem>
                    <FormItem label="规格：" >
                        <template v-for="(child,c_index) in ntype_childs">
                            <Button class="margin" type="primary" v-on:click="ndeleteTypeChild(c_index)">
                                {{child}}
                                <Icon type="ios-close-circle-outline" size="24" color="#f90" />
                            </Button>
                        </template>
                    </FormItem>


                    <FormItem label="">

                        <Button size="large" type="success"  style="padding:8px 24px;" v-on:click="neditorOk">
                            确定
                            <Icon type="md-checkmark" />
                        </Button>


                    </FormItem>

                </Form>

            </Modal>

            <!--填写价格 数量-->
            <Modal
                    v-model="modal4"
                    title="编辑产品价格数量"
                    footer-hide
            >

                <Form  label-position="right" :label-width="100"  >
                    <FormItem label="数量" >
                        <Row>
                            <Col span="12">
                            <Input v-model="table_item.count"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="价格" >
                        <Row>
                            <Col span="12">
                            <Input v-model="table_item.price"></Input>
                            </Col>
                        </Row>

                    </FormItem>

                    <FormItem label="展示图片" >
                        <Row>
                            <Col span="12">
                                <div class="img_show1 ivu-upload ivu-upload-drag">
                                    <img :src="table_item.imgurl" >
                                    <input type="file" id="file_input1" @change="readFile1" name="logo1"/>
                                    <div v-if="add_img_flag1">
                                        <div class="img_icon">
                                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                            <p>选择商品展示图片</p>
                                        </div>

                                    </div>

                                </div>
                            </Col>
                        </Row>

                    </FormItem>



                    <FormItem label="">
                        <Row>
                            <Col span="12">
                            <Button size="large" type="success"  style="padding:8px 24px;" v-on:click="changedPrice">
                                确定
                                <Icon type="md-checkmark" />
                            </Button>
                            </Col>

                        </Row>

                    </FormItem>

                </Form>

            </Modal>

        </div>



    </div>

</template>



<script>

    import productHelper from "./productHelper.js"
    let pdObj=productHelper.instance;
//    pdObj.upDataAll();
    export default{
        name:'ProductTable',
        props:['types','delimgApi','uploadImgApi'],
        data () {
            return {
                table_item: {
                    id: "1_1,2_1,3_1",
                    count: '200',
                    price: '1.99'
                },
                ntype_name: '',
                ntype_childs: [],
//                tbitem1: [],
//                types1: {},
                type_child_name: '',
                type_item: {
                    type_id: 0,
                    type_name: '默认',
                    type_child: [
                        {
                            child_id: 0,
                            child_name: '默认',
                        }
                    ]
                },
                modal2: false,
                modal3: false,
                modal4: false,
                oldsrcurl:'',
                pre_imgurl:'',
                srclogo1:'',
                add_img_flag1:true
            }
        },
        watch: {
            types: function () {
                pdObj.initByTypes(this.types);
                this.editorUpdate();
                //神奇的代码  无意义 不能没有
                this.neditorFlash();
            }

        },
        created(){
            //指定删除图片的api
            pdObj.configInit(this.axios,this.delimgApi);
            pdObj.initByTypes(this.types);
            this.editorUpdate();
        },
        mounted:function(){

        },
        methods:{

            //弹出属性编辑框
            editorType:function (id) {
                //获取对应的type_item
                this.editorFlash(id)
                this.modal2=true;
            },

            //属性下 规格的添加
            addTypeChild:function(){
                pdObj.addTypeChild(this.type_item.type_id,this.type_child_name);
                this.editorFlash(this.type_item.type_id);
                this.type_child_name='';
            },
            //属性下 规格的删除
            deleteTypeChild:function(child_id){
                console.log('deleteTypeChild');
                console.log(child_id);
                console.log(this.type_item.type_id)
                pdObj.deleteTypeChild(this.type_item.type_id,child_id);
                this.editorFlash(this.type_item.type_id)
            },
            deleteType:function(){
                //删除属性
                pdObj.deleteType(this.type_item.type_id);
                this.modal2=false;
                this.editorUpdate();
            },
            editorOk:function(){
                //是否需要更新属性名字
                pdObj.updataItemName(this.type_item.type_id,this.type_item.type_name);
                this.modal2=false;
                this.editorUpdate();
            },
            editorCancel:function(){
                this.editorUpdate();
            },

            neditorType:function(){
                this.modal3=true;
            },

            //naddTypeChild
            naddTypeChild:function(){
                this.ntype_childs.push(this.type_child_name);
                this.type_child_name='';
            },

            ndeleteTypeChild:function(id){
                console.log(id);
                this.ntype_childs.splice(id,1)
            },
            neditorOk:function(){
                pdObj.addType(this.ntype_name,this.ntype_childs);
                this.editorUpdate();
                this.neditorFlash();
                this.modal3=false;
            },

            //准备编辑价格数量
            changePrice:function(id){
                console.log('changePrice');
                console.log(id);
                this.table_item=pdObj.getDetailItemById(id);
                this.oldsrcurl=this.table_item.imgurl;
                if(this.oldsrcurl){
                    this.add_img_flag1=false;
                }else{
                    //规格无图片  刚上传过
                    if(this.pre_imgurl){
                        this.table_item.imgurl=this.pre_imgurl;
                        this.add_img_flag1=false;
                    }
                }
                this.modal4=true;
            },

            //选择图片的处理 750 *350
            readFile1(event){
                var that=this;
                that.logo1=event.target.files[0];
                let reader = new FileReader();
                reader.readAsDataURL(that.logo1);
                reader.onload = function(e){
                    console.log('图片加载完毕');
                    that.table_item.imgurl=this.result;
                    that.add_img_flag1=false;
                }
                return false;
            },

            //上传图片
            uploadimg:function(){
                console.log('uploadimg');
                let that=this;
                let file1=this.logo1;

                if(!file1){
                    console.log('uploadimg no file1');
                    that.updateAfterChangeItem();
                    return false;
                }

                let param = new FormData(); //创建form对象

                param.append('imgFile',file1);//通过append向form对象添加数据

                //需要删除的照片
                // param.append('oldsrcurl',that.oldsrcurl)

                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }; //添加请求头
                this.axios.post(this.uploadImgApi,param,config)
                    .then(function(response){
                        console.log(response.data);
                        if(response.data.code){
                            that.$Message.error({
                                content:res.msg,
                                duration: 10,
                                closable: true,
                                onClose:function(){
                                    console.log('msg cloes...');
                                }
                            });
                        }else{
                            console.log('save success');
                            that.$Message.success('保存成功');
                            that.table_item.imgurl=that.pre_imgurl=response.data.message;
                            that.updateAfterChangeItem();
                            that.updataItemDelOldImg(that.oldsrcurl)
                            return false;
                        }
                    })
            },
            //更新规格图片 删除老图片
            updataItemDelOldImg:function(oldimg){
                if(pdObj.updataItemDelimg(oldimg)){
                    this.oldsrcurl=''
                }

            },


            //修改价格数量
            changedPrice:function(){
                console.log('changePricedPrice');
               this.uploadimg();
            },


            //更新价格 图片
            updateAfterChangeItem:function(){
                console.log('updateAfterChangeItem');
                console.log(this.table_item);
                pdObj.changePriceCount(this.table_item);
                this.modal4=false;
                this.editorUpdate();
                this.logo1=undefined;
            },

            //更新属性添加页面
            neditorFlash:function(id){
                this.ntype_name='';
                this.ntype_childs=[];
            },

            //更新属性编辑页面
            editorFlash:function(id){
                this.type_item=pdObj.getTypeItemById(id)
            },

            //更新table
            editorUpdate:function(){
                this.types1=pdObj.types
                this.tbitem1=pdObj.tableItems;
                this.$emit('updataTable', this.types1,this.tbitem1);
            },
            wuyiyi:function(){
                return false;
            }

        }
    }
</script>



<style lang="css" scoped>
    .editor1{
        background: #fff;
    }
    .tb1
    {
        border-collapse: collapse;
        text-align: center;
    }
    .tb1 td, .tb1 th
    {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }
    .tb1 thead th
    {
        background-color: #CCE8EB;
        min-width: 100px;
    }
    .tb1 tr:nth-child(odd)
    {
        background: #fff;
    }
    .tb1 tr:nth-child(even)
    {
        background: #F5FAFA;
    }
.tb1 .th-sx{
    background: #170d03;
    color:#fff;
    font-size: 16px;
    padding: 8px;
}
    .tb1 .th-type{
        background: #74420f;
        color:#fff;
        padding: 8px;
        font-size: 14px;
    }
    .tb1 .btn{
        margin: 8px;
    }
    .lable-type-item{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        white-space: nowrap;
        line-height: 1.5;
        padding: 5px 15px 6px;
        font-size: 12px;
        border-radius: 4px;
        color: #515a6e;
        background-color: #fff;
        border-color: #dcdee2;
        margin-right: 15px;
    }
    .margin{
        margin: 0 20px 20px 0;
    }
    .margin-right{
        margin-right: 20px;
    }
    .margin-left{
        margin-left: 20px;
    }
    .img_show1{
        width: 195px;
        height: 195px;
    }

    .img_show1 .img_icon {
        display: block;
        position: absolute;
        left: 50px;
        top: 65px;
    }

    .img_show1 img {
        display: block;
        position: absolute;
        width: 100%;
        height: 195px;
    }

</style>