<!--
 * @Description : 产品目录清单 - 编辑SPU/SKU组件
 * @Author      : jinxin
 * @Date        : 2022-10-15 09:26:03
-->

<template>
     <div>
        <el-dialog :model-value="isEditSpuSkuShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :title="data.title" width="440px" center>
            <el-form :model="data.form" label-width="100px">
                <el-form-item label="当前spu" >
                    <el-input v-model="data.form.currShowValue" style="width: 83%;" disabled/>
                </el-form-item>
                <el-form-item label="更改后spu" required>
                    <el-select placeholder="请选择更改后的spu" v-model="data.form.editValue" @change="onChangeCom(data.form.editValue)" filterable style="width: 83%;">
                        <el-option v-for="(item,index) in data.form.editList" :key="index" :label="item.spu" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editCommon('cancel')">取消</el-button>
                    <el-button type="primary" @click="editCommon('sure')">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog :model-value="data.isShowEditTitle" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="确定提示" width="440px" center >
            <span>{{'确认将所选SKU都更改至' + data.showSkuName + '下吗？确认之后更改。'}}</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editSureCommon('cancel')">取消</el-button>
                    <el-button type="primary" @click="editSureCommon('sure')">确定</el-button>
                </span>
            </template>
        </el-dialog>
     </div>
</template>
<script>
import { defineComponent,onMounted,reactive,watch,getCurrentInstance } from 'vue'
import Request from '@/utils/request.js'
import { useStore } from 'vuex'
export default defineComponent({
    name:'EditSpuSkuDiaLog',
    props:{
        isEditSpuSkuShow:{
            type:Boolean,
            default:false
        },
        selectList:{
            type:Array,
            default:[]
        },
        excludespulist:{
            type:Array,
            default:[]
        }
    },
    emits:['update:isEditSpuSkuShow','getSpuSkuValue'],
    setup(props,context){
        // 生命周期
        onMounted(()=>{
            data.languageNmae = store.state.user.language.name
        })
        // 实例
        const request = new Request()
        const { proxy } = getCurrentInstance()
        let store = useStore()
        // 定义变量
        let data = reactive({
            title:'更改spu',
            form:{
                currShowValue:'',
                editValue:'',
                editList:[],
                oldSkuId:[]
            },
            selectList:[],
            isShowEditTitle:false,
            languageNmae:'简体中文',
            showSkuName:''
        })
        // 选择spu 
        const onChangeCom = (id) => {
            data.form.editList.forEach(el => {
                el.id == id ? data.showSkuName = el.spu : ''
            });
            // console.log('data.showSkuNam', data.showSkuNam)
        }
        // 取消 - 确定
        const editCommon = (type) => {
            if(type == 'sure'){
                data.isShowEditTitle = true
            }else{
                data.form.editValue = ''
                context.emit('update:isEditSpuSkuShow',false)
            }
        }
        // 确定
        const editSureCommon = (type) => {
            if(type == 'cancel'){
                data.isShowEditTitle = false
            }else{
                data.isShowEditTitle = false
                // console.log('data.form.editValue',data.form.editValue)
                if(data.form.editValue){
                    data.form.oldSkuId = []
                    data.selectList.forEach(el => {
                        data.form.oldSkuId.push(el.product_sku_id)
                    });
                    context.emit('getSpuSkuValue',data.form)
                    data.form.editValue = ''
                    context.emit('update:isEditSpuSkuShow',false)
                }else{
                    proxy.$message.error('请先选择更改后的SPU')
                }
            }
        }
        // 监听
        watch(()=>props.selectList,(newVal,oldVal)=>{
            data.selectList = []
            data.form.currShowValue = ''
            data.selectList = newVal
            data.selectList.forEach(el => {
                if (data.form.currShowValue.indexOf(el.spu) == -1) {
                    data.form.currShowValue = data.form.currShowValue + el.spu + '、'
                }
            });
            if (data.form.currShowValue.charAt(data.form.currShowValue.length - 1) == '、') {
                data.form.currShowValue = data.form.currShowValue.slice(0, data.form.currShowValue.length - 1)
            }
        })
        watch(()=>props.excludespulist,(newVal,oldVal)=>{
            data.form.editList = newVal
        })
        return{
            data,
            props,
            editCommon,
            editSureCommon,
            onChangeCom
        }
    }
})
</script>