<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-inputas"
                v-model="dispatchCarId"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">电站</div>
              <input
                type="text"
                placeholder="请输入电站"
                class="fa-inputas"
                v-model="telegramListName"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">计划发车时间</div>
              <input
                type="text"
                placeholder="请输入计划发车时间"
                class="fa-inputas"
                v-model="planTime"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">承运单位</div>
              <input
                type="text"
                placeholder="请输入承运单位 "
                class="fa-inputas"
                v-model="carrier"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">车辆牌号</div>
              <input
                type="text"
                placeholder="请输入车辆牌号"
                class="fa-inputas"
                v-model="status"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">派车状态</div>
              <input
                type="text"
                placeholder="请输入派车转态"
                class="fa-inputas"
                v-model="status"
              />
            </div>
            <div class="chaxun">
              <img
                src="../../assets/chaxun.png"
                class="cha-imgs"
                @click="chaxuns"
                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="dispatchCarId"
              label="派车单编码"
              width="184"
            >
            </el-table-column>
            <el-table-column prop="telegramListName" label="电站" width="184">
            </el-table-column>
            <el-table-column
              prop="settlementLocation"
              label="到货地点"
              width="184"
            >
            </el-table-column>
            <el-table-column
              prop="clearingKilometers"
              label="预计里程"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="shipTime" label="计划发车时间" width="160">
            </el-table-column>
            <el-table-column prop="carType" label="超车/超限" width="160">
            </el-table-column>
            <el-table-column prop="transportModel" label="运输车型" width="160">
            </el-table-column>
            <el-table-column prop="shipBy" label="发货计划人" width="160">
            </el-table-column>
            <el-table-column prop="carriageName" label="承运单位" width="160">
            </el-table-column>
            <el-table-column prop="alertOthers" label="通知人" width="160">
            </el-table-column>
            <el-table-column prop="alertTime" label="通知时间" width="160">
            </el-table-column>
            <el-table-column prop="carGrade" label="车辆牌号" width="160">
            </el-table-column>
            <el-table-column
              prop="carPersonName"
              label="车辆负责人"
              width="160"
            >
            </el-table-column>
            <el-table-column prop="createBy" label="派车人" width="160">
            </el-table-column>
            <el-table-column prop="createTime" label="派车时间" width="160">
            </el-table-column>
            <el-table-column prop="status" label="派车状态" width="160">
              <template slot-scope="scope">
                <span type="text" size="small" v-if="scope.row.status == 0"
                  >待派车</span
                >
                <span type="text" size="small" v-if="scope.row.status == 1"
                  >待确认</span
                >
                <span
                  type="text"
                  size="small"
                  v-if="scope.row.status == 2"
                  @click="tonzhi"
                  >已确认</span
                >
                <span
                  type="text"
                  size="small"
                  v-if="scope.row.status == 3"
                  @click="tonzhi"
                  >已退回</span
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="256">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="paiche(scope.row.dispatchCarId)"
                  >查看详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.status == 0"
                  @click="fason(scope.row.dispatchCarId)"
                  >发送通知</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.status == 1 && scope.row.status == 3"
                  @click="tonzhi"
                  >通知处理</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="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 发送通知 -->
    <div class="paiche">
      <el-dialog
        title="派车通知"
        :visible.sync="dialogVisible"
        width="60%"
        :append-to-body="true"
        style="margin-top: 10%"
      >
        <div class="liebiao">
          <div class="fahuo-li">
            <div class="a" style="width: 33.3%">
              <div class="sd">
                <div class="fa-ji">派车单编码</div>
                <div class="conrt">{{cont.dispatchCarId}}</div>
              </div>
              <div class="sd">
                <div class="fa-ji">发货人计划人</div>
                <div class="conrt">{{cont.shipBy}}</div>
              </div>
              <div class="sd">
                <div class="fa-ji">预计里程</div>
                <div class="conrt">{{cont.clearingKilometers}}</div>
              </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>
                <div class="conrt">{{cont.telegramListName}}</div>
              </div>
              <div class="sd">
                <div class="fa-ji">车辆种类</div>
                <div class="conrt">{{cont.transportModel}}</div>
              </div>
              <div class="sd">
                <div class="fa-ji">计划发车时间</div>
                <div class="conrt">{{cont.shipTime}}</div>
              </div>
            </div>
            <div class="a" style="width: 33.3%">
              <div class="sd">
                <div class="fa-ji">到货地点</div>
                <div class="conrt">{{cont.settlementLocation}}</div>
              </div>
              <div class="sd">
                <div class="fa-ji">车型要求</div>
                <div class="conrt">{{cont.carType}}</div>
              </div>
              <div class="sd">
                <div class="fa-ji">计划行车路线</div>
                <div class="img-chuan">
                  <div class="lisg">
                    <img src="../../assets/tu.png" class="tu" alt="" />
                    <img
                      src="../../assets/fanda.png"
                      class="fan"
                      alt=""
                      @click="yujh"
                    />
                  </div>
                  <div class="lisg">
                    <img src="../../assets/tu.png" class="tu" alt="" />
                    <img src="../../assets/fanda.png" class="fan" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="queren">
            <el-button type="primary" round @click="dialogVisible = false">确认</el-button>
            <el-button round @click="dialogVisible = false">取消</el-button>
            
          </div>
        </div>
      </el-dialog>
    </div>

    <!-- 通知处理 -->
    <el-dialog
      title="通知处理"
      :visible.sync="dialogVisibleg"
      width="80%"
      :append-to-body="true"
      style="margin-top: 4%"
    >
      <div class="liebiao" style="margin-top: 20px">
        <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="conrt">李丽丽</div>
            </div>
            <div class="sd">
              <div class="fa-ji">预计里程</div>
              <div class="conrt">10000KM</div>
            </div>
            <div class="sd">
              <div class="fa-ji">车辆牌号</div>
              <div class="inputt">
                <input type="text" placeholder="京A456789" class="sss" />
                <img src="../../assets/xiala.png" class="xial" 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">拖板</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="inputt">
                <input
                  type="text"
                  placeholder="李丽丽（15687456197）"
                  class="sss"
                />
                <img src="../../assets/xiala.png" class="xial" 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">车辆要求车型要求详情</div>
            </div>
            <div class="sd">
              <div class="fa-ji">计划行车路线</div>
              <div class="img-chuan">
                <div class="lisg">
                  <img src="../../assets/tu.png" class="tu" alt="" />
                  <img src="../../assets/fanda.png" class="fan" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="queren">
          <div class="querens">接受</div>
          <div class="quxiaos">取消</div>
        </div>
      </div>
    </el-dialog>
    <!-- 确认发货 -->
    <el-dialog
      title="确认发货计划"
      :visible.sync="dialogVisibleq"
      width="80%"
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="jichus">
          <div class="gesk"></div>
          <div class="jichu">基础信息</div>
        </div>
        <div class="fahuo-li">
          <div class="a">
            <div class="sd">
              <div class="fa-ji">发货计划</div>
              <div class="conrt">发货计划1.5</div>
            </div>
            <div class="sd">
              <div class="fa-ji">到货联系电话</div>
              <div class="conrt">18303210468</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="img-chuan">
                <div class="lisg">
                  <img src="../../assets/tu.png" class="tu" alt="" />
                  <img src="../../assets/fanda.png" class="fan" alt="" />
                </div>
                <div class="lisg">
                  <img src="../../assets/tu.png" class="tu" alt="" />
                  <img src="../../assets/fanda.png" class="fan" alt="" />
                </div>
              </div>
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">合同编码</div>
              <div class="conrt">130403788465487984</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 class="a">
            <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 class="a">
            <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="ziliao-lists">
                <div class="ziliaotu">
                  <div class="ziliao-left">
                    <img src="../../assets/21.png" class="ziliao-img" alt="" />
                    <span class="text-sp">food.jpg</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="sg">
              <div class="tianjia">添加产品</div>
            </div>
          </div>
        </div>
        <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="292">
            </el-table-column>
            <el-table-column prop="name" label="产品编号" width="292">
            </el-table-column>
            <el-table-column prop="province" label="产品数量" width="292">
            </el-table-column>
            <el-table-column prop="city" label="要求到货时间" width="292">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="292">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >确认完成</el-button
                >
              </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"
      
      :append-to-body="true"
      style="padding-bottom: 0;margin-top: 160px;"
    >
      <div class="liebiao" style="margin-top: 24px; padding-bottom: 0">
        <div class="fahuo-li">
          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">派车单编码</div>
              <div class="conrt">{{ de.dispatchCarId }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">发货人计划人</div>
              <div class="conrt">{{ de.shipBy }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">预计里程</div>
              <div class="conrt">{{ de.clearingKilometers }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">派车状态</div>
              <div class="conrt" v-if="de.status == 0">待派车</div>
              <div class="conrt" v-if="de.status == 1">待确认</div>
              <div class="conrt" v-if="de.status == 2">已确认</div>
              <div class="conrt" v-if="de.status == 3">已退回</div>
            </div>
            <div class="sd">
              <div class="fa-ji">通知时间</div>
              <div class="conrt">{{ de.alertTime }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">派车人</div>
              <div class="conrt">{{ de.createBy }}</div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">电站名称</div>
              <div class="conrt">{{ de.telegramListName }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">车型要求</div>
              <div class="conrt">{{ de.transportModel }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">承运单位</div>
              <div class="conrt">{{ de.carriageName }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">通知人</div>
              <div class="conrt">{{ de.alertOthers }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">车辆牌号</div>
              <div class="conrt">{{ de.carGrade }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">派车时间</div>
              <div class="conrt">{{ de.createTime }}</div>
            </div>
          </div>

          <div class="a" style="width: 33.3%">
            <div class="sd">
              <div class="fa-ji">到货地点</div>
              <div class="conrt">{{ de.settlementLocation }}</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="img-chuan">
                <div class="lisg">
                  <img src="../../assets/tu.png" class="tu" alt="" />
                  <img src="../../assets/fanda.png" class="fan" alt="" />
                </div>
              </div>
            </div>
            <div class="sd">
              <div class="fa-ji">车辆负责人</div>
              <div class="conrt">{{ de.carPersonName }}</div>
            </div>
          </div>
        </div>
        <div class="queren">
          <el-button type="primary" round @click="dialogVisibleh = false">确认</el-button>
       
        </div>
      </div>
    </el-dialog>
    <!-- 预览图片 -->
    <el-dialog
      :visible.sync="dialogVisibleyu"
      width="60%"
      style="margin-top: 8%"
      :append-to-body="true"
    >
      <div class="fanhui" @click="fanhuis">
        <img src="../../assets/zuojian.png" class="zuojian" alt="" />
        <div class="sski">返回上一层</div>
      </div>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
          <img src="../../assets/tu.png" class="swipeb" alt="" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],

      dialogVisible: false,
      dialogVisibleg: false,
      dialogVisibleq: false,
      dialogVisibleh: false,
      dialogVisibleyu: false,
      dialogImageUrl: "",
      dialogVisiblex: false,
      carrier: "", //承运单位
      dispatchCarId: "", //派车编码
      status: "", //状态
      vehicleLicensePlate: "", // 车辆牌号
      telegramListName: "", //电站
      planTime: "", // 计划发车时间
      pageNum: 1,
      pageSize: 10,
      total: "", //总条数
      de: [], //查看详情
      cont:[] //内容
    };
  },
  mounted() {
    this.pai();
  },
  methods: {
    //派车管理
    paiche(index) {
      this.dialogVisibleh = true;
      let that = this;
      var url = "/api/dispatch-car/dispatch-car/" + index;
      let params = {};
      that.$axios
        .get(url)
        .then(function (res) {
          console.log(res);
          that.de = res.data;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //查询
    chaxuns() {
      this.pai();
    },
    //查看派车管理列表
    pai() {
      let that = this;
      var url = "/api/dispatch-car/list";
      let params = {
        carrier: that.carrier,
        dispatchCarId: that.dispatchCarId,
        status: that.status,
        vehicleLicensePlate: that.vehicleLicensePlate,
        telegramListName: that.telegramListName,
        planTime: that.planTime,
        pageNum: that.pageNum,
        pageSize: that.pageSize,
      };
      that.$axios
        .post(url, params)
        .then(function (res) {
          console.log(res);
          that.tableData = res.rows;
          that.total = res.total;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //编辑发货申请
    handleClick(row) {
      console.log(row);
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //发送通知
    fason(id) {
      this.dialogVisible = true;
      this.peiche(id)
    },
    //根据id获取配车详情
    peiche(id) {
      let that = this;
      var url = "/api/dispatch-car/" + id;
      let params = {};
      that.$axios
        .get(url)
        .then(function (res) {
          console.log(res);
          that.cont = res.data
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    //预览返回
    //返回上一层
    fanhuis() {
      this.dialogVisible = true;
      this.dialogVisibleyu = false;
    },
    //预览图片
    yujh() {
      this.dialogVisible = false;
      this.dialogVisibleyu = true;
    },
    //通知处理
    tonzhi() {
      this.dialogVisibleg = true;
    },
  },
};
</script>
<style>

.el-dialog__body {
  padding: 5px 20px;
}
.el-dialog__title {
  font-size: 22px !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: 450px;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pai.css";
</style>