<template>
    <el-dialog
        title="Sku选择"
        :visible.sync="dialogVisibleChooseSku"
        width="65%"
        @close="close()">
        <div class="dis-flex dis-just">
            <div style="width:48%">
                <div class="contain-template">
                    <div class="contain-title b ">系统产品</div>
                    <div class="mt10 ml10">
                        <el-select v-model="listParamsSys.valueSys" placeholder="搜索类型" size="small" class="w150">
                            <el-option
                                v-for="item in optionsSys"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input
                            class="w200 ml10"
                            size="small"
                            placeholder="请输入"
                            clearable
                            v-model="listParamsSys.inputSys">
                        </el-input>
                        <el-button type="primary" @click="searchSysForBinding">搜	索</el-button>
                    </div>
                    <div class="p10">
                        <el-table
                            ref="multipleTable_tableDataChoose"
                            :data="tableDataChoose"
                            tooltip-effect="dark"
                            highlight-current-row
                            @current-change="sysProductRowChange"
                            style="width: 100%"
                            border
                        >
                            <el-table-column
                                align="center"
                                width="60px"
                                label="主图">
                                <template slot-scope="scope">
                                    <img style="width: 50px;height: 50px" :src="scope.row.mainImageUrl+'?x-oss-process=image/resize,m_fixed,h_50,w_50'" class="img-size"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="系统SKU名称">
                                <template slot-scope="scope">
                                    <div @dblclick="bindPlatformClick(scope.row)">{{scope.row.skuName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="系统SKU编码">
                                <template slot-scope="scope">
                                    <div @dblclick="bindPlatformClick(scope.row)">{{scope.row.skuCode}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="可用库存">
                                <template slot-scope="scope">
                                    <div @dblclick="bindPlatformClick(scope.row)">{{scope.row.stockInfo}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                            >
                                <template slot-scope="scope" slot="header">
                                    操作
                                    <el-tooltip placement="top" effect="light">
                                        <div slot="content">选择方法：<br/>1.点击”选择“按钮选择<br/>2.鼠标双击选择</div>
                                        <i class="el-icon-question"/>
                                    </el-tooltip>
                                </template>
                                <template slot-scope="scope">
                                    <div class="el-dropdown-link" @click="bindPlatformClick(scope.row)">选择</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="ovh">
                        <el-pagination
                            @size-change="handleSysSizeChange"
                            @current-change="handleSysCurrentChange"
                            :current-page="listParamsSys.currentPage"
                            :page-sizes="[5, 10, 20, 50]"
                            :page-size="listParamsSys.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listParamsSys.total"
                            style="float:right;display:inline-block;max-width: 90%"
                        ></el-pagination>
                    </div>
                </div>
            </div>
            <div style="width:60%">
                <div class="contain-template">
                    <div class="contain-title b ">已选sku</div>
                    <div class="p10">
                        <el-table
                            ref="multipleTable_tableDataPlatformProduct"
                            :data="tableDataPlatformProduct"
                            tooltip-effect="dark"
                            highlight-current-row
                            @current-change="platformProductRowChange"
                            style="width: 100%"
                            border
                        >
                            <el-table-column
                                align="center"
                                width="60px"
                                label="主图">
                                <template slot-scope="scope">
                                    <img style="width: 50px;height: 50px" :src="scope.row.unitImageUrl+'?x-oss-process=image/resize,m_fixed,h_50,w_50'" class="img-size"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="skuName"
                                label="产品SKU">
                            </el-table-column>
                            <el-table-column
                                prop="skuCode"
                                align="center"
                                label="产品SKU编码">
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="80"
                            >
                                <template slot-scope="scope">
                                    <div class="el-dropdown-link" @click="delChooseSku(scope.$index, scope.row)">删除</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="tc">
                <el-button type="primary" @click="add(tableDataPlatformProduct)" size="small">确 定</el-button>
				<el-button type="primary" @click="close()" size="small">关 闭</el-button>
			</span>
    </el-dialog>
</template>
<script>
export default {
    props: {
        dialogVisibleChooseSku: {
            type: Boolean,
            default: true,
        },
    },
    name:"productBindingDialog",
    data() {
        return {
            listParamsSys:{
                currentPage: 1,
                pageSize: 5,
                total: 0,
                valueSys: 'skuName',
                inputSys:'',
                isEnabled:1
            },
            parentData:{},
            listParamsPlatformProduct:{
                currentPage: 1,
                pageSize: 5,
                total: 0,
                valuePlatform: '',
                inputPlatform:''
            },
            sysRowForBinding:{},
            platformRowForBinding:{},
            tableDataChoose:[],
            tableDataPlatformProduct: [],
            optionsPlatform: [{
                value: '',
                label: '搜索类型'
            }, {
                value: 'platformSku',
                label: '平台SKU'
            }, {
                value: 'platformSpu',
                label: '平台SPU名'
            }, {
                value: 'platformProductId',
                label: '平台产品ID'
            }],
            optionsSys: [{
                value: '',
                label: '搜索类型'
            }, {
                value: 'skuName',
                label: '系统SKU名'
            }, {
                value: 'skuCode',
                label: '系统SKU编码'
            }, {
                value: 'spuName',
                label: '系统SPU名'
            }],
        }
    },
    mounted() {

    },
    methods: {
        delChooseSku(index,row) {
            this.tableDataPlatformProduct.splice(index, 1)
        },
        add(value){
            this.listParamsSys.inputSys = ''
            this.tableDataChoose = []
            this.tableDataPlatformProduct = []
            this.$emit('addProduct',value)
        },
        close(){
            this.listParamsSys.inputSys = ''
            this.tableDataChoose = []
            this.tableDataPlatformProduct = []
            this.$emit('changeParent',false)
        },
        bindPlatformClick(sysRow){
            this.$refs.multipleTable_tableDataChoose.setCurrentRow(sysRow);
            this.sysRowForBinding = sysRow;
            this.doBindingWork();
        },
        bindSysClick(platformRow){
            this.platformRowForBinding = platformRow;
            this.$refs.multipleTable_tableDataPlatformProduct.setCurrentRow(platformRow);
        },
        doBindingWork(){
            if (!this.sysRowForBinding.id) {
                this.$message({
                    message:'请先选中系统产品',
                    type:'info'
                });
                return;
            }
            let isExits = false;
            this.tableDataPlatformProduct.forEach(res => {
                if (res.skuCode === this.sysRowForBinding.skuCode) {
                    isExits = true;
                }
            })
            if (isExits) {
                this.$message({
                    message:'该sku已存在!',
                    type:'error'
                });
                return;
            }
            let data = {
                productUnitId: this.sysRowForBinding.id,
                unitImageUrl: this.sysRowForBinding.mainImageUrl||"",
                skuName: this.sysRowForBinding.skuName,
                skuCode: this.sysRowForBinding.skuCode
            };
            this.tableDataPlatformProduct.push(data);
            /*this.axios({
                url: '/assistant/product/bindSku',
                data,
                method: "post",
            }).then(res => {
                if(res.success){
                    this.$message({
                        message:'绑定成功',
                        type:'success'
                    });
                    this.$set(this.platformRowForBinding,"bindSkuName",data.skuName);
                }
            })*/
        },
        handlePlatformCurrentChange(val) {
            this.listParamsPlatformProduct.currentPage = val;
            this.searchPlatformForBinding();
        },
        handlePlatformSizeChange(val) {
            this.listParamsPlatformProduct.pageSize = val;
            this.searchPlatformForBinding();
        },
        handleSysSizeChange(val) {
            this.listParamsSys.pageSize = val;
            this.searchSysForBinding();
        },
        handleSysCurrentChange(val) {
            this.listParamsSys.currentPage = val;
            this.searchSysForBinding();
        },
        platformProductRowChange(val){
            this.platformRowForBinding = val;
        },
        sysProductRowChange(val){
            this.sysRowForBinding = val;
        },
        searchSysForBinding() {
            let data = Object.assign({}, this.listParamsSys);
            data[data.valueSys] = data.inputSys;
            data.isQuerySaleInfo = 0;
            this.axios({
                url: 'assistant/systemProductUnitGroup/queryUnitPage',
                data,
                method: "post"
            }).then(res => {
                if (res.success) {
                    this.tableDataChoose = res.module.result;
                    this.listParamsSys.total = res.module.total;
                }
            });
        },
        searchPlatformForBinding(){
            let data = Object.assign({}, this.listParamsPlatformProduct);
            data[data.valuePlatform] = data.inputPlatform;
            data["isQueryBindSysSku"] = true;
            this.axios({
                url: 'assistant/product/online/queryOnlineProductUnit',
                data,
                method: "post"
            }).then(res => {
                if (res.success) {
                    if (res.module) {
                        let tableData = res.module.result;
                        if (this.parentData) {
                            let parentData = this.parentData;
                            this.parentData = null;
                            if (parentData.platformProductSkuIdList && parentData.platformProductSkuIdList.length) {
                                tableData.forEach(x=>{
                                    let find = parentData.platformProductSkuIdList.find(d => d == x.platformProductSkuId);
                                    if (find) {
                                        this.bindSysClick(x);
                                    }
                                });
                            }
                        }
                        this.tableDataPlatformProduct = tableData;
                        this.listParamsPlatformProduct.total = res.module.total;
                    }else{
                        this.tableDataPlatformProduct = [];
                        this.listParamsPlatformProduct.total = 0;
                    }
                }
            });
        },
        onshow(data){
            this.parentData = Object.assign({}, data);
            console.log('3', data,this.$parent.productBindingDialogData);
            this.listParamsPlatformProduct.inputPlatform = data.inputPlatform;
            this.listParamsPlatformProduct.valuePlatform = data.valuePlatform;
            this.sysRowForBinding = {};
            this.tableDataPlatformProduct = [];
            this.tableDataChoose = [];
            this.searchPlatformForBinding();
            this.searchSysForBinding();
        },
    },
}
</script>
<style lang="less" scoped>

</style>