<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.plansum)) + "吨" }}</span></div>
      <div class="before">验收入库&nbsp;<span>{{ Math.floor(Math.abs(Number(this.num.acceptancesum))) + "吨" }}</span></div>
      <div class="next">完成率&nbsp;<span>{{ this.finish }}</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.confirm_net_quantity).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">
                  <p style="
                              width: 75px;
                              height: 40px;
                              background-color: rgb(233, 245, 238);
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              border-radius: 10px;
                              color: rgb(35, 153, 84);
                              font-size: 18px;
                            ">
                    常规磅单
                  </p>
                  <span>磅单号：{{ this.tableData.order_code }}</span>
                </div>
              </div>
              <div class="jiben-nr">
                <table>
                  <tr>
                    <th>
                      过磅单位：<span>{{ this.tableData.org_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>
                      供应单位：<span>{{ this.tableData.supplier_name }}</span>
                    </th>
                    <th>
                      料仓：<span>{{ this.tableData.stockbin_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>入库日期：<span>{{ this.tableData.recorded_date }}</span></th>
                    <th>进场时间：<span>{{ this.tableData.enter_time }}</span></th>
                    <th>出场时间：<span>{{ this.tableData.exit_time }}</span></th>
                  </tr>
                  <tr>
                    <th style="
                                display: flex;
                                width: 33.33%;
                                height: 100%;
                                align-items: center;
                              ">
                      <span style="width: 220px">冲红状态：</span>
                      <span style="
                                  width: 150px;
                                  height: 40px;
                                  background-color: rgb(233, 245, 238);
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  border-radius: 10px;
                                  color: rgb(35, 153, 84);
                                  font-size: 16px;
                                ">
                        {{ this.tableData.is_red == 0 ? "未冲红" : "冲红" }}
                      </span>
                    </th>
                    <th>车牌号：<span>{{ this.tableData.plate_number }}</span></th>
                    <th>条码：<span>W20230725082156WQov</span></th>
                  </tr>
                  <tr>
                    <th>毛重：<span>>{{ parseFloat(this.tableData.rough_quantity) }} t</span></th>
                    <th>皮重：<span>{{ parseFloat(this.tableData.tare_quantity) }} t</span></th>
                    <th>备注：<span>{{ this.tableData.remark }}</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>
                    {{ this.tableData.material_name }}
                    <p class="ellipsis"> {{ this.tableData.material_model }} </p>
                  </li>
                  <li>
                    扣率
                    <p>{{ this.tableData.deduct_rate }}</p>
                  </li>
                  <li>
                    扣吨
                    <p>{{ this.tableData.deduct_quantity }} t</p>
                  </li>
                  <li>
                    净重(主)
                    <p>{{ Number(this.tableData.net_quantity).toFixed(2) }} t</p>
                  </li>
                  <li>
                    净重(辅)
                    <p>{{ Number(this.tableData.net_quantity).toFixed(2) }} t</p>
                  </li>
                  <li>
                    确认量
                    <p> {{ Number(this.tableData.confirm_net_quantity).toFixed(2) }} t</p>
                  </li>
                  <li>
                    运单数量
                    <p>{{(this.tableData.confirm_net_quantity / this.tableData.conversion_rate).toFixed(2)}}</p>
                  </li>
                  <li>
                    运单重量
                    <p>{{ parseFloat(this.tableData.confirm_net_quantity) }} t</p>
                  </li>
                  <li>
                    明细备注
                    <p>{{ this.tableData.remark  }}</p>
                  </li>
                </ol>
              </div>
            </div>
            <!-- 照片区域 -->
            <div class="photo">
              <div class="photo-left">
                <p>进场照片</p>
                <div>
                  <el-carousel class="carousel-img" type="card" arrow="always" indicator-position="outside">
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">车头</div>
                        <el-image :src="srcList1[0]" :preview-src-list="srcList1" />
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">车尾</div>
                        <el-image :src="srcList1[1]" :preview-src-list="srcList1" />
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">车顶</div>
                        <el-image :src="srcList1[2]" :preview-src-list="srcList1" />
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">室内</div>
                        <el-image :src="srcList1[3]" :preview-src-list="srcList1" />
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <div class="photo-right">
                <p>出场照片</p>
                <div>
                  <el-carousel class="carousel-img" type="card" arrow="always" indicator-position="outside">
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">车头</div>
                        <el-image :src="srcList2[0]" :preview-src-list="srcList2" />
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">车尾</div>
                        <el-image :src="srcList2[1]" :preview-src-list="srcList2" />
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">车顶</div>
                        <el-image :src="srcList2[2]" :preview-src-list="srcList2" />
                      </div>
                    </el-carousel-item>
                    <el-carousel-item>
                      <div class="el-carousel__mask"></div>
                      <div class="carousel-item-content">
                        <div class="carousel-item-label">室内</div>
                        <el-image :src="srcList2[3]" :preview-src-list="srcList2" />
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import {
  getMaterialDescon,
  getPcCheckDetail,
  getPcCheckDetailByCode,
  getPcStorageDetail,
} from "../../api";
import { countFinsh } from "@/utils/count"
export default {
  data () {
    return {
      loading: true,
      // 材料信息
      input2: "",
      // 详情左侧模拟数据
      tableData: {},
      // 类别信息
      values: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      radio2: "day",
      // 数据部分
      id: '',
      name: '',
      selectedContent: localStorage.getItem("selectedContent"),
      num: {},
      detail: [],
      list: [],
      sum: null,
      srcList1: ['', '', '', ''],
      srcList2: ['', '', '', ''],
    };
  },
  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();
    this.getStorageDetail();
  },
  methods: {
    // 获取数字数据(上)
    async getdata () {
      const res = await getMaterialDescon({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data[0];
      this.finish = countFinsh(this.num.acceptancesum, this.num.plansum)
    },
    // 获取table数据(下左)
    async getStorageDetail () {
      this.loading = true
      const res = await getPcStorageDetail({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      this.list = res.data.data.list
      this.loading = false

    },
    // 获取图表数据(下右)
    async getChart () {
      this.loading = true
      const res = await getPcCheckDetail({
        name: this.selectedContent,
        onpage: this.radio2,
        org_id: this.id,
      });
      if (this.radio2 == 'year') {
        this.detail = res.data.data.detail
      } else {
        this.detail = res.data.data[0].detail
      }
      this.loading = false
    },
    // 点击打开子案例详细列表(dialog)
    async openChild (value) {
      this.dialogFormVisible = true
      this.childName = value;
      const res = await getPcCheckDetailByCode({
        order_id: value,
      })
      this.tableData = res.data.data

      this.srcList1 = [
        this.tableData.entry_truck_head_img_remote_url,
        this.tableData.entry_truck_tail_img_remote_url,
        this.tableData.entry_truck_top_img_remote_url,
        this.tableData.entry_room_img_remote_url
      ]
      this.srcList2 = [
        this.tableData.exit_truck_head_img_remote_url,
        this.tableData.exit_truck_tail_img_remote_url,
        this.tableData.exit_truck_top_img_remote_url,
        this.tableData.exit_room_img_remote_url
      ]
    },
    // 时间段改变事件
    async timeChange (value) {
      this.radio2 = value;
      this.loading = true
      this.getdata()     // 时间改变时获取(上)数据
      this.getStorageDetail()    // 时间改变时获取(下左)数据
      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 {
          .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: 120px;
            border: 1px solid black;

            ol {
              width: 96%;
              height: 90px;
              margin: 15px auto;
              display: flex;
              justify-content: space-around;
              align-items: center;
              border: 1px solid black;

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

        .photo {
          width: 100%;
          height: 300px;
          display: flex;
          justify-content: space-between;
          margin-top: 30px;

          .el-carousel__item h3 {
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
          }

          .photo-left {
            width: 47%;
            height: 100%;
            border: 1px solid black;

            p {
              font-size: 20px;
              color: black;
            }
          }

          .photo-right {
            width: 47%;
            height: 100%;
            border: 1px solid black;

            p {
              font-size: 20px;
              color: black;
            }
          }
        }
      }
    }
  }
}
</style>
