<template>
  <div class="receipt">
    <header>
      <div class="total">
        <div class="total-left">“ 发料车次 ”- {{ 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="message">
      <div class="now">本次车次<span>{{ this.num.Dnowtrains }}</span></div>
      <div class="before">上期车次<span>{{ this.num.Dlasttrains }}</span></div>
      <div class="next">同比增长<span> {{ this.efficiency }} </span></div>
    </div>
    <div class="detail">
      <div class="detail-left">
        <el-table :data="list" border stripe style="width: 100%" height="350" v-loading="loading">
          <el-table-column prop="id" label="序号" type="index" width="40"></el-table-column>
          <el-table-column prop="date" label="材料" width="180">
            <template slot-scope="{ row }">
              <div class="custom-slot">
                {{ row.material_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="规格型号" width="180">
            <template slot-scope="{ row }">
              <div class="custom-slot">
                {{ row.material_model }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="收料车次">
            <template slot-scope="{ row }">
              <div class="custom-slot">
                {{ row.num }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-right">
        <div class="detail-right-fond">
        </div>
        <!-- 右下单子主体 -->
        <div class="dr-nr">
          <!-- 右下单子每个子类 -->
          <div class="dr-nr-child" v-for="(item, index) in detail" :key="index">
            <!-- 子类头部 -->
            <div class="dr-nr-child-total">
              <div class="dr-nr-child-total-name">
                <div class="num">
                  <span>单号：{{ item.order_id }}</span>
                </div>
                <p class="zhong"><span>称重</span></p>
                <p style="margin-left: 25px; text-align: center;">{{ item.supplier_name }}</p>
              </div>
              <div class="dr-nr-child-total-carNum">{{ item.labour_name }}</div>
              <div class="dr-nr-child-total-showTime">
                出场时间：{{ item.recorded_date }}
              </div>
            </div>
            <!-- 子类内容 -->
            <div class="dr-nr-child-nr1">
              <ul>
                <li>
                  <p class="font-big">{{ (item.material_name).split(' ')[0] }}</p>
                  <p>{{ (item.material_name).split(' ')[1] }}</p>
                </li>
                <li>
                  <p class="font-big">{{ Number(item.net_quantity).toFixed(2) }}</p>
                  <p>实际重量</p>
                </li>
                <li>
                  <p class="font-big">0</p>
                  <p>扣重数量</p>
                </li>
                <li>
                  <p class="font-big">{{ item.maker }}</p>
                  <p>操作员</p>
                </li>
                <li>
                  <p @click="fetchDialogData(item)" style="cursor: pointer;">查看详情</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination class="bottom-pager" style="margin-top: 20px" background layout="prev,pager,next,total,->,jumper" @current-change="handlePageChange" :total="total">
          </el-pagination>
          <!-- 详情页面 -->
          <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.DetailOne.order_id }}</span>
                </div>
              </div>
              <div class="jiben-nr">
                <table>
                  <tr>
                    <th>
                      过磅单位：<span>{{ this.DetailOne.org_name }}</span>
                    </th>
                  </tr>
                  <tr>
                    <th>出库日期：<span>{{ this.DetailOne.recorded_date }}</span></th>
                    <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.DetailOne.order_type == 0 ? "未冲红" : "冲红" }}
                      </span>
                    </th>
                    <th>进场时间：<span>{{ this.DetailOne.enter_time }}</span></th>
                  </tr>
                  <tr>
                    <th>
                      用料单位：<span>{{ this.DetailOne.labour_name }}</span>
                    </th>
                    <th>使用部位：<span>{{ this.DetailOne.usedpart_name }}</span></th>
                    <th>出场时间：<span>{{ this.DetailOne.exit_time }}</span></th>
                  </tr>
                  <tr>
                    <th>车牌号：<span>{{ this.DetailOne.plate_number }}</span></th>
                    <th>自动回皮：<span>是</span></th>
                    <th>打印次数：<span>{{ this.DetailOne.print_times }}</span></th>
                  </tr>
                  <tr>
                    <th>料仓：<span></span></th>
                    <th>皮重：<span> {{ Number(this.DetailOne.tare_quantity).toFixed(2) }} t</span></th>
                    <th>毛重：<span> {{ Number(this.DetailOne.rough_quantity).toFixed(2) }} t</span></th>
                  </tr>
                  <tr>
                    <th>
                      备注：<span>{{ this.DetailOne.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.DetailOne.material_name }}
                    <p class="ellipsis">{{ this.DetailOne.material_model }}</p>
                  </li>
                  <li>
                    单位
                    <p>{{ this.DetailOne.material_unit }}</p>
                  </li>
                  <li>
                    转换率
                    <p>{{ Number(this.DetailOne.conversion_rate).toFixed(2) }}</p>
                  </li>
                  <li>
                    确认数量
                    <p>{{ Number(this.DetailOne.confirm_net_quantity).toFixed(2) }}</p>
                  </li>
                  <li>
                    毛重
                    <p> {{ Number(this.DetailOne.rough_quantity).toFixed(2) }}t</p>
                  </li>
                  <li>
                    皮重
                    <p>{{ Number(this.DetailOne.tare_quantity).toFixed(2) }}t</p>
                  </li>
                  <li>
                    净重
                    <p>{{ this.DetailOne.net_quantity }}</p>
                  </li>
                  <li>
                    确认重量
                    <p>{{ (Number(this.DetailOne.confirm_net_quantity) *
                      Number(this.DetailOne.conversion_rate)).toFixed(2) }} t</p>
                  </li>
                  <li>
                    明细备注
                    <p>{{ this.DetailOne.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 { getRDInfo, getPcDeliveryDetail, getPcDeliveryDetailByCode } from "../../api";
import { countMore } from '@/utils/count'
export default {
  data () {
    return {
      loading: true,
      dialogFormVisible: false,
      radio2: "day",
      num: {},
      efficiency: '',
      name: localStorage.getItem("name"),
      id: localStorage.getItem("id"),
      list: [],
      detail: [],
      srcList1: ['', '', '', ''],
      srcList2: ['', '', '', ''],
      DetailOne: {},
      page: 1,
      total: 0
    };
  },
  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");
    }
  },
  mounted () {
    this.getData();
    this.getChart();
  },
  methods: {
    // 初次渲染数据
    async getData () {
      var res = await getRDInfo({
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data;
      this.num.Dlasttrains = Math.floor(this.num.Dlasttrains)
      this.num.Dnowtrains = Math.floor(this.num.Dnowtrains)
      this.efficiency = countMore(this.num.Dnowtrains, this.num.Dlasttrains, this.efficiency)
    },
    // 图表数据
    async getChart () {
      var res = await getPcDeliveryDetail({
        onpage: this.radio2,
        org_id: this.id,
        page: this.page
      })
      this.list = res.data.data[0].list
      this.detail = res.data.data[0].detail.data
      this.total = res.data.data[0].detail.total
      this.loading = false
    },
    // 分页
    handlePageChange (page) {
      this.page = page;
      this.childData();
    },
    // 点击时间段改变事件
    async timeChange (value) {
      this.radio2 = value
      this.loading = true
      var res = await getRDInfo({
        onpage: this.radio2,
        org_id: this.id,
      });
      this.num = res.data.data;
      this.num.Dlasttrains = Math.floor(this.num.Dlasttrains)
      this.num.Dnowtrains = Math.floor(this.num.Dnowtrains)
      this.efficiency = countMore(this.num.Dnowtrains, this.num.Dlasttrains, this.efficiency)
      var res = await getPcDeliveryDetail({
        onpage: this.radio2,
        org_id: this.id,
        page: this.page
      })
      this.list = res.data.data[0].list
      this.detail = res.data.data[0].detail.data
      this.total = res.data.data[0].detail.total
      this.loading = false
    },
    // 点击查看详情接口
    async fetchDialogData (value) {
      this.dialogFormVisible = true
      var res = await getPcDeliveryDetailByCode({
        order_id: value.order_id
      })
      this.DetailOne = res.data.data
      this.srcList1 = [
        this.DetailOne.entry_truck_head_img_remote_url,
        this.DetailOne.entry_truck_tail_img_remote_url,
        this.DetailOne.entry_truck_top_img_remote_url,
        this.DetailOne.entry_room_img_remote_url
      ]
      this.srcList2 = [
        this.DetailOne.exit_truck_head_img_remote_url,
        this.DetailOne.exit_truck_tail_img_remote_url,
        this.DetailOne.exit_truck_top_img_remote_url,
        this.DetailOne.exit_room_img_remote_url
      ]
    },
    // 回到首页
    pushIndex () {
      this.$router.push("/");
    },
    goTo () { }
  }
};
</script>

<style scoped lang="scss">
.receipt {
  width: 100%;

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

    .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: 400px;
        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;

      p {
        margin-top: 8px;
        margin-left: 4px;
        font-weight: 300;
        font-size: 18px;
      }
    }
  }

  .message {
    width: 99%;
    height: 135px;
    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: 97%;
    height: 400px;
    display: flex;
    margin-left: 23px;
    border: 1px solid black;
    border-radius: 25px;

    .detail-left {
      width: 34%;
      margin-top: 25px;
      margin-left: 15px;
    }

    .detail-right {
      width: 66%;

      .detail-right-fond {
        width: 100%;
        height: 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .dr-one {
          display: flex;
          align-items: center;

          span {
            width: 100px;
          }
        }
      }

      .dr-nr {
        width: 98%;
        height: 350px;
        margin: 0 auto;
        overflow: auto;

        .dr-nr-child {
          width: 99%;
          border: 1px solid black;
          height: 150px;
          margin-right: 5px;
          margin-bottom: 10px;

          .dr-nr-child-total {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid black;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            background-color: rgb(245, 248, 251);

            .dr-nr-child-total-name {
              width: 62%;
              margin-left: -6%;
              display: flex;
              align-items: center;

              .num {
                width: 70%;
                text-align: center;
              }

              .zhong {
                width: 60px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(251, 243, 231);
                color: rgb(214, 137, 14);
              }
            }
          }

          .dr-nr-child-nr1 {
            width: 100%;
            background-color: rgb(253, 253, 253);

            ul {
              width: 100%;
              height: 95px;
              display: flex;
              align-items: center;
              justify-content: space-around;

              li:first-child {
                width: 15%;
              }

              li:last-child {
                border: none;

                p {
                  color: blue;
                  font-size: 18px;
                  border: none;
                }
              }

              li {
                width: 15%;
                height: 78px;
                text-align: center;
                list-style: none;
                border-right: 1px solid black;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                p {
                  margin-left: -20px;
                }

                .font-big {
                  font-size: 16px;
                  font-weight: 700;
                }
              }
            }
          }
        }

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

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

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

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

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

            p {
              font-size: 20px;
              color: black;
            }
          }
        }
      }
    }
  }
}
.dr-nr::-webkit-scrollbar {
  width: 4px;
}

.dr-nr::-webkit-scrollbar-thumb {
  background: rgb(221, 222, 224, 0.5);
  border-radius: 5px;
}

.dr-nr::-webkit-scrollbar-track {
  background: transparent;
}
</style>
<style>
.el-carousel__container {
  height: 200px;
}
</style>

