<template>
    <div class="app-container" id="repair">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="120px"
        >
            <el-form-item label="关键字" prop="keyword">
                <el-input
                    v-model="queryParams.keyword"
                    placeholder="请输入关键字"
                    clearable
                    maxlength="50"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="单位名称" prop="backUnit">
                <el-select
                    v-model="queryParams.backUnit"
                    placeholder="请选择单位名称"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="dict in unitInfoSelectList"
                        :key="dict.unitId"
                        :label="dict.unitName"
                        :value="dict.unitId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="工程名称" prop="backPro">
                <el-select
                    v-model="queryParams.backPro"
                    placeholder="请选择工程名称"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="dict in projectSelectList"
                        :key="dict.projectId"
                        :label="dict.projectName"
                        :value="dict.projectId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="工机具类型" prop="type">
                <!--        <selectTree-->
                <!--          ref="mychildSon"-->
                <!--          style="width: 240px"-->
                <!--          :treeList="deptList"-->
                <!--          :treeProps="{-->
                <!--            children: 'children',-->
                <!--            label: 'label',-->
                <!--          }"-->
                <!--          nodeKey="id"-->
                <!--          :defaultSelect="true"-->
                <!--          :defaultData="defaultData"-->
                <!--          :clearable="true"-->
                <!--          :placeholder="'请选择'"-->
                <!--          @handleNodeClick="selectDrop"-->
                <!--        ></selectTree>-->
                <Tree
                    ref="mychildSon"
                    :width="240"
                    :dataList="deptList"
                    @changeId="selectDrop"
                ></Tree>
            </el-form-item>
            <el-form-item label="退料单号" prop="backCode">
                <el-input
                    v-model="queryParams.backCode"
                    placeholder="退料单号"
                    clearable
                    maxlength="50"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="维修状态" prop="repairStatus">
                <el-select
                    v-model="queryParams.repairStatus"
                    placeholder="请选择维修状态"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="dict in dicSelectList"
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="任务创建时间">
                <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    :disabled="!checkResultOne || multiple"
                    type="primary"
                    plain
                    size="mini"
                    @click="complete(1)"
                    >提交审核</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    >导出</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="typeList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
                label="序号"
                sortable
                align="center"
                type="index"
            />
            <el-table-column
                label="维修单号"
                align="center"
                prop="repairCode"
                sortable
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="退料单位名称"
                align="center"
                prop="backUnit"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="退料工程名称"
                align="center"
                prop="backPro"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="维修机具类型"
                align="center"
                prop="type"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="任务创建人"
                align="center"
                prop="createName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="任务创建时间"
                align="center"
                prop="createTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="退料单号"
                align="center"
                prop="backCode"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                sortable
                label="维修状态"
                align="center"
                prop="repairStatus"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="250"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-zoom-in"
                        @click="handleSee(scope.row, 'see')"
                        >查看</el-button
                    >
                    <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-edit"
                        :disabled="scope.row.repairStatusCode == '44'"
                        @click="handleUpdate(scope.row, 'update')"
                        >维修</el-button
                    >
                    <!-- <el-button
            size="mini"
            type="info"
            icon="el-icon-circle-close"
            @click="handleReturn(scope.row)"
            v-hasPermi="['store:labelType:edit']"
            >退回退料</el-button
          > -->
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 维修对话框 -->
        <el-dialog
            :visible.sync="open"
            width="1650px"
            append-to-body
            :before-close="onClose"
        >
            <el-form
                :model="dialogQueryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="100px"
            >
                <el-row>
                    <el-form-item label="关键字" prop="keyword">
                        <el-input
                            v-model="dialogQueryParams.keyword"
                            placeholder="请输入关键字"
                            clearable
                            maxlength="50"
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item label="类型名称" prop="typeName">
                        <selectTree
                            ref="mychildDialog"
                            style="width: 240px"
                            :treeList="deptList"
                            :treeProps="{
                                children: 'children',
                                label: 'label',
                            }"
                            nodeKey="id"
                            :defaultSelect="true"
                            :defaultData="defaultData"
                            :clearable="true"
                            :placeholder="'请选择类型名称'"
                            @handleNodeClick="selectDropDialog"
                        ></selectTree>
                    </el-form-item>
                    <el-form-item label="规格型号" prop="type">
                        <selectTree
                            ref="mychildDialogTwo"
                            style="width: 240px"
                            :treeList="deptTypeList"
                            :treeProps="{
                                children: 'children',
                                label: 'label',
                            }"
                            nodeKey="id"
                            :defaultSelect="true"
                            :defaultData="defaultData"
                            :clearable="true"
                            :placeholder="'请选择规格型号'"
                            @handleNodeClick="selectDropDialogTwo"
                        ></selectTree>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="getDialogList"
                            >查询</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQueryDialog"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-row>
            </el-form>
            <div style="margin-bottom: 10px" v-if="type == 'update'">
                <el-button
                    :disabled="selectionList.length == 0"
                    size="mini"
                    type="primary"
                    @click="complete(2)"
                    >维修合格</el-button
                >
                <el-button
                    :disabled="selectionList.length == 0 || !checkResult"
                    size="mini"
                    type="primary"
                    @click="complete(3)"
                    >完成维修</el-button
                >
            </div>
            <el-table
                v-loading="loading"
                :data="repairList"
                height="1000px"
                max-height="500px"
                @selection-change="selectionChange"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                    label="序号"
                    sortable
                    align="center"
                    type="index"
                />
                <el-table-column
                    label="类型名称"
                    align="center"
                    prop="typeName"
                    sortable
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="规格型号"
                    align="center"
                    prop="type"
                    sortable
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="编码"
                    sortable
                    align="center"
                    prop="code"
                    width="200"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="维修总量"
                    align="center"
                    sortable
                    prop="repairNum"
                    :show-overflow-tooltip="true"
                />

                <el-table-column
                    label="维修合格数量"
                    align="center"
                    sortable
                    prop="repairedNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="报废数量"
                    align="center"
                    sortable
                    prop="scrapNum"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="待修状态"
                    align="center"
                    prop="status"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="scope">
                        {{ getStatusText(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="维修人员"
                    align="center"
                    prop="repairer"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="维修时间"
                    align="center"
                    prop="updateTime"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    width="300px"
                    v-if="type == 'update'"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="internalRepair(scope.row)"
                            >内部维修</el-button
                        >
                        <el-button
                            size="mini"
                            type="success"
                            @click="backRepair(scope.row)"
                            >返厂维修</el-button
                        >
                        <el-button
                            size="mini"
                            type="info"
                            @click="broken(scope.row)"
                            >待报废</el-button
                        >
                        <!-- <el-button size="mini" type="warning" @click="complete(scope.row)"
              >完成维修</el-button
            > -->
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="dialogTotal > 0"
                :total="dialogTotal"
                :page.sync="dialogQueryParams.pageNum"
                :limit.sync="dialogQueryParams.pageSize"
                @pagination="getDialogList"
            />
        </el-dialog>

        <el-dialog
            v-loading.fullscreen.lock="fullscreenLoading"
            :title="title"
            :visible.sync="openOne"
            append-to-body
            width="400px"
        >
            <div class="submit_box">
                <div>
                    <i
                        class="el-icon-circle-check"
                        style="color: #ff9900; font-size: 30px"
                    ></i>
                </div>
                <div class="submit_box_title">
                    <div>{{ openTextOne }}</div>
                    <div>{{ openTextTwo }}</div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelOneForm">返回</el-button>
                <el-button type="primary" @click="submitOpenOneForm()"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <el-dialog
            v-loading.fullscreen.lock="fullscreenLoading"
            :title="title"
            :visible.sync="openTwo"
            append-to-body
            width="400px"
        >
            <div class="submit_box_two">
                <div>
                    <i
                        class="el-icon-circle-check"
                        style="color: #00c196; font-size: 30px"
                    ></i>
                </div>
                <div class="submit_box_title">{{ openTextThree }}</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelTwoForm">返回</el-button>
            </div>
        </el-dialog>
        <dialogOneForm
            :dialogTitle="title"
            :isShowFlag.sync="isShowOneFlag"
            :priKey="priKey"
            :rowObj="rowObj"
            @domainChange="domainChange"
        ></dialogOneForm>
        <dialogTwoForm
            :dialogTitle="title"
            :isShowFlag.sync="isShowTwoFlag"
            :priKey="priKey"
            :rowObj="rowObj"
            @domainChange="domainChange"
        ></dialogTwoForm>
        <dialogThreeForm
            :dialogTitle="title"
            :isShowFlag.sync="isShowThreeFlag"
            :priKey="priKey"
            :rowObj="rowObj"
            @domainChange="domainChange"
        ></dialogThreeForm>
    </div>
</template>

<script>
    import {
        getRepairTaskListApi,
        getRepairMaTypeListApi,
        getUnitInfoSelectApi,
        getProjectSelectApi,
        addFastRepairApplyApi,
        addCompleteRepairApi,
        addEndRepairTaskApi,
        listPartTypeApi,
        getDicSelectApi,
        getMaTypeSelectApi,
    } from '@/api/repairTest/repair'
    import { getProjectList } from '@/api/claimAndRefund/receive'
    import dialogOneForm from './dialogOneForm.vue'
    import dialogTwoForm from './dialogTwoForm.vue'
    import dialogThreeForm from './dialogThreeForm.vue'
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import selectTree from './selectTree.vue'
    import Tree from './tree.vue'
    export default {
        name: 'Repair',
        dicts: ['sys_normal_disable'],
        components: {
            dialogOneForm,
            dialogTwoForm,
            dialogThreeForm,
            Treeselect,
            selectTree,
            Tree,
        },
        data() {
            return {
                deptList: [],
                dicSelectList: [],
                deptTypeList: [],
                checkResult: false,
                checkResultOne: false,
                // 维修合格的数据
                selectionList: [],
                unitInfoSelectList: [],
                projectSelectList: [],
                repairList: [],
                type: '',
                typeText: 1,
                fullscreenLoading: false,
                isShowOneFlag: false,
                isShowTwoFlag: false,
                isShowThreeFlag: false,
                openOne: false,
                openTwo: false,
                priKey: '',
                rowObj: {},
                openTextOne: '',
                openTextTwo: '',
                openTextThree: '',
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                dialogTotal: 0,
                // 字典表格数据
                typeList: [],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
                interOpen: false,
                backOpen: false,
                brokenOpen: false,
                // 日期范围
                dateRange: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    keyword: '',
                    backUnit: '',
                    backPro: '',
                    type: '',
                    backCode: '',
                    repairStatus: '',
                },
                dialogQueryParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                defaultData: {},
            }
        },
        created() {
            getUnitInfoSelectApi().then((res) => {
                this.unitInfoSelectList = res.data
            })
            getProjectList().then((res) => {
                this.projectSelectList = res.data
            })
            getDicSelectApi({ value: 'wx_task' }).then((res) => {
                this.dicSelectList = res.data
            })
        },
        mounted() {
            this.getTree()
            this.getList()
        },
        methods: {
            onClose() {
                this.open = false
                this.queryParams.type = ''
                this.resetQueryDialog()
                this.getList()
            },
            selectDrop(value) {
                console.log('33333333333', value)
                this.queryParams.type = value
            },
            selectDropDialog(value) {
                this.dialogQueryParams.typeName = value
            },
            selectDropDialogTwo(value) {
                this.dialogQueryParams.type = value
            },
            /** 查询字典类型列表 */
            getList() {
                this.loading = true
                this.queryParams.startTime = this.dateRange[0]
                this.queryParams.endTime = this.dateRange[1]
                getRepairTaskListApi(this.queryParams)
                    .then((response) => {
                        this.typeList = response.rows
                        this.total = response.total
                        this.loading = false
                    })
                    .catch(() => {
                        this.loading = false
                    })
            },
            getTree() {
                listPartTypeApi().then((response) => {
                    this.deptList = response.data
                    // this.deptList = this.handleTree(response.data, "id");
                })
                getMaTypeSelectApi().then((response) => {
                    this.deptTypeList = response.data
                })
            },
            /** 转换部门数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children
                }
                return {
                    id: node.paId,
                    label: node.paName,
                    children: node.children,
                }
            },
            /** 转换部门数据结构 */
            normalizerType(node) {
                if (node.children && !node.children.length) {
                    delete node.children
                }
                return {
                    id: node.id,
                    label: node.label,
                    children: node.children,
                }
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.reset()
            },
            // 表单重置
            reset() {
                this.form = {
                    dictId: undefined,
                    dictName: undefined,
                    dictType: undefined,
                    status: '0',
                    remark: undefined,
                }
                this.resetForm('form')
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.queryParams.pageSize = 10
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams.type = ''
                this.dateRange = []
                this.queryParams.backUnit = ''
                this.queryParams.backPro = ''
                this.resetForm('queryForm')
                this.$refs.mychildSon.inputValue = ''
                this.handleQuery()
            },
            /** 重置按钮操作 */
            resetQueryDialog() {
                // this.dialogQueryParams = {};
                this.dialogQueryParams.keyword = ''
                this.dialogQueryParams.type = ''
                this.dialogQueryParams.typeName = ''
                this.resetForm('dialogQueryParams')
                this.getDialogList()
                this.$refs.mychildDialog.clearSelect()
                this.$refs.mychildDialogTwo.clearSelect()
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.selectionList = selection
                this.checkResultOne = selection.every(
                    (item) => item.repairStatusCode == '43',
                )
                this.ids = selection.map((item) => item.dictId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            selectionChange(selection) {
                this.selectionList = selection
                this.checkResult = selection.every(
                    (item) =>
                        item.repairNum === item.repairedNum + item.scrapNum,
                )
            },
            /** 修改按钮操作 */
            handleUpdate(row, type) {
                this.taskId = row.taskId
                this.getDialogList()
                this.$eventBus.$emit('taskId', row.taskId)
                this.open = true
                this.type = type
                this.selectionList = []
                this.dialogQueryParams = {}
            },
            handleSee(row, type) {
                this.taskId = row.taskId
                this.getDialogList()
                this.open = true
                this.type = type
                this.selectionList = []
                this.dialogQueryParams = {}
                this.resetForm('dialogQueryParams')
            },
            getDialogList() {
                let params = {
                    taskId: this.taskId,
                    pageNum: this.dialogQueryParams.pageNum,
                    pageSize: this.dialogQueryParams.pageSize,
                    keyword: this.dialogQueryParams.keyword,
                    typeName: this.dialogQueryParams.typeName,
                    type: this.dialogQueryParams.type,
                }
                // this.loading = true;
                getRepairMaTypeListApi(params).then((res) => {
                    if (res.code == 200) {
                        this.repairList = res.rows
                        this.dialogTotal = res.total
                        // this.loading = false;
                    }
                })
            },
            handleReturn() {
                this.title = '确认操作'
                this.openOne = true
                this.openTextOne = '确定退回退料么'
                this.openTextTwo = '确定退回退料么'
                this.typeText = 1
            },

            submitOpenOneForm() {
                this.openOne = false
                if (this.typeText == 1) {
                    addEndRepairTaskApi(this.selectionList)
                        .then((res) => {
                            if (res.code == 200) {
                                this.openTwo = true
                                this.openTextThree = '已提交审核！'
                                // this.getDialogList()
                            }
                        })
                        .catch(() => {})
                }
                if (this.typeText == 2) {
                    addFastRepairApplyApi(this.selectionList)
                        .then((res) => {
                            if (res.code == 200) {
                                this.openTwo = true
                                this.openTextThree = '维修合格操作完成！'
                                // this.getDialogList()
                            }
                        })
                        .catch(() => {})
                }
                if (this.typeText == 3) {
                    let ids = []
                    let arr = this.selectionList
                    arr.map((item) => {
                        ids.push(item.id)
                    })
                    addCompleteRepairApi(ids)
                        .then((res) => {
                            if (res.code == 200) {
                                this.openTwo = true
                                this.openTextThree = '完成维修！'
                                // this.getDialogList()
                            }
                        })
                        .catch(() => {})
                }
            },
            // 维修合格关闭对话框
            cancelOneForm() {
                this.openOne = false
            },
            // 维修合格关闭对话框
            cancelTwoForm() {
                this.openTwo = false
                if (this.typeText == 1) {
                    this.handleQuery()
                } else {
                    this.getDialogList()
                }
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download(
                    'base/repair/export',
                    {
                        ...this.queryParams,
                    },
                    `维修单_${new Date().getTime()}.xlsx`,
                )
            },
            internalRepair(row) {
                this.title = '内部维修'
                this.priKey = row.id
                this.rowObj = row
                this.isShowOneFlag = true
            },
            backRepair(row) {
                this.title = '返厂维修'
                this.priKey = row.id
                this.rowObj = row
                this.isShowTwoFlag = true
            },
            broken(row) {
                this.title = '待报废'
                this.priKey = row.id
                this.rowObj = row
                this.isShowThreeFlag = true
            },
            complete(type) {
                if (type == 1) {
                    this.typeText = type
                    this.title = '确认操作'
                    this.openOne = true
                    this.openTextOne = '确定提交审核么?'
                    this.openTextTwo = '确定提交审核么?'
                }
                if (type == 2) {
                    this.typeText = type
                    this.title = '确认操作'
                    this.openOne = true
                    this.openTextOne = '确定维修合格了么?'
                    this.openTextTwo = '确定维修合格了么?'
                }
                if (type == 3) {
                    this.typeText = type
                    this.title = '确认操作'
                    this.openOne = true
                    this.openTextOne = '确定完成维修了么?'
                    this.openTextTwo = '完成维修后不可修改该条数据'
                }
            },
            // 回显字段
            getStatusText(status) {
                let statusList = [
                    {
                        label: '未完成',
                        value: '0',
                    },
                    {
                        label: '已完成',
                        value: '1',
                    },
                ]
                const foundItem = statusList.find(
                    (item) => item.value == status,
                )
                if (foundItem) {
                    return foundItem.label
                }
                return ''
            },

            domainChange() {
                this.getDialogList()
            },
        },
    }
</script>
<style lang="scss" scoped>
    .submit_box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .submit_box_title {
            display: flex;
            flex-direction: column;
            margin-left: 15px;

            :first-child {
                font-size: 14px;
                font-weight: 600;
            }

            :last-child {
                margin-top: 6px;
                font-size: 12px;
            }
        }
    }

    .submit_box_two {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-left: 30%;

        .submit_box_title {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            font-size: 18px;
            font-weight: 600;
        }
    }
    ::v-deep.el-table .fixed-width .el-button--mini {
        width: 70px !important;
        margin-bottom: 10px;
    }
</style>
