<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-select v-model="queryInfo.jgxz" style="width: 150px;" clearable>
                            <el-option v-for="item in jxgzList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                        </el-select>
                    </el-form-item> -->

                  <el-form-item label="机构名称" size="medium">
                        <el-input v-model="queryInfo.name"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="法人姓名" size="small">
                        <el-input v-model="queryInfo.user_fa"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="产品范围" size="small">
                        <el-select v-model="queryInfo.cpfw" style="width: 150px;" clearable>
                            <el-option v-for="item in cpfwList" :key="item.value" :label="item.label" :value="item.label" ></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- 查询 -->
                    <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 label="审核状态" prop="flag"  align="center">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.flag==1">已通过</el-tag>
                    <el-tag type="warning" v-if="scope.row.flag!==1">未通过</el-tag>
                </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="name" class="labelItem">
					<div>{{readForm.name}}</div>
				</el-form-item>
                <el-form-item label="依托单位:" prop="dtRelyOnUnit" class="labelItem">
					<div>{{readForm.dtRelyOnUnit}}</div>
				</el-form-item>
                <el-form-item label="审核状态:" prop="userJcjgProfile.flag" class="labelItem">
					<div v-if="readForm.flag=='1'">已通过审核</div>
                    <div v-else>未通过</div>
				</el-form-item>
                	<el-form-item label="机构性质:" prop="userJcjgProfile.properties" class="labelItem">
					<!-- <div v-if="readForm.properties=='1'">政府部分</div>
					<div v-else-if="readForm.properties=='2'">事业单位</div>
					<div v-else>企业</div> -->
				    </el-form-item>
                <el-form-item label="统一社会信用代码:" prop="userJcjgProfile.dtCode" class="labelItem">
					<div>{{readForm.dtCode}}</div>
				</el-form-item>
                 <el-form-item label="通讯地址:" prop="userJcjgProfile.address" class="labelItem">
					<div>{{readForm.address}}</div>
				</el-form-item>
                 <el-form-item label="法人名称:" prop="userJcjgProfile.user_fa" class="labelItem">
					<div>{{readForm.user_fa}}</div>
				</el-form-item>
                 <el-form-item label="邮编:" prop="userJcjgProfile.zipcode" class="labelItem">
					<div>{{readForm.zipcode}}</div>
				</el-form-item>
                 <el-form-item label="技术负责人:" prop="userJcjgProfile.user_js" class="labelItem">
					<div>{{readForm.user_js}}</div>
				</el-form-item>
                 <el-form-item label="质量负责人:" prop="userJcjgProfile.user_zl" class="labelItem">
					<div>{{readForm.user_zl}}</div>
				</el-form-item>
                 <el-form-item label="catl证书编码:" prop="userJcjgProfile.catl_code" class="labelItem">
					<div>{{readForm.catl_code}}</div>
				</el-form-item>
                 <el-form-item label="catl证书到期时间:" prop="userJcjgProfile.calt_expiration" class="labelItem">
					<div>{{readForm.calt_expiration}}</div>
				</el-form-item>
                 <el-form-item label="cma证书编码:" prop="userJcjgProfile.cma_code" class="labelItem">
					<div>{{readForm.cma_code}}</div>
				</el-form-item>
                 <el-form-item label="cma证书到期时间:" prop="userJcjgProfile.cma_expiration" class="labelItem">
					<div>{{readForm.cma_expiration}}</div>
				</el-form-item>
                 <el-form-item label="产品范围:" prop="userJcjgProfile.cpfw" class="labelItem">
					<div>{{readForm.cpfw}}</div>
				</el-form-item>
                 <el-form-item label="认证产品数量（个）:" prop="userJcjgProfile.shuliang" class="labelItem">
					<div>{{readForm.shuliang}}</div>
				</el-form-item>
                <el-form-item label="认证参数数量（个）:" prop="userJcjgProfile.canshu" class="labelItem">
					<div>{{readForm.canshu}}</div>
				</el-form-item>
                
                
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data(){
        return{
            queryInfo:{
                name:'',
                pageSize:10,
                pageNum:1,
                jgxz:'',
                dtLevel:'',
                cpfw:'',
                user_fa:'',
                flag:'',
                dtRelyOnUnit:'',
                groupname:'检测机构'
            }, 
           	// 查看任务详情
            readDialogVisible: false,
            readForm: {},
            total:0,
            cellStyle: {
                padding: 2 + 'px'
            },
            rowStyle: {
                height: 35 + 'px'
            },
            tableData:[],
        //表格区域
        tableHeader: [
             {
                label: '机构名称',
                prop: 'name',
                width: 230
			},{
                label: '依托单位',
                prop: 'dtRelyOnUnit',
                width: 180
			},
            // {
            //     label: '信用代码',
            //     prop: 'dtCode',
            //     width: 180
            // },
           {
                label: 'cma证书编码',
                prop: 'cma_code',
                width: 150
            },{
                label: '农业农村部认可编号',
                prop: 'mara_code',
                width: 160
            },{
                label: '机构性质',
                prop: 'jgxz',
                width: 150
            },{
                label: '产品范围',
                prop: 'cpfw',
                width: 150
            },{
                label: '认证参数数量',
                prop: 'canshu',
                width: 150
            }
        ],
        // 任务状态选项
        dtLevelList: [
            {
                value: '1',
                label: '省级'
            }, {
                value: '2',
                label: '市级'
            }, {
                value: '3',
                label: '县级'
            }],
        // jxgzList: [
        //     {
        //         value: '1',
        //         label: '政府部门'
        //     }, {
        //         value: '2',
        //         label: '事业单位'
        //     }, {
        //         value: '3',
        //         label: '企业'
        //     }],
         cpfwList: [
            {
                value: '1',
                label: '种植业产品'
            }, {
                value: '2',
                label: '畜禽产品'
            }, {
                value: '3',
                label: '水产品'
            },{
                value: '4',
                label: '投入品'
            },{
                value: '5',
                label: '产地环境'
            }]
        }
    },
    created() {
		this.getJcOrgs()
	},
    methods: {
        async getJcOrgs(){
            const {data: res} = await this.$http.post("getJcOrgs", this.queryInfo);
            this.tableData = res.data.rows
            this.total = res.data.total
            console.log(this.tableData) 
            // for(let i= 0; i < this.tableData.length; i++) {
            //     if (this.tableData[i].properties == 1){
            //           this.tableData[i].properties ='政府部门';
            //     }else if(this.tableData[i].properties == 2){
            //         this.tableData[i].properties ='事业单位';
            //     }else{
            //          this.tableData[i].properties ='企业';
            //     }
            // }
        },
        //查询
        async searchData(){
				this.queryInfo.pageNum = 1
				this.getJcOrgs()
                // this.queryInfo.cpfw = res.data.rows.userJcjgProfile.cpfw
                // this.queryInfo.task_name_like = this.queryInfo.task_name
				console.log(this.queryInfo.name)
		}, 
        //重置
        reset(){
            this.queryInfo={
				pageSize:10,
                pageNum:1,
                jgxz:'',
                dtLevel:'',
                cpfw:'',
                user_fa:'',
                flag:'',
                dtRelyOnUnit:'',
                groupname:'检测机构'

				}
				this.getJcOrgs()
        },
        //分页器
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    },
                handleCurrentChange(val) {
                    this.queryInfo.pageNum = val;
                    console.log(`当前页: ${val}`);
                    this.getJcOrgs()
                    },
                /** 监听页码的改变 */
                handleCurrentChange(newPage) {
                    this.queryInfo.pageNum = newPage
                    this.getJcOrgs()
                },
                /** 监听每页显示多少数据的改变 */
                handleSizeChange(newSize) {
                    this.queryInfo.pageSize = newSize
                    this.getJcOrgs()
                },
			// 查看主体信息详情
			async readDialogVisible1(row) {
                this.readForm.name = row.name
                this.readForm.dtRelyOnUnit = row.dtRelyOnUnit
                this.readForm.flag = row.flag
                this.readForm.dtCode = row.dtCode
                this.readForm.address = row.address
                this.readForm.catl_code = row.catl_code
                this.readForm.calt_expiration = row.calt_expiration
                this.readForm.cma_code = row.cma_code
                this.readForm.cma_expiration = row.cma_expiration
                this.readForm.cpfw = row.cpfw
                this.readForm.shuliang = row.shuliang
                this.readForm.canshu = row.canshu
                this.readForm.jgxz = row.jgxz
				// console.log(this.readForm.dtRelyOnUnit)
				this.readDialogVisible = true

			},
    },
       
}

</script>

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