<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">“ 数量 ” - <span>{{ this.name }}</span></div>
        <div class="total-right">
          <div style="width: 300px; margin-left: 35px;">
            <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>
      </div>
      <footer></footer>
    </header>
    <!-- 图标信息及表格 -->
    <div style="display: flex;">
      <div class="left-icon"></div>
      <div class="right-message">
        <el-table :data="tableData" style="width: 100%;" height="550" border v-loading="loading">
          <el-table-column prop="name" label="名称" width="180">
          </el-table-column>
          <el-table-column prop="type_waterstabilized" label="水稳站数量">
          </el-table-column>
          <el-table-column prop="type_weigh" label="磅站数量">
          </el-table-column>
          <el-table-column prop="type_concrete" label="混凝土站数量">
          </el-table-column>
          <el-table-column prop="type_asphalt" label="沥青站数量">
          </el-table-column>
          <el-table-column prop="type_project" label="物料系统数量">
          </el-table-column>
          <el-table-column prop="appRDCount" label="移动收发数量">
          </el-table-column>
          <el-table-column prop="name" fixed="right" label="操作" width="120">
            <template slot-scope="{ row }">
              <el-button slot="reference" size="mini" @click="showDetail(row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- dialog弹窗 -->
      <el-dialog title="数量详情" :visible.sync="dialogTableVisible" :before-close="handleClose">
        <el-table :data="detailArray" v-if="dialogTableVisible">
          <el-table-column property="name" label="名称" width="150"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill"; //在这里引入
import {
  getEveryProjectSiteNumberAPI, // 项目站点数量接口
} from "@/api/index";
export default {
  data () {
    return {
      id: '',
      name: '',
      tableData: [], // 表格数据
      detailArray: [], // 详情数据 
      dialogTableVisible: false,
      loading: true
    };
  },
  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.getEveryProjectSiteNumber()
  },
  methods: {
    // 获取项目各个站点数量
    async getEveryProjectSiteNumber () {
      const res = await getEveryProjectSiteNumberAPI({
        org_id: this.id,
      });
      if (res.data.code === 0) {
        this.tableData = res.data.data
      }
      this.loading = false
    },
    // 查看详情
    async showDetail (row) {
      const res = await getEveryProjectSiteNumberAPI({
        org_id: row.id,
      })
      if (res.data.code === 0) {
        res.data.data.forEach(item => {
          const detailObject = { name: row.name,address: item };
          this.detailArray.push(detailObject);
        });
        this.dialogTableVisible = true
      }
    },
    // 关闭弹窗回调函数
    handleClose(){
      this.detailArray = []
       this.dialogTableVisible = false
    },
    // 回到首页
    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;
    }
  }
  .left-icon {
    width: 20vw;
  }
  .right-message {
    margin-top: 10px;
    width: 63vw;
    height: 80vh;
    overflow: auto;
  }
}
</style>
