<template>
    <div class="list-view">
        <page-title>
            <el-button @click="openEdit()" type="primary">新增</el-button>

            <el-tooltip content="已经寄售的藏品还没有受到限制，点我开始限制它们">
                <el-button @click="initRule()" type="danger" :loading="saving">应用当前规则到在售藏品</el-button>
            </el-tooltip>
        </page-title>
        <div class="filters-container">
            <el-form :model="formData" :inline="true"> </el-form>

            <div class="tool-wrapper">
                <el-input
                    placeholder="搜索..."
                    v-model="search"
                    clearable
                    class="filter-item search"
                    @keyup.enter.native="initData"
                >
                    <el-button @click="initData" slot="append" icon="el-icon-search"> </el-button>
                </el-input>
            </div>
        </div>
        <el-table
            :data="tableData"
            row-key="id"
            ref="table"
            header-row-class-name="table-header-row"
            header-cell-class-name="table-header-cell"
            row-class-name="table-row"
            cell-class-name="table-cell"
            :height="tableHeight"
            v-loading="fetchingData"
        >
            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
            <el-table-column prop="id" label="ID" width="100"> </el-table-column>
            <el-table-column prop="collectionId" label="藏品ID"> </el-table-column>
            <el-table-column prop="collectionName" label="藏品名称"> </el-table-column>
            <el-table-column prop="minPrice" label="最低价格"> </el-table-column>
            <el-table-column prop="expireSeconds" label="多少秒到期"> </el-table-column>
            <el-table-column prop="expireDateTime" label="到期时间"> </el-table-column>
            <el-table-column prop="allowOnShelf" label="是否允许上架" min-width="100" align="center">
                <template v-slot="scope">
                    <el-tag type="primary" v-if="scope.row.allowOnShelf">是</el-tag>
                    <el-tag type="info"  v-else>否</el-tag>
                </template>

            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="150">
                <template v-slot:header="{ column }">
                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"> </sortable-header>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="140">
                <template v-slot="scope">
                    <el-button @click="openEdit(scope.row)" size="mini" plain>修改</el-button>
                    <el-button @click="onDelete(scope.row)" size="mini" plain type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
            <el-pagination
                background
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalElements"
            >
            </el-pagination>
        </div>

        <el-dialog :title="editTitle" :visible.sync="editVisible">
            <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="108px">
                <el-form-item label="项目" prop="projectId">
                    <project-select v-model="editForm.projectId" :disabled="!canEdit"> </project-select>
                </el-form-item>
                <el-form-item prop="collectionId" label="寄售的藏品">
                    <collection-search
                        v-model="editForm.collectionId"
                        :projectId="editForm.projectId"
                    ></collection-search>
                </el-form-item>
                <el-form-item prop="minPrice" label="最小价格">
                    <el-input-number v-model="editForm.minPrice" placeholder="请输入最小价格"></el-input-number>
                    <el-tooltip
                        class="inp-help"
                        content="如果用户寄售低于这个价格时，藏品将无法被他人购买，前端会显示已售罄或交易中"
                    >
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item prop="expireSeconds" label="到期秒数">
                    <el-input
                        v-model="editForm.expireSeconds"
                        placeholder="请输入到期秒数,大于0就有效"
                        :min="-1"
                    ></el-input>
                    <el-tooltip class="inp-help" content="用户寄售成功后，系统开始自动倒计时，到期后解除售卖限制">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item prop="expireDateTime" label="到期时间">
                    <el-date-picker
                        v-model="editForm.expireDateTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="到期时间"
                    ></el-date-picker>
                    <el-tooltip class="inp-help" content="用户无论何时寄售，必须等到指定时间后才自动解除售卖限制">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item prop="allowOnShelf" label="是否允许上架">
                    <el-switch v-model="editForm.allowOnShelf">
                    </el-switch>
                </el-form-item>
                
                <el-form-item class="form-submit">
                    <el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
                    <el-button @click="onClose" :disabled="saving">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import pageableTable from '@/mixins/pageableTable';
import SortableHeader from '../components/SortableHeader.vue';

export default {
    components: { SortableHeader },
    name: 'projectList',
    mixins: [pageableTable],
    data() {
        return {
            multipleMode: true,
            search: '',
            url: '/assetSellLimit/all',
            downloading: false,
            formData: {
                createdAt: ''
            },
            canEdit: true,
            editTitle: '新增',
            editForm: {
                id: null,
                collectionId: '',
                minPrice: '',
                expireSeconds: '',
                expireDateTime: ''
            },
            editRules: {
                projectId: [
                    {
                        required: true,
                        message: '请选择项目',
                        trigger: 'blur'
                    }
                ],
                collectionId: [
                    {
                        required: true,
                        message: '请选择藏品',
                        trigger: 'blur'
                    }
                ],
                minPrice: [
                    {
                        required: true,
                        message: '请输入最低价格',
                        trigger: 'blur'
                    }
                ]
            },
            editVisible: false,
            saving: false
        };
    },
    computed: {
        selection() {
            return this.$refs.table.selection.map(i => i.id);
        }
    },
    methods: {
        beforeGetData() {
            return {
                search: this.search,
                query: { del: false, ...this.formData }
            };
        },
        afterGetData() {},
        openEdit(rowData) {
            this.editVisible = true;
            if (rowData) {
                this.editTitle = '修改';
                this.$nextTick(() => {
                    this.editForm = Object.assign({}, this.editForm, rowData);
                });
                this.canEdit = false;
            } else {
                this.editTitle = '新增';
                this.$nextTick(() => {
                    this.$refs.editForm.resetFields();
                    this.editForm.id = null;
                });
                this.canEdit = true;
            }
        },
        onSave() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.saving = true;
                    this.$http
                        .post('/assetSellLimit/save', this.editForm, { body: 'json' })
                        .then(data => {
                            this.$message.success('操作成功');
                            this.onClose();
                            this.initData();
                        })
                        .catch(err => {
                            this.$message.error(err.error);
                        })
                        .finally(() => {
                            this.saving = false;
                        });
                }
            });
        },
        onClose() {
            if (this.$refs.editForm) {
                this.$refs.editForm.resetFields();
            }

            this.editVisible = false;
        },
        onDelete(rowData) {
            if (!rowData) {
                this.$message.error('需要参数');
                return;
            }

            this.$confirm(`是否删除项目'${rowData.id}'`).then(() => {
                this.saving = true;
                this.$http
                    .post('/assetSellLimit/delete', rowData, { body: 'json' })
                    .then(() => {
                        this.$message.success('操作成功');
                        this.initData();
                    })
                    .catch(err => {
                        this.$message.error(err.error);
                    })
                    .finally(() => {
                        this.saving = false;
                    });
            });
        },
        initRule() {
            this.$confirm('是否应用当前规则到在售的藏品?').then(() => {
                this.saving = true;
                this.$http
                    .post('/assetSellLimit/initLimitSellPriceData', {}, { body: 'json' })
                    .then(res => {
                        this.$message.success(res);
                        this.initData();
                    })
                    .catch(err => {
                        this.$message.error(err.error);
                    })
                    .finally(() => {
                        this.saving = false;
                    });
            });
        }
    }
};
</script>
<style lang="less" scoped>
.tool-wrapper {
    display: block;
    overflow: hidden;

    .tool-right {
        float: left;
    }
}

.inp-help {
    margin-left: 10px;
}
</style>
