<template>
  <div class="receipt">
    <header>
      <div class="total">
        <div class="total-left">“ {{ this.selectedContent }} ”- {{ this.name }} </div>
        <div class="total-right">
          <div>
          </div>
          <div>
            <el-radio-group v-model="radio2" @change="timeChange(radio2)">
              <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>
    <!-- 数字信息 -->
    <div class="num">
      <div class="now">出库数量&nbsp;<span>{{ Math.floor(Number(this.num.deliverysum)) + "吨" }}</span></div>
      <div class="before">库存数量&nbsp;<span>{{ Math.floor(Number(this.num.inventorysum)) + "吨" }}</span></div>
      <div class="next">合计&nbsp;<span>{{ (Math.floor(Number(this.num.inventorysum)) -
        Math.floor(Number(this.num.deliverysum))) + "吨" }}</span></div>
    </div>
    <!-- 详情页面 -->
    <div class="detail">
      <div class="detail-left">
        <el-table :data="list" style="width: 95%" border stripe height="400" v-loading="loading">
          <el-table-column prop="id" type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="材料" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ (row.name).split(" ")[0] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="规格型号" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ (row.name).split(" ")[1] }}
                {{ (row.name).split(" ")[2] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ture" label="计划量(吨)" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Number(row.deliveryweight).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ture" label="验收量(吨)" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Math.abs(Number(row.inventoryweight)).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ture" label="合计(吨)" width="180">
            <template slot-scope="{ row }">
              <!-- 自定义插槽内容 -->
              <div class="custom-slot">
                {{ Number(row.total).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-right">
        <el-input placeholder="请输入规格型号检索" prefix-icon="el-icon-search" v-model="input2" class="ss">
        </el-input>
        <!-- 右下项目列表 -->
        <div class="dr-list">
          <div class="dr-message" v-for="(item, index) in detail" :key="index">
            <div class="sty"></div>
            <div class="dr-message-font">
              <p>{{ item.material_name }}</p>
              <p>收料时间 : {{ item.recorded_date }}</p>
              <p>单号 : <span>{{ item.order_code }}</span></p>
              <p>收料量 : <span>{{ Number(item.delivery).toFixed(2) + "吨" }}</span></p>
            </div>
            <!-- 箭头 -->
            <div class="arrowhead" @click="openChild(item.order_id)">
              <span>&gt;</span>
            </div>
          </div>
          <!-- 查看项目详情 -->
          <el-dialog class="xiangqing" title="" :visible.sync="dialogFormVisible" width="80%">
            <!-- 基本信息 -->
            <div class="jiben">
              <div class="jiben-total">
                <div class="jiben-total-left">
                  <p style="
                              width: 10px;
                              height: 30px;
                              background-color: blue;
                            "></p>
                  <span style="font-size: 18px; font-weight: 600">
                    基本信息
                  </span>
                </div>
                <div class="jiben-total-right">
                  <span>单号：{{ this.tableData.dnumber }}</span>
                </div>
              </div>
              <div class="jiben-nr">
                <table>
                  <tr>
                    <th>
                      组织机构：<span>{{ this.tableData.org_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>
                      用料单位：<span>{{ this.tableData.labour_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>
                      材料名称：<span>{{ this.tableData.material_name }}</span>
                    </th>
                    <th>
                      规格型号：<span>{{ this.tableData.material_model }}</span>
                    </th>
                    <th>
                      单位：<span>{{ this.tableData.material_unit }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>使用部位：<span>{{ this.tableData.usedpart_full_name }}</span></th>
                    <th>炉批号：<span>{{ this.tableData.heat_no }}</span></th>
                    <th>发料时间：<span>{{ this.tableData.recorded_date }}</span></th>
                  </tr>
                  <tr>
                    <th>
                      发料人：<span>{{ this.tableData.maker }}</span>
                    </th>
                    <th>计证号：<span>{{ this.tableData.certificate_number }}</span></th>
                    <th>存放地：<span>{{ this.tableData.storage_location }}</span></th>
                  </tr>
                  <tr>
                    <th>发料数量：<span></span></th>
                    <th>车牌号：<span>{{ this.tableData.plate_number }}</span></th>
                    <th>实验报告号：<span>{{ this.tableData.test_report }}</span></th>
                  </tr>
                  <tr>
                    <th>单价：<span>{{ this.tableData.unit_price }}</span></th>
                    <th>生产厂商：<span>{{ this.tableData.modifier_name }}</span></th>
                    <th>条码：<span>{{ this.tableData.bar_code }}</span></th>
                  </tr>
                  <tr>
                    <th>备注：<span>{{ this.tableData.remaker }}</span></th>
                  </tr>
                </table>
              </div>
            </div>
            <!-- 磅单信息 -->
            <div class="bangdan">
              <div class="bangdan-total">
                <div class="bangdan-total-left">
                  <p style="
                    width: 10px;
                    height: 30px;
                    background-color: blue;
                  "></p>
                  <span style="font-size: 18px; font-weight: 600">
                    材料照片展示
                  </span>
                </div>
              </div>
              <div class="bangdan-nr">
                <ol>
                  <li>
                    <img :src="this.tableData.img_url" alt="">
                  </li>
                </ol>
              </div>
            </div>
            <div class="bangdan">
              <div class="bangdan-total">
                <div class="bangdan-total-left">
                  <p style="
                    width: 10px;
                    height: 30px;
                    background-color: blue;
                  "></p>
                  <span style="font-size: 18px; font-weight: 600">
                    签名照片展示
                  </span>
                </div>
              </div>
              <div class="bangdan-nr">
                <ol>
                  <li>
                    发料人：
                    <img :src="this.tableData.sender_signature" alt="">
                  </li>
                  <li>
                    领料人:
                    <img :src="this.tableData.receiver_signature" alt="">
                  </li>
                </ol>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import {
  getMaterialDescon,
  getPcStorageDetailByCode,
  getPcStorageDetail,
} from "../../api";
export default {
  data() {
    return {
      loading:true,
      // 材料信息
      input2: "",
      // 详情左侧模拟数据
      tableData: [],
      // 类别信息
      values: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      radio1: "全部",
      radio2: "day",
      // 数据部分
      id: localStorage.getItem("id"),
      name: localStorage.getItem("name"),
      selectedContent: localStorage.getItem("selectedContent"),
      num: {},
      detail: [],
      list: [],
      chidName: "",
      cailiaophoto:[],
    };
  },
  created () {
    const url = new URL(window.location.href);
    if (url.href.includes('?')) {
      this.id = localStorage.getItem("RSid");
      this.name = localStorage.getItem("RSname");
    } else {
      this.id = localStorage.getItem("id");
      this.name = localStorage.getItem("name");
    }
  },
  async mounted() {
    this.getdata();
    this.getChart();
  },
  methods: {
    // 获取数字数据(上)
    async getdata() {
      const res = await getMaterialDescon({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data[0];
    },
    // 获取图表数据(下左和下右)
    async getChart() {
      const res = await getPcStorageDetail({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      this.list = res.data.data.list
      this.detail = res.data.data.detail
      this.loading = false
    },
    // 点击打开子案例详细列表
    async openChild(value) {
      this.dialogFormVisible = true
      this.childName = value;
      const res = await getPcStorageDetailByCode({
        order_id: value,
      })
      this.tableData = res.data.data[0]
    },
    // 时间段改变事件
    async timeChange(value) {
      this.radio2 = value;
      this.loading = true;
      this.getdata() // 时间改变时获取数据(上)
      this.getChart() // 时间改变时获取数据(下左和下右)
      this.loading = false
    },
    // 回到首页
    pushIndex() {
      this.$router.push("/");
    }
  },
};
</script>

<style scoped lang="scss">
.receipt {
  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: 500px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;

        .dateday {
          margin-left: -400px;
        }

        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: blue;
      }
    }

    .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: blue;
      }
    }

    .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;
      }
    }
  }


  .detail {
    width: 96.5%;
    height: 440px;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    border: 1px solid black;
    margin: 10px auto;
    border-radius: 15px;

    .detail-left {
      width: 65%;
      margin-top: 20px;
      margin-left: 25px;
    }

    .detail-right {
      width: 35%;
      margin-top: 20px;
      position: relative;

      .ss {
        width: 94%;
      }

      .dr-list {
        width: 96%;
        margin-top: 20px;
        height: 340px;
        overflow: auto;

        .dr-message {
          width: 98%;
          height: 154px;
          border-radius: 15px;
          display: flex;
          border: 1px solid black;
          margin-top: 5px;
          position: relative;

          .sty {
            width: 15px;
            height: 100%;
            background-color: blue;
            border-radius: 15px 0 0 15px;
          }

          .dr-message-font {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            p:first-child {
              font-size: 18px;
              color: blue;
            }
          }

          .arrowhead {
            width: 30px;
            height: 30px;
            background-color: blue;
            position: absolute;
            left: 500px;
            top: 20px;
            border-radius: 50% 50%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 26px;
            color: white;
            cursor: pointer;

            span {
              margin-top: -5px;
            }
          }
        }

        .total {
          width: 90%;
          height: 50px;
          margin: 10px auto;
          display: flex;

          .t-sty {
            width: 10px;
            height: 90%;
            background-color: blue;
            border-radius: 15px;
          }

          p {
            font-size: 30px;
            margin-left: 10px;
            font-weight: 600;
            color: blue;
          }
        }

        .jiben {
          .jiben-total {
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid black;

            .jiben-total-left {
              display: flex;

              span {
                margin-top: 5px;
                margin-left: 3px;
              }
            }

            .jiben-total-right {
              display: flex;
              align-items: center;
              width: 400px;
              height: 60px;

              span {
                margin-left: 15px;
              }
            }
          }

          .jiben-nr {
            table {
              width: 100%;
              height: 280px;
              text-align: left;

              tr {
                width: 100%;
                height: 80px;
              }

              th {
                width: 33.33%;
                height: 100%;
              }
            }
          }
        }

        .bangdan {
          margin-top: 50px;
          .bangdan-total {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid black;

            .bangdan-total-left {
              display: flex;

              span {
                margin-top: 5px;
                margin-left: 3px;
              }
            }
          }

          .bangdan-nr {
            width: 100%;
            margin-top: 15px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            justify-content: space-around;
            align-items: center;
            ol {
              width: 96%;
              height: 90%;
              margin: 15px auto;
              display: flex;
              justify-content: space-around;
              align-items: center;
              li:first-child {
                .ellipsis {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 120px;
                }
              }

              li:last-child {
                border: none;
              }

              li {
                text-align: center;
                list-style: none;

                p {
                  color: black;
                  font-weight: 600;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
