<template>
  <div class="page-data">
    <!--搜素框-->
    <div class="page-filter">
      <el-form :inline="true" :model="searchQuery" ref="searchQuery" size="medium">
        <el-form-item label="开始时间">
          <el-date-picker
            type="date"
            v-model="searchQuery.startTime"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptionsStart"
            placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="date"
            v-model="searchQuery.endTime"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptionsEnd"
            placeholder="选择结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('search')">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" size="medium" @click="handleClick('create')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-content">
      <!--表格-->
      <div class="h-100 page-table">
        <el-table
          class="h-100"
          ref="tableBox"
          :data="tableData"
          :header-cell-style="{textAlign:'center'}"
        >
          <el-table-column
            label="序号"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 + (ALPage - 1) * ALSize }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="siteNo" label="站点编号"></el-table-column>
          <el-table-column prop="ttTime" label="观测时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="siteNo" label="入库时间"></el-table-column>
          <el-table-column prop="siteNo" label="水位（m)"></el-table-column>
          <el-table-column prop="siteNo" label="流量"></el-table-column>
          <el-table-column prop="siteNo" label="浊度（mg/L)"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span :class="[scope.row.status === 1 ? 'red' : '']">{{scope.row.status === 0 ? '在线' : '离线'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="siteNo" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick('update',scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="handleClick('detail',scope.row)">历史数据</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--弹窗-->
    <el-dialog
      append-to-body
      destroy-on-close
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :before-close="handleClose"
    >
      <!--编辑-->
      <template v-if="isEdit">
        <div class="page-form">
          <el-form :inline="true" :model="formInfo" ref="form" size="medium">
            <el-form-item label="设备编号" prop="sbbh">
              <el-input v-model="formInfo.sbbh" placeholder="请输入设备编号"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="sbmc">
              <el-input v-model="formInfo.sbmc" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item label="设备经纬度" prop="sbjwd">
              <el-input v-model="formInfo.sbjwd" placeholder="请输入设备编号"></el-input>
              <el-button type="text" size="medium" @click="handleClick('map')">点击地图选择</el-button>
            </el-form-item>
            <el-form-item label="安装时间" prop="azsj">
              <el-input v-model="formInfo.azsj" placeholder="请选择安装时间"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="sblx">
              <el-select
                v-model="formInfo.sblx"
                placeholder="请选择设备类型"
              >
                <el-option
                  v-for="(item, index) in listTypeInfo['sblx']"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="安装人员" prop="azry">
              <el-select
                v-model="formInfo.azry"
                placeholder="请选择安装人员"
              >
                <el-option
                  v-for="(item, index) in listTypeInfo['azry']"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="现场照片" prop="avatar">
              <el-upload
                class="avatar-uploader"
                action="123"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="fileChange"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="formInfo.avatar" :src="formInfo.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div class="dialot-footer" slot="footer">
        <el-button type="primary" size="medium" @click="handleClick('save')">保存</el-button>
        <el-button type="primary" size="medium" @click="handleClick('close')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索相关
      searchQuery: {
        endTime: '',
        startTime: ''
      },
      pickerOptionsStart:{
        //结束时间不能大于开始时间
        disabledDate: time => {
          if(this.searchQuery.endTime){
            return time.getTime() >  new Date(this.searchQuery.endTime).getTime();
          }
        }
      },
      pickerOptionsEnd:{
          disabledDate: time => {
            return time.getTime() < new Date(this.searchQuery.startTime).getTime();
          }
      },
      //表格相关
      tableData: [
        {siteNo:'1261610030',ttTime:'2020-12-29 11:05:00',status:0},
        {siteNo:'1261610030',ttTime:'2020-12-29 11:05:00',status:1},
      ],
      ALPage: 1,  //分页默认显示页
      ALSize: 10, //分页上显示的每页的条数
      tableHeight: null,  //表格最大高度
      //弹窗相关
      dialogInfo: {
        title: {
          update: '编辑'
        },
        visible: false
      },
      isEdit: false,  //是否处于编辑状态
      //列表相关
      listTypeInfo: {
        sblx: [
          {label:'雨量计',value:0},
          {label:'流量计',value:1},
          {label:'水质柜',value:2},
        ],
        azry: [
          {label:'朱方仁',value:0},
          {label:'胡明杰',value:1},
          {label:'王超',value:2},
        ]
      },
      //表单相关
      formInfo: {
        sbbh: '',
        sbmc: '',
        sbjwd: '',
        azsj: '',
        sblx: '',
        azry: '',
        avatar: ''
      }
    }
  },
  watch: {
    'dialogInfo.visible'(val) {
      if(!val) {
        this.$refs['form'].resetFields();
      }
      this.resetForm();
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.tableHeight = this.getTableHeight();
      // if(this.listenHeight){
      //   this.listInfo.tableHeight = this.getTableHeight()
      // }
    })
    window.addEventListener('resize', () => {
      this.tableHeight = this.getTableHeight();
    })
  },
  methods: {
    //点击事件
    handleClick(event, data) {
      switch(event) {
        case 'search':
          console.log(111,this.searchQuery)
          break
        case 'update':
          console.log(222,data)
          this.isEdit = true;
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          // this.dialogInfo.tit
          break
        //历史数据
        case 'detail':
          console.log(333,data)
          break
        //地图
        case 'map':
          console.log(777)
          break
        //关闭
        case 'close':
          this.dialogInfo.visible = false;
          break
        //保存
        case 'save':
          console.log(444)
          break
      }
    },
    //关闭弹窗
    handleClose() {
      this.dialogInfo.visible = false;
    },
    //上传获取ID
    handleAvatarSuccess(res, file) {
      console.log(res, file);
    },
    //上传校验
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      if(!isJPG){
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      return isJPG
    },
    //上传
    fileChange(file) {
      let reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload=()=>{
        console.log(555,'头像地址',reader.result)
        this.formInfo.avatar = reader.result;
        // this.$emit('showCropper',reader.result)
      }
    },
    //重置表单
    resetForm() {
      this.formInfo = {
        sbbh: '',
        sbmc: '',
        sbjwd: '',
        azsj: '',
        sblx: '',
        azry: '',
        avatar: ''
      }
    },
    //得到表格高度
    getTableHeight(){
      //当表格存在的时候才执行操作
      if (document.getElementsByClassName('el-table').length === 0) {
        return
      }
      let _baseHeight = this.pagination ? 44 : 0
      if(this.$refs.tableBox && this.$refs.tableBox.offsetHeight){
        let resultHeight = this.$refs.tableBox.offsetHeight
        let _height = resultHeight -_baseHeight
        return _height
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.page-data{
  @include fd();
}
.page-filter{
  text-align: left;
  ::v-deep{
    .el-form-item{
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
}
.page-content{
  flex: 1;
  overflow: hidden;
  .page-table{
    height: 100%;
  }
  .red{
    color: red;
  }
}
/deep/ .el-table{
  @include fd();
  .el-table__body-wrapper{
    flex: 1;
  }
}
// /deep/ .el-table--border::after, .el-table--group::after, .el-table::before{
//   background-color: #fff !important;
// }
/deep/ .el-dialog{
  margin-top: 10vh !important;
  .el-form-item{
    display: block;
    .el-form-item__label{
      width: 20%;
      text-align: right;
    }
    .el-form-item__content{
      width: 50%;
      white-space: nowrap;
      .el-select{
        width: 100%;
      }
      .avatar{
        max-width: 100%;
      }
    }
  }
}
</style>