<template>
  <div>
    <el-dialog title="规格详情" :visible.sync="open" width="1000px" append-to-body>

        <el-table :data="special_tb_data"   style="width: 100%" ref="special_tb" @row-click="specal_tb_row_click();">
            <el-table-column label="" type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" inline>
                    <el-row  v-for="(step,step_idx) in scope.row.tb_steps" :key=step_idx  style="margin-top:5px;" >
                        <span>{{step.step_lab}}:</span>
                    
                        <el-cascader :options="scope.row.step_opts" v-model="step.step_akv"  style="margin-left:10px"></el-cascader>

                        <el-button @click.prevent="spec_add_step(scope.row)" style="margin-left:10px">增加步骤</el-button>
                     
                    </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goods_name" >                
            </el-table-column>
            <el-table-column label="商品规格" prop="spec_name">
            </el-table-column>
            <el-table-column label="机器型号" prop="model_name">
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button  @click="specal_opt(scope.$index,scope.row,'view_step')"  type="text"  size="small"> 查看步骤 </el-button> 
                    <el-button  @click.native.prevent="specal_opt(scope.$index,scope.row,'save')"  type="text"  size="small"> 保存 </el-button> 
                    <el-button  @click.native.prevent="specal_opt(scope.$index,scope.row,'del')"  type="text"  size="small"> 删除 </el-button>                     
                    <el-button  @click.native.prevent="specal_opt(scope.$index,scope.row,'restore')"  type="text"  size="small"> 恢复 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeSpecial('cancel');">取 消</el-button>
            <el-button type="primary" @click="closeSpecial('confim');">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { list_machine_model,list_step,add_spec_step,list_data_spec_step,del_spec_step,list_sku_byGoodsId } from "@/api/system/specification.js";
import { stringify } from "querystring";
export default {
    props: {   
    },
    data() {
        
        return{
            open:false,
            goods:{},
            crowext:false,
            special_tb_data:[],            
            steps:[{
                "step_key": 1, 
                "risc_id": 1,  
                "risc_code": 1,  
                "risc_desc": "取杯",  
                label:"取杯", 
                value: 1,  
                "turn": 1,  
                "model_id": 1,  
                "check": "radio", 
                "options": {"冷杯":1,"热杯":2},
                "children":[ {label:"冷杯",value:1},{label:"热杯",value:2}]
            },{
                "step_key": 3, 
                "risc_id": 3,  
                "risc_code": 3,  
                "risc_desc": "加冰",  
                label:"加冰",  
                value: 3,  
                "turn": 3,  
                "model_id": 1,  
                "check": "radio", 
                "options": {"冰":86},
                "children":[ {label:"冰",value:86}]
            }],
            queryParams:{},
            mach_model_list:[]
        }
    },
    mounted:function(){
        this.spec_mach_model_list();
    },
    methods: {
        /**提前将商品信息传入 */
        setSpecGoods(pgoods){
            this.goods = pgoods;
        },
        /**打开规格详情配置，并初始化显示内容 */
        async showSpecial(isShow,pgoods){
            console.log("111 ");
            await this.getSkuByGoodsId(this.goods.id);
            console.log("333 ");
        // 样例  
        //    {
        //         "goods_code":"G169",
        //         "goods_name":"青提茉莉",
        //         "spec_code":"PS239",
        //         "spec_name":"糖度",
        //         "model_name":"HY001001",
        //         "tb_steps":[{
        //             "step_lab":"步骤1",
        //             "step_akv":[]
        //         }]
        //     }
            //商品规格，和机器型号组合
            let spec_str = pgoods.spec;
            let spec = JSON.parse(spec_str);
            for(let i=0;i<spec.length;i++){
                for(let j=0;j<this.mach_model_list.length;j++){
                    let spec_model = {
                        "goods_code":pgoods.code,
                        "goods_name":pgoods.name,
                        "spec_id":spec[i].id,
                        "spec_code":spec[i].code,
                        "spec_name":spec[i].name,
                        "model_name":this.mach_model_list[j].model_name,
                        "model_id":this.mach_model_list[j].id,
                        "tb_steps":[{
                            "step_lab":"步骤1",
                            "step_akv":[]
                        },{
                            "step_lab":"步骤2",
                            "step_akv":[]
                        }],
                        "step_opts":[]
                    }
                    
                    
                    let that =this;
                    //理论上，初始化时根据规格和型号获取可能的步骤会比较靠谱，省的以后步骤不一样用同一个数据源麻烦；
                    //this.spec_mach_step_list(spec_model.model_id,spec_model.spec_id);
                    //this.spec_mach_step_list(spec_model.model_id,2823);
                    //this.queryParams={model_id:spec_model.model_id,sku_id:spec_model.spec_id};
                    this.queryParams={model_id:spec_model.model_id,sku_id:2823};//2823 测试数据，有数据。。。
                    ///获取可能的步骤 
                    list_step(this.queryParams).then((response) => {
                        //将步骤list转换为下拉框能识别的数组；
                        //样例
                        // {
                        //   "step_key": 1, 
                        //   "risc_id": 1,  
                        //   "risc_code": 1,  
                        //   "risc_desc": "取杯",  
                        //   label:"取杯", 
                        //   value: 1,  
                        //   "turn": 1,  
                        //   "model_id": 1,  
                        //   "check": "radio", 
                        //   "options": {"冷杯":1,"热杯":2},
                        //   "children":[ {label:"冷杯",value:1},{label:"热杯",value:2}]
                        // }
                        
                        let step_opts = [];
                        for(let obj in  response.data){
                            //console.log(obj,spec_model.step_list[obj]);
                            let step_obj = {};
                            step_obj = response.data[obj];
                            step_obj.step_key = obj;
                            step_obj.label = step_obj.risc_desc
                            step_obj.value = step_obj.risc_id
                            let children = [];
                            let childrenObj = {};
                            let options = JSON.parse(step_obj.options);
                            for(let opt in options){
                                childrenObj = {};
                                childrenObj.label = opt;
                                childrenObj.value = options[opt];
                                children.push(childrenObj);
                            }

                            step_obj.children = children
                            step_opts.push(step_obj);
                        }
                        spec_model.step_opts = step_opts;
                        that.special_tb_data.push(spec_model);

                        //显示窗体
                        that.open = isShow
                        //this.initStepData();
                    });
                }
            }
            
        },
        closeSpecial(tag){
            //检查有需要保存的项未提交，则提示是否确定关闭
            //TODO
            this.open = false;
        },
        openSpecial(tag){
            this.open = true;
        },
        /** 规格详情配置窗体初始化数据，如果已经有配置数据则获取*/
        initAll(){
            
            this.get_step_data();
        },
        /**获取商品对应的sku list  组装数据结构供页面显示，*/
        // getSkuByGoodsId(goodsId){
        //     list_sku_byGoodsId(goodsId).then((response) => {
        //         console.log("getSkuByGoodsId response",response);
        //         console.log("222 ");
        //     }).catch((response) => {
        //         console.log("getSkuByGoodsId error",response);
        //         console.log("222 e");
        //     });
        // },
        
        getSkuByGoodsId(goodsId){
            return new Promise((resolve,reject)=>{
                
                list_sku_byGoodsId(goodsId).then((response) => {
                    console.log("getSkuByGoodsId response",response);
                    console.log("222 ");
                    resolve(response);
                }).catch((response) => {
                    console.log("getSkuByGoodsId error",response);
                    console.log("222 e");
                    reject(response);
                });


            });
        },
        /**获取已保存的步骤数据 */
        get_step_data(){
            console.log("get_step_data goods",this.goods);
            this.queryParams={goods_id:this.goods.id};
            //测试数据也不好使
            // this.queryParams={goods_id:152};
            list_data_spec_step(this.queryParams).then((response) => {
                console.log("get_step_data response",response);
            }).catch((response) => {
                console.log("get_step_data error",response);
            });

            //数据返回后调用下面的方法
            this.initStepData();
        },
        /**初始化已保存的步骤数据 */
        initStepData(pata){
            //将后台返回的已保存的步骤数据初始化到数据结构里
            console.log("this.special_tb_data",this.special_tb_data);
            //tb_steps,将数据填充到tb_steps，如果没值则填充默认值
            let tb_steps = this.special_tb_data.tb_steps;
            if(true){
                tb_steps = [];
                tb_steps.push({step_lab:"步骤1",step_akv:[1,1]})
                tb_steps.push({step_lab:"步骤2",step_akv:[3,84]})
            }else{
                tb_steps = [{
                            "step_lab":"步骤1",
                            "step_akv":[]
                        }]
            }
           
            this.special_tb_data.tb_steps = tb_steps
            this.open = true;
            //
        },
        /**列表操作 */        
        specal_opt(pindex,prow,tag){
            if(tag == "view_step"){
                this.crowext = !this.crowext;
                this.$refs.special_tb.toggleRowExpansion(prow,this.crowext)

                console.log("click view step");
            }
            if(tag == "save"){
                console.log("special_tb_data",this.special_tb_data);
                this.spec_step_save(prow);
            }

            if(tag == "del"){
                this.spec_step_del(prow);
            }
            
        },
        specal_tb_row_click(r,c,e){
            // this.testPromic(1,2823).then((response) => {
            //         console.log("xxxx",response); 
            //         console.log("spec_mach_step_list",3)
            //     });
            // console.log("spec_mach_step_list",2)
        },
        spec_add_step(prow){
            let step_i = prow.tb_steps.length+1
            prow.tb_steps.push({
                    "step_lab":"步骤"+step_i,
                    "step_akv":[]
                }
            );
        },
        /**获取机型列表 */
        spec_mach_model_list(){
            if(this.mach_model_list.length==0){
                this.queryParams={};
                list_machine_model(this.queryParams).then((response) => {
                    this.mach_model_list = response.data;
                });
            }
        },
        /**保存步骤 */
        spec_step_save(prow){
        //    {
        //     "sku_id": 1,             
        //     "risc_id": 1,            
        //     "risc_code": 1,             
        //     "risc_desc": "取杯",             
        //     "turn": 1,             
        //     "model_id": 1,            
        //     "result": 1             
        //     } 
            let step_ary = [];           
            
            for(let i=0;i<prow.tb_steps.length;i++){
                let step_obj =   {} 
                let t_step = prow.tb_steps[i];
                //填充对应的值
                step_obj.sku_id = prow.spec_id;
                step_obj.model_id = prow.model_id;
                step_obj = this.fillStepById(step_obj,t_step,prow);
                step_ary.push(step_obj);
            }
            //提交到后台
            add_spec_step(step_ary).then((response) => {
                console.log("response ",response);
            }).catch((response) => {
                console.log("error ",response);
            });

        },
        /**删除步骤 */
        spec_step_del(prow){
            console.log("prow ",prow);
            this.queryParams={sku_id:prow.spec_id,model_id:prow.model_id};        
         
            //提交到后台
            del_spec_step(this.queryParams).then((response) => {
                console.log("response del_spec_step",response);
            }).catch((response) => {
                console.log("error del_spec_step",response);
            });

        },
        
        fillStepById(step_obj,t_step,prow){
            //TODO
            console.log("step_obj",step_obj);
            console.log("t_step",t_step);
            console.log("prow",prow);
            let step_ak = t_step.step_akv[0];
            let step_av = t_step.step_akv[1];
            step_obj.result=step_av;
            for(let i=0;i<prow.step_opts.length;i++){
                let step_opt = prow.step_opts[i];
                if(step_opt.value == step_ak){
                    step_obj.risc_id = step_opt.risc_id
                    step_obj.risc_code =step_opt.risc_code
                    step_obj.risc_desc=step_opt.risc_desc
                    step_obj.turn=step_opt.turn
                    // for(let j=0;j<step_opt.children.length;j++){
                    //    if(step_opt.children[j].value == step_av){
                    //         step_obj.result=step_av
                    //         break;
                    //    }
                    // }

                    break;
                }
            }
            return step_obj;
        },
        /**获取可能的步骤 */
        spec_mach_step_list(model_id,sku_id){
            this.queryParams={model_id:model_id,sku_id:sku_id};
            list_step(this.queryParams).then((response) => {
                console.log("response",response);
            });
        },
        testPromic(model_id,sku_id){
            var param={model_id:model_id,sku_id:sku_id};
            return new Promise(
                function(resolve,reject){
                    list_step(param).then((response) => { 
                        resolve(response);
                    });               
            }            
            ).then(function(res){
                return res;
            }).catch(function(cat){
                return cat
            })
        }

    }
    
}
</script>