<template>
    <div style="width: 100%">
        <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right">		
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>主体信息管理</el-breadcrumb-item>
            <el-breadcrumb-item>检测机构</el-breadcrumb-item>
            </el-breadcrumb>
	    </div>

        <!-- 头部查询栏 -->
		<div class="headSearch" >
			<el-row :gutter="120" style="margin-right: 0px;">
				<el-form :inline="true">
                    <el-form-item label="机构名称" size="small">
                        <el-input v-model="queryInfo.rymc"></el-input>
                    </el-form-item>
                    <!-- 查询 -->
                    <!-- <el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button> -->
                    <el-button  size="medium"  icon="el-icon-search" @click="searchData()">搜索</el-button>
                    <!-- 重置 -->
                    <el-button  size="medium" type="info" @click="reset()">重置</el-button>
				</el-form>
			</el-row>
		</div>

        <!-- 表格区域 -->
        <el-table class="biaoge" ref="multipleTable" :data="tableData"  border stripe highlight-current-row style="width: 100%" :row-style="rowStyle" :cell-style="cellStyle" >
            <el-table-column label="序号" width="50px">
                <template slot-scope="scope">
                    {{ scope.$index+1 }}
                </template>
		    </el-table-column>
            
            <el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
            <!-- <el-table-column prop="properties" label="机构性质" width="155" align="center"> -->
					<!-- <template slot-scope="scope">
						<div  v-if="scope.row.properties==1">政府部门</div>
						<div  v-if="scope.row.properties==2">事业单位</div>
						<div v-if="scope.row.properties==3">企业</div>
					</template> -->
				<!-- </el-table-column> -->
            <el-table-column label="操作" align="center" fixed="right"> 
                <template slot-scope="scope">
                    <el-button style="margin:5px 0" type="text" size="medium" @click="readDialogVisible1(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        	<!--分页器区域-->
		<el-pagination class="fenYeQi" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total" background />

        <!-- 任务详情对话框-->
		<el-dialog title="查看详情" :visible.sync="readDialogVisible" width="30%" :close-on-click-modal="false" class="dialogItem">
            <el-form v-if="readDialogVisible" :model="readForm" label-width="150px">

                <el-form-item label="机构名称:" prop="rymc" class="labelItem">
					<div>{{readForm.name}}</div>
				</el-form-item>
                <!-- <el-form-item label="机构性质:" prop="jgxz" class="labelItem">
					<div v-if="readForm.jgxz=='1'">政府部分</div>
					<div v-else-if="readForm.level=='2'">事业单位</div>
					<div v-else>企业</div>
				</el-form-item> -->
                <el-form-item label="组别:" prop="groupname" class="labelItem">
					<!-- <div v-if="readForm.groupname=='1'">省级监管单位</div>
					<div v-else-if="readForm.groupname=='2'">市级监管单位</div>
					<div v-else>县级监管单位</div> -->
				</el-form-item>
                <el-form-item label="企业代码:" prop="qydm" class="labelItem">
					<div>{{readForm.qydm}}</div>
				</el-form-item>
                <el-form-item label="联系人:" prop="contact_name" class="labelItem">
					<div>{{readForm.contact_name}}</div>
				</el-form-item>
                <el-form-item label="联系电话:" prop="contact_phone" class="labelItem">
					<div>{{readForm.contact_phone}}</div>
				</el-form-item>
                <el-form-item label="联系人邮箱:" prop="contact_mail" class="labelItem">
					<div>{{readForm.contact_mail}}</div>
				</el-form-item>
                <el-form-item label="联系人QQ:" prop="contact_qq" class="labelItem">
					<div>{{readForm.contact_qq}}</div>
				</el-form-item>
                <el-form-item label="联系人邮箱:" prop="contact_mail" class="labelItem">
					<div>{{readForm.contact_mail}}</div>
				</el-form-item>
                
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data(){
        return{
            queryInfo:{
                pageSize:10,
                pageNum:1,
                groupname:'',
                jgxz:'',
                name:'',
            }, 
           	// 查看任务详情
            readDialogVisible: false,
            readForm: {},
            total:0,
            cellStyle: {
                padding: 2 + 'px'
            },
            rowStyle: {
                height: 35 + 'px'
            },
            tableData:[],
        //表格区域
        tableHeader: [
            {
                label: '机构名称',
                prop: 'name',
                width: 280
			},{
                label: '组别名称',
                prop: 'groupname',
                width: 200
            },{
                label: '企业代码',
                prop: 'qydm',
                width: 200
            },{
                label: '地址',
                prop: 'address',
                width: 180
            },{
                label: '联系人',
                prop: 'contact_name',
                width: 150
            },{
                label: '联系电话',
                prop: 'contact_phone',
                width: 150
            }
        ],
        // 任务状态选项
        groupList: [
            {
                value: '1',
                label: '省级监管单位'
            }, {
                value: '2',
                label: '市级监管单位'
            }, {
                value: '3',
                label: '县级监管单位'
            }],
        jxgzList: [
            {
                value: '1',
                label: '政府部门'
            }, {
                value: '2',
                label: '事业单位'
            }, {
                value: '3',
                label: '企业'
            }],
        }
    },
    created() {
		this.getJgOrgs()
	},
    methods: {
        async getJgOrgs(){
            const {data: res} = await this.$http.post("getJgOrgs", this.queryInfo);
            this.tableData = res.data.rows
            this.total = res.data.total
        },
        //查询
        async searchData(){
				this.queryInfo.pageNum = 1
				this.getJgOrgs()
		}, 
        //重置
        reset(){
            this.queryInfo={
				pageSize:10,
                pageNum:1,
                groupname:'',
                jgxz:'',
                name:''
				}
				this.getJgOrgs()
        },
        //分页器
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    },
                handleCurrentChange(val) {
                    this.queryInfo.pageNum = val;
                    console.log(`当前页: ${val}`);
                    this.getJgOrgs()
                    },
                /** 监听页码的改变 */
                handleCurrentChange(newPage) {
                    this.queryInfo.pageNum = newPage
                    this.getJgOrgs()
                },
                /** 监听每页显示多少数据的改变 */
                handleSizeChange(newSize) {
                    this.queryInfo.pageSize = newSize
                    this.getJgOrgs()
                },
			// 查看主体信息详情
			async readDialogVisible1(row) {
				this.readForm.name = row.name
                this.readForm.name_other = row.name_other
                this.readForm.groupname = row.groupname
                this.readForm.address = row.address
                this.readForm.properties = row.properties
                this.readForm.contact_name = row.contact_name
                this.readForm.contact_phone = row.contact_phone
                this.readForm.contact_mail = row.contact_mail
                this.readForm.contact_qq = row.contact_qq
                this.readForm.qydm = row.qydm
                this.readForm.create_time = row.create_time
                this.readForm.update_time = row.update_time
                this.readForm.cpfw = row.cpfw
                this.readForm.delete_time = row.delete_time
				this.readDialogVisible = true

			},
    },
       
}

</script>

<style>
.headSearch{
    margin-left: 60px;
}
.fenYeQi{
     margin-top: 10px;
}
.biaoge{
    margin-top: 10px;
}
</style>