<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">
          “ 预警信息 ” - <span>{{ this.name }}</span>
        </div>
        <div class="total-right">
          <div>
            <el-radio-group v-model="timer" @change="dateChange(timer)">
              <el-radio-button label="day">本日</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="quarter">本季</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
              <el-radio-button label="all">开累</el-radio-button>
            </el-radio-group>
          </div>
          <div class="icon">
            <i @click="pushIndex" class="el-icon-s-home" :style="{ fontSize: '32px', color: 'rgb(64,158,225)' }"></i>
            <i class="el-icon-s-operation" :style="{
                fontSize: '32px',
                marginLeft: '15px',
                color: 'rgb(64,158,225)',
              }"></i>
          </div>
        </div>
      </div>
      <footer></footer>
    </header>
	<!-- 数字信息 -->
	<div class="num">
	  <div class="now">总数&nbsp;<span>{{ tallnum + "个" }}</span></div>
	  <div class="before">已解决&nbsp;<span>{{ tnum + "个" }}</span></div>
	  <div class="next">完成率&nbsp;<span>{{ blv + "%" }}</span></div>
	</div>
	<!-- 图标信息及表格 -->
	<div class="message">
	  <div class="charts"></div>
	  <div class="table">
	    <!-- 图标信息及表格 -->
	    <el-form class="elForm">
	      <el-form-item>
	        <span class="yujingType" style="margin-left: 70px;">预警级别</span>
	        <el-select v-model="value" placeholder="请选择" size="mini">
	          <el-option v-for="(item, index) in yujingLevel" :key="index" :label="item.name" :value="item.value">
	          </el-option>
	        </el-select>
	        <span class="yujingType" style="margin-left: 30px;">预警类型</span>
	        <el-select v-model="value2" placeholder="请选择" size="mini">
	          <el-option v-for="(item, index) in countersData" :key="index" :label="item.name" :value="item.id">
	          </el-option>
	        </el-select>
	        <div style="display: inline-block; width: 10vw; margin-left: 20px;">
	          <el-button class="search" type="primary" icon="el-icon-search" size="small" @click="getPcDeliveryDetail">查询
	          </el-button>
	        </div>
	      </el-form-item>
	      <el-form-item>
			<el-table :data="tableData" stripe border style="width: 100%" class="tab" v-loading="loading" height="350">
	          <el-table-column label="ID" prop="message_id" width="90">
				<template slot-scope="scope">
				  {{ scope.$index +1 }}
				</template>
			  </el-table-column>
	          <el-table-column label="公司" prop="company_org_name">
				<template slot-scope="{ row }">
					<div class="custom-slot" @click="handleClick(row)" style="cursor: pointer; color: rgb(127, 144, 255)">
						{{ row.name }}
					</div>
				</template>
	          </el-table-column>
	          <el-table-column label="总数" prop="allnum"></el-table-column>
	          <el-table-column label="已解决" prop="num"></el-table-column>
	          <el-table-column label="完成率" prop="wclv"></el-table-column>
	        </el-table>
	      </el-form-item>
	    </el-form>
	  </div>
	</div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import { getEveryProjectWarnNumberAPI } from "../../api";
export default {
  data () {
    return {
      countersData: [
        { name: "全部", id: 0 },
        { name: "设备异常预警", id: 1 },
        { name: "收料方式预警", id: 2 },
        { name: "超量预警", id: 3 },
        { name: "超合同量预警", id: 4 },
        { name: "缺合同预警", id: 5 },
        { name: "无申请预警", id: 6 },
      ],
      yujingLevel: [
        { name: "全部", value: 0 },
        { name: "轻度", value: 1 },
        { name: "中度", value: 2 },
        { name: "重度", value: 3 },
      ],
      severityEnum: ["", "轻度", "中度", "高度"],
      value: 0, // 预警级别
      value2: 0, // 预警类型
      loading: true,
      radio1: "0", // 单位
      id: '',
      name: '',
      tableData: [],
      total: 0,
      page: 1,
      timer: 'day',
      info: localStorage.getItem("info"),
      num: {},
      chartsName: [],
      before: [],
      now: [],
	  tallnum: 0,
	  tnum: 0,
	  blv:'0'
    };
  },
  created () {
    const url = new URL(window.location.href);
    if (url.href.includes('?')) {
      this.id = localStorage.getItem("RGid");
      this.name = localStorage.getItem("RGname");
    } else {
      this.id = localStorage.getItem("id");
      this.name = localStorage.getItem("name");
    }
  },
  async mounted () {
    this.getWarnInfo();
    this.useCharts();
  },
  methods: {
    // message左边charts图
    useCharts() {
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
		grid: {
		    top: '50px',
		    bottom: '100px',
		    left: '60px',
		    right: '50px'
		},
        legend: {
          data: ["总数", "已解决"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
	        data: this.chartsName,
			axisLabel:{rotate:50}
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总数",
            type: "bar",
            barGap: 0,
            color: "#5470c6",
            emphasis: {
              focus: "series",
            },
            data: this.now,
          },
          {
            name: "已解决",
            type: "bar",
            color: "#91cc75",
            emphasis: {
              focus: "series",
            },
            data: this.before,
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".charts"));
      myChart.setOption(option);
    },
    // 查询预警信息的方式
    getWarnInfo(){
      if(this.info) {
        this.countersData.forEach(item => {
          if(item.id == this.info)
          this.value2 = item.name
        })
        this.getRealPcDeliveryDetail()
      } else {
        this.getPcDeliveryDetail()
      }
    },
    // 直接获取预警信息
    async getRealPcDeliveryDetail () {
      this.loading = true;
      const res = await getEveryProjectWarnNumberAPI({
        org_id: this.id,
        onpage: this.timer,
        severity: this.value,
        type: this.info,
        page: this.page,
      });
      if (res.data.code === 0) {
        this.tableData = res.data.data.list;
		const extractedData = this.tableData.map(obj => obj.name);
		const nowData = this.tableData.map(obj => Math.abs(obj.allnum));
		const beforeData = this.tableData.map(obj => Math.abs(obj.num));
		this.chartsName = extractedData;
		this.now = nowData;
		this.before = beforeData;
		this.tallnum = res.data.data.tallnum;
		this.tnum = res.data.data.tnum;
		if(this.tallnum==0){
			this.blv = '0'
		}else{
			this.blv = ((this.tnum/this.tallnum).toFixed(2))*100 + ""
		}
		this.useCharts()
      }
      this.loading = false;
    },
    // 初始获取图表数据
    async getPcDeliveryDetail () {
      this.loading = true;
      const res = await getEveryProjectWarnNumberAPI({
        org_id: this.id,
        onpage: this.timer,
        severity: this.value,
        type: this.value2,
        page: this.page,
      });
      if (res.data.code === 0) {
        this.tableData = res.data.data.list;
		const extractedData = this.tableData.map(obj => obj.name);
		const nowData = this.tableData.map(obj => Math.abs(obj.allnum));
		const beforeData = this.tableData.map(obj => Math.abs(obj.num));
		this.chartsName = extractedData;
		this.now = nowData;
		this.before = beforeData;
		this.tallnum = res.data.data.tallnum;
		this.tnum = res.data.data.tnum;
		if(this.tallnum==0){
			this.blv = '0'
		}else{
			this.blv = ((this.tnum/this.tallnum).toFixed(2))*100 + ""
		}
		this.useCharts()
      }
      this.loading = false;
    },
    // 时间发生改变
    async dateChange (value) {
      this.onpage = value
      this.getPcDeliveryDetail()
    },
    // 分页
    handlePageChange (page) {
      this.page = page;
      this.getPcDeliveryDetail();
    },
    // 公司名称的点击事件
    handleClick (value) {
      localStorage.setItem("RGid", value.id)
      localStorage.setItem("RGname", value.name);
      // 跳转从新的标签页打开
      const routerJump = this.$router.resolve(`/warningC?id=${1}`)
      window.open(routerJump.href, '_blank')
      // this.$router.push(`/warningC?id=${1}`);
    },
    // 回到首页
    pushIndex () {
      this.$router.push("/");
    }
  },
};
</script>
<style scoped lang="scss">
.receiptF {
  width: 100%;

  header {
    width: 100%;
    height: 130px;

    .total {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;

      .total-left {
        margin-top: 20px;
        font-size: 32px;
        font-weight: 700;
        color: rgb(80, 139, 248);
      }

      .total-right {
        width: 900px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;
        overflow: hidden;
        margin-left: -100px;

        div:nth-child(2) {
          margin-left: -130px;

          ul {
            width: 200px;
            height: 35px;
            display: flex;
            border: 1px solid black;
            align-items: center;
            border-radius: 10px;

            li:last-child {
              border: none;
            }

            li {
              text-align: center;
              width: 50px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              list-style: none;
              border-right: 1px solid black;
            }
          }
        }

        .icon {
          width: 80px;
          margin-left: -80px;
        }
      }
    }

    footer {
      width: 100%;
      height: 18px;
      background-color: rgb(216, 236, 255);
      color: blue;
      overflow: hidden;
    }
  }
  .num {
    width: 99%;
    height: 155px;
    margin: 15px auto;
    display: flex;
    justify-content: space-around;
  
    div {
      width: 31%;
      height: 90%;
      border: 2px solid gray;
    }
  
    .now {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
  
      span {
        color: rgb(80, 139, 248);
      }
    }
  
    .before {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
  
      span {
        color: rgb(80, 139, 248);
      }
    }
  
    .next {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
  
      span {
        color: greenyellow;
      }
    }
  }
  .message {
    width: 99%;
    height: 435px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  
    .charts {
      width: 40%;
      height: 100%;
  
      div {
        canvas {
          width: 800px;
        }
      }
    }
  
    .table {
      width: 58%;
      height: 100%;
    }
  }
  .elForm {
    .yujingType {
      margin-right: 20px;
    }
  }
}
.bottom-pager {
  margin-top: 20px;
  margin-left: 50px;
  width: 90vw;
  margin-bottom: 24px;
}
</style>
