<template>
	
  <el-tabs v-model="activeName" type="border-card" >
	<el-tab-pane label="图表" name="first" >
		<div  style ="display:flex;flex-direction:row;justify-content:flex-start;height: 100%">
			<div class="qiyeleft" style="width: 24%;height:680px;" >
			<div class="qiyetitle">企业列表</div>
				<div style ="display:flex;flex-direction:row;justify-content:flex-start;margin-bottom: 20px;margin-left: 20px;margin-right: 20px;">
					<el-input v-model="searchData.unitName" placeholder="请输入资源名称"></el-input>
					<el-button type="primary" @click="searchFun()">
						<i class="el-icon-search"></i> 搜索
					</el-button>
				</div>
				<div style="max-height:400px;background: #f3fafc;margin-left: 20px;margin-bottom:20px;margin-right: 20px; ">
					<div class="qiyelist" style="letter-spacing:1px;" :id="item.enterpriseId" @click="showqiye(item.enterpriseId)" v-for="(item, index) in tableData.pageData" :key="index">
						<div style="margin-left: 10px;cursor: pointer;">{{item.unitName}}</div>
					</div>

				</div>
				<el-pagination
						background
						layout="total, prev, pager, next"
						:total="tableData.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="PAGE.page"
						:page-size="PAGE.size"
				></el-pagination>
		</div>
		<div style="width: 75%">
			<div style="width: 100%;height: 10em;">
				<div class="el-tab-pane-div second-div" @click="showList(1)"  style="cursor:pointer;">
					<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
						<img src="../../assets/shigunum.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';">{{totalOne}}</div>
				</div>
				<div class="el-tab-pane-div second-div" @click="showList(2)"  style="cursor:pointer;">
					<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
						<img src="../../assets/yujingnum.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';">{{totalTwo}}</div>
				</div>
				<!--<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.enterpriseCheckIngNum}}</div>-->
				<!--</div>-->
			</div>
			<EnterprisesTj></EnterprisesTj>
		</div>
		</div>
	</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.pageData" 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="accidentText" label="事故简述"></el-table-column>
			<el-table-column prop="accidentReason" label="事故原因"></el-table-column>
			<el-table-column prop="accidentLevel" label="事故等级"></el-table-column>
			<el-table-column prop="accidentTime" label="事故时间"></el-table-column>
			<el-table-column prop="createTime" label="创建时间">

			</el-table-column>
		</el-table>

	</el-dialog>

  	<el-dialog :visible.sync="dialogVisible2" title="注册企业列表">
	  <el-table :data="tjNumberObj2.pageData" stripe border style="width:100%;" :loading="loading" max-height="530px">
		  <el-table-column width="50px" type="index" label="序号"></el-table-column>
		  <el-table-column width="150px" prop="alarmInfo" label="预警名称"></el-table-column>
		  <el-table-column width="100px" prop="alarmType" label="报警类型"></el-table-column>
		  <el-table-column width="100px" prop="remarks" label="预警设备"></el-table-column>
		  <el-table-column width="100px" prop="reportValue" label="上报数值"></el-table-column>
		  <el-table-column prop="alarmTime" label="报警时间"></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() tjNumberObj2: any = {};
    @Provide() totalOne: string = 0;
    @Provide() totalTwo: string = 0
  //编辑组件
  @Provide() dialogVisible1: Boolean = false;
  @Provide() dialogVisible2: Boolean = false;
  @Provide() dialogVisible3: Boolean = false;
  @Provide() idcolor: string = "";

  @Provide() zjKey: any = 0;

  showList(type: any){
	if(type == 1){
		this.dialogVisible1 = true;
        this.getStatiData(this.idcolor);
	}else if(type == 2){
		this.dialogVisible2 = true;
        this.getStatiData2(this.idcolor);
	}else if(type == 3){
		this.dialogVisible3 = true;
	}
  }
    showqiye(id){
		if(this.idcolor!=''){
            document.getElementById(this.idcolor).style.background="";
            document.getElementById(this.idcolor).style.color="#000";
        }
        this.idcolor= id;
        this.getData();
	}
  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;
			if(that.tableData.pageData.length>0){
                that.showqiye(that.tableData.pageData[0].enterpriseId);
			}
        }
      }
    );
  }
	getStatiData(id) {
		let that = this;
		METHOD.axiosPost(
			that,
			`/accidentInfo/getAccidentInfoList`,
			{ enterpriseId:id, fromdate: "2021",size:200 },
			function (res: any) {
				if (res.code == 0) {
					that.tjNumberObj = res.data;
				}
			}
		);
	}
    getStatiData2(id) {
        let that = this;
        METHOD.axiosPost(
            that,
            `/alarmInfo/selectInfoByEnterpriseId`,
            { enterpriseId:id, fromdate: "2021",size:200 },
            function (res: any) {
                if (res.code == 0) {
                    that.tjNumberObj2 = res.data;
                }
            }
        );
    }
    getData() {
        let that = this;
        var id = this.idcolor;
        var param ={ enterpriseId: id, fromdate: "2021" }
        METHOD.axiosPost(
            that,
            `/enterpriseInfo/enterpriseHistogram`,
            param,
            function (res: any) {
                if (res.code == 0) {
                    that.totalOne = res.data.accident.totalNum;
                    that.totalTwo = res.data.alarm.totalNum;
                    EnterprisesTj.methods.drawPieChart(res.data)
                    document.getElementById(that.idcolor).style.background="#4980b5";
                    document.getElementById(that.idcolor).style.color="#fff";
                    //EnterprisesTj.methods.drawPieChart2(id)
                }
            }
        );
        METHOD.axiosGet(
            this,
            `/dataStatistics/enterpriseDatainfo/${id}`,
            function(res) {
                if (res.code === 0) {
                    //先进行赋值
					var datas = res.data;
					var arr = [datas.cameraList.length,datas.goodsList.length,datas.harmPlace.length,datas.troubleList.length,datas.allList.length,]
                    EnterprisesTj.methods.drawPieChart2(arr)
                }
            });
    }
  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: 45%;
	float: left;
	margin-left: 2.5%; 
	height: 9rem;
	color: #fff;
	background-color: #4980b5;
	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);
}
.qiyetitle{
	height: 60px;
	line-height:60px;
	text-align:center;
	color:#000;
	font-size: 30px;
	margin-top:20px;
}
.qiyeleft{
	border: 1px solid #c0ccda;
	margin-top: 20px;
	margin-left: 10px;
}
.qiyelist{
	height: 40px;
	line-height:40px;
	color: #000000;
	font-size: large;
	letter-spacing:1px;
	/*background-color: rgba(47, 96, 177, 0.1);*/
	border-radius: 5px;

}
main > div {
    background: #ffffff;
    height: calc(100vh - 120px)!important;
    padding: 0px !important;
}
	
</style>