<template>
  <div class="point-detail">
    <!-- 打卡点 -->
    <el-table :data="pointDetailList" style="width: 100%">
      <el-table-column label="巡线人" align="center" prop="inspector" min-width="10%"/>
      <el-table-column label="管线名称" align="center" prop="pipeName" min-width="35%" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.userPipeInfo">{{ scope.row.userPipeInfo.map(item => item.pipeName).join("|")}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="打卡点" align="center" prop="title" min-width="55%" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.pipePointList">{{ scope.row.pipePointList.map(item => item.title).join("|")}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { selectPointDetail } from "@/api/baseinfo/pipePoint";
  export default {
    components: {},
    props:{
      pipeType:{
        type: String
      }
    },
    created(){
      this.getPointDetail(this.pipeType);
    },
    data() {
      return{
        ponitTotal: 0,
        pointDetailList: [],
      }
    },
    methods: {
      getPointDetail(pipeType){
        selectPointDetail({pipeType:pipeType}).then(res =>{
            if(res.code == 200){
            this.pointDetailList = res.data;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .point-detail{
    height: 300px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 3px;
      background:  #dfe4ed;
      position: absolute;
      top: 0;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      // border-radius: 10px;
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #cccccc;
      border-radius: 5px;
    }
  }

</style>

