<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="井详情" append-to-body @close="cancel">
    <el-scrollbar :native="false">
      <el-form v-loading="loading" ref="dataForm" :label-position="labelPosition" :model="wellForm" label-width="120px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="井名称" prop="wellName">
              <el-input v-model="wellForm.wellName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="井编号" prop="wellCode">
              <el-input v-model="wellForm.wellCode" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="井类型" prop="wellType">
              <el-input v-model="wellForm.wellTypeName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="权属单位" prop="deptid">
              <el-input v-model="wellForm.deptName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="井深(m)" prop="deep">
              <el-input v-model="wellForm.deep" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <!--<el-col :span="10" :offset="1">-->
          <!--<el-form-item label="布防状态" prop="coordinateX">-->
          <!--<el-input v-model="wellForm.bfztName" type="text" placeholder="未知" disabled/>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="经度" prop="coordinateX">
              <el-input v-model="wellForm.coordinateX" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="纬度" prop="coordinateY">
              <el-input v-model="wellForm.coordinateY" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="路标图片" prop="images">
              <div v-if="imageList.length==0">
                无
              </div>
              <!--<el-image-->
              <!--v-for="image in imageList"-->
              <!--:src="image"-->
              <!--:preview-src-list="imageList"-->
              <!--:z-index="4000"-->
              <!--style="width: 100px; height: 100px; margin-right:10px"/>-->
              <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
              >
                <i class="el-icon-plus"/>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
                <!--<img width="100%" :src="dialogImageUrl">-->
                <div class="imgBox">
                  <img :src="dialogImageUrl" alt="" style="width:100%; margin: 0 auto;">
                </div>
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row :gutter="1">-->
          <!--<el-form-item label="所在区域" required>-->
            <!--<el-col :span="5">-->
              <!--<el-form-item prop="qu">-->
                <!--<el-select v-model="wellForm.qu" placeholder="未知" disabled>-->
                  <!--<el-option-->
                    <!--v-for="item in quList"-->
                    <!--:key="item.id"-->
                    <!--:label="item.name"-->
                    <!--:value="item.id"/>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="1" class="line">区/县</el-col>-->
            <!--<el-col :span="5">-->
              <!--<el-form-item prop="area">-->
                <!--<el-select v-model="wellForm.area" placeholder="未知" disabled>-->
                  <!--<el-option-->
                    <!--v-for="item in jiedaoList"-->
                    <!--:key="item.id"-->
                    <!--:label="item.name"-->
                    <!--:value="item.id"/>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="1" class="line">街道/镇</el-col>-->
          <!--</el-form-item>-->
        <!--</el-row>-->
        <el-row>
          <el-col :span="15">
            <el-form-item label="详细地址" prop="position">
              <el-input v-model="wellForm.position" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="井维护单位" prop="responsibleDept">
              <el-input v-model="wellForm.responsibleDeptName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <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 SelectTree from '@/components/SelectTree/singleSelect'
import { getAreaList, getAreaByDept } from '@/api/system/area'
import { watchDataByWell } from '@/api/well'
import DeptSelect from '@/components/DeptSelect'
import service from '@/utils/request'
export default {
  name: 'DetailWell',
  components: { SelectTree, DeptSelect },
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      wellForm: {
        id: null, // 井id
        wellCode: '', // 井编号
        wellName: '', // 井名称
        wellType: '', // 井类型
        wellTypeName: '', // 井类型名称
        deptid: '', // 权属单位
        deptName: '', // 权属单位名称
        bfztName: '', // 布防状态
        deep: '', // 井深，
        position: '', // 位置描述
        coordinateX: '', // 经度
        coordinateY: '', // 纬度
        photos: '', // 照片路径
        notes: '', // 备注,
        qu: '',
        area: '', // 街道
        responsibleDept: '', // 维护人员部门
        responsibleDeptName: '' // 维护人员部门名称
      }, // 表单
      deptProps: {
        parent: 'pid',
        value: 'id',
        label: 'name',
        children: 'children'
      },
      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: [],
      fileList: [],
      deptTreeList: null, // 组织树列表数据
      secondDeptTreeList: null, // 二级组织树列表
      wellTypeList: null,
      quList: null,
      jiedaoList: null,
      dialogImageUrl: '',
      dialogVisible: false,
      labelPosition: 'right',
      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.areaFullName + row.position, // 位置描述
        coordinateX: row.coordinateX, // 经度
        coordinateY: row.coordinateY, // 纬度
        photos: row.photos, // 照片路径
        notes: row.notes, // 备注,
        qu: row.qu,
        area: row.area, // 街道
        responsibleDept: row.responsibleDept, // 维护人员部门
        responsibleDeptName: row.responsibleDeptName // 维护人员部门
      }
      if (row.deptid && row.deptid !== '') {
        this.fetchArea1()
        this.fetchArea2()
        this.loading = false
      } else {
        this.loading = false
      }
      // 处理图片
      const urls = row.photos.split(';')
      const base_url = service.defaults.baseURL + 'static/'
      for (const url of urls) {
        if (url) {
          this.imageList.push({ name: url, url: base_url + url })
        }
      }
      // 获取井下监控数据
      this.listLoading = true
      watchDataByWell(row.id).then(response => {
        this.listLoading = false
        this.dataList = response.data
      })
    },
    // 获取区域1
    fetchArea1() {
      getAreaByDept(this.wellForm.deptid).then(response => {
        if (response.code === 200) {
          const pid = response.data.area
          getAreaList(pid).then(response => {
            this.quList = response.data
          })
        }
      })
    },
    // 获取区域2
    fetchArea2() {
      getAreaList(this.wellForm.qu).then(response => {
        this.jiedaoList = response.data
        this.loading = false
      })
    },
    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-dialog__body{
      }
      .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: 15px;
    .table-title {
      margin-top: 10px;
      .title-header {
        height: 40px;
        padding: 10px;
        border-radius: 4px;
        border: solid 1px #F3F3F3;
        background-color: #F5F7FA;
        color: #606266;
      }
    }
  }
</style>