<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        class="filter-item"
        @click="dialogVisible = true"
      >
        添加标签
      </el-button>
    </div>

    <el-table
      :data="tagTable"
      border
    >
      <el-table-column
        label="标签名"
        prop="name"
        align="center"
      />
      <el-table-column
        label="链接"
        prop="link"
        align="center"
      />
      <el-table-column
        label="模板标签"
        prop="isFixed"
        align="center"
      >
        <template
          slot="header"
          slot-scope="{ column }"
        >
          <el-tooltip class="item" effect="dark" content="固定模板标签,不可删除" placement="top">
            <i class="el-icon-info">{{ column.label }}</i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        prop="status"
        align="center"
        width="100"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag
            :type="row.status === '0' ? 'success' : 'info'"
          >
            {{ row.status === '0' ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="添加时间"
        prop="time"
        align="center"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="mini"
          >
            设为模板标签
          </el-button>
          <el-button
            type="text"
            size="mini"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="mini"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogType === 'add' ? '添加标签' : '修改标签'"
      :visible.sync="dialogVisible"
      :before-close="closeDialogForm"
    >
      <el-form
        ref="tagForm"
        :model="tagForm"
        :rules="tagRules"
        label-width="100px"
      >
        <el-form-item label="标签名:" prop="name">
          <el-input
            v-model="tagForm.name"
            placeholder="标签名"
            size="mini"
            style="width:250px"
          />
        </el-form-item>
        <el-form-item label="链接:">
          <el-input
            v-model="tagForm.link"
            placeholder="链接"
            size="mini"
            style="width:250px"
          />
        </el-form-item>
        <el-form-item label="是否固定模板:" prop="isFixed">
          <el-radio v-model="tagForm.isFixed" label="1">是</el-radio>
          <el-radio v-model="tagForm.isFixed" label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogForm">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

const tagTable = [
  {
    name: '',
    link: '',
    isFixed: '',
    status: 0,
    time: ''
  }
]

export default {
  data() {
    return {
      tagTable: tagTable,
      dialogVisible: false,
      dialogType: 'add',
      tagForm: {
        name: '',
        link: '',
        isFixed: '0'
      },
      tagRules: {
        name: [
          { required: true, message: '请输入标签名', trigger: 'blur' }
        ],
        isFixed: [
          { required: true, message: '请选择是否为固定模板', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 关闭添加修改弹窗
    closeDialogForm() {
      this.dialogVisible = false
      this.$refs.tagForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
