<template>
	
  <el-tabs v-model="activeName" type="border-card" >
	<el-tab-pane label="图表" name="first">
		<div style="width: 100%;height: 10em;">
			<div class="el-tab-pane-div second-div" style="" @click="showList(1)" style="cursor:pointer;">
				<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
					<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
					<p>危险源数量</p>
				</div>
				<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.dangerNum}}</div>
			</div>
			<div class="el-tab-pane-div second-div" style="" @click="showList(2)" style="cursor:pointer;">
				<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
					<img src="../../assets/z-zhuce.png" width="25%" style="margin-top: 2rem;">
					<p>注册企业数量</p>
				</div>
				<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseRegNum}}</div>
			</div>
			<div class="el-tab-pane-div second-div" style="" @click="showList(3)" style="cursor:pointer;">
				<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
					<img src="../../assets/z-shenhe.png" width="25%" style="margin-top: 2rem;">
					<p>待审批数量</p>
				</div>
				<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseCheckIngNum}}</div>
			</div>
		</div>
		<EnterprisesTj></EnterprisesTj>
	</el-tab-pane>
    <el-tab-pane label="列表" name="second">
		<div class="EnseList" style="background-color: #fff;padding: 20px;">
		  <el-row class="topBar">
		    <el-col>
		      <el-form :inline="true" :model="searchData">
		        <el-form-item>
		          <el-input v-model="searchData.unitName" placeholder="请输入企业名称"></el-input>
		        </el-form-item>
		        <el-form-item>
		          <el-input v-model="searchData.userName" placeholder="请输入用户名"></el-input>
		        </el-form-item>
		        <el-form-item>
		          <el-input v-model="searchData.orgCode" placeholder="请输入统一社会信用代码"></el-input>
		        </el-form-item>
		        <!--<el-form-item>
		          <City @changeFun="changeFun" :valueqv="cityval"></City>
		        </el-form-item>-->
		        <el-form-item>
		          <el-button type="primary" @click="searchFun()">
		            <i class="el-icon-search"></i> 搜索
		          </el-button>
		          <el-button type="primary" @click="resetFun()">
		            <i class="el-icon-refresh"></i> 重置
		          </el-button>
		        </el-form-item>
		      </el-form>
		    </el-col>
		  </el-row>
		  <el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
		    <el-table-column width="50" type="index" label="序号"></el-table-column>
		    <el-table-column prop="unitName" label="企业名称"></el-table-column>
		    <el-table-column prop="legalPerson" label="企业法人"></el-table-column>
		    <el-table-column prop="orgCode" label="统一社会信用代码"></el-table-column>
		    <el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
		    <el-table-column prop="regulationBigType" label="监管分类">
				<template slot-scope="scope">
					<span v-if="scope.row.regulationBigType == 1">非煤矿山</span>
					<span v-if="scope.row.regulationBigType == 2">危险化学品</span>
					<span v-if="scope.row.regulationBigType == 3">冶金</span>
					<span v-if="scope.row.regulationBigType == 4">有色</span>
					<span v-if="scope.row.regulationBigType == 5">建材</span>
					<span v-if="scope.row.regulationBigType == 6">机械</span>
					<span v-if="scope.row.regulationBigType == 7">轻工</span>
					<span v-if="scope.row.regulationBigType == 8">纺织</span>
					<span v-if="scope.row.regulationBigType == 9">商贸</span>
					<span v-if="scope.row.regulationBigType == 10">其他</span>
				</template>
			</el-table-column>
		    <el-table-column prop="regAddress" label="企业地址" />
		    <el-table-column label="操作" width="170" align="center">
		      <template slot-scope="scope">
		        <el-button type="success" size="small" @click="checkDetal(scope.row)">
		          <i class="el-icon-view"></i>查看详细
		        </el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  <el-pagination
		    background
		    layout="total,sizes, prev, pager, next, jumper"
		    :total="tableData.total"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :current-page="PAGE.page"
		    :page-size="PAGE.size"
		  ></el-pagination>
		</div>
	</el-tab-pane>

  	<el-dialog :visible.sync="dialogVisible1" title="危险源列表">
		<el-table :data="tjNumberObj.goodsList" stripe border style="width:100%;" :loading="loading" max-height="530px">
			<el-table-column width="50px" type="index" label="序号"></el-table-column>
			<el-table-column prop="goodsName" label="危险源名称"></el-table-column>
			<el-table-column prop="unitName" label="所属企业"></el-table-column>
			<el-table-column prop="category" label="物品类型"></el-table-column>
			<el-table-column prop="dangerGrade" label="危险等级"></el-table-column>
			<el-table-column prop="isBigDanger" label="是否重大危险源">
				<template slot-scope="scope">
					<span v-if="scope.row.isBigDanger == 0">否</span>
					<span v-if="scope.row.isBigDanger == 1">是</span>
				</template>
			</el-table-column>
			<el-table-column prop="contacts" label="联系人"></el-table-column>
			<el-table-column prop="phone" label="电话"></el-table-column>
		</el-table>

	</el-dialog>

  	<el-dialog :visible.sync="dialogVisible2" title="注册企业列表">
	  <el-table :data="tjNumberObj.enterpriseList" stripe border style="width:100%;" :loading="loading" max-height="530px">
		  <el-table-column width="50px" type="index" label="序号"></el-table-column>
		  <el-table-column prop="unitName" label="企业名称"></el-table-column>
		  <el-table-column width="100px" prop="legalPerson" label="企业法人"></el-table-column>
		  <el-table-column width="200px" prop="orgCode" label="统一社会信用代码"></el-table-column>
		  <el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
		  <el-table-column prop="regulationBigType" label="监管分类">
			  <template slot-scope="scope">
				  <span v-if="scope.row.regulationBigType == 1">非煤矿山</span>
				  <span v-if="scope.row.regulationBigType == 2">危险化学品</span>
				  <span v-if="scope.row.regulationBigType == 3">冶金</span>
				  <span v-if="scope.row.regulationBigType == 4">有色</span>
				  <span v-if="scope.row.regulationBigType == 5">建材</span>
				  <span v-if="scope.row.regulationBigType == 6">机械</span>
				  <span v-if="scope.row.regulationBigType == 7">轻工</span>
				  <span v-if="scope.row.regulationBigType == 8">纺织</span>
				  <span v-if="scope.row.regulationBigType == 9">商贸</span>
				  <span v-if="scope.row.regulationBigType == 10">其他</span>
			  </template>
		  </el-table-column>
		  <el-table-column prop="accountStatus" label="账号状态">
			  <template slot-scope="scope">
				  <font v-if="scope.row.accountStatus === '0'" class="colorM">
					  <i class="iconfont iconzhengchang"></i> 正常
				  </font>
				  <font v-else-if="scope.row.accountStatus == 2" class="colorP">
					  <i class="iconfont iconsuoding"></i> 已锁定
				  </font>
				  <font v-else-if="scope.row.accountStatus == 1" class="colorR">
					  <i class="iconfont iconicon_huabanfuben"></i> 已删除
				  </font>
				  <font v-else-if="scope.row.accountStatus == 3" class="colorP">
					  <i class="iconfont iconshenhe"></i> 审核中
				  </font>
				  <font v-else-if="scope.row.accountStatus == 4" class="colorR">
					  <i class="iconfont iconweitongguo"></i> 审核未通过
				  </font>
			  </template>
		  </el-table-column>
	  </el-table>

  	</el-dialog>

  	<el-dialog :visible.sync="dialogVisible3" title="待审批企业列表">
	  <el-table :data="tjNumberObj.checkEnterpriseList" stripe border style="width:100%;" :loading="loading" max-height="530px">
		  <el-table-column width="50px" type="index" label="序号"></el-table-column>
		  <el-table-column prop="unitName" label="企业名称"></el-table-column>
		  <el-table-column width="100px" prop="legalPerson" label="企业法人"></el-table-column>
		  <el-table-column width="200px" prop="orgCode" label="统一社会信用代码"></el-table-column>
		  <el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
		  <el-table-column prop="regulationBigType" label="监管分类">
			  <template slot-scope="scope">
				  <span v-if="scope.row.regulationBigType == 1">非煤矿山</span>
				  <span v-if="scope.row.regulationBigType == 2">危险化学品</span>
				  <span v-if="scope.row.regulationBigType == 3">冶金</span>
				  <span v-if="scope.row.regulationBigType == 4">有色</span>
				  <span v-if="scope.row.regulationBigType == 5">建材</span>
				  <span v-if="scope.row.regulationBigType == 6">机械</span>
				  <span v-if="scope.row.regulationBigType == 7">轻工</span>
				  <span v-if="scope.row.regulationBigType == 8">纺织</span>
				  <span v-if="scope.row.regulationBigType == 9">商贸</span>
				  <span v-if="scope.row.regulationBigType == 10">其他</span>
			  </template>
		  </el-table-column>
		  <el-table-column prop="accountStatus" label="账号状态">
			  <template slot-scope="scope">
				  <font v-if="scope.row.accountStatus === '0'" class="colorM">
					  <i class="iconfont iconzhengchang"></i> 正常
				  </font>
				  <font v-else-if="scope.row.accountStatus == 2" class="colorP">
					  <i class="iconfont iconsuoding"></i> 已锁定
				  </font>
				  <font v-else-if="scope.row.accountStatus == 1" class="colorR">
					  <i class="iconfont iconicon_huabanfuben"></i> 已删除
				  </font>
				  <font v-else-if="scope.row.accountStatus == 3" class="colorP">
					  <i class="iconfont iconshenhe"></i> 审核中
				  </font>
				  <font v-else-if="scope.row.accountStatus == 4" class="colorR">
					  <i class="iconfont iconweitongguo"></i> 审核未通过
				  </font>
			  </template>
		  </el-table-column>
	  </el-table>

  	</el-dialog>
  </el-tabs>
</template>
   
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import EnterprisesMgEdit from "./EnterprisesMgEdit.vue";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
import EnterprisesTj from './EnterprisesTj.vue'
// import ECharts from 'echarts'
// Vue.prototype.$echarts = echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
//引入基本模板
let echart = require('echarts/lib/echarts')
//引入柱状图组件
require('echarts/lib/chart/bar')
//引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import axios from 'axios'
@Component({
  components: { EnterprisesMgEdit, City, EnterprisesTj}
})
export default class EnterprisesMg extends Vue {
	data() {
	  return {
	    activeName: 'first',
		
	  };
	}
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = {};
  @Provide() loading: Boolean = false;
  @Provide() cityval: any = [];
  @Provide() tjNumberObj: any = {};
  //编辑组件
  @Provide() dialogVisible1: Boolean = false;
  @Provide() dialogVisible2: Boolean = false;
  @Provide() dialogVisible3: Boolean = false;

  @Provide() zjKey: any = 0;

  showList(type: any){
	if(type == 1){
		this.dialogVisible1 = true;
	}else if(type == 2){
		this.dialogVisible2 = true;
	}else if(type == 3){
		this.dialogVisible3 = true;
	}
  }
  getTableData() {
    let that = this,
      param = Object.assign({accountStatus:'0'}, that.PAGE, that.searchData);
    that.loading = true;
    METHOD.axiosPost(
      that,
      `/enterpriseInfo/queryEnterpriseInfo`,
      param,
      function(res: any) {
        that.loading = false;
        if (res.code == 0) {
          that.tableData = res.data;
        }
      }
    );
  }
	getStatiData() {
		let that = this;
		METHOD.axiosPost(
			that,
			`/dataStatistics/managerDataStatistics`,
			{ cityId: "", countyId: "", provinceId: "" },
			function (res: any) {
				if (res.code == 0) {
					that.tjNumberObj = res.data;
				}
			}
		);
	}
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = { unitName: "" };
    this.getTableData();
    this.cityval = [];
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  selectChange(val: any) {
    this.searchData.dataType = val;
    this.getTableData();
  }
  checkDetal(row: any) {
    this.$router.push({path: '/EnDetail', query:{enterpriseId: row.enterpriseId} })
  }
  /*选择城市*/
  changeFun(v: any) {
    this.searchData.provinceId = v[0];
    this.searchData.cityId = v[1];
    this.searchData.countyId = v[2];
  }
  created() {
    this.getTableData();
  }
  mounted() {
	this.getStatiData();
  }
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
.second-div{
	margin-top: 20px;
	width: 30%;
	float: left;
	margin-left: 2.5%; 
	height: 9rem;
	color: #FFFFFF; 
	background-color: rgba(47, 96, 177, 0.1);
	border-radius: 5px;
	border: 2px solid rgb(22, 151, 207, 0.3);
	box-shadow:  0 0 8px 8px rgba(131, 229, 255, 0.1)inset, 0 0 7px 7px rgba(22, 151, 207, 0.2);
}
main > div {
    background: #ffffff;
    height: calc(100vh - 120px)!important;
    padding: 0px !important;
}
	
</style>