<template>
  <div style="background-color: #6093E5; margin: 0px 10px;color: white" class="flex flex-pack-justify">
    <div class="flex">
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-document-add" />
        </div>
        <div class="ap-dev-tool-item-text">新建</div>
      </div>
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-copy2" />
        </div>
        <div class="ap-dev-tool-item-text">pc</div>
      </div>
    </div>
    <div class="flex">
      <div class="his-dialog">
        <el-dialog title="操作历史" :visible.sync="showHistory" width="30%" style="padding:10px;">
          <div style="height: 300px;overflow: auto;">
            <el-table stripe :data="historyList" :row-class-name="rowClassName" @row-click="revertStore">
              <el-table-column type="index" label="No" width="50" />
              <el-table-column prop="date" label="日期" width="100" />
              <el-table-column prop="msg" label="说明" width="300" />
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="showHistory = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="revokeOperate">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-mail-reply" />
        </div>
        <div class="ap-dev-tool-item-text">撤销</div>
      </div>
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="redoOperate">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-mail-forward" />
        </div>
        <div class="ap-dev-tool-item-text">重做</div>
      </div>
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="showHistory = true">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-history" />
        </div>
        <div class="ap-dev-tool-item-text">历史</div>
      </div>
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="repeatItem">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-copy2" />
        </div>
        <div class="ap-dev-tool-item-text">重复</div>
      </div>

      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="copyItem">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-copy" />
        </div>
        <div class="ap-dev-tool-item-text">复制</div>
      </div>
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="pasteItem">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-file-o" />
        </div>
        <div class="ap-dev-tool-item-text">粘贴</div>
      </div>
      <div class="ap-dev-tool-item flex flex-direction-column flex-pack-center" @click="deleteItem">
        <div class="ap-dev-tool-item-icon">
          <i class="el-icon-delete" />
        </div>
        <div class="ap-dev-tool-item-text">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import ApDevBase from './items/base/ApDevBase'

export default {
  name: 'CustomTools',
  extends: ApDevBase,
  data() {
    return {
      showHistory: false
    }
  },
  computed: {
    historyList() {
      return this.$store.state.history.data
    }
  },
  methods: {
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 回滚数据
    revertStore(row, column, event) {
      this.$store.commit('toolRevertStore', {
        index: row.index
      })
    },
    deleteItem() {
      const ref = this.$store.state.currentComps.ref
      if (ref == 'rootContainer') {
        this.$message.error('根组件不允许删除！')
        return
      }
      if (ref == '') {
        this.$message.error('请选择需要删除的组件！')
        return
      }
      this.$store.commit('toolRemoveItem', {
        ref: ref
      })
    },
    pasteItem() {
      const ref = this.$store.state.currentComps.ref
      if (ref == 'rootContainer') {
        this.$message.error('根组件不允许粘贴！')
        return
      }
      if (ref == '') {
        this.$message.error('请选择需要粘贴的位置！')
        return
      }
      this.$store.commit('toolPasteItem', {
        ref: ref
      })
      this.$message.success('组件粘贴成功！')
    },
    copyItem() {
      const ref = this.$store.state.currentComps.ref
      if (ref == 'rootContainer') {
        this.$message.error('根组件不允许复制！')
        return
      }
      if (ref == '') {
        this.$message.error('请选择需要复制的组件！')
        return
      }

      this.$store.commit('toolCopyItem', {
        ref: ref
      })
      this.$message.success('组件【' + ref + '】，复制成功！')
    },
    repeatItem() {
      const ref = this.$store.state.currentComps.ref
      if (ref == 'rootContainer') {
        this.$message.error('根组件不允许添加！')
        return
      }
      if (ref == '') {
        this.$message.error('请选择组件！')
        return
      }

      this.$store.commit('toolRepeatItem', {
        ref: ref
      })
      this.$message.success('组件复制成功！')
    },
    revokeOperate() {
      this.$store.commit('revokeOperate')
    },
    redoOperate() {
      this.$store.commit('redoOperate')
    }
  }
}
</script>

<style scoped>
    .ap-dev-tool-item {
        padding: 2px 10px;
        font-size: 13px;
        text-align: center;
    }

    .ap-dev-tool-item:hover {
        background-color: #80A9EA;
        cursor: pointer
    }

    .ap-dev-tool-item-text {
        font-size: 10px;
    }

    .ap-dev-tool-item-icon {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .his-dialog /deep/ .el-dialog__body {
        padding: 10px;
    }
</style>
