<template>
    <div class="page-pack">
        <div class="title-pack clear-float pl-15 pr-15">
            <div class="float-left">
                <span class="page-title-text">车道基础数据</span>
            </div>
            <div class="float-right page-refresh">
                <span @click="doRefreshClick" class="pointer">
                    <svg-icon icon-class="refresh"></svg-icon>
                    <span class="ml-10">刷新</span>
                </span>
            </div>
        </div>
        <div class="tool-pack clear-float pl-15 pr-15">
            <Search
                searchCode="PAINTSHOP_STATION"
                @search="doSearchClick"
                @reset="doResetClick">
            </Search>
            <div class="float-left">
                <el-button
                    size="small"
                    type="primary"
                    @click="doAddClick">
                    新增
                </el-button>
            </div>
        </div>
        <div class="general-list-main-pack pl-15 pr-15 pb-15">
            <div>
                <Table
                    :tableConfig="tableConfig"
                    @onPageSizeChange="onPageSizeChange"
                    @onCurrentPageChange="onCurrentPageChange">
                    <template slot="workshopCode">
                        <el-table-column
                            label="车间">
                            <template slot-scope="scope">
                                <span>{{ scope.row.workshopCode !== null ? scope.row.workshopCode : '涂装车间' }}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <template slot="keyStation">
                        <el-table-column
                            label="是否为关键工位"
                            width="200">
                            <template slot-scope="scope">
                                <el-tag
                                    v-if="scope.row.keyStation"
                                    type="success">
                                    是
                                </el-tag>
                                <el-tag v-else
                                    type="info">
                                    否
                                </el-tag>
                            </template>
                        </el-table-column>
                    </template>
                    <template slot="operationColumn">
                        <el-table-column
                            fixed="right"
                            width="100"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="doEditClick(scope.row)">
                                    编辑
                                </el-button>
                                <el-button
                                    type="text"
                                    style="color: rgb(244, 116, 118)"
                                    @click="doDeleteClick(scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </template>
                </Table>
            </div>
        </div>

        <!--新增车道基础信息对话框-->
        <AddLaneDialog
            ref="AddLaneDialog"
            @doConfirmClick="doAddLaneDialogConfirmClick">
        </AddLaneDialog>

        <!--编辑车道基础信息对话框-->
        <EditLaneDialog
            ref="EditLaneDialog"
            :editLaneBasicValue="editLaneBasicValue">
        </EditLaneDialog>
    </div>
</template>

<script>
    import Table from '@/components/Table/index.vue'
    import Search from '@/components/Search'
    import AddLaneDialog from './components/AddLaneDialog'
    import EditLaneDialog from './components/EditLaneDialog'

    export default {
        name: 'LaneBasic',
        components: {
            Search,
            Table,
            AddLaneDialog,
            EditLaneDialog
        },
        data () {
            return {
                // 编辑车道基础数据
                editLaneBasicValue: {},
                // 精准搜索关键字列表
                searchList: {},
                // 表格配置项
                tableConfig: {
                    height: 0,
                    data: [],
                    fieldList: [
                        { label: '车间', value: 'workshopCode', slot: 'workshopCode' },
                        { label: '区域', value: 'areaName' },
                        { label: '车道编号', value: 'laneCode' },
                        { label: '工位编号', value: 'code' },
                        { label: '是否为关键工位', value: 'keyStation', slot: 'keyStation' }
                    ],
                    paginationToggle: true,
                    paginationConfig: {
                        total: 0,
                        currentPage: 1,
                        pageSize: 20
                    }
                }
            }
        },
        methods: {
            // 点击刷新按钮
            doRefreshClick () {
                this.getTableList().then(response => {
                    this.$message.success('刷新成功！')
                })
            },
            // 表格组件分页数量改变事件
            onPageSizeChange (pageSize) {
                this.tableConfig.paginationConfig.currentPage = 1
                this.tableConfig.paginationConfig.pageSize = pageSize
                // 获取表格数据
                this.getTableList()
            },
            // 表格组件分页页数改变事件
            onCurrentPageChange (currentPage) {
                this.tableConfig.paginationConfig.currentPage = currentPage
                // 获取表格数据
                this.getTableList()
            },
            // 点击搜索组件搜索按钮
            doSearchClick (searchValue) {
                this.searchList = searchValue
                this.tableConfig.paginationConfig.currentPage = 1
                // 获取表格数据
                this.getTableList()
            },
            // 点击搜索组件重置按钮
            doResetClick (searchValue) {
                this.searchList = { ...searchValue, filters: [] }
                this.tableConfig.paginationConfig.currentPage = 1
                this.tableConfig.paginationConfig.pageSize = 20
                // 获取表格数据
                this.getTableList()
            },
            // 获取表格数据
            getTableList () {
                let queryParams = {
                    searchCode: this.searchList.searchCode || 'PAINTSHOP_STATION',
                    filters: this.searchList.filters || [],
                    pageSize: this.tableConfig.paginationConfig.pageSize,
                    pageNum: this.tableConfig.paginationConfig.currentPage
                }
                return new Promise((resolve, reject) => {
                    this.$fetch('basic-info-controller/stationPage-post', queryParams).then(response => {
                        if (response.list.length === 0 && response.pageNum !== 1) {
                            this.tableConfig.paginationConfig.currentPage -= 1
                            // 获取表格数据
                            this.getTableList()
                        } else {
                            this.tableConfig.data = _.cloneDeep(response.list)
                            this.tableConfig.paginationConfig.total = _.cloneDeep(response.total)
                            resolve()
                        }
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            // 点击新增按钮
            doAddClick () {
                this.$refs.AddLaneDialog.dialogToggle = true
            },
            // 点击新增车道对话框确认按钮
            doAddLaneDialogConfirmClick () {
                // 获取表格数据
                this.getTableList()
            },
            // 点击编辑按钮
            doEditClick (laneValue) {
                this.editLaneBasicValue = _.cloneDeep(laneValue)
                this.$refs.EditLaneDialog.dialogToggle = true
            },
            // 点击删除按钮
            doDeleteClick (laneValue) {
                console.log(laneValue)
                this.$confirm(`确定要删除车道编号为 ${laneValue.laneCode} 的车道基础数据吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    let queryParams = { stationId: laneValue.id, hash: 'stationId' }
                    this.$fetch('basic-info-controller/stationId-delete', queryParams).then(response => {
                        this.$message.success('删除成功！')
                        // 获取表格数据
                        this.getTableList()
                    })
                }).catch(() => {})
            }
        },
        mounted () {
            setTimeout(() => {
                this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 210
                // 获取表格数据
                this.getTableList()
            }, 0)
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        position: relative;
        min-height: 100%;
        width: 100%;
        border: 1px solid #d2d3d5;
        background-color: #fff;
        overflow-y: auto;

        .title-pack {
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #d2d3d5;
        }

        .tool-pack {
            padding-top: 16px;
            padding-bottom: 16px;
            .tool-tag {
                height: 32px;
                line-height: 32px;
                font-size: 14px;
            }
        }

        .edit-button {
            color: #538FFD;
        }

        .status-circle {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            margin-right: 5px;
            vertical-align: middle;
        }
        .delete-button {
            color: #F47476;
        }

        .view-span {
            color: #1284fa;
            border-bottom: 1px solid #1284fa;
            &:hover {
                cursor: pointer;
            }
        }
        .el-dialog__body {
            padding: 30px 30px 10px 20px!important;
            .el-row {

                .el-col {
                    line-height: 35px;

                    .el-form-item {
                        width: 100%;

                        .el-form-item__content {
                            width: 100%;

                            .el-input {
                                font-size: 12px;
                                height: 32px;
                            }
                            .el-input__inner {
                                height: 32px;
                            }
                            .el-select {
                                width: 100%!important;
                                font-size: 12px;
                                height: 32px;
                            }
                            .el-date-editor {
                                width: 100%!important;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
