<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </div>
</template>

<script>
import { getCommodityList, delCommodity, setCommodityStatus } from '@/api/management/goods';
import { UrlConfig } from '@/router/index';

export default {
    name: 'Dictionary',
    data() {
        return {
            EffectiveTypeList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '100px',
                reset: true,
                queryObject: {
                    name: {
                        type: 'text',
                        label: this.$t('orderAuthor.name')
                    },
                    status: {
                        type: 'select',
                        label: this.$t('orderAuthor.state'),
                        config: {
                            data: this.$ConstSelect.Status
                        }
                    }
                }
            },
            queryList: {
                query: getCommodityList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('orderAuthor.commodityName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('orderAuthor.permissionName'),
                        prop: 'permissionName'
                    },
                    {
                        title: `${this.$t('orderAuthor.price')}（￥）`,
                        prop: 'price'
                    },
                    {
                        title: this.$t('orderAuthor.state'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.status, this.EffectiveTypeList, ['value', 'label']); },
                        tagType: (row) => {
                            switch (row.status) {
                            case '1': return 'success';
                            default: return 'warning';
                            }
                        }
                    },
                    {
                        title: this.$t('orderAuthor.describtion'),
                        prop: 'remarks'
                    },
                    {
                        title: this.$t('orderAuthor.creationTime'),
                        prop: 'createTime'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: this.$i18n.locale == 'en' ? '300' : '250',
                        buttons: [
                            {
                                name: this.$t('global.edit'),
                                type: 'primary',
                                handleClick: this.handleEdit
                            },
                            {
                                name: this.$t('orderAuthor.setupFailure'),
                                handleClick: this.handleEfficacy,
                                type: 'warning',
                                showControl: (row) => {
                                    return row.status == '1';
                                }
                            },
                            {
                                name: this.$t('orderAuthor.setupEffective'),
                                type: 'primary',
                                handleClick: this.handleEfficacy,
                                showControl: (row) => {
                                    return row.status == '0';
                                }
                            },
                            {
                                name: this.$t('global.delete'),
                                type: 'danger',
                                handleClick: this.handleDelete
                            }
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('global.add'), handler: this.handleAdd }
                ]
            },

            currentModel: {}
        };
    },
    mounted() {
        this.loadInitData();
    },
    methods: {
        async loadInitData() {
            this.$Dictionary.effectiveType().then(list => {
                this.$convertList(list, this.EffectiveTypeList, elem => {
                    return true;
                });
            });
        },
        handleEdit(index, row) {
            this.$router.push({ path: `${UrlConfig.orderauthor.commodityDraft}/edit/${row.id}` });
        },

        handleAdd() {
            this.$router.push({ path: `${UrlConfig.orderauthor.commodityDraft}/add/0` });
        },
        // 设置失效
        handleEfficacy(index, row) {
            this.$confirm(this.$t('tip.updateProductTip'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                setCommodityStatus(row.id).then(res => {
                    this.$message.success(this.$t('tip.operationSuccessfully'));
                    this.reloadTable();
                }).catch((error) => {
                    this.$messageBox(`${this.$t('tip.operationFailed')}, ${error.message}`);
                    this.reloadTable();
                });
            }).catch(() => { });
        },
        handleDelete(index, row) {
            this.$confirm(this.$t('tip.deleteProductTip'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                delCommodity(row.id).then(response => {
                    this.$message.success(this.$t('tip.successfullyDelete'));
                    this.reloadTable();
                }).catch((error) => {
                    this.reloadTable();
                    this.$messageBox(error.message);
                });
            }).catch(() => { });
        },

        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>
