<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="工单标题">
                            <el-input v-model="query.title" placeholder="请输入工单标题" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工单编号">
                            <el-input v-model="query.bizKey" placeholder="请输入工单编号" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="事项类型">
                            <JnpfSelect v-model="query.tab" placeholder="请选择事项类型" clearable
                                :options="orderTabOptions" :props="selectProps">
                            </JnpfSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工单状态">
                            <JnpfSelect v-model="query.orderStatusList" placeholder="请选择工单状态"
                                clearable :options="ITSMorderStatusOptions" :props="selectProps"
                                multiple>
                            </JnpfSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工单类型">
                            <JnpfSelect v-model="query.orderTypeList" placeholder="请选择工单类型"
                                clearable :options="ITSMOrderTypeOptions" :props="selectProps"
                                multiple>
                            </JnpfSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search"
                                @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                        <!-- <el-button type="primary" icon="el-icon-upload2" @click="exportData()">导出
                        </el-button> -->
                    </div>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="getList()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="tableData">
                    <el-table-column prop="title" label="工单标题" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="bizKey" label="工单编号" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="mobile" label="来源" align="left" show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            <!-- {{ scope.row.auditBy || '无数据' }} -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发起人" align="left"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="auditTime" label="发起时间" align="left"
                        show-overflow-tooltip>
                        <template slot-scope="scope" sortable>
                            {{ getDate(scope.row.auditTime, 'YY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goDetail(scope.row)">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </JNPF-table>
                <pagination :total="total" :page.sync="query.currentPage"
                    :limit.sync="query.pageSize" @pagination="getList" />
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request'
import { mapGetters } from "vuex";
import dayjs from 'dayjs'
import {
    getITSMOrderList
} from "@/api/governmentCloud/workOrder/workOrder";
import { param } from '@/utils';
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

export default {
    data() {
        return {
            query: {
                title: '',
                bizKey: '',
                orderStatusList: undefined,
                orderTypeList: undefined,
                tab: undefined,
                currentPage: 1,
                pageSize: 10,
            },
            selectProps: { "label": "fullName", "value": "enCode" },
            orderTabOptions: [],
            orderStatusOptions: [],
            ITSMorderStatusOptions: [],
            ITSMOrderTypeOptions: [],
            total: 0,
            listLoading: false,
            tableData: []
        }
    },
    async created() {
        this.getITSMOrderType();
        this.getTabs()
        this.getOrderStatusList()
        this.getITSMOrderStatusList()



    },
    methods: {
        search() {
            this.getList()
        },
        getList() {
            this.listLoading = true
            getITSMOrderList(this.query).then(res => {
                console.log(res);
                this.listLoading = false
            })
        },
        getITSMOrderType() {
            getDictionaryDataSelector('540193916075377477').then(res => {
                this.ITSMOrderTypeOptions = res.data.list
            })
        },
        getTabs() {
            getDictionaryDataSelector('553108487895254789').then(res => {
                this.orderTabOptions = res.data.list
            })
        },
        getOrderStatusList() {
            getDictionaryDataSelector('530743805301756613').then(res => {
                this.orderStatusOptions = res.data.list
            })
        },
        getITSMOrderStatusList() {
            getDictionaryDataSelector('540193181464003397').then(res => {
                this.ITSMorderStatusOptions = res.data.list
            })
        }
    },

}
</script>

<style lang="scss" scoped>
</style>