<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="点位详情" append-to-body width="800" @close="cancel">
    <el-scrollbar :native="false">
      <el-descriptions class="margin-top" title="" :column="2" border>
        <el-descriptions-item v-for="config of formConfig" :key="config.value" :span="config.span">
          <template slot="label">
            {{ config.label }}
          </template>
          <template v-if="config.type=='text'">
            {{ wellForm[config.value]?wellForm[config.value]:config.placeholder }}
          </template>
          <template v-if="config.type=='areaName'">
            {{ wellForm.quName?wellForm.quName:'' }}{{ wellForm.areaName?wellForm.areaName:'' }}
          </template>
          <template v-if="config.type=='images'">
            <div v-if="imageList.length==0">
              无
            </div>
            <el-upload
              v-else
              ref="upload"
              :file-list="imageList"
              :on-preview="handlePictureCardPreview"
              class="hide"
              multiple
              accept=".jpg,.jpeg,.png "
              action="string"
              list-type="picture-card"
              disabled
            />
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <div class="watch-div">
        <el-row class="table-title">
          <el-col :span="3">
            <div class="title-header">
              <i class="el-icon-menu" />监控数据
            </div>
          </el-col>
        </el-row>
        <el-table v-loading="listLoading" :data="dataList" class="table" border>
          <el-table-column align="center" type="index" />
          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row[column.value] }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="showData(scope.row)">
                查看历史数据
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { getAreaListPage } from '@/api/system/area'
import { watchDataByWell } from '@/api/well/well'

export default {
  name: 'DetailWell',
  data() {
    return {
      cmpName: '', // 组件名称
      dialogFormVisible: false, // 对话框是否显示
      formConfig: [
        { type: 'text', label: '点位名称', value: 'wellName', placeholder: '未知' },
        { type: 'text', label: '点位编号', value: 'wellCode', placeholder: '未知' },
        { type: 'text', label: '点位类型', value: 'wellTypeName', placeholder: '未知' },
        { type: 'text', label: '权属单位', value: 'deptName', placeholder: '未知' },
        { type: 'text', label: '点位维护单位', value: 'responsibleDeptName', placeholder: '未知' },
        { type: 'text', label: '井深(m)', value: 'deep', placeholder: '--' },
        { type: 'text', label: '布防状态', value: 'bfztName', placeholder: '未知' },
        { type: 'areaName', label: '所在区域', value: 'areaName', placeholder: '未知', span: 2 },
        { type: 'text', label: '经度', value: 'coordinateX', placeholder: '未知' },
        { type: 'text', label: '纬度', value: 'coordinateY', placeholder: '未知' },
        { type: 'text', label: '所在道路', value: 'road', placeholder: '未知', span: 5 },
        { type: 'text', label: '详细地址', value: 'position', placeholder: '未知', span: 5 },
        { type: 'images', label: '路标图片', value: 'imageList', placeholder: '无', span: 5 }
      ], // 表单配置项
      areaName: '',
      wellForm: {
        id: null, // 井id
        wellCode: '', // 点位编号
        wellName: '', // 点位名称
        wellType: '', // 点位类型
        wellTypeName: '', // 点位类型名称
        deptid: '', // 权属单位
        deptName: '', // 权属单位名称
        bfztName: '', // 布防状态
        deep: '', // 井深，
        position: '', // 位置描述
        coordinateX: '', // 经度
        coordinateY: '', // 纬度
        photos: '', // 照片路径
        notes: '', // 备注,
        qu: '',
        quName: '',
        area: '', // 街道
        areaName: '',
        road: '',
        responsibleDept: '', // 维护人员部门
        responsibleDeptName: '' // 维护人员部门名称
      }, // 表单
      columns: [
        { text: '监控内容', value: 'watchType' },
        { text: '设备编号', value: 'devcode' },
        { text: '设备安装日期', value: 'installDate', width: 110 },
        { text: '最新数据', value: 'data', width: 80 },
        { text: '设备状态', value: 'onlineStateName', width: 80 },
        { text: '最后上传时间', value: 'logtime', width: 170 }
      ],
      hideUpload: false,
      imageList: [],
      quList: [],
      jiedaoList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      listLoading: false, // 监控数据加载动画
      dataList: [], // 监控数据
      loading: true
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, row = null) {
      this.imageList = []
      this.loading = true
      this.dialogFormVisible = dialogFormVisible
      this.wellForm = {
        id: row.id, // 井id
        wellCode: row.wellCode, // 点位编号
        wellName: row.wellName, // 点位名称
        wellType: row.wellType, // 点位类型
        wellTypeName: row.wellTypeName, // 点位类型
        bfztName: row.bfztName,
        deptid: row.deptid, // 权属单位
        deptName: row.deptName, // 权属单位
        deep: row.deep, // 井深，
        position: row.position, // 位置描述
        coordinateX: row.coordinateX, // 经度
        coordinateY: row.coordinateY, // 纬度
        photos: row.photos, // 照片路径
        notes: row.notes, // 备注,
        qu: row.qu,
        area: row.area, // 街道
        road: row.road,
        responsibleDept: row.responsibleDept, // 维护人员部门
        responsibleDeptName: row.responsibleDeptName, // 维护人员部门
        areaName: row.areaName // 所在区域
      }
      if (row.deptid && row.deptid !== '') {
        this.fetchArea1()
        this.fetchArea2()
      }
      // 处理图片
      const urls = row.photos.split(';')
      const base_url = this.baseConfig.baseUrl + '/static/'
      for (const url of urls) {
        if (url) {
          this.imageList.push({ name: url, url: base_url + url })
        }
      }
      console.log(this.imageList)
      // 获取井下监控数据
      this.listLoading = true
      watchDataByWell(row.id).then(response => {
        this.listLoading = false
        this.dataList = response.data
      })
    },
    // 获取区域1
    fetchArea1() {
      const query = {
        keywords: this.wellForm.qu,
        offset: 1,
        limit: 20,
        sort: '',
        order: ''
      }
      getAreaListPage(query).then(response => {
        this.quList = response.data.rows.filter(item => item.id === this.wellForm.qu)
        const quName = this.quList.length > 0 ? this.quList[0].areaName : ''
        this.$set(this.wellForm, 'quName', quName)
      })
    },
    // 获取区域2
    fetchArea2() {
      const query = {
        keywords: this.wellForm.area,
        offset: 1,
        limit: 20,
        sort: '',
        order: ''
      }
      getAreaListPage(query).then(response => {
        this.jiedaoList = response.data.rows
        const areaName = this.jiedaoList.length > 0 ? this.jiedaoList[0].areaName : ''
        this.$set(this.wellForm, 'areaName', areaName)
      })
    },
    showData(row) {
      const devcode = row.devcode
      const deviceType = row.type
      const params = { devcode: devcode, deviceType: deviceType }
      const routeData = this.$router.resolve({
        name: 'DataManage',
        query: params,
        params: params
      })
      window.open(routeData.href, '_blank') // 打开新窗口
      // this.$router.push({ name: 'DataManage', query: params })
    },
    // 取消
    cancel() {
      this.imageList = []
      this.dialogFormVisible = false
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.hide .el-upload--picture-card {
  display: none;
}
.editDialog{
  .el-dialog {
    width: 900px;
    margin-top: 10vh !important;
    .el-scrollbar {
      height: 410px;
      width: 100%;
    }
    .el-scrollbar__wrap {
      /*overflow: scroll;*/
      overflow-x: auto;
      overflow-y: auto;
    }
    .el-scrollbar__view{
      width: 98%;
    }
  }
}
.el-select{
  width: 100%;
}
.line{
  width: 50px;
  margin-left: 5px;
}
.hide .el-upload-–picture-card{
  display: none;
}
.imgBox{
  width: 100%;
  text-align: center;
}
.watch-div {
  margin-top: 15px;
  .table-title {
    margin-top: 10px;
    .title-header {
      height: 40px;
      padding: 10px;
      border-radius: 4px;
      border: solid 1px #F3F3F3;
      background-color: #fafafa;
      color: #606266;
    }
  }
}
</style>