<template>
  <div class="app-container">
    <div class="setting_title">商品属性</div>

    <el-card shadow="never" class="box-card">
      <el-tag
        :key="tag"
        v-for="tag in attrList"
        closable
        :disable-transitions="false"
        @close="handleClose(tag, 1)">
        {{tag}}
      </el-tag>
      <el-button class="button-new-tag" icon="el-icon-plus" size="small" @click="openAddForm(1)">添加属性</el-button>
    </el-card>

    <div class="setting_title" style="margin-top: 40px">商品标签</div>

    <el-card shadow="never" class="box-card">
      <el-tag
        :key="tag"
        v-for="tag in tagList"
        closable
        :disable-transitions="false"
        @close="handleClose(tag, 2)">
        {{tag}}
      </el-tag>
      <el-button class="button-new-tag" icon="el-icon-plus" size="small" @click="openAddForm(2)">添加标签</el-button>
    </el-card>

    <!-- 新增编辑 -->
    <el-dialog :title="addFormType == 1 ? '添加属性':'添加标签'" :visible.sync="addFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="60px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTagList, editTag } from '@/api/tag/goods_tag'

export default {
  data() {
    return {
      attrList: [],
      tagList: [],
      addFormType: 1,
      addFormVisible: false,
      addForm: {
        name: '',
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
      },
    }
  },
  computed: {
    ...mapGetters([
      'userid', 
      'name'
    ])
  },
  created() {
    this.getAttrList();
    this.getTagList();
  },
  methods: {
    // 获取属性
    getAttrList() {
      getTagList({
        pageNum: 1,
        pageSize: -1,
        type: 1,
      }).then(res => {
        let list = [];
        res.data.records.forEach(item => {
          list.push(item.goodsTagName);
        });
        this.attrList = list;
      })
    },

    // 获取标签
    getTagList() {
      getTagList({
        pageNum: 1,
        pageSize: -1,
        type: 2,
      }).then(res => {
        let list = [];
        res.data.records.forEach(item => {
          list.push(item.goodsTagName);
        });
        this.tagList = list;
      })
    },

    // 打开
    openAddForm(type) {
      this.addFormType = type;
      this.addFormVisible = true;
    },

    // 关闭
    cancelAddForm(){
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
    },

    // 删除
    handleClose(tag, type) {
      this.$confirm(type == 1 ? '确定删除该属性吗?' : '确定删除该标签吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let tags = [];
        if(type == 1) {
          tags = JSON.parse(JSON.stringify(this.attrList));
        } else if(type == 2) {
          tags = JSON.parse(JSON.stringify(this.tagList));
        }
        tags.splice(tags.indexOf(tag), 1);
        editTag({ 
          tags: tags.join(','),
          type: type
        }).then(res => {
          this.getAttrList();
          this.getTagList();
          this.$successMsg('删除成功');
        })
      }).catch(() => {});
    },

    // 提交
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let tags = [];
          if(this.addFormType == 1) {
            tags = JSON.parse(JSON.stringify(this.attrList));
          } else if(this.addFormType == 2) {
            tags = JSON.parse(JSON.stringify(this.tagList));
          }
          tags.push(this.addForm.name);
          editTag({ 
            tags: tags.join(','),
            type: this.addFormType
          }).then(res => {
            this.getAttrList();
            this.getTagList();
            this.$successMsg('添加成功');
            this.cancelAddForm();
          })
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    margin-top: 20px;
  }
  .el-tag {
    margin: 5px 10px 5px 0;
  }
  .button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>