<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="标签名称：">
        <el-input v-model="form.name" placeholder="请输入标签名称" clearable />
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
          <el-option v-for="item in disabledOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" plain icon="el-icon-plus" @click="getDialog('新增')"
          v-hasPermi="['operation:tag:add']">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      v-loading="loading">
      <el-table-column label="标签名称" prop="label" show-overflow-tooltip />
      <el-table-column label="标签Id" prop="id" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.level === 3 ? scope.row.id : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签排序" prop="sort" align="center" />
      <el-table-column label="当前状态" prop="status" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'danger' : ''">
            {{ selectDictLabel(disabledOptions, scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="菜单路径" align="center">
        <template slot-scope="scope">{{ scope.row.meanWay ? scope.row.meanWay : '-' }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getDialog('查看', scope.row, true)">查看</el-button>
          <el-button v-if="scope.row.level !== 3" type="text" @click="getDialog('新增', scope.row)"
            v-hasPermi="['operation:tag:add']">
            新增
          </el-button>
          <el-button type="text" v-if="scope.row.status === 0" @click="getChange(scope.row, 1)"
            v-hasPermi="['operation:tag:down']">下架</el-button>
          <span v-else>
            <el-button type="text" @click="getDialog('编辑', scope.row)" style="margin-left: 10px"
              v-hasPermi="['operation:tag:edit']">
              编辑
            </el-button>
            <el-button type="text" @click="getChange(scope.row, 0)" v-hasPermi="['operation:tag:up']">
              上架
            </el-button>
            <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['operation:tag:delete']">
              删除
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
      <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="auto"
        :disabled="title === '查看' ? true : false">
        <el-form-item label="标签名称：" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入标签名称" maxlength="100" show-word-limit
            :disabled="dialogForm.isEmpty === 0" />
        </el-form-item>
        <el-form-item label="标签状态：" prop="isEmpty" v-if="createLevelTwo() || editLevelTwo()">
          <el-checkbox v-model="dialogForm.isEmpty" :true-label="0" :false-label="1" @change="handleChange">
            允许为空</el-checkbox>
        </el-form-item>
        <el-form-item label="标签排序：" prop="sort">
          <el-input-number v-model="dialogForm.sort" :min="1" :step="1" step-strictly />
        </el-form-item>
      </el-form>
      <div slot="footer" v-if="title !== '查看'">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, submitFirst, submitSecond, detail, change, remove } from '@/api/operation/tag'
import { disabledMixin } from '@/mixin/index'
export default {
  mixins: [disabledMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {},
      // 列表
      tableData: [],
      // 弹窗
      dialogVisible: false,
      // 弹窗标题
      title: '新增',
      // 当前层级
      level: 0,
      // 弹窗表单
      dialogForm: {},
      // 校验
      rules: {
        sort: [{
          required: true, message: '请选择标签排序', trigger: 'change'
        }]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
          this.loading = false
        }
      })
    },

    // 重置
    getRefresh() {
      this.form = {}
      this.getList()
    },

    // 弹窗
    getDialog(title, row, boolean) {
      this.title = title
      this.level = row ? row.level : 0
      if (this.detailLevelThree() || this.createLevelThree() || this.editLevelThree()) {
        this.$router.push({
          path: '/operation/tag/detail',
          query: this.createLevelThree() ? {
            pid: row.id
          } : {
            id: row.id,
            disabled: boolean
          }
        })
      } else {
        this.dialogVisible = true
      }

      // 查看 / 编辑获取详情
      if (this.detailLevelOne() || this.detailLeveLTwo() || this.editLevelOne() || this.editLevelTwo()) {
        detail(row.id).then(res => {
          if (res.code === 0) {
            this.dialogForm = res.data
          }
        })
      }

      // 新增二级标签需传一级标签Id
      if (this.createLevelTwo()) {
        this.dialogForm.pid = row.id
      }
    },

    // 当二级标签选择为空 清空标签名称
    handleChange(e) {
      if (e === 0) {
        this.dialogForm.name = ''
      }
    },

    // 新增 / 编辑
    getSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.createLevelOne() || this.editLevelOne()) {
            submitFirst(this.dialogForm).then(res => {
              if (res.code === 0) {
                this.$message.success(`${this.title}成功！`)
                this.dialogVisible = false
                this.getList()
              }
            })
          } else if (this.createLevelTwo() || this.editLevelTwo()) {
            submitSecond(this.dialogForm).then(res => {
              if (res.code === 0) {
                this.$message.success(`${this.title}成功！`)
                this.dialogVisible = false
                this.getList()
              }
            })
          }
        } else {
          return false
        }
      })
    },

    // 上下架
    getChange(row, status) {
      let title = status === 0 ? '上架' : '下架'
      this.$confirm(`是否${title}${row.label}?`, '提示', {
        type: 'warning'
      }).then(() => {
        change(row.id, status).then(res => {
          if (res.code === 0) {
            this.$message.success(`${title}成功！`)
            this.getList()
          }
        })
      }).catch(() => { })
    },

    // 删除
    getDelete(row) {
      this.$confirm(`是否删除${row.label}?`, '提示', {
        type: 'warning'
      }).then(() => {
        remove(row.id).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      }).catch(() => { })
    },

    // 取消
    cancel() {
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    },

    // 新增一级标签
    createLevelOne() {
      return this.title === '新增' && this.level === 0 ? true : false
    },

    // 编辑一级标签
    editLevelOne() {
      return this.title === '编辑' && this.level === 1 ? true : false
    },

    // 查看一级标签
    detailLevelOne() {
      return this.title === '查看' && this.level === 1 ? true : false
    },

    // 新增二级标签
    createLevelTwo() {
      return this.title === '新增' && this.level === 1 ? true : false
    },

    // 编辑二级标签
    editLevelTwo() {
      return this.title === '编辑' && this.level === 2 ? true : false
    },

    // 查看二级标签
    detailLeveLTwo() {
      return this.title === '查看' && this.level === 2 ? true : false
    },

    // 新增三级标签
    createLevelThree() {
      return this.title === '新增' && this.level === 2 ? true : false
    },

    // 编辑三级标签
    editLevelThree() {
      return this.title === '编辑' && this.level === 3 ? true : false
    },

    // 查看三级标签
    detailLevelThree() {
      return this.title === '查看' && this.level === 3 ? true : false
    }
  }
}
</script>