<!-- Created by henian.xu on 2018/9/7. -->

<template>
    <el-dialog
        :title="$$t('vmf_select_goods', '选择商品')"
        center
        width="900px"
        :visible.sync="dialog.visible"
    >
        <el-form
            size="mini"
            :inline="true"
            :model="queryFormModel"
        >
            <el-form-item
                prop="goodsName"
                :label="$$t('vmf_goods_name', '商品名称')"
            >
                <el-input
                    v-model="queryFormModel.goodsName"
                    :placeholder="$$t('vmf_please_enter_goods_name', '请输入商品名称')"
                />
            </el-form-item>
            <el-form-item
                prop="goodsName"
                :label="$$t('vmf_goods_sn', '商品编码')"
            >
                <el-input
                    v-model="queryFormModel.goodsSn"
                    :placeholder="$$t('vmf_please_enter_goods_name', '请输入商品名称')"
                />
            </el-form-item>
            <el-form-item
                prop="shopTagId"
                :label="$$t('vmf_goods_group', '商品分组')"
            >
                <RemoteSelect
                    multiple
                    remote="/sp/shopTag/select"
                    :placeholder="$$t('vmf_placeholder2', '请输入')"
                    :props="{id:'id',name:'tagName'}"
                    v-model="queryFormModel.shopTagId"
                />
            </el-form-item>
            <el-button
                size="mini"
                type="primary"
                @click="onQuery"
            >
                {{$$t('vmf_query', '查询')}}
            </el-button>
        </el-form>
        <el-table
            ref="table"
            :data="goodsList"
            row-key="goodsId"
            :highlight-current-row='!multiple'
            @selection-change="onSelectionChange"
            @current-change="onCurrentChange"
        >
            <el-table-column
                v-if='multiple'
                type="selection"
                reserve-selection
                width="55"
            />
            <el-table-column
                v-else
                reserve-selection
                width="40"
            >
                <template slot-scope="{row}">
                    <el-radio
                        class="table-cell-radio"
                        :value='(currentSelected||{}).id'
                        :label="row.id">
                    </el-radio>
                </template>
            </el-table-column>
            <el-table-column
                prop="goodsName"
                :label="$$t('vmf_image', '图片')"
                width="50px"
            >
                <template slot-scope="scope">
                    <image-list
                        class="dp-ifx"
                        no-preview
                        :item-width="30"
                        :data="[scope.row.mainImageUrl]"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="goodsName"
                :label="$$t('vmf_name', '名称')"
            >
                <template slot-scope="scope">
                    <!--<div class="label">{{ scope.row.goodsId }}</div>-->
                    <div class="label">
                        {{ scope.row.goodsName }}
                    </div>
                    <div class="label fs-small tc-g6">
                        {{ scope.row.goodsSubtitle }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="ma-t ta-r">
            <pagination
                v-model="pagination"
                @input="getListData"
            />
        </div>

        <div
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                type="primary"
                size="small"
                @click="onDialogConfirm"
            >
                {{ $$t('vmf_confirm', '确 定') }}
            </el-button>
            <el-button
                size="small"
                @click="onDialogCancel"
            >
                {{ $$t('vmf_cancel', '取 消') }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { isArray } from '@vmf/shared';

export default {
    name: 'GoodsPicker',
    data() {
        return {
            dialog: {
                visible: false,
            },
            queryFormModel: {
                goodsName: '',
                goodsSn: '',
                shopTagId: [],
            },
            pagination: {},
            goodsList: [],
            selectedList: [],
            currentSelected: null,
        };
    },
    props: {
        value: {
            type: [Array, Number, String],
            default() {
                return [];
            },
        },
        apiQuery: {
            type: Object,
            default: () => ({}),
        },
        activityId: {
            type: [String, Number],
            default: '',
        },
        multiple: { type: Boolean, default: true },
    },
    computed: {
        values() {
            return (isArray(this.value) ? this.value : [this.value]).filter(Boolean);
        },
        valueMap() {
            return this.values.reduce((p, c) => {
                p[c] = true;
                return p;
            }, {});
        },
        selectedMap() {
            return this.selectedList.reduce((p, c) => {
                p[c] = true;
                return p;
            }, {});
        },
    },
    methods: {
        getListData(queryData) {
            const { queryFormModel, apiQuery, activityId } = this;
            const params = {
                activityId,
                ...queryFormModel,
                shopTagIds: queryFormModel.shopTagId.join(','),
                goodsStatus: 3,
                ...(apiQuery || {}),
                ...queryData,
            };
            delete params.shopTagId;
            return this.$http
                .get('/gd/goods/selectByPage', params, {
                    isAxiosResponseData: true,
                })
                .then(({ data, pagination }) => {
                    this.goodsList = data;
                    this.pagination = pagination;
                });
        },
        open() {
            this.dialog.visible = true;
            this.getListData();
            this.$nextTick(() => {
                this.$refs.table.clearSelection();
                this.values.forEach(item => {
                    this.$refs.table.toggleRowSelection({ goodsId: item }, true);
                });
            });
        },
        close() {
            this.dialog.visible = false;
            this.pagination = {};
        },
        onQuery() {
            this.pagination = {};
            this.getListData();
        },
        onSelectionChange(val) {
            this.selectedList = val.reduce((prev, curr) => {
                prev.push(curr.goodsId);
                return prev;
            }, []);
        },
        onCurrentChange(val) {
            console.log(val);
            this.currentSelected = val;
        },
        onDialogConfirm() {
            const { multiple, currentSelected, valueMap, selectedMap } = this;
            if (!multiple) {
                this.$emit('input', (currentSelected || {}).id || '');
            } else {
                // 获取选中以前的旧值
                const oldVal = this.value.filter(item => selectedMap[item]);
                // 获取选中新值
                const newVal = this.selectedList.filter(item => !valueMap[item]);
                this.$emit('input', [...oldVal, ...newVal]);
            }
            this.close();
        },
        onDialogCancel() {
            this.close();
        },
    },
};
</script>

<style lang="scss">
.table-cell-radio {
    > .el-radio__label {
        display: none;
    }
}
</style>
