<template>
    <!-- 修试查询 -- 一机一档案查询 -->
    <div class="app-container">
        <!-- 查询表单 -->
        <el-form size="small" :model="queryParams" ref="queryFormRef">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item prop="startTime">
                        <el-date-picker
                            v-model="queryParams.startTime"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="开始日期"
                            @change="() => queryParams.endTime = ''"
                            style="width: 130px"
                        />
                    </el-form-item>
                    <el-form-item>-</el-form-item>
                    <el-form-item prop="endTime">
                        <el-date-picker
                            v-model="queryParams.endTime"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="结束日期"
                            :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
                            style="width: 130px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="keyWord">
                        <el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="unitId">
                        <treeselect
                            :options="unitList"
                            :show-count="true"
                            style="width: 95%"
                            :normalizer="normalizer"
                            noChildrenText="没有数据了"
                            noOptionsText="没有数据"
                            placeholder="请选择公司"
                            noResultsText="没有搜索结果"
                            v-model="queryParams.unitId"
                            :disable-branch-nodes="true"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="proId">
                        <treeselect
                            style="width: 95%"
                            :show-count="true"
                            :options="projectList"
                            :normalizer="normalizer"
                            noOptionsText="没有数据"
                            noChildrenText="没有数据了"
                            placeholder="请选择工程"
                            noResultsText="没有搜索结果"
                            :disable-branch-nodes="true"
                            v-model="queryParams.proId"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item prop="typeName">
                        <el-input v-model="queryParams.typeName" placeholder="请输入类型名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="typeModelName">
                        <el-input v-model="queryParams.typeModelName" placeholder="请输入规格型号" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
                        <el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableList" border :max-height="650">
            <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
            />
            <el-table-column
                v-for="col in tableColumn"
                align="center"
                :key="col.label"
                :label="col.label"
                :show-overflow-tooltip="col.showTooltip"
                :width="col.width"
            >
                <template slot-scope="{ row }">
                    <template v-if="col.isSlot">
                        <span class="num-box" @click="onHandleViewDetails(row)">
                            {{ row[col.prop] }}
                        </span>
                    </template>
                    <template v-else>
                        {{ row[col.prop] }}
                    </template>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getTableList"
        />
    </div>
</template>

<script>
import { getListProject, getListUnite } from '@/api/lease/apply'
import { getTableListApi } from '@/api/repair-testing/one-machine'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    components: { Treeselect },
    data() {
        return {
            total: 0, // 总条数
            time: [], // 日期数据源
            tableList: [], // 列表数据源
            // 查询条件
            queryParams: {
                keyWord: '',
                unitId: null,
                prodId: null,
                typeName: '',
                typeModelName: '',
                pageNum: 1,
                pageSize: 10,
                startTime: null,
                endTime: null
            },
            tableColumn: [
                { label: '协议号', prop: 'agreementCode', showTooltip: true },
                { label: '单位名称', prop: 'bmUnitName', width: '200' },
                { label: '工程名称', prop: 'bmProName', width: '200' },
                { label: '类型名称', prop: 'typeName', showTooltip: true },
                { label: '规格型号', prop: 'typeModelName', showTooltip: true },
                { label: '设备编码', prop: 'maCode', showTooltip: true },
                { label: '单号', prop: 'code', showTooltip: true },
                { label: '操作人', prop: 'createBy', showTooltip: true },
                { label: '操作日期', prop: 'createTime', showTooltip: true },
                { label: '操作类型', prop: 'operationType', showTooltip: true },
                { label: '操作信息', prop: 'operationInfo', showTooltip: true }
            ],
            unitList: [],
            projectList: [],
        }
    },
    methods: {
        // 获取公司和工程
        async getUnitProject() {
            try {
                const comRes = await getListUnite({ proId: null })
                this.unitList = comRes.data
                const proRes = await getListProject({ unitId: null })
                this.projectList = proRes.data
            } catch (error) {
                console.log('🚀 ~ error:', error)
            }
        },
        async getTableList() {
            const queryParams = {
                ...this.queryParams,
                // startTime: this.time && this.time.length > 0 ? this.time[0] : '',
                // endTime: this.time && this.time.length > 0 ? this.time[1] : ''
            }

            const res = await getTableListApi(queryParams)
            this.tableList = res.data.rows
            this.total = res.data.total
        },
        // 查询
        onHandleSearch() {
            this.queryParams.pageNum = 1
            this.getTableList()
        },
        // 重置
        onHandleReset() {
            this.time = []
            this.$refs.queryFormRef.resetFields()
            this.getTableList()
        },
        // 导出
        onHandleExport() {
            try {
                let fileName = `一机一档案查询_${new Date().getTime()}.xLsx`
                let url = '/material/complex_query/exportMaTypeSelectList'
                const params = { ...this.queryParams }
                this.download(url, params, fileName)
            } catch (error) {
                console.log('导出数据失败', error)
            }
        },
        // 列表内点击数量跳转详情
        onHandleViewDetails(row) {
            console.log(row, '详情')
        },
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                parentId: node.parentId,
                id: node.id,
                label: node.name,
                children: node.children
            }
        }
    },
    created() {
        this.getTableList()
        this.getUnitProject()
    }
}
</script>

<style scoped>
.num-box {
    cursor: pointer;
    color: #1890ff;
}
</style>
