<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-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>
    <!-- 图标信息及表格 -->
    <el-form class="elForm" v-loading="loading">
      <el-form-item style="width: 90vw; margin-left: 60px;margin-top: 24px;">
        <el-table :data="tableData" class="center-table dark-table main-table" style="width: 100%" size="small" element-loading-text="拼命加载中" border height="480">
          <el-table-column label="ID" type="index" width="90"></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.company_org_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目部" prop="project_org_name"></el-table-column>
          <el-table-column label="组织" prop="org_name"></el-table-column>
          <el-table-column label="材料名称" prop="material_name"></el-table-column>
          <el-table-column label="标准" width="110">
            <template>
              <el-tag size="mini" :type="this.gradation.type">{{this.gradation.name}}</el-tag>
              <el-tag size="mini" :type="this.density.type">{{this.density.name}}</el-tag>
              <el-tag size="mini" :type="this.rebar.type">{{this.rebar.name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="created_at"></el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 分页 -->
    <el-pagination class="bottom-pager" style="margin-top: 20px" background layout="prev,pager,next,total,->,jumper" @current-change="handlePageChange" :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { getQualityInfoDetailAPI } from "../../api";
export default {
  data () {
    return {
      loading: true,
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      tableData: [],
      total: 0,
      page: 1,
      timer: 'day',
      gradation: {
        type: '',
        name: ''
      },
      density: {
        type: '',
        name: ''
      },
      rebar: {
        type: '',
        name: ''
      }
    };
  },
  async mounted () {
    this.getQualityInfoDetail();
  },
  methods: {
    // 初始获取图表数据
    async getQualityInfoDetail () {
      const res = await getQualityInfoDetailAPI({
        org_id: this.id,
        onpage: this.timer,
        // severity: this.value,
        // type: this.value2,
        page: this.page,
      });
      if (res.data.code === 0) {
        this.total = res.data.data.total;
        this.tableData = res.data.data.data;
        this.tableData.forEach(item => {
          this.isAccept(item)
        })
      }
      this.loading = false;
    },
    // 时间发生改变
    async dateChange (value) {
      this.loading = true;
      this.onpage = value
      this.getQualityInfoDetail()
    },
    // 分页
    handlePageChange (page) {
      this.loading = true;
      this.page = page;
      this.getQualityInfoDetail();
    },
    // 公司名称的点击事件
    handleClick (value) {
      localStorage.setItem("RGid", value.company_org_id)
      localStorage.setItem("RGname", value.company_org_name);
      // 跳转从新的标签页打开
      const routerJump = this.$router.resolve(`/qualityC?id=${1}`)
      window.open(routerJump.href, '_blank')
      // this.$router.push(`/qualityC?id=${1}`);
    },
    // 判断质检是否合格
    isAccept (value) {
      if (value.is_accept_gradation == null) {
        this.gradation.type = 'info'
        this.gradation.name = '级配未检测'
      } else if (value.is_accept_gradation == 0) {
        this.gradation.type = 'danger'
        this.gradation.name = '级配不合格'
      } else if (value.is_accept_gradation == 1) {
        this.gradation.type = 'success'
        this.gradation.name = '级配合格'
      }
      if (value.is_accept_density == null) {
        this.density.type = 'info'
        this.density.name = '密度未检测'
      } else if (value.is_accept_density == 0) {
        this.density.type = 'danger'
        this.density.name = '密度不合格'
      } else if (value.is_accept_density == 1) {
        this.density.type = 'syccess'
        this.density.name = '密度合格'
      }
      if (value.is_accept_rebar == null) {
        this.rebar.type = 'info'
        this.rebar.name = '钢筋未检测'
      } else if (value.is_accept_rebar == 0) {
        this.rebar.type = 'danger'
        this.rebar.name = '钢筋不合格'
      } else if (value.is_accept_rebar == 1) {
        this.rebar.type = 'syccess'
        this.rebar.name = '钢筋合格'
      }
    },
    // 回到首页
    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;
    }
  }
}
.bottom-pager {
  margin-top: 20px;
  margin-left: 50px;
  width: 90vw;
  margin-bottom: 24px;
}
</style>
