<template>
  <div class="app-container">
    <!-- 新增 -->
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true"
      v-hasPermi="['operation:tag:add']">新增标签</el-button>
    <!-- 列表 -->
    <el-table :data="tableData" height="614">
      <el-table-column label="排序" type="index" align="center" />
      <el-table-column label="一级标签" prop="name" align="center" show-overflow-tooltip />
      <el-table-column label="二级标签" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.secondTagNames" :key="index">
            {{ index === scope.row.secondTagNames.length - 1 && item || ( item + ',') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="三级标签" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.threeTagNames" :key="index">
            {{ index === scope.row.threeTagNames.length - 1 && item || ( item + ',') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getDetail(scope.row)" v-hasPermi="['operation:tag:edit']">编辑</el-button>
          <el-button type="delete" @click="getDelete(scope.row.id)" v-hasPermi="['operation:tag:delete']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="新增标签" width="500px" :before-close="cancel">
      <el-form :model="form" label-width="auto" ref="form" :rules="rules">
        <el-form-item label="一级标签：" prop="firstName">
          <el-input v-model="form.firstName" placeholder="请输入一级标签" />
        </el-form-item>
        <el-form-item label="二级标签：">
          <el-input v-model="inputTags" placeholder="请输入二级标签">
            <el-button slot="append" @click="getInput">添加</el-button>
          </el-input>
          <el-tag v-for="item in form.secondTags" :key="item.secondName" effect="dark" closable
            @close="getClose(item.secondName)" style="margin: 0 10px 0 0">
            {{ item.secondName }}
          </el-tag>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="getSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, create, getRemove } from '@/api/operation/tag'
export default {
  name: 'Tag',
  data() {
    return {
      // 表单
      form: {
        firstName: '',
        secondTags: []
      },
      // 校验
      rules: {
        firstName: [{
          required: true, message: '请输入一级标签', trigger: 'blur'
        }]
      },
      // 二级标签中间参数
      inputTags: '',
      // 列表
      tableData: [],
      // 弹窗
      dialogVisible: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      list().then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },

    // 编辑
    getDetail(row) {
      this.$router.push({
        path: '/operation/tag/detail',
        query: {
          id: row.id
        }
      })
    },

    // 删除
    getDelete(id) {
      this.$confirm('是否删除当前标签', '提示', {
        type: 'warning'
      }).then(() => {
        getRemove(id).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    // 添加二级标签
    getInput() {
      if (this.inputTags) {
        if (this.form.secondTags.findIndex(i => i.secondName === this.inputTags) === -1) {
          this.form.secondTags.push({
            secondName: this.inputTags
          })
        } else {
          this.$message.error('请勿新增相同的标签！')
        }
        this.inputTags = ''
      }
    },

    // 删除标签
    getClose(item) {
      this.form.secondTags.splice(this.form.secondTags.findIndex(i => i.secondName === item), 1)
    },

    // 取消
    cancel() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.inputTags = ''
      this.form.secondTags = []
    },

    // 确认
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          create(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success('新增成功！')
              this.getList()
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>