<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="">
				<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="">
				<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="">
				<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="" label="监管分类"></el-table-column>
		    <el-table-column prop="" label="危险源数量"></el-table-column>
		    <el-table-column prop="" label="企业地址">
		    </el-table-column>
		    <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-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() dialogVisible: Boolean = false;
  @Provide() formData: any = { dataType: "", enterpriseId: "" };
  @Provide() zjKey: any = 0;

  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();
  }
  closeDialog() {
    //关闭窗口
    this.dialogVisible = false;
    this.formData = {};
  }
  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>