<template>
    <div class="mountVehicleDialog">
        <el-dialog center width="743px" title="机车挂载终端" :visible.sync="mountListData.dialogVisible">
            <div style="position: relative;top: -10px;">可挂载终端:</div>
            <div class="vehicleContent">
                <el-radio-group v-model="radio">
                    <el-radio v-for="item in mountList" :label="item.terminalCode" :title="item.terminalName"
                    style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 110px;"
                        @click.prevent.native="getCurrentRow(item.terminalCode)">                        
                        {{ item.terminalName }}                        
                    </el-radio>
                </el-radio-group>
                <div class="pagination">
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <!-- <el-button>取 消</el-button>
                <el-button type="primary">保 存</el-button> -->
                <div class="search" @click="mountSave">保 存</div>
                <div class="reset" @click="mountListData.dialogVisible = false">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    vehicleTerminal,
    isMount,
} from '@/api/account/locomotiveMsg'
export default {
    props: {
        mountListData: {
            type: Object,
            default: {}
        }
    },
    created() {
        this.queryParams.vehicleCode = this.mountListData.vehicleCode
        isMount({
            vehicleCode: this.mountListData.vehicleCode
        }).then(res => {
            this.isMount = !res.data
        })
        this.vehicleTerminal(this.queryParams)
    },
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 30,
                vehicleCode: ''
            },
            mountList: [],
            total: 0,
            radio: '',
            isHaveVehicle: false,
            isMount: null,
            initialCode: ''
        }
    },
    methods: {
        vehicleTerminal(params) {
            this.isHaveVehicle = false
            vehicleTerminal(params).then(res => {
                if (res.code == 200) {
                    res.data.records.forEach(item => {
                        if (item.isMount == '2') {
                            this.radio = item.terminalCode
                            this.initialCode = item.terminalCode
                            // this.isHaveVehicle = true
                        }
                    })
                    this.mountList = res.data.records
                    this.total = res.data.total
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            })
        },
        getCurrentRow(val) {
            val == this.radio ? this.radio = '' : this.radio = val
        },
        handleCurrentChange(val) {            
            this.queryParams.pageNum = val
            this.vehicleTerminal(this.queryParams)
        },
        mountSave() {
            if (this.radio == this.initialCode) {
                this.mountListData.dialogVisible = false
            } else {
                this.$emit('mountSave', {
                    vehicleCode: this.mountListData.vehicleCode,
                    terminalCode: this.radio,
                    isMount: this.isMount
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.mountVehicleDialog {
    .vehicleContent {
        position: relative;
        width: 100%;
        height: 300px;
        border: 1px solid #DCDCDC;
        border-radius: 5px;
        padding: 15px;
        .el-radio{
            width: 20%;
            margin-bottom: 10px;
        }
        .pagination {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    }
}

::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}
</style>