<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">送达作业</div>
        </div>
        <div class="bianzhi" @click="dialogVisible = true">登记事件报告</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="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="137">
            </el-table-column>
            <el-table-column prop="name" label="车辆牌号" width="127">
            </el-table-column>
            <el-table-column prop="province" label="到货确认" width="127">
              <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="time" label="到货确认时间" width="127">
            </el-table-column>
            <el-table-column prop="address" label="到货确认地点" width="127">
            </el-table-column>
            <el-table-column prop="zip" label="卸车登记" width="127">
            </el-table-column>
            <el-table-column prop="zip" label="仪表记录" width="127">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisible = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="仪表拆卸登记" width="127">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisibleg = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="产品货运单签字" width="127">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisibleg = true"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="产品货运单签字时间" width="147">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="234">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-if="isSure"
                  @click="sendSrue(scope.$index)"
                  >到货确认</el-button
                >
                <el-button type="text" size="small" v-else>编制调度</el-button>
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.province == '审核中'"
                  @click="dialogVisibleyu = 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" v-if="tableData.length != 0">
          共{{ tableData.length }}条
        </div>
        <div class="kls">
          <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="tableData.length"
          >
          </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="260">
            </el-table-column>
            <el-table-column prop="province" label="籍号" width="260">
            </el-table-column>
            <el-table-column prop="city" label="箱号 " width="243">
            </el-table-column>
            <el-table-column prop="city" label="仪表记录" width="293">
              <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="60%"
      style="margin-top: 10%"
      :append-to-body="true"
      @close="closeDialog"
    >
      <div class="liebiao">
        <div class="jisudu">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClicks"
            style="width: 100%"
          >
            <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">
          <el-button type="primary" round @click="dialogVisibleyi = false"
            >确认</el-button
          >
          <el-button round @click="dialogVisibleyi = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 到货确认 -->
    <el-dialog
      title="到货确认"
      :visible.sync="dialogVisibleg"
      width="40%"
      style="margin-top: 13%"
      :append-to-body="true"
    >
      <el-form :rules="rules" class="liebiao">
        <div class="fahuo-li">
          <div class="a" style="margin-right: 160px">
            <div class="sd">
              <div class="fa-ji">到货时间</div>
              <div
                class="inputt"
                style="padding-left: 15px; padding-right: 15px"
              >
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :change="changData"
                  ref="datas"
                >
                </el-date-picker>
                <img src="../../assets/xiala.png" class="xial" alt="" />
              </div>
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">到货地点</div>
              <div
                class="inputt"
                style="padding-left: 15px; padding-right: 15px"
              >
                <input
                  type="text"
                  placeholder="请输入到货地点"
                  required="required"
                  class="ss"
                />
                <img src="../../assets/xiala.png" class="xial" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="queren">
          <el-button type="primary" round @click="sureShip">确认到货</el-button>
          <el-button round @click="dialogVisibleg = false">取消</el-button>
        </div>
      </el-form>
    </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%"
      :append-to-body="true"
      style="marign-top: 5%"
    >
      <div class="liebiao" style="margin-top: 20px; height: 600px">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="100%"
          :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
        >
          <el-table-column prop="date" label="籍号" width="284">
          </el-table-column>
          <el-table-column prop="name" label="仪表1" width="284">
          </el-table-column>
          <el-table-column prop="province" label="仪表2" width="128">
            <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="仪表3" width="128">
          </el-table-column>
          <el-table-column prop="address" label="装车状态" width="160">
          </el-table-column>
          <el-table-column prop="zip" label="操作人" width="128">
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="256">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dialogVisibleh = true"
                >装车登记</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="scope.row.province == '审核中'"
                >仪表登记</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="scope.row.province == '审核中'"
                >封车检查</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="queren">
          <div class="querens">确认</div>
          <div class="quxiaos">取消</div>
        </div>
      </div>
    </el-dialog>
    <!-- 卸车预检 -->
    <el-dialog
      title="卸车预检"
      :visible.sync="dialogVisibleyu"
      width="40%"
      style="margin-top: 14%"
      :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" style="margin-bottom: 30px">
        <el-button type="primary" round @click="dialogVisibleyu = false"
          >确认到货</el-button
        >
        <el-button round @click="dialogVisibleyu = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      value1: '',
      isSure: true,
      tablelistIndex: '',
      activeName: "first",
      tableData: [
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核中",
          city: "赵吾光",
          time: '-',
          address: "重庆市南岸区",
          zip: "未处置",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核中",
          city: "审核通过",
          time: '-',
          address: "重庆市南岸区",
          zip: "未处置",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核中",
          time: '-',
          city: "审核中",
          address: "重庆市南岸区",
          zip: "未处置",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核通过",
          city: "赵吾光",
          time: '2020/12/1',
          address: "北京丰台区",
          zip: "未处置",
        },

      ],
      dialogVisible: false,
      dialogVisibleg: false,
      dialogVisibleq: false,
      dialogVisibleh: false,
      dialogVisibleyu: false,
      dialogImageUrl: "",
      dialogVisiblex: false,
      dialogVisibleyi: false,
    };
  },
  methods: {
    //到货确认
    sendSrue(idx) {
      this.dialogVisibleg = true;
      this.tablelistIndex = idx
    },
    //确认收货按钮
    sureShip() {
      if (this.value1 == '') {
        this.$message({
          type: 'warn',
          message: '缺少时间',
          showClose: true,
        })
        return;
      }
      let times = this.value1.toLocaleDateString();

      let idx = this.tablelistIndex
      this.tableData[idx].time = times
      this.tableData[idx].province = '审核通过'
      this.dialogVisibleg = false;
      this.isSure = false
    },
    // changData() {
    //   console.log(this.$refs.datas)
    // },
    //编辑发货申请
    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;
    },
  },
};
</script>
<style>
.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%;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pei.css";
@import "../../css/sonda.css";
</style>