<template lang="pug">
  el-dialog(width='60%' :close-on-click-modal='false', :visible.sync='visible' :modal-append-to-body='false' append-to-body)
    div.title-bold(slot='title') 详情
    el-form(:model='dataForm', :rules='dataRule', ref='dataForm',  label-width='100px')
      el-row(:gutter="20")
        el-col(:span='12')
          el-form-item(label="所属线路:" prop="lineName")
            el-input(v-model='dataForm.lineName' readonly)
      el-row(:gutter="20")
        el-col(:span='12')
          el-form-item(label="站点名称:" prop="stationName")
            el-input(v-model='dataForm.stationName' placeholder="请输入站点名称"  clearable readonly)
        el-col(:span='12')
          el-form-item(label="车站编码:" prop="code")
            el-input(v-model='dataForm.code' placeholder="请输入车站编码"  clearable readonly )
      el-row(:gutter='20')
        el-col(:span='12')
          el-form-item(label="车站类型:" prop="type")
            el-input(v-if="dataForm.type=='1'" value="正线站点" placeholder="请输入车站编码"  clearable readonly )
            el-input(v-if="dataForm.type=='2'" value="换乘站点" placeholder="请输入车站编码"  clearable readonly )
        el-col(:span='12')
          el-form-item(label="站点简称:" prop="shortName")
            el-input(v-model='dataForm.shortName' placeholder="请输入站点简称"  clearable readonly)
        el-col(:span='24')
          el-form-item(label="站点描述:" prop="remark")
            el-input(v-model='dataForm.remark' type="textarea" :rows=4 resize="none" placeholder="请输入站点描述" readonly)
    div
      div(style='line-height: 40px;') 站点地图
      el-divider
      <div class="fileDiv">
          <div class="fileList" v-for="(item,index) in fileList">
            <el-input size="mini" v-model='item.name' readonly></el-input>
            <img :src="item.readPath" alt="" v-image-preview >
          </div>
      </div>
    span.dialog-footer(slot='footer')
      el-button(@click='visible = false' type='primary' size='medium') 关闭
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      dataListLoading: false,
      clickFlag: false,
      visible: false,
      fileList: [],
      urlPath: window.CONFIG.urlPath,
      typeList: [
        { id: '1', name: '正线站点' },
        { id: '2', name: '换乘站点' }
      ],
      dataForm: {},
      dataRule: {
        name: [
          { required: true, message: '资源点名称不能为空', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        remark: [
          {
            min: 1,
            max: 300,
            message: '长度在 1 到 300 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    init (id) {
      this.visible = true
      this.clickFlag = false
      this.dataForm.id = id
      this.initData()
      if (this.dataForm.id) {
        this.initDataFrom()
      }
    },
    initDataFrom () {
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${this.dataForm.id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(data => {
        if (data && data.code === 0) {
          this.dataForm = data.bean
          console.log('站点地图：', data.bean.mapList)
          this.fileList = data.bean.mapList
          this.fileList.forEach(element => {
            element.readPath = this.urlPath + element.filePath
          })
        }
      })
    },
    initData () {
      this.typeList = [
        { id: '1', name: '正线站点' },
        { id: '2', name: '换乘站点' }
      ]
    }
  }
}
</script>
<style lang='scss' scoped>
.fileDiv {
  height: 200px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  .fileList {
    height: 130px;
    width: 100px;
    margin: 10px 0 0 10px;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    .el-button {
      padding-left: 8px;
      font-size: 14px;
    }

    img {
      height: 100px;
      width: 100px;
    }
    .imgButton {
      position: relative;
      top: -30px;
      background: #ccc;
    }
  }
}
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
</style>