<!--用水事记L -->
<template>
  <div class="container">
    <div class="title">
      场区用气事记
      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
    </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" />
            <div style="width: 85px;display: flex;justify-content: flex-end">
              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
              <i class="el-icon-delete" @click="deleteItem(index)" />
            </div>
          </div>
        </div>
        <div v-if="editMode&&currentList.length<10" class="content-line">
          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getNoteList, updateNoteList } from '@/api/dashboard'
export default {
  name: 'GasNote',
  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('2').then(response => {
        this.currentList = JSON.parse(response.data[0].notes)
      })
    },
    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 }
      })
      const params = {
        type: '2',
        list: currentList
      }
      updateNoteList(params).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>