<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" >
            <el-table-column label="商品名称" prop="goods_name" >                
            </el-table-column>
            <el-table-column label="商品规格" prop="sku_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 v-if="scope.row.sku_isDeleted==0" @click="specal_set(scope.row)"  type="text"  size="small"> 配置制作步骤 </el-button> 
                    <el-button v-if="scope.row.sku_isDeleted==0" @click="sku_del(scope.row)"  type="text"  size="small"> 删除当前sku </el-button> 
                    <el-button v-if="scope.row.sku_isDeleted==2" @click="sku_rec(scope.row)"  type="text"  size="small"> 恢复当前sku </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>
    <SpecSetting ref="SpecSetting"></SpecSetting>
  </div>
</template>
<script>
import { list_machine_model,list_sku_byGoodsId,del_sku_bySkuId,rec_sku_bySkuId } from "@/api/system/specification.js";
import SpecSetting from './SpecSetting.vue';
export default {
    components: { SpecSetting},
    props: {   
    },
    data() {        
      return{
        open:false,
        goods:{},
        crowext:false,
        special_tb_data:[],            
        steps:[],
        queryParams:{},
        mach_model_list:[],
        skuList:[]
      }
    },
    mounted:function(){
        this.spec_mach_model_list();
    },
    methods: {
        /**提前将商品信息传入 */
        setSpecGoods(p_goods){
            this.goods = p_goods;
        },
        findSpecNameById(p_specId){
          let specList = JSON.parse(this.goods.spec);
          let specName = '';
          for(let i=0;i<specList.length;i++){
              let specId = specList[i].id;
              if(specId == p_specId){
                  specName = specList[i].name;
                  break;
              }
          }
          return specName;
        },
        buildSkuSpecName(p_sku){
          let strName = '';
          for(let i=0;i<p_sku.length;i++){
              strName +=p_sku[i].specName+":"+p_sku[i].spec_RuleName+"\n\r";
          }
          return strName;
        },
        /**打开规格详情配置，并初始化显示内容 */
        async showSpecial(isShow,p_goods){
            /** 根据商品获取sku list； 按原型组装数据*/
            await this.getSkuByGoodsId(this.goods.id).then((res)=>{
                let t_skuList = [];
                for(let i=0;i<res.data.length;i++){
                    let sku = res.data[i];
                    //现在的sku状态字段为isDeleted 有两个值：0-未删除 1-已删除，2-手动删除  
                    //如果状态是(1-已删除)的这里暂不显示
                    if(sku.isDeleted==1) continue;

                    let skuObj_ary = [];
                    let ruleList = JSON.parse(sku.ruleList);
                    for(let j=0;j<ruleList.length;j++){
                        let sku_spec_Obj = {};
                        let rule = ruleList[j];
                        let specName = this.findSpecNameById(rule.specId);
                        let spec_RuleName = rule.name;
                        sku_spec_Obj.specName=specName;
                        sku_spec_Obj.spec_RuleName = spec_RuleName;
                        skuObj_ary.push(sku_spec_Obj);
                    }
                    let skuObj = {};
                    skuObj.sku_id=sku.id;
                    skuObj.isDeleted = sku.isDeleted;
                    skuObj.skuAry  = skuObj_ary;
                    t_skuList.push(skuObj);
                } 
                this.skuList = t_skuList;
            });

            // sku，和机器型号可能的数据放到一个数组里，后续只循环一个数组即可，也为方法抽取提供条件；
            let t_special_tb_data=[]
            for(let i=0;i<this.skuList.length;i++){
                let skuObj = this.skuList[i];
                for(let j=0;j<this.mach_model_list.length;j++){
                    let mach_mode = this.mach_model_list[j];
                    let tb_data_item = {};
                    tb_data_item.mach_mode=mach_mode;
                    tb_data_item.sku = skuObj;
                    let strName = this.buildSkuSpecName(skuObj.skuAry);
                    let sku_spec_model = {
                        "goods_code":p_goods.code,
                        "goods_name":p_goods.name,
                        "sku_id":skuObj.sku_id,                         
                        "sku_spec_name":strName,
                        "model_name":mach_mode.model_name,
                        "model_id":mach_mode.id,
                        "sku_isDeleted":skuObj.isDeleted,
                        "tb_steps":[{
                            "step_lab":"步骤1",
                            "step_akv":[]
                        }],
                        "step_opts":[]
                    }
                    
                    sku_spec_model.mach_mode=mach_mode;
                    sku_spec_model.sku = skuObj;

                    t_special_tb_data.push(sku_spec_model);
                }
            }

            this.special_tb_data = t_special_tb_data;
            //显示窗体
            this.open = isShow
        },
        
        closeSpecial(tag){
            //检查有需要保存的项未提交，则提示是否确定关闭
            //TODO
            this.open = false;
        },
        openSpecial(tag){
            this.open = true;
        },               
        /**获取商品对应的sku list  组装数据结构供页面显示，使用同步加载，避免数据回显不正常*/
        getSkuByGoodsId(goodsId){
            return new Promise((resolve,reject)=>{                
                list_sku_byGoodsId(goodsId).then((response) => {
                   resolve(response);
                }).catch((response) => {
                    reject(response);
                });
            });
        },
        /**获取机型列表 */
        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;
                });
            }
        },       
        
        specal_set(skuRow){
          this.$refs.SpecSetting.setSpecGoods(this.goods,skuRow);
          this.$refs['SpecSetting'].showSpecial(true,this.goods);
        },
         /**删除sku*/
        sku_del(skuRow){
          if(this.goods.state == 3 ){
            this.$message.error("需先下架商品之后才可删除!");
            return;
          }
          this.$modal.confirm('是否确认删除当前SKU?商品上架后对应SKU将不可用').then(function () {
              return del_sku_bySkuId(skuRow.sku_id);
          }).then(() => {
              this.showSpecial(true,this.goods)
              this.$modal.msgSuccess("删除成功");
          }).catch(() => { });
        },
        /**恢复sku*/
        sku_rec(skuRow){
          this.$modal.confirm('是否确认恢复当前SKU?').then(function () {
              return rec_sku_bySkuId(skuRow.sku_id);
          }).then(() => {
              this.showSpecial(true,this.goods)
              this.$modal.msgSuccess("恢复成功");
          }).catch(() => { }); 
        },       

    }
    
}
</script>