<!--用水事记L -->
<template>
  <div class="container">
    <div class="title">
      场区用水事记
      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
    </div>
    <div class="content-div">
      <el-scrollbar class="white-scrollbar">
        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
          <div v-else class="edit-line">
            <div style="margin-right: 5px">{{index+1}}. </div>
            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
            <div style="width: 85px;display: flex;justify-content: flex-end">
              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
              <i class="el-icon-delete" @click="deleteItem(index)"></i>
            </div>
          </div>
        </div>
        <div v-if="editMode&&currentList.length<10" class="content-line">
          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getNoteList, updateNoteList } from '@/api/dashboard'
import { getDoorAreaTree } from '@/api/system/area'
export default {
  name: 'WaterNote',
  props:{
    query: {
      type: Object,
      default:()=>{
        return {
          areaId: '',
          startTime: '',
          endTime: ''
        }
      }
    }
  },
  data() {
    return {
      editMode: false, // 编辑模式
      originList:[], // 原始列表
      currentList:[] // 当前列表
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取统计数据
    fetchData() {
      // this.currentList = [
      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
      // ]
      // this.originList = JSON.parse(JSON.stringify(this.currentList))
      getNoteList().then(response => {
        this.currentList = JSON.parse(response.data)
      })
    },
    toTop(index){
      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
    },
    toBottom(index){
      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
    },
    deleteItem(index){
      this.currentList.splice(index,1)
    },
    addItem(){
      this.currentList.push({content:'',num:99})
    },
    // 开启编辑
    editNote(){
      this.editMode = true
    },
    // 保存用水事记
    saveNote(){
      const currentList = this.currentList.map((item, index)=>{
        return {content: item.content, num: index}
      })
      console.log(currentList)
      updateNoteList(currentList).then(res=>{
        this.editMode = false
        this.$message.success('保存成功')
      }).catch(e=>{
        // this.currentList = JSON.parse(JSON.stringify(this.originList))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "@/styles/variables.scss";
  .container{
    position:relative;
    height: 428px;
    display: flex;
    flex-direction: column;
    .title{
      font-weight: bolder;
      font-size: 18px;
      font-family: sans-serif;
      color: #333;
    }
    .content-div{
      height: 410px;
      .content-line{
        line-height: 30px;
        font-size: 16px;
      }
      .edit-line{
        width: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
  .edit-btn, .icon-btn{
    &:hover{
      cursor: pointer;
      color: $themeColor;
    }
  }
</style>
<style lang="scss">
  .white-scrollbar{
    height: 100%;
    .el-scrollbar__wrap{
      overflow-x: hidden;
      padding: 10px 0px;
      background-color: #FFFFFF;
    }
  }

</style>