<template>
    <div class='tableZh'>
        <div class='tab-top'>
            <el-input
                clearable
                @change='dsfjc'
                placeholder='搜索任务名称'
                size='small'
                prefix-icon='el-icon-search'
                v-model='searVal'
                style='width:200px;margin-right:12px'
            ></el-input>
            <Select
                width='200'
                tipPlace='top'
                caption='状态'
                size='small'
                v-model='ztdsf'
                style='margin-right:12px'
                v-if='status2.length>0'
                :selectdata='status2'
                :placeholder='"请选择"'
                @change='dsfjc'
            ></Select>
            <Select
                @change='dsfjc'
                width='200'
                tipPlace='top'
                caption='部门'
                v-if='zgbm.length>0'
                size='small'
                v-model='bmdsf'
                style='margin-right:12px'
                :selectdata='zgbm'
                :placeholder='"请选择"'
            ></Select>
            <Select
                @change='dsfjc'
                width='200'
                tipPlace='top'
                caption='检测结论'
                size='small'
                style='margin-right:12px'
                v-if='conclusion.length>0'
                :selectdata='conclusion'
                :placeholder='"请选择"'
                v-model='jcjldsf'
            ></Select>
        </div>
        <el-table
            row-key='id'
            border
            v-loading='loading'
            :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
            :data='dsfTable'
            style='width: 100%;margin-top:12px'
        >
            <el-table-column label='序号' type='index' width='50'></el-table-column>
            <el-table-column prop='name' :show-overflow-tooltip='true' sortable label='任务名称'>
                <template slot-scope='{row}'>{{row.description||'--'}}</template>
            </el-table-column>
            <el-table-column prop='type' label='状态' width='90'>
                <template slot-scope='{row}'>{{row.status2||'--'}}</template>
            </el-table-column>
            <el-table-column prop='thing' label='部门' width='90' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.zgbm||'--'}}</template>
            </el-table-column>
            <el-table-column prop='name' :show-overflow-tooltip='true' label='检测结论'>
                <template slot-scope='{row}'>{{row.conclusion||'--'}}</template>
            </el-table-column>
        </el-table>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import Select from '@/components/Select/Select.vue'
import { queryDsfrw } from '@/api/other.js'
import { querySelect } from '@/api/public.js'

export default {
    data() {
        return {
            loading: true,
            searVal: '',
            dsfTable: [],
            total: 0,
            page: 1,
            size: 10,
            status2: [],
            zgbm: [],
            conclusion: [],
            ztdsf: '',
            bmdsf: '',
            jcjldsf: ''
        }
    },
    components: { Select },
    methods: {
        // 第三方
        dsfjc() {
            let getParams = {
                plazaId: this.$store.state.plazaId,
                page: this.page,
                size: this.size
            }
            if (this.searVal) {
                getParams.keyword = `${this.searVal}:description`
            }
            if (this.ztdsf) {
                getParams.status2 = this.ztdsf
            }
            if (this.bmdsf) {
                getParams.status2 = this.bmdsf
            }
            if (this.jcjldsf) {
                getParams.conclusion = this.jcjldsf
            }
            queryDsfrw({ getParams }).then(res => {
                if (res.result == 'success') {
                    this.loading = false
                    this.total = res.count
                    this.dsfTable = res.data ? res.data : []
                }
                //console.log('第三方', res)
            })
        },
        pageChanged(page) {
            this.page = page
            this.dsfjc()
        },
        changeSelect() {
            this.department = []
            let postParams = [
                {
                    columnName: { status: 'status', zgbm: 'zgbm', conclusion: 'conclusion' },
                    tableName: 'v_glsms_dsfrw'
                }
            ]
            let data = {
                plazaId: this.$store.state.plazaId
            }
            querySelect({ data, postParams }).then(res => {
                //console.log('下拉框', res)
                let status2 = [],
                    zgbm = [],
                    conclusion = []
                status2 = res.data.data.v_glsms_dsfrw.status ? res.data.data.v_glsms_dsfrw.status : []
                zgbm = res.data.data.v_glsms_dsfrw.zgbm ? res.data.data.v_glsms_dsfrw.zgbm : []
                conclusion = res.data.data.v_glsms_dsfrw.conclusion ? res.data.data.v_glsms_dsfrw.conclusion : []
                if (status2.length > 0) {
                    status2.forEach(el => {
                        let obj = {
                            id: el.key,
                            name: el.value
                        }
                        this.status2.push(obj)
                    })
                }
                //console.log(this.status2)
                if (zgbm.length > 0) {
                    zgbm.forEach(el => {
                        let obj = {
                            id: el.key,
                            name: el.value
                        }
                        this.zgbm.push(obj)
                    })
                }
                if (conclusion.length > 0) {
                    conclusion.forEach(el => {
                        let obj = {
                            id: el.key,
                            name: el.value
                        }
                        this.conclusion.push(obj)
                    })
                }
            })
        }
    },
    mounted() {
        this.changeSelect()
    }
}
</script>
<style lang="less">
.tableZh {
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>