<template>
  <el-dialog title="配送记录详情" :visible.sync="detailOpen" width="900px" append-to-body>
    <el-form label-width="120px">
      <el-row class="el-row-table">


        <el-col :span="12">
          <el-form-item label="储配站">
            <span v-if="detailInfo.stationName">{{ detailInfo.stationName }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="气瓶条码">
            <span v-if="detailInfo.bottleCode">{{ detailInfo.bottleCode }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="配送人员">
            <span v-if="detailInfo.deliveryPerson">{{ detailInfo.deliveryPerson }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车辆代码">
            <span v-if="detailInfo.vehicleCode">{{ detailInfo.vehicleCode }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="用户">
            <span v-if="detailInfo.gasUser">{{ detailInfo.gasUser }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="用户类型">
            <span v-if="detailInfo.gasUserType == '0'">居民</span>
            <span v-else-if="detailInfo.gasUserType == '1'">非居民</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="配送地址">
            <span v-if="detailInfo.deliveryAddress">{{ detailInfo.deliveryAddress }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="配送时间" prop="deliveryDate">
            <span v-if="detailInfo.deliveryDate">{{ detailInfo.deliveryDate }}</span>
            <span v-else>-</span>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  import { getRecord } from "@/api/lpgRegulation/record";
  export default {
    name: "index",
    data(){
      return{
        detailOpen: false,
        detailInfo: {}
      }
    },
    methods:{
      getDetailInfo(id){
        getRecord(id).then(res =>{
          if(res.code == 200 && res.data){
            this.detailInfo = res.data;
            this.detailOpen = true;
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .detailInfo{
    height: 350px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>
