<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>-->
          <!--              &lt;!&ndash;<el-image&ndash;&gt;-->
          <!--              &lt;!&ndash;v-for="image in imageList"&ndash;&gt;-->
          <!--              &lt;!&ndash;:src="image"&ndash;&gt;-->
          <!--              &lt;!&ndash;:preview-src-list="imageList"&ndash;&gt;-->
          <!--              &lt;!&ndash;:z-index="4000"&ndash;&gt;-->
          <!--              &lt;!&ndash;style="width: 100px; height: 100px; margin-right:10px"/>&ndash;&gt;-->
          <!--              <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>-->
          <!--                &lt;!&ndash;<img width="100%" :src="dialogImageUrl">&ndash;&gt;-->
          <!--                <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>