<template>
  <div>
    <div v-for="item in tableData" :key="item.id">
      <div class="groupItem" v-if="!item.isEdit">
        <span class="left">
          <i class="fa fa-cubes w20" aria-hidden="true"></i>
          <span class="marginL20 f20">{{ item.name }}</span>
        </span>
        <span class="right">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="beforeHandleCommand('edit', item)"
                >编辑</el-dropdown-item
              >
              <el-dropdown-item :command="beforeHandleCommand('del', item)"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </div>
      <div v-else>
        <el-input
          placeholder="请输入内容"
          size="mini"
          style="width: 78%"
          v-model="item.name"
        ></el-input>
        <span style="width: 15%">
          <i
            class="el-icon-check"
            style="cursor: pointer"
            @click="confirm(item)"
          ></i>
          <i
            class="el-icon-close"
            style="cursor: pointer"
            @click="cancel(item)"
          ></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import {delMsg} from '@/utils/elementui'
export default {
  name: '',
  data() {
    return {
      newVal: '',
      bakVal: '',
    }
  },
  props: ['tableData'],
  methods: {
    beforeHandleCommand(item, row) {
      return {
        command: item,
        row: row,
      }
    },
    async handleCommand(val) {
      let { row, command } = val
      switch (command) {
        case 'edit':
          row.isEdit = true
          this.$forceUpdate()
          break;
        case 'del':
          try{
            await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
            this.$emit('delGroup', row)
          }catch(e){
            console.log(e)
          }
          break;
        default:
          break;
      }
    },
    confirm(item) {
      item.isEdit = false
      this.$emit('updateEdit', item, true)
    },
    cancel(item) {
      item.isEdit = false
      this.$emit('updateEdit', item, false)
    },
  },
}
</script>
<style lang='scss' scoped>
.groupItem {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
</style>