<!--
 * @Description : 产品目录清单 -- 新增Spu -- tabs SKU
 * @Author      : jinxin
 * @Date        : 2022-10-17 13:44:07
-->

<template>
    <el-row>
        <!-- 表头 -->
        <el-col :span="24">
            <div class="title m-l-20">SKU列表</div>
        </el-col>
        <el-col :span="24" class="m-l-20" :key="data.isRefrsh">
            <el-button type="text" @click="btnClickCom('add')"  v-if="data.isDisabled == 1">新增行</el-button>
            <el-button type="text" @click="btnClickCom('del')"  v-if="data.isDisabled == 1">删除行</el-button>
            <el-button type="text" @click="btnClickCom('mul')">批量编辑</el-button>
        </el-col>
       <!---产品列表-->
        <div class="table">
            <SkuVxeTable 
                v-model:editId="data.transmitEditId" 
                v-model:transmitData="data.transmitData" 
                v-model:notice="data.noticeCom" 
                v-model:clickEvent="data.clickEvent" 
                @transmitTableDate="transmitTableDate">
            </SkuVxeTable>
        </div>
    </el-row>
</template>
<script>
import { defineComponent,reactive,onMounted, watch } from "vue";
import SkuVxeTable from '@/views/components/SetComponents/SkuVxeTable.vue'
import { useStore } from 'vuex'
export default defineComponent({
    name:'SkuComponents' ,
    components:{
        SkuVxeTable
    },
    props:{
        notice:Number,
        saveData:Object,
        editId:String
    },
    emits:['transmitTableInfo','update:life','update:notice','update:saveData','update:editId'],
    setup(props,context){
        let store = useStore()
        // 生命周期
        onMounted(()=>{
            data.isDisabled = store.state.user.language.id
        })
        // 新增行
        const btnClickCom = (type) => {
            data.clickEvent = type + Math.floor(Math.random()*(10000 - 1) + 1)
        }
        // 变量
        let data = reactive({
            clickEvent:'',
            noticeCom:1,
            transmitData:{},
            transmitEditId:'',
            isDisabled:1,
            isRefrsh:1
        })
        // 获取表格数据
        const transmitTableDate = (val) => {
            context.emit('transmitTableInfo',val)
        }
        // 监听
        watch(()=>props.notice,(v1,v2)=>{
            data.noticeCom = v1
        })
        watch(()=>props.saveData,(v1,v2)=>{
            data.transmitData = v1
        })
        watch(()=>props.editId,(v1,v2)=>{
            data.transmitEditId = v1
        })
         // 监听
        watch(()=>data.isDisabled,(v1,v2)=>{
            data.isRefrsh = data.isRefrsh + 1
        })
        return {
            data,
            props,
            btnClickCom,
            transmitTableDate
        }
    }  
})
</script>
<style scoped>
.table {
  padding: 0;
  width: 100%;
}	
.title_box1 .title {
  margin: 0;
}	
</style>
