<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">结项管理</div>
        </div>
      </div>
      <div class="biaoge">
        <div class="biao-box">
          <div class="fhuo">
            <div class="fahuos">
              <div class="fas-text">派车单编号</div>
              <input
                type="text"
                placeholder="请输入派车单编号"
                class="fa-input"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">仪表回收</div>
              <input
                type="text"
                placeholder="请输入仪表回收"
                class="fa-input"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">产品货单回收状态</div>
              <input
                type="text"
                placeholder="请输入货单回收状态"
                class="fa-input"
              />
            </div>
            <div class="chaxun">
              <img src="../../assets/chaxun.png" class="cha-imgs" alt="">
            </div>
          </div>
        </div>
        <div class="zhonlist">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="派车单编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="仪表回收状态" width="150">
            </el-table-column>
            <el-table-column prop="province" label="仪表回收件数" width="120">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.province == '审核中'"
                  style="color: #e6a23c"
                  >待装车</span
                >
                <span
                  v-if="scope.row.province == '审核通过'"
                  style="color: #67c23a"
                  >已封车</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="city" label="仪表回收时间" width="120">
            </el-table-column>
            <el-table-column
              prop="zip"
              label="产品货运单签字件照片"
              width="181"
            >
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisibleg = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="产品货运单回收转态" width="150">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisible = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="产品货运单回收说明" width="150">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisible = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="产品货运单回收人" width="150">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisible = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="产品货运单回收时间" width="150">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisible = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisibleg = true"
                  >仪表回收</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.province == '审核中'"
                  @click="dialogVisibleh = true"
                  >产品货运单回收</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.province == '审核中'"
                  @click="dialogVisibleyu = true"
                  >提交结算资料</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tiaoshu">
        <div class="left-io"></div>
        <div class="gon">共{{total}}条</div>
        <div class="kls">
          <el-pagination
            :page-size="10"
            :pager-count="11"
            layout="prev, pager, next"
            :total="1"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 仪表记录 -->
    <el-dialog
      title="查看仪表记录详情"
      :visible.sync="dialogVisible"
      width="70%"
      style="margin-top: 10%"
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="lista">
          <el-table
            :data="tablelist"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="仪表编号" width="243">
            </el-table-column>
            <el-table-column prop="name" label="箱码" width="270">
            </el-table-column>
            <el-table-column prop="province" label="籍号" width="270">
            </el-table-column>
            <el-table-column prop="city" label="箱号 " width="243">
            </el-table-column>
            <el-table-column prop="city" label="仪表记录" width="273">
              <template>
                <el-button type="text" size="small" @click="yis"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="queren">
           <el-button type="primary" round @click='dialogVisible = false'>确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 仪表记录详情 -->
    <el-dialog
      title="仪表记录详情"
      :visible.sync="dialogVisibleyi"
      width="80%"
      :append-to-body="true"
      @close="closeDialog"
    >
      <div class="liebiao">
        <div class="jisudu">
          <el-tabs v-model="activeName" @tab-click="handleClicks">
            <el-tab-pane label="加速度的加速数据" name="first"
              ><el-table
                :data="tablelist"
                border
                style="width: 100%; margin-top: 15px"
                height="100%"
                :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
              >
                <el-table-column
                  fixed
                  prop="date"
                  label="记录时间"
                  style="width: 25%"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="X轴加速度"
                  style="width: 25%"
                >
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="Y轴加速度"
                  style="width: 25%"
                >
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="Z轴加速度 "
                  style="width: 25%"
                >
                </el-table-column> </el-table
            ></el-tab-pane>
            <el-tab-pane label="加速度的角速度数据" name="second"
              ><el-table
                :data="tablelist"
                border
                style="width: 100%; margin-top: 15px"
                height="100%"
                :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
              >
                <el-table-column
                  fixed
                  prop="date"
                  label="记录时间"
                  style="width: 25%"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="X轴加速度"
                  style="width: 25%"
                >
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="Y轴加速度"
                  style="width: 25%"
                >
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="Z轴加速度 "
                  style="width: 25%"
                >
                </el-table-column> </el-table
            ></el-tab-pane>
            <el-tab-pane label="四元素" name="third"
              ><el-table
                :data="tablelist"
                border
                style="width: 100%; margin-top: 15px"
                height="100%"
                :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
              >
                <el-table-column
                  fixed
                  prop="date"
                  label="记录时间"
                  style="width: 20%"
                >
                </el-table-column>
                <el-table-column prop="name" label="Q1" style="width: 20%">
                </el-table-column>
                <el-table-column prop="province" label="Q2" style="width: 20%">
                </el-table-column>
                <el-table-column prop="city" label="Q3 " style="width: 20%">
                </el-table-column>
                <el-table-column prop="city" label="Q5 " style="width: 20%">
                </el-table-column> </el-table
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="queren">
          <div class="querens">确认</div>
          <div class="quxiaos">取消</div>
        </div>
      </div>
    </el-dialog>
    <!-- 仪表回收 -->
    <el-dialog
      title="仪表回收"
      :visible.sync="dialogVisibleg"
      width="80%"
      style='margin-top:60px'
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="listas">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="仪表编号 ">
            </el-table-column>
            <el-table-column prop="name" label="箱码"> </el-table-column>
            <el-table-column prop="name" label="转态"> </el-table-column>
            <el-table-column prop="name" label="仪表回收说明"> </el-table-column>
            <el-table-column prop="name" label="仪表回收人">

            </el-table-column>
            <el-table-column prop="name" label="仪表回收人">
                <template  slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="huishouyes(scope.$index)"
                  >确认</el-button
                >

              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="queren">
          <el-button type="primary" round @click='dialogVisibleg = false'>确认</el-button>
      <el-button round @click='dialogVisibleg = false'>取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 仪表记录 -->
    <el-dialog
      title="仪表记录"
      :visible.sync="dialogVisibleq"
      width="80%"
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="listas">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="仪表编号 ">
            </el-table-column>
            <el-table-column prop="name" label="籍码"> </el-table-column>
            <el-table-column prop="name" label="籍号"> </el-table-column>
            <el-table-column prop="name" label="箱号"> </el-table-column>
            <el-table-column prop="name" label="仪表记录">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.province == '审核中'"
                  style="color: #e6a23c"
                  >查看详情</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="queren">
          <div class="querens">确认</div>
          <div class="quxiaos">取消</div>
        </div>
      </div>
    </el-dialog>
    <!-- 产品货运单回收 -->
    <el-dialog
      title="产品货运单回收"
      :visible.sync="dialogVisibleh"
      width="80%"
      style='margin-top: 90px;'
      :append-to-body="true"

    >
      <div class="liebiao" style="margin-top: 20px; height: 600px">
          <div class="listas">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="货运单编号 ">
            </el-table-column>
            <el-table-column prop="name" label="货运单签字件照片"> </el-table-column>
            <el-table-column prop="name" label="货运单回收说明"> </el-table-column>
            <el-table-column prop="name" label="货运单回收人"> </el-table-column>
            <el-table-column prop="name" label="货运单回收时间">
            </el-table-column>
            <el-table-column prop="name" label="操作">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.province == '审核中'"
                  style="color: #e6a23c"
                  >确认</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="queren">
           <el-button type="primary" round @click='dialogVisibleh = false'>确认</el-button>
      <el-button round @click='dialogVisibleh = false'>取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 卸车预检 -->
    <el-dialog
      title="卸车预检"
      :visible.sync="dialogVisibleyu"
      width="50%"
      style='margin-top:10%'
      :append-to-body="true"
    >
      <div class="fengs">
        <div class="fen-left">
          <div class="titleas" style="margin-top: 0">上传卸车预检照片</div>
          <div class="tuimg">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisiblex">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>
      </div>
      <div class="queren">
        <el-button type="primary" round @click='dialogVisibleyu = false'>确认</el-button>
      <el-button round @click='dialogVisibleyu = false'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          date: "P2112020092300",
          name: "已回收",
          province: "审核通过",
          city: "2021/2/8",
          address: "178 2038 0191",
          zip: "2",
          zhuangche:"待装车"
        },
        {
          date: "P2112020092301",
          name: "未回收",
          province: "审核中",
          city: "2021/2/8",
          address: "178 2038 0191",
          zip: "2",
        },
        {
          date: "P2112020092302",
          name: "未回收",
          province: "审核中",
          city: "2021/2/8",
          address: "178 2038 0191",
          zip: "2",
        }
      ],
      tablelist: [
        {
          date: "请输入产品型号",
          name: "请输入产品编号",
          province: "请输入产品数量",
          city: "请输入到货时间",
        },
      ],
      tablelists: [
        {
          date: "请输入产品型号",
          name: "请输入产品编号",
          province: "请输入产品数量",
          city: "请输入到货时间",
          zhuan: "已完成",
        },
      ],
      total:0,
      dialogVisible: false,
      dialogVisibleg: false,
      dialogVisibleq: false,
      dialogVisibleh: false,
      dialogVisibleyu: false,
      dialogImageUrl: "",
      dialogVisiblex: false,
      dialogVisibleyi: false,
    };
  },
  methods: {
    //编辑发货申请
    handleClick(row) {
      console.log(row);
      this.dialogVisibleg = false;
      this.dialogVisibleyu = true;
    },
    handleClicks(tab, event) {
      console.log(tab, event);
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //查看订单
    cha() {
      this.dialogVisibleg = true;
    },
    //确认发货
    que() {
      this.dialogVisibleq = true;
    },
    //预览图片
    chuans() {
      this.dialogVisibleh = false;
      this.dialogVisibleyu = true;
    },
    //返回上一层
    fanhuis() {
      this.dialogVisibleh = true;
      this.dialogVisibleyu = false;
    },
    //查看仪表记录详情
    yis() {
      this.dialogVisibleyi = true;
      this.dialogVisible = false;
    },
    //关闭
    closeDialog() {
      this.dialogVisibleyi = false;
      this.dialogVisible = true;
    },
    // 确认仪表回收
    huishouyes(index){
      this.tableData[index].province="审核通过"
       this.tableData[index].name="已回收"
       
    },
  },
};
</script>
<style>
.el-dialog__body {
  padding: 5px 20px;
  padding-bottom: 68px;
}
.el-dialog__title {
  font-size: 29px !important;
  color: #000000 !important;
  font-weight: 500;
}
.el-upload--picture-card {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
}
.el-carousel__container {
  margin-top: 52px;
  height: 629px;
}
/* .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
    margin-left: -30px;
    position:relative;
  } */
.el-table /deep/.DisabledSelection .cell:before {
  content: "全选";
  position: absolute;
  right: 42px;
}
.el-tabs el-tabs--top {
  width: 100%;
}
.el-dialog__wrapper{
  display: flex;
      align-items: center;
      justify-content: center;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pei.css";
@import "../../css/sonda.css";
</style>