<template>
  <div class="flowAnalysis">
    <div class="search-wrapper">
      <el-form :inline="true" ref="flowForm" :model="searchForm" class="search_form">
        <el-form-item label="商品流向地区" prop="areaId"
          :rules="[{ required: true, message: '请选择商品流向地区', trigger: 'change' }]">
          <el-select v-model="searchForm.areaId" placeholder="请选择商品流向地区" style="width: 100%">
            <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间段" prop="timeRange" :rules="[{ required: true, message: '请选择时间段', trigger: 'change' }]">
          <el-date-picker v-model="searchForm.timeRange" type="daterange" align="right" unlink-panels size="medium"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tips">
      <p>预约单：{{ delivery }}单</p>
      <p>总重量：{{ allWeight }}kg</p>
      <p>总件数：{{ allNumber }}件</p>
    </div>
    <div class="table-wrapper1">
      <table-template :tableData="tableData" :tableColumns="tableColumns" :loading="loading" :showPagination="false">
        <el-table-column key="stateName" prop="onlineName" label="预约状态" align="center">
          <template>
            <el-tag type="success">已出库</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" round @click="view(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </table-template>
    </div>
    <el-dialog title="申报单详情" :visible.sync="viewShow" width="800px" :close-on-press-escape="false">
      <div class="content">
        <div class="record">
          <div class="cell_title">操作记录</div>
          <div class="cell" v-for="item in record" :key="item.createTime">
            <p class="label">{{ item.state }}<span style="color: red; font-size:12px"
                v-if="item.reason">({{item.reason}})</span></p>
            <div class="info">
              <p>操作人：{{ item.name }}</p>
              <p style="margin-left: 20px">操作时间：{{ item.createTime }}</p>
            </div>
          </div>
        </div>
        <div class="goods">
          <div v-if="viewDetail.state === 9">
            <div class="cell_title">出库证明</div>
            <div style="display: flex; padding: 10px 0">
              <el-image style="height: 100px; max-width: 150px; text-align: left" :src="viewDetail.driverUrl"
                :preview-src-list="[viewDetail.driverUrl]" :z-index="7777777">
              </el-image>
            </div>
          </div>
          <div class="cell_title">联系人信息</div>
          <div class="cell">
            <p class="label">联系人姓名</p>
            <p class="value">{{ viewDetail.name }}</p>
          </div>
          <div class="cell">
            <p class="label">手机号码</p>
            <p class="value">{{ viewDetail.phone }}</p>
          </div>
          <div class="cell_title">车辆信息</div>
          <div class="cell">
            <p class="label">车牌号</p>
            <p class="value">{{ viewDetail.carNumber }}</p>
          </div>
          <div class="cell">
            <p class="label">司机姓名</p>
            <p class="value">{{ viewDetail.driverName }}</p>
          </div>
          <div class="cell">
            <p class="label">联系方式</p>
            <p class="value">{{ viewDetail.driverPhone }}</p>
          </div>
          <div class="cell_title">仓库信息</div>
          <div class="cell">
            <p class="label">仓库</p>
            <p class="value">{{ viewDetail.address }}</p>
          </div>
          <div class="cell_title">照片信息</div>
          <div class="photo">
            <div class="pitem" v-for="photo in viewDetail.picture" :key="photo.pictureType">
              <el-image style="height: 100px; max-width: 150px" :src="photo.picture" :preview-src-list="[photo.picture]"
                :z-index="7777777">
              </el-image>
              <!-- <img :src="photo.picture" alt="" /> -->
              <p>
                {{
                photo.pictureType === 4
                ? "驾驶员苏康码"
                : photo.pictureType === 5
                ? "营业执照照片"
                : "食品经营许可证"
                }}
              </p>
            </div>
          </div>
          <div class="cell_title">商品信息</div>
          <el-tabs type="card" style="padding: 0 10px">
            <el-tab-pane v-for="item in viewDetail.goods" :key="item.code" :label="item.goodsName">
              <div class="cell">
                <p class="label">报关单号(海关编号)</p>
                <p class="value">{{ item.customs }}</p>
              </div>
              <div class="cell">
                <p class="label">货主名称</p>
                <p class="value">{{ item.shipper }}</p>
              </div>
              <div class="cell">
                <p class="label">统一社会信用代码</p>
                <p class="value">{{ item.credit }}</p>
              </div>
              <div class="cell">
                <p class="label">集装箱号</p>
                <p class="value">{{ item.container }}</p>
              </div>
              <div class="cell">
                <p class="label">商品名称</p>
                <p class="value">{{ item.goodsName }}</p>
              </div>
              <div class="cell">
                <p class="label">总重量(KG)</p>
                <p class="value">{{ item.weight }}</p>
              </div>
              <div class="cell">
                <p class="label">件数</p>
                <p class="value">{{ item.number }}</p>
              </div>
              <div class="cell">
                <p class="label">注册号</p>
                <p class="value">{{ item.register }}</p>
              </div>
              <div class="cell">
                <p class="label">原产地</p>
                <p class="value">{{ item.placeOrigin }}</p>
              </div>
              <div class="cell">
                <p class="label">生产日期</p>
                <p class="value">{{ item.productionTime }}</p>
              </div>
              <div class="cell">
                <p class="label">生产批号</p>
                <p class="value">{{ item.productionNumber }}</p>
              </div>
              <div class="cell">
                <p class="label">商品流向地区</p>
                <p class="value">{{ item.goodsFlowRegion }}</p>
              </div>
              <div class="cell">
                <p class="label">商品流向(详细地址)</p>
                <p class="value">{{ item.goodsFlowAddress }}</p>
              </div>
              <div class="cell">
                <p class="label">企业经营类型</p>
                <p class="value">{{ item.operateName }}</p>
              </div>
              <div class="photo">
                <div class="pitem" v-for="photo in item.pictureList" :key="photo.pictureType">
                  <el-image style="height: 100px; max-width: 150px" :src="photo.picture"
                    :preview-src-list="[photo.picture]" :z-index="7777777">
                  </el-image>
                  <!-- <img :src="photo.picture" alt="" /> -->
                  <p>
                    {{
                    photo.pictureType === 1
                    ? "报关单照片"
                    : photo.pictureType === 2
                    ? "货物清单照片"
                    : "检疫证照片"
                    }}
                  </p>
                </div>
              </div>
              <div v-if="item.goodsTracing && item.goodsTracing.length > 0">
                <div v-for="trace in item.goodsTracing" :key="trace.code">
                  <div class="cell">
                    <p class="label">商品流向单位（个人）</p>
                    <p class="value">{{ trace.company }}</p>
                  </div>
                  <div class="cell">
                    <p class="label">商品流向重量(KG)</p>
                    <p class="value">{{ trace.goodsWeight }}</p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableTemplate from "@/components/Table";
import { detail, record, getArea, getDelivery } from '@/api/coldfood'
export default {
  components: { TableTemplate },
  data() {
    return {
      searchForm: {
        areaId: '',
        timeRange: '',
      },
      areaList: [],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      loading: false,
      tableData: [],
      tableColumns: [
        {
          key: "driverNo",
          label: "货物编号"
        },
        {
          key: "name",
          label: "联系人"
        },
        {
          key: "phone",
          label: "手机号"
        },
        {
          key: "carNumber",
          label: "车牌号"
        },
        {
          key: "determineTime",
          label: "预约入库时间",
          width: 250
        },
        {
          key: "createTime",
          label: "预约时间",
          width: 250
        }
      ],
      allNumber: 0,
      allWeight: 0,
      delivery: 0,
      viewShow: false,
      viewDetail: {},
      record: []
    }
  },
  methods: {
    initArea() {
      getArea().then(res => {
        if (res.success) {
          this.areaList = res.data.map(item => {
            return {
              areaId: item.value,
              areaName: item.text
            }
          })
        }
      })
    },
    onSubmit() {
      this.$refs['flowForm'].validate((valid) => {
        if (valid) {
          let params = {
            areaId: this.searchForm.areaId,
            endTime: this.searchForm.timeRange[1],
            startTime: this.searchForm.timeRange[0]
          }
          getDelivery(params).then(res => {
            if (res.success) {
              this.allNumber = res.data.allNumber
              this.allWeight = res.data.allWeight
              this.delivery = res.data.delivery
              this.tableData = res.data.deliveryDto || []
            }
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      })
    },
    view(row) {
      let params = {
        driverCode: row.driverCode
      };
      Promise.all([detail(params), record(params)]).then(res => {
        // console.log(res);
        this.viewDetail = res[0].data;
        this.record = res[1].data.reverse();
        this.viewShow = true;
      });
    }
  },
  created() {
    this.initArea()
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';
.flowAnalysis {
  background: #f0f2f5;
  padding: 20px;
  box-sizing: border-box;
  .table-wrapper1{
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    max-height: calc(100vh - 410px);
    overflow: auto;
  }
  .tips {
    margin-top 20px;
    padding 20px;
    display flex;
    text-align left
    background #fff
    border-radius: 5px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    p {
      margin-left 50px;
    }
    p:first-child {
      margin-left 0
    }
  }

  .content {
    max-height: 60vh;
    overflow-y: auto;

    .record {
      .cell_title {
        padding: 10px;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        color: #333;
        font-weight: 600;
        text-align: left;
      }

      .cell {
        padding: 10px;
        border-bottom: 1px solid #eee;
        text-align: left;

        .label {
          font-size: 16px;
          color: #333;
        }

        .info {
          margin-top: 10px;
          display: flex;
        }
      }
    }

    .goods {
      .cell_title {
        margin-top: 20px;
        padding: 10px;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        color: #333;
        font-weight: 600;
        text-align: left;
      }

      .cell {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;

        .label {
          width: 150px;
          color: #999;
          text-align: left;
        }

        .value {
          color: #000;
          text-align: left;
        }
      }

      .photo {
        height: 150px;
        padding: 0 20px;
        display: flex;
        align-items: center;

        .pitem {
          margin-right: 20px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            margin-top: 10px;
            text-align: center;
            font-size: 16px;
            color: #999999;
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 2px;
  }
}
</style>