<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div :class="huos == 1 ? 'fa-textsq' : 'fa-texts'" @click="huo(1)">
            途中检查记录
            <div class="gexians" v-if="huos == 1"></div>
          </div>
          <div :class="huos == 2 ? 'fa-textsq' : 'fa-texts'" @click="huo(2)">
            事件上报记录
            <div class="gexians" v-if="huos == 2"></div>
          </div>
        </div>
        <el-button type="primary" @click="denji">登记检查记录</el-button>

      </div>
      <div class="biaoge" style="margin-top: 34px">
        <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="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" v-if="huos == 1">
          <el-table :data="tableData" border style="width: 100%" height="100%" :header-cell-style="{ background: '#F4F4F5', color: '#303133' }">
            <el-table-column prop="date" label="产品货运单号" width="270">
            </el-table-column>
            <el-table-column prop="name" label="车牌照号" width="270">
            </el-table-column>
            <el-table-column prop="province" label="照片集" width="128">
            </el-table-column>
            <el-table-column prop="city" label="检查状态" width="128">
            </el-table-column>
            <el-table-column prop="address" label="检查说明" width="160">
            </el-table-column>
            <el-table-column prop="zip" label="车辆负责人" width="280">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="256">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="xq(scope.$index,2)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="zhonlist" v-if="huos == 2">
          <el-table :data="tableDatas" border style="width: 100%" height="100%" :header-cell-style="{ background: '#F4F4F5', color: '#303133' }">
            <el-table-column prop="date" label="派车单编号" width="270">
            </el-table-column>
            <el-table-column prop="name" label="照片集" width="270">
            </el-table-column>
            <el-table-column prop="province" label="事件类型" width="128">
            </el-table-column>
            <el-table-column prop="city" label="事件说明" width="128">
            </el-table-column>
            <el-table-column prop="address" label="报告状态" width="160">
            </el-table-column>
            <el-table-column prop="zip" label="车辆负责人" width="280">
            </el-table-column>
            <el-table-column prop="zip" label="报告时间" width="280">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="256">
              <template>
                <el-button type="text" size="small" @click="dialogVisiblebao = true">查看详情</el-button>
                <el-button type="text" size="small" @click="dialogVisiblechu = 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="10">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 登记检查记录 -->
    <el-dialog title="途中检查记录" :visible.sync="dialogVisibles" width="60%" style="margin-top: 10%" :append-to-body="true">
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">派车单编号</div>
              <input v-model="bianhao" type="text" placeholder="请输入派车单编号" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">照片集</div>
              <div class="zhaopiang">
                <img src="../../assets/zhao.png" class="zhao-img" alt="" />
              </div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">检查状态</div>
              <div class="yichan">
                <div class="wu">
                  <img src="../../assets/xuankuan.png" class="xuankuan" alt="" />
                  无异常
                </div>
                <div class="wu">
                  <img src="../../assets/xuankuan.png" class="xuankuan" alt="" />
                  异常
                </div>
              </div>
            </div>
            <div class="sd">
              <div class="fa-ji">检查时间</div>
              <input v-model="j_time" type="text" placeholder="请输入检查时间" class="input" />
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">检查说明</div>
              <input v-model="j_shuoming" type="text" placeholder="请输入检查说明" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">检查地点</div>
              <input v-model="j_address" type="text" placeholder="请输入检查地点" class="input" />
            </div>
          </div>
        </div>

        <div class="queren">
          <div @click="yesal">
            <el-button type="primary" round>确认</el-button>
          </div>
          <div @click="no">
            <el-button round>取消</el-button>
          </div>

        </div>
      </div>
    </el-dialog>
    <!-- 途中检查记录 -->
    <el-dialog title="途中检查记录" :visible.sync="dialogVisible" width="60%" style="margin-top: 10%" :append-to-body="true">
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">派车单编号</div>
              <input v-model="l_bianhao" type="text" placeholder="请输入派车单编号" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">照片集</div>
              <div class="zhaopiang">
                <img src="../../assets/zhao.png" class="zhao-img" alt="" />
              </div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">检查状态</div>
              <div class="yichan">
                <div class="wu">
                  <img src="../../assets/xuankuan.png" class="xuankuan" alt="" />
                  无异常
                </div>
                <div class="wu">
                  <img src="../../assets/xuankuan.png" class="xuankuan" alt="" />
                  异常
                </div>
              </div>
            </div>
            <div class="sd">
              <div class="fa-ji">检查时间</div>
              <input v-model="l_time" type="text" placeholder="请输入检查时间" class="input" />
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">检查说明</div>
              <input v-model="l_shuoming" type="text" placeholder="请输入检查说明" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">检查地点</div>
              <input v-model="l_address" type="text" placeholder="请输入检查地点" class="input" />
            </div>
          </div>
        </div>

        <div class="queren">
          <div @click="yes">
            <el-button type="primary" round>确认</el-button>
          </div>
          <div @click="no">
            <el-button round>取消</el-button>
          </div>

        </div>
      </div>
    </el-dialog>
    <!-- 事件上报 -->
    <el-dialog title="事件上报" :visible.sync="dialogVisibleshi" width="60%" style="margin-top:9%;" :append-to-body="true">
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">派车单编号</div>
              <input type="text" placeholder="请输入派车单编号" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">照片集</div>
              <div class="zhaopiang">
                <img src="../../assets/zhao.png" class="zhao-img" alt="" />
              </div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">事件类型</div>
              <input type="text" placeholder="请输入事件类型" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">报告状态</div>
              <input type="text" placeholder="请输入报告状态" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">报告时间</div>
              <input type="text" placeholder="请输入报告时间" class="input" />
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">事件说明</div>
              <input type="text" placeholder="请输入事件说明" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">车辆负责人</div>
              <input type="text" placeholder="请输入车辆负责人" class="input" />
            </div>
            <div class="sd">
              <div class="fa-ji">报告地点</div>
              <input type="text" placeholder="请输入报告地点" class="input" />
            </div>
          </div>
        </div>

        <div class="queren">
          <el-button type="primary" round @click="dialogVisibleshi = false">确认</el-button>
          <el-button round @click="dialogVisibleshi = false">取消</el-button>

        </div>
      </div>
    </el-dialog>
    <!-- 途中检查记录 -->
    <el-dialog title="途中检查记录" :visible.sync="dialogVisibleg" width="60%" style="margin-top: 10%" :append-to-body="true">
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">派车单编号1</div>
              <div class="conrt">{{l_bianhao}}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">照片集</div>
              <div class="zhaopiangs">
                <img src="../../assets/zhao.png" class="zhao-img" alt="" />
              </div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">检查状态</div>
              <div class="conrt"></div>
            </div>
            <div class="sd">
              <div class="fa-ji">检查时间</div>
              <div class="conrt">{{l_time}}</div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">检查说明</div>
              <div class="conrt">
                {{l_shuoming}}
              </div>
            </div>
            <div class="sd">
              <div class="fa-ji">检查地点</div>
              <div class="conrt">{{l_address}}</div>
            </div>
          </div>
        </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="dialogVisiblebao" width="60%" style="margin-top: 8%" :append-to-body="true">
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">派车单编号</div>
              <div class="conrt">JK524567K</div>
            </div>
            <div class="sd">
              <div class="fa-ji">照片集</div>
              <div class="zhaopiangs">
                <img src="../../assets/zhao.png" class="zhao-img" alt="" />
              </div>
            </div>
            <div class="sd">
              <div class="fa-ji">处置状态</div>
              <div class="conrt">JK524567K</div>
            </div>
            <div class="sd">
              <div class="fa-ji">确认时间</div>
              <div class="conrt">JK524567K</div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">事件类型</div>
              <div class="conrt">无异常</div>
            </div>
            <div class="sd">
              <div class="fa-ji">报告状态</div>
              <div class="conrt">2020/12/05</div>
            </div>
            <div class="sd">
              <div class="fa-ji">报告时间</div>
              <div class="conrt">2020/12/05</div>
            </div>
            <div class="sd">
              <div class="fa-ji">处置说明</div>
              <div class="conrt">2020/12/05</div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">事件说明</div>
              <div class="conrt">
                检查说明字段检查说明检查说明字段检查说明字段
              </div>
            </div>
            <div class="sd">
              <div class="fa-ji">车辆负责人</div>
              <div class="conrt">北京南开区</div>
            </div>
            <div class="sd">
              <div class="fa-ji">报告地点</div>
              <div class="conrt">北京南开区</div>
            </div>
            <div class="sd">
              <div class="fa-ji">确认人</div>
              <div class="conrt">北京南开区</div>
            </div>
          </div>
        </div>

        <div class="queren">
          <el-button type="primary" round @click="dialogVisiblebao = false">确认</el-button>
          <el-button round @click="dialogVisiblebao = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 登记处置情况 -->
    <el-dialog title="登记处置情况" :visible.sync="dialogVisiblechu" width="60%" style="margin-top: 10%" :append-to-body="true">
      <div class="liebiao" style="margin-top: 24px">
        <div class="chuzhis">处置说明</div>
        <textarea name="" placeholder="请输入处置说明" class="chuzhitext" id="" cols="30" rows="10"></textarea>
        <div class="queren">
          <el-button type="primary" round @click="dialogVisiblechu = false">确认</el-button>
          <el-button round @click="dialogVisiblechu = false">取消</el-button>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        huos: 1,
        radio: "1",
        tableData: [{
            date: "P2112020092300",
            name: "P2112020092300",
            province: "北京电站",
            city: "赵吾光",
            address: "178 2038 0191",
            zip: "重庆市南岸区长生桥镇长生路46号附1号",
            time: "2021/2/4"
          },
          {
            date: "P2112020092301",
            name: "P2112020092301",
            province: "天津电站",
            city: "赵吾光",
            address: "178 2038 0192",
            zip: "重庆市南岸区长生桥镇长生路46号附2号",
            time: "2020/2/8"
          }
        ],
        bianhao: "",
        j_shuoming: "",
        j_time: "",
        j_address: "",
        index: 0,
        total: 0,
        l_bianhao: "",
        l_address: "",
        l_shuoming: "",
        l_time: "",
        cha_type: 1,
        tableDatas: [{
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
          time: ""
        }],
        dialogVisible: false,
        dialogVisibles: false,
        dialogVisibleg: false,
        dialogVisibleq: false,
        dialogVisibleh: false,
        dialogVisibleyu: false,
        dialogVisibleshi: false,
        dialogVisiblebao: false,
        dialogVisiblechu: false,
        dialogImageUrl: "",
        dialogVisiblex: false,

      };
    },
    mounted() {
      console.log("111");

      if (localStorage.getItem('tableData')) {
        console.log(localStorage.getItem('tableData'))
        this.tableData = JSON.parse(localStorage.getItem('tableData'))
      } else {
        this.tableData = this.tableData
      }
      this.totalPage()
    },
    methods: {
      // 分页总条数
      totalPage() {
        if (this.huos == 1) {
          this.total = this.tableData.length
        } else {
          this.total = this.tableData.length
        }
        for (let i = 0; i < this.tableData.length; i++) {

        }
      },
      // 查看详情
      xq(index, i) {
        console.log(index)
        this.cha_type = i
        this.dialogVisible = true;
        console.log(this.tableData[index].date)
        this.l_bianhao = this.tableData[index].date
        // this.tableData[index].name
        // this.tableData[index].province
        this.l_time = this.tableData[index].time
        this.l_shuoming = this.tableData[index].address
        this.l_address = this.tableData[index].zip
      },
      //编辑发货申请
      handleClick(row) {
        console.log(row);
      },
      //切换
      huo(index) {
        this.huos = index;
      },
      //上传图片
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //登记
      denji() {
        if (this.huos == 1) {
          this.dialogVisibles = true
          this.dialogVisibleshi = false
        } else {
          this.dialogVisibles = false
          this.dialogVisibleshi = true
        }
      },
      // 途中检查记录 点击确定
      yesal() {
        this.dialogVisibles = false
        this.dialogVisibleshi = false
        let json = {
          date: this.bianhao,
          name: "P211202009230" + parseInt(++this.index),
          province: "北京电站",
          city: this.type,
          address: this.j_shuoming,
          zip: this.j_address,
          time: this.j_time
        }
        console.log(this.j_time)
        if (this.cha_type != 2) {
          this.tableData.push(json)

        }
        this.totalPage()
        console.log(this.tableData)
        localStorage.setItem("tableData", JSON.stringify(this.tableData))

      },
      yes() {
        this.dialogVisible = false
      },
      no() {
        this.dialogVisible = false
        this.dialogVisibles = false
        this.dialogVisibleshi = false
      }
    },
  };
</script>
<style>
  .el-dialog__body {
    padding: 5px 20px;
    padding-bottom: 18px;
  }

  .el-dialog__title {
    font-size: 29px !important;
    color: #000000 !important;
    font-weight: 500;
  }

  .el-upload--picture-card {
    width: 107px !important;
    height: 107px !important;
    line-height: 107px !important;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 107px !important;
    height: 107px !important;
    line-height: 107px !important;
  }

  .el-carousel__container {
    margin-top: 52px;
    height: 629px;
  }
</style>
<style scoped>
  @import "../../css/fa.css";
  @import "../../css/zaitu.css";
</style>