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

<template>
    <el-dialog
        :title="$$t('vmf_select_article', '选择文章')"
        center
        width="800px"
        :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-button
                size="mini"
                type="primary"
                @click="onQuery"
            >
                {{$$t('vmf_query', '查询')}}
            </el-button>
        </el-form>
        <el-table
            ref="table"
            :data="goodsList"
            row-key="id"
            @selection-change="onSelectionChange"
        >
            <el-table-column
                type="selection"
                reserve-selection
                width="55"
            />
            <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.titleImageUrl]"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="goodsName"
                :label="$$t('vmf_name', '名称')"
            >
                <template slot-scope="scope">
                    <div class="label">{{ scope.row.id }}</div>
                    <div class="label">
                        {{ scope.row.title }}
                    </div>
                    <div class="label fs-small tc-g6">
                        {{ scope.row.subtitle }}
                    </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>
export default {
    name: 'CmsPicker',
    data() {
        return {
            dialog: {
                visible: false,
            },
            queryFormModel: {
                goodsName: '',
            },
            pagination: {},
            goodsList: [],
            selectedList: [],
        };
    },
    props: {
        value: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    computed: {
        valueMap() {
            return this.value.reduce((p, c) => {
                p[c] = true;
                return p;
            }, {});
        },
        selectedMap() {
            return this.selectedList.reduce((p, c) => {
                p[c] = true;
                return p;
            }, {});
        },
    },
    methods: {
        getListData(queryData) {
            return this.$api.Pt.CmsArticle.data(
                {
                    ...this.queryFormModel,
                    ...queryData,
                },
                {
                    isAxiosResponseData: true,
                },
            ).then(res => {
                this.goodsList = res.data;
                this.pagination = res.pagination;
            });
        },
        open() {
            this.dialog.visible = true;
            this.getListData();
            this.$nextTick(() => {
                this.$refs.table.clearSelection();
                this.value.forEach(item => {
                    console.log(item);
                    this.$refs.table.toggleRowSelection({ id: 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.id);
                return prev;
            }, []);
        },
        onDialogConfirm() {
            const { valueMap, selectedMap } = this;
            // 获取选中以前的旧值
            const oldVal = this.value.filter(item => selectedMap[item]);
            // 获取选中新值
            const newVal = this.selectedList.filter(item => !valueMap[item]);
            console.log(newVal);
            this.$emit('input', [...oldVal, ...newVal]);
            this.close();
        },
        onDialogCancel() {
            this.close();
        },
    },
};
</script>

<style lang="scss">
</style>
