<template>
    <div class="repair">
        <sum-head title="报修管理" text="总报修数" :sum="list.total+''" ></sum-head>

        <div class="filter-container">
            <span>所属区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <span>报修位置：</span>
            <el-select v-model="listQuery.troublePart" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in troublePartOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>报修状态：</span>
            <el-select v-model="listQuery.fixStatus" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in fixStatusOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>报修时间：</span>
            <el-date-picker
                    size="small"
                    v-model="queryDate"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    @change="dateChange">
            </el-date-picker>
            <el-input placeholder="车辆号/报修人昵称/手机号码/区域巡察人员" v-model="listQuery.keyword" size="small" style="width: 200px;margin-left: 30px;" class="filter-item" />
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="list.resultList"
                element-loading-text="Loading"
                size="small"
                highlight-current-row
                border>
            <el-table-column prop="plateNumber" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="troublePart" label="报修位置" align="center"></el-table-column>
            <el-table-column label="区域地勤人员" align="center">
                <template slot-scope="scope">
                    <!--<span>{{ scope.row.areaWoker }}</span>-->
                    <el-popover placement="bottom" width="400" trigger="click">
                        <p style="word-break: break-all">
                            {{ scope.row.areaWoker }}
                        </p>
                        <p slot="reference" style="margin: 0">
                            <span>{{ scope.row.areaWoker.substr(0, 14) }}</span>
                            <el-button type="text" size="small" v-if="scope.row.areaWoker.length>14">... 更多</el-button>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="fixWorkerName" label="实际维修人员" align="center"></el-table-column>
            <el-table-column prop="fixWorkerMobile" label="手机号码" align="center"></el-table-column>
            <el-table-column prop="manageAreaName" label="所属区域" align="center"></el-table-column>
            <el-table-column prop="createTime" label="报修时间" align="center"></el-table-column>
            <el-table-column prop="fixTime" label="维修时间" align="center"></el-table-column>
            <el-table-column align="center" label="报修状态">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.fixStatus=='0' ? 'danger' : 'success'">{{ scope.row.fixStatus=='0' ? '未维修' : '已维修' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="checkRepair(scope.row.id)">详情</el-button>
                    <!--<el-button type="danger" size="mini" @click="delRepair(scope.row.id, scope.$index)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total" @current-change="curPage"></el-pagination>
        </div>

        <repair-info ref="repairInfo"></repair-info>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import repairInfo from './components/repairInfo'
import api from '@/api/repair'
import { formatDateTime } from "../../utils"
export default {
    name: "repair",
    components: {
        SumHead,
        repairInfo
    },
    data() {
        return {
            queryDate: '',
            listQuery: {
                pageNumber: '1',
                pageSize: '15',
                // orderDirection: 'desc',
                // orderProperty: 'create_time',
                troublePart: '',
                fixStatus: '',
                createTimeStart: '',
                createTimeEnd: '',
                manageAreaId: '',
                keyword: undefined
            },
            troublePartOptions: [
                { label: '全部', value: ''},
                { label: '电池电量不足', value: 'batteryPowerLowTrouble'},
                { label: '控制器(硬件)故障', value: 'controllerHardwareTrouble'},
                { label: '控制器通信故障', value: 'controllerCommunicateTrouble'},
                { label: '控制器掉电故障', value: 'controllerPowerCutTrouble'},
                { label: '转把故障', value: 'turnHandleTrouble'},
                { label: '电机故障', value: 'electricMotorTrouble'},
                { label: '刹车故障', value: 'brakeTrouble'}
            ],
            fixStatusOptions: [
                { label: '全部', value: ''},
                { label: '已维修', value: '1'},
                { label: '未维修', value: '0'},
            ],
            list: {},
            listLoading: false,
        }
    },
    filters: {
        /*statusFilter(state) {
            const stateMap = {
                batteryPowerLowTrouble: '电池电量不足',
                controllerHardwareTrouble: '控制器(硬件)故障',
                controllerCommunicateTrouble: '控制器通信故障',
                controllerPowerCutTrouble: '控制器掉电故障',
                turnHandleTrouble: '转把故障',
                electricMotorTrouble: '电机故障',
                brakeTrouble: '刹车故障'
            }
            return stateMap[state]
        },*/
    },
    methods: {
        getList() {
            api.getRepairList(this.listQuery).then(res => {
                this.list = res.results
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
        dateChange(val) {
            console.log(val)
            if(val==null) {
                this.listQuery.createTimeStart = ''
                this.listQuery.createTimeEnd = ''
            } else {
                this.listQuery.createTimeStart = formatDateTime(val[0])
                this.listQuery.createTimeEnd = formatDateTime(val[1])
            }
        },
        handleFilter() {
            this.listQuery.pageNumber = '1'
            this.getList()
        },
        checkRepair(id) {
            this.$refs.repairInfo.open(id)
        },
        delRepair(id, index) {
            this.$confirm('你确定要删除这条报修信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delRepair({ id }).then(res => {
                    this.list.resultList.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    },
    created() {
        this.getList()
    }
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
    .repair {
        position: relative;
        padding: 5px 16px 0;
        margin-bottom: 30px;

        .filter-container {
            padding: 10px 0 10px 12px;
            .filter-item {
                width: 90px;
                margin-right: 20px;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
            float: right;
        }
    }
</style>
