<template>
  <div class="full-box" style="overflow: hidden">
    <div class="" style="width: 100%;height:100%;">
      <div class="top-tip-box t-title">当前位置：预警管理</div>

      <div class="table-info-box"  v-if="!showDetail" >
        <div class="table-search-box onerow">
          <div class="search-info-box">
            <div class="search-item">
              <div class="search-item-label">预警指标</div>
              <el-select v-model="filter.name" filterable clearable placeholder="请选择" style="width: 150px;">
                <el-option label="全部" value=""></el-option>
                <el-option  v-for="item in zbTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div class="search-item">
              <div class="search-item-label">告警时间</div>
              <el-date-picker
                type="date"
                v-model="filter.startDate"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                style="width:150px;float: left;">
              </el-date-picker>
            </div>
            <div class="search-item" style="margin-left: 10px;">
              <div class="search-item-label">至</div>
              <el-date-picker
                type="date"
                v-model="filter.endDate"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                style="width:150px;float: left;">
              </el-date-picker>
            </div>
            <el-button class="search-btn" type="primary" @click="searchResult">查询</el-button>
            <el-button class="search-btn" type="primary" @click="reset">重置</el-button>
          </div>
          <div class="search-border-box">
            <div class="sbb-line"></div>
            <div class="sbb-role"></div>
          </div>
        </div>
        <div class="table-result-boxx">
          <div class="table-container-style">
            <el-table :data="tableData.list" height="200">
              <el-table-column type="index" align="center" label="编号" width="80"></el-table-column>
              <el-table-column prop="name" align="center" label="预警指标" ></el-table-column>
              <el-table-column prop="threshold" align="center" label="指标值"></el-table-column>
              <el-table-column prop="value" align="center" label="发生值"></el-table-column>
              <el-table-column prop="content" align="left" label="企业名称" min-width="180" ></el-table-column>
              <el-table-column prop="detail" align="left" label="预警内容"  show-overflow-tooltip min-width="260"></el-table-column>
              <el-table-column prop="createTime" align="center" label="告警时间" width="120"></el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <div class="table-edit-btn" @click="operateData(scope.row)">详情</div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
          </div>
        </div>
      </div>
      <transition name="el-zoom-in-bottom">
        <div class="table-info-box"  v-if="showDetail">
          <div class="operate-box">
            <div class="operate-btn operate-back" @click="backList"><i class="el-icon-back"></i>返回</div>
            <div class="operate-btn operate-down" v-if="false"><i class="el-icon-download"></i>下载</div>
          </div>
          <div class="table-result-boxx" style='height: calc(100% - 45px)'>
            <div class="table-container-style">
              <el-table :data="detailTableData.list" height="200">
                <el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
                <el-table-column prop="dataTime" align="center" label="数据日期"></el-table-column>
                <el-table-column prop="companyCode" align="center" label="组织机构代码"></el-table-column>
                <el-table-column prop="companyName" align="center" label="企业名称" min-width="180"></el-table-column>
                <el-table-column prop="plat" align="center" label="所属板块"></el-table-column>
                <el-table-column prop="industryName" align="center" label="所属行业"></el-table-column>
                <el-table-column prop="czLj" align="center" label="工业总产值" ></el-table-column>
                <el-table-column prop="czbytb" align="center" label="产值增幅%" ></el-table-column>
                <el-table-column prop="srLj" align="center" label="主营业务收入" ></el-table-column>
                <el-table-column prop="sjLj" align="center" label="利税总额" ></el-table-column>
                <el-table-column prop="lrLj " align="center" label="利润总额" ></el-table-column>
              </el-table>
              <el-pagination @current-change="detailhandlePageChange" background layout="total, prev, pager, next" :total="detailTableData.total" :current-page="detailTableData.pageNum" :page-size="detailTableData.pageSize" :page-count="detailTableData.pages" style="text-align: right;"></el-pagination>
            </div>
          </div>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
  let month = new Date().getMonth()+1;
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  export default {
    name: 'yjManage',
    data () {
      return {
        showDetail:false,
        zbTypeList:[],
        timeFilter:[new Date().format("yyyy-")+"01-01",new Date().format("yyyy-MM-dd")],
        filter:{
          name:'',
          startDate:new Date().format("yyyy-")+"01-01",
          endDate:new Date().format("yyyy-MM-dd")
        },
        tableData:{
          list: [],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
        },
        detailTableData:{
          list: [],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
        },
        detailTableRowData:{},
      }
    },
    mounted (){ },
    created(){
      this.getZbList();
      this.getDataList();
    },
    watch:{},
    methods:{
      searchResult(){
        this.getDataList(1)
      },
      getZbList(pageNum){
        let vm = this;
        let pageNums = vm.$Util.isEmpty(pageNum) ? vm.tableData.pageNum : pageNum;
        vm.$http.get('/dx-economy-api/target').then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            vm.zbTypeList = _data.data
          }
        })
      },
      reset(){
        this.filter = {
          name:'',
          startDate:new Date().format("yyyy-")+"01-01",
          endDate:new Date().format("yyyy-MM-dd")
        }
      },
      getDataList(pageNum){
        let vm = this;
        vm.$http.get('/dx-economy-api/warning/page',{params:$.extend({pageNum:vm.tableData.pageNum,pageSize:vm.tableData.pageSize},vm.filter)}).then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            vm.tableData.list = _data.data.list;
            vm.tableData.pageNum = resp.data.data.pageNum;
            vm.tableData.total = resp.data.data.total;
          }
        })
      },
      operateData(rowData){
        let vm = this
        vm.detailTableName = rowData.companyName;
        vm.detailTableRowData = rowData;
        this.getDetailList();
        /*vm.$http.get('/dx-economy-api/warning/'+rowData.id).then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            vm.tableData.list = _data.data.list;
            vm.tableData.pageNum = resp.data.data.pageNum;
            vm.tableData.total = resp.data.data.total;
          }
        })*/
      },
      handlePageChange(currentPage){
        this.getDataList(null,currentPage)
      },
      /*优化内容 -数据moredetail*/
      detailhandlePageChange(pager){
        this.getDetailList(pager);
      },
      getDetailList(pager){
        let vm = this;
        vm.detailTableData.pageNum = vm.$Util.isEmpty(pager) ? vm.detailTableData.pageNum : pager;
        let params = {
          companyName : vm.detailTableRowData.content,
          pageNum: vm.detailTableData.pageNum,
          pageSize: vm.detailTableData.pageSize
        }
        vm.$http.get('/dx-economy-api/dataService/detail', {params:params}).then(function (resp) {
          vm.showDetail = true;
          let _data = resp.data.data;
          vm.detailTableData.list = _data.list;
          vm.detailTableData.pageNum = _data.pageNum;
          vm.detailTableData.pageSize = _data.pageSize;
          vm.detailTableData.pages = _data.pages;
          vm.detailTableData.total = _data.total;
        })
      },
      backList(){
        let vm =this;
        vm.showDetail = false;
        vm.detailTableData={
          list: [],
            pageNum: 1,
            pageSize: 10,
            pages: 0,
            total: 0,
        };
      },


    }
  }
</script>
<style></style>
<style scoped>
  .aaa{}
</style>