<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
  el-container
    el-header( style="height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(195, 195, 195, 1);" )
      span.title-bold.title-left-color 楼栋维护
    el-main.box_main
      el-card()
        el-table( :data="dataList", :stripe="true", @sort-change="sortChange", v-loading="dataListLoading", style="width:100%;", :header-cell-style="{ background: '#EEF8FF', color: '#333333' }" )
          el-table-column(type="index",header-align="center", align="center", label="序号", width=50 )
            template(scope="scope")
                span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
          el-table-column( prop="stationName", columnKey="station_name", header-align="center", align="center", label="名称", sortable="custom" )
          el-table-column( prop="code", header-align="center", align="center", label="编码", sortable="custom" )
          el-table-column( prop="map", header-align="center", align="center", label="地图" )
            template(slot-scope="scope")
              el-button( type="text", size="mini", @click="showMap(scope.row.id)" ) 点击预览
          el-table-column( prop="remark", header-align="center", align="center", label="描述", sortable="custom" )
          el-table-column( prop="remark", header-align="center", align="center", label="操作", width=150 )
            template(slot-scope="scope")
              el-button( type="text", size="mini", index="1-1", v-if="isAuth('line:station:info')", @click="queryDetailHandle(scope.row)" ) 详情
              el-button( type="text", size="mini", index="1-1", v-if="isAuth('line:station:update')", @click="addOrUpdateHandle(scope.row)" ) 编辑
    el-footer.box_footer
      el-pagination( @size-change="sizeChangeHandle", background, @current-change="currentChangeHandle", :current-page="pageIndex", :page-sizes="[10, 20, 50, 100]", :page-size="pageSize", :total="totalPage", layout="total, sizes, prev, pager, next, jumper" )
        //- <!-- 弹窗, 新增 / 修改 -->
      add-or-update( v-if="addOrUpdateVisible", ref="addOrUpdate", @refreshdatalist="getDataList" )
      //- 详情
      query-detail( v-if="queryDetailVisible", ref="queryDetail", @refreshdatalist="getDataList" )
      //- 查看地图
      query-image( v-if="queryImageVisible", ref="queryImage", @refreshdatalist="getDataList" )
</template>

<script>
import AddOrUpdate from './add-or-update'
import QueryDetail from './query-detail'
import QueryImage from './query-image'

export default {
  components: {
    AddOrUpdate,
    QueryDetail,
    QueryImage
  },
  data() {
    return {
      word: '', //查询
      dataList: [], //列表
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      queryImageVisible: false,
      ruleForm: {},
      visible: false,
      lineId: '', //选中的线路id
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      typeList: [
        { id: 1, name: '正线站点' },
        { id: 2, name: '换乘站点' }
      ],
      bean: ''
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    //排序
    sortChange(column) {
      if (column.order === 'descending') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      if (column.column.columnKey) {
        this.sort = column.column.columnKey
      } else {
        this.sort = column.prop
      }
      this.getDataList()
    },
    //线路树节点点击事件
    handleNodeClick(data) {
      this.lineId = data.id
      this.pageIndex = 1
      this.getDataList()
    },
    //添加或修改事件
    addOrUpdateHandle(row, flagType) {
      // console.log('addOrUpdateHandle:', row.id)
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row.id)
      })
    },
    //查看详情
    queryDetailHandle(row) {
      this.queryDetailVisible = true
      this.$nextTick(() => {
        this.$refs.queryDetail.init(row.id)
      })
    },
    //查看地图
    showMap(id) {
      this.queryImageVisible = true
      this.$nextTick(() => {
        this.$refs.queryImage.init(id)
      })
    },
    getDataList() {
      let data = {
        page: this.pageIndex,
        rows: this.pageSize
      }

      this.$http({
        url: this.$http.adornUrl('/liStation/list'),
        method: 'post',
        data: data
      }).then((data) => {
        if (data && data.code === 0) {
          this.dataList = data.page.rows
          this.totalPage = data.page.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 提交
    addsave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/liStation/${!this.ruleForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: this.ruleForm
          }).then((data) => {
            console.log(data)
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    closeForm() {
      console.log('取消')
      this.visible = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>
<style lang="scss" scoped>
.tree_warp {
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
  background: #f4f4f4;
}

.infopage {
  margin: 24px;
  padding: 24px;
  height: 750px;
  background-color: rgba(7, 58, 116, 0.596);
}

.tree_house {
  width: 12px;
  height: 18px;
  display: inline-block;

  img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    // transform: translateY(-8px);
    transform: translateX(-40px);
  }
}

.tree_point {
  width: 12px;
  height: 18px;
  display: inline-block;

  img {
    width: 12px;
    height: 18px;
    vertical-align: middle;
    transform: translateY(-2px);
  }
}

.dic_tree {
  background: #f4f4f4;
  width: 330px;
}

.dic_tree_header {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(54, 54, 54, 1);
  text-indent: 25px;
}

.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
  display: none;
}

.dic_tree /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
  display: none;
}

.dic_tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.dic_tree
  /deep/
  .el-tree-node
  > .el-tree-node__children
  .el-tree-node__content {
  width: 280px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px 0 0 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  background: white;
  margin-top: 10px;
  margin-left: 30px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
}

.el-tree--highlight-current
  /deep/
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #35aff8;
  color: white;
}
</style>
