<template>
    <div class="app-container" v-loading="fullLoading">
        <card-table :modalData="templateList" :searchParams="queryParams" @pagination="getList" :loading="loading"
            :tableSearch="true" @columnSearch="handleQuery" @resetList="resetQuery">
            <template #operations="{ selections }">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                        v-hasPermi="['civil:template:add']">{{ $t('template.add') }}</el-button>
                </el-col>
            </template>
            <template #default="{ list }">
                <el-table-column label="No." type="index" width="50" align="center" />
                <!-- <Column :label="$t('template.no')" prop="templateNo" :searchParams="queryParams" :showSearch="true"
                    width="200px">
                    <template #default="{ row }">
                        <span @click="handleView(row)" class="link-type">{{ row.templateNo }}</span>
                    </template>
</Column> -->
                <Column :label="$t('template.name')" prop="templateName" :searchParams="queryParams"
                    :showSearch="true" />
                <Column :label="$t('template.elevatorPosition')" prop="elevatorPosition" :searchParams="queryParams"
                    :showSearch="true" />
                <Column :label="$t('template.elevatorQuantity')" prop="elevatorQuantity" />
                <!-- <Column :label="$t('common.status')" prop="status" :searchParams="queryParams" :showSearch="true"
                    searchType="select" :searchDict="dict.type.tempalte_status" width="200px" /> -->
                <Column :label="$t('common.operate')" width="250" fixed="right" :showSearch="true" searchType="operate">
                    <template #default="{ row }">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(row)"
                            v-hasPermi="['civil:template:view']">{{ $t('common.view') }}</el-button>
                        <el-dropdown @command="(command) => handleCommand(command, row)"
                            v-hasPermi="['civil:template:edit', 'civil:template:remove']">
                            <el-button icon="el-icon-d-arrow-right" size="mini" type="text">
                                {{ $t('common.more') }}</el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="edit">
                                    <el-button size="mini" type="text" icon="el-icon-edit"
                                        v-hasPermi="['civil:template:edit']">{{ $t('common.edit') }}</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item command="delete">
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        v-hasPermi="['civil:template:remove']">{{ $t('common.delete') }}</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </Column>
            </template>
        </card-table>

        <el-dialog :title="title" :visible.sync="open" width="500px" :before-close="cancel" append-to-body
            :close-on-click-modal="false">
            <el-form class="template-form" ref="form" :key="'form_' + type" :model="form"
                :rules="type != 'view' ? rules : {}" label-position="top">
                <Input prop="templateName" :required="type != 'view'" :disabled="type == 'view'"
                    :label="$t('template.name')" :maxlength="30" width="400px"></Input>
                <Input prop="elevatorPosition" :required="type != 'view'" :disabled="type == 'view'"
                    :label="$t('template.elevatorPosition')" :maxlength="20" width="400px"></Input>
                <Select prop="elevatorQuantity" :required="type != 'view'" :disabled="type == 'view'"
                    :data="quantityList" :label="$t('template.elevatorQuantity')"
                    :styleObj="{ width: '400px' }"></Select>
                <el-form-item :label="$t('template.image')" prop="file">
                    <el-checkbox-group v-show="false" v-model="form.file"></el-checkbox-group>
                    <ImageUpload v-if="type != 'view' || form.file" :class="{ 'noPlus': type == 'view' }"
                        v-model="form.file" :disabled="type == 'view'" :isShowTip="type != 'view'"
                        :limit="imageLimit" />
                    <el-empty v-else :description="$t('lead.noAnnexYet')" :image-size="75" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="type != 'view'" type="primary" icon="el-icon-circle-check" @click="submitForm"
                    :loading="submitLoading">{{ $t('common.confirm') }}</el-button>
                <el-button @click="cancel" icon="el-icon-remove-outline">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listTemplates, getTemplates, addTemplates, updateTemplates, delTemplates } from "@/api/business/civil/templates";
import ImageUpload from "@/components/ImageUpload/index";

export default {
    components: { ImageUpload },
    data() {
        return {
            fullLoading: false,
            submitLoading: false,
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 项目表格数据
            templateList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            rules: {
                file: [
                    { required: true, message: this.$t('common.pleaseSelect') + this.$t('template.image'), trigger: "change" }
                ],
            },
            type: '',
            imageLimit: 1,
            quantityList: [{ label: 1, value: 1 }, { label: 2, value: 2 }, { label: 3, value: 3 }, { label: 4, value: 4 }]
        }
    },
    created() {
        this.getList();
    },
    methods: {
        handleCommand(command, row) {
            switch (command) {
                case "edit":
                    this.handleEdit(row)
                    break;
                case "delete":
                    this.handleDelete(row)
                    break;
            }
        },
        /** 查询项目列表 */
        getList() {
            this.loading = true;
            listTemplates(this.queryParams).then(response => {
                this.templateList = response.rows;
                this.queryParams.total = response.total;
                this.loading = false;
            });
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList();
        },
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList();
        },
        handleAdd() {
            this.type = 'add';
            this.title = this.$t('template.add');
            this.open = true;
        },
        handleEdit(row) {
            this.type = 'edit';
            this.title = this.$t('template.edit');
            this.getTemplate(row.id);
            this.open = true;
        },
        handleView(row) {
            this.type = 'view';
            this.title = this.$t('template.view');
            this.getTemplate(row.id);
            this.open = true;
        },
        handleDelete(row) {
            this.$modal.confirm(this.$t('common.isDelete')).then(function () {
                return delTemplates(row.id);
            }).then(() => {
                this.getList(this.queryParams);
                this.$modal.msgSuccess(this.$t('common.deleteSuccess'));
            }).catch(() => { });
        },
        getTemplate(id) {
            this.fullLoading = true;
            getTemplates(id).then(response => {
                this.form = response.data;
                this.fullLoading = false;
            }).catch(() => {
                this.fullLoading = false;
            });
        },
        cancel() {
            this.open = false
            this.reset()
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    if (this.form.id != undefined) {
                        updateTemplates(this.form).then(response => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess(this.$t('common.editSuccess'));
                                this.cancel();
                                this.getList();
                            } else {
                                this.$modal.msgError(response.msg);
                            }
                            this.submitLoading = false;
                        }).catch(() => { this.submitLoading = false; });
                    } else {
                        addTemplates(this.form).then(response => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess(this.$t('common.addSuccess'));
                                this.cancel();
                                this.getList();
                            } else {
                                this.$modal.msgError(response.msg);
                            }
                            this.submitLoading = false;
                        }).catch(() => { this.submitLoading = false; });
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.template-form {
    padding: 0 20px;
}

::v-deep .template-form .el-form-item--medium .el-form-item__label {
    line-height: 15px;
}

::v-deep .noPlus .el-upload--picture-card {
    display: none;
}
</style>
