<template>
  <div class="app-container">

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button type="primary" size="small" @click="addGroup">新增标签组</el-button>
          <el-button size="small" @click="syncTag">同步企业标签</el-button>
        </div>
      </div>

      <div class="table">
        <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit stripe>
          <el-table-column label="标签组" prop="tagGroupName" width="120"></el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <el-tag v-for="(item, index) in scope.row.tags" :key="index" size="medium">{{item.name}}</el-tag>
              <el-button size="mini" icon="el-icon-plus" @click="addTag(scope.row.tagGroupId)">添加</el-button>
            </template>
          </el-table-column>
          
          <el-table-column align="center" label="操作" fixed="right" width="160">
            <template slot-scope="scope">
              <template v-if="checkBtnRole('status')">
                <el-button type="primary" @click="editGroup(scope.row)" size="mini">编辑</el-button>
                <el-popconfirm title="确定删除该标签组吗？" @onConfirm="deleteGroup(scope.row.tagGroupId)" style="margin-left: 10px">
                  <el-button slot="reference" size="mini">删除标签组</el-button>
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    <!-- 新增标签组 -->
    <el-dialog title="新增标签组" :visible.sync="addGroupFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addGroupForm" :model="addGroupForm" :rules="addGroupFormRules" label-position="left" label-width="100px">
        <el-form-item label="标签组名称" prop="groupName">
          <el-input v-model="addGroupForm.groupName" autocomplete="off" placeholder="请输入标签组名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddGroupForm">取 消</el-button>
        <el-button type="primary" @click="submitAddGroupForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑标签组 -->
    <el-dialog title="编辑标签组" :visible.sync="editFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="editForm" :model="editForm" :rules="editFormRules" label-position="right" label-width="100px">
        <el-form-item label="标签组名称" prop="groupName">
          <el-input v-model="editForm.groupName" autocomplete="off" placeholder="请输入标签组名称"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <div v-for="(item, index) in editForm.tags" :key="index">
            <el-input v-model="item.name" autocomplete="off" style="margin-bottom: 10px">
              <el-button slot="append" icon="el-icon-delete" @click="deleteTag(index)"></el-button>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditForm">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增标签 -->
    <el-dialog title="新增标签" :visible.sync="addTagFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addTagForm" :model="addTagForm" :rules="addTagFormRules" label-position="left" label-width="100px">
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="addTagForm.tagName" autocomplete="off" placeholder="请输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddTagForm">取 消</el-button>
        <el-button type="primary" @click="submitAddTagForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getTagList, syncTag, addGroup, deleteGroup, addTag, editGroup, getTagListById } from "@/api/tag/user_tag";

export default {
  name: "index",
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      addGroupFormVisible: false,
      addGroupForm: {
        groupName: '', // 名称
      },
      addGroupFormRules: {
        groupName: [
          { required: true, message: '请输入标签组名称', trigger: 'blur' }
        ]
      },

      addTagGroupId: null,
      addTagFormVisible: false,
      addTagForm: {
        tagName: '', // 名称
      },
      addTagFormRules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },

      editFormVisible: false,
      editForm: {
        tagGroupId: null,
        groupName: '',
        tags: [],
      },
      editFormRules: {
        groupName: [
          { required: true, message: '请输入标签组名称', trigger: 'blur' }
        ]
      },

    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true
    },

    // 获取列表
    getList() {
      getTagList().then(res => {
        this.dataList = res.data;
        this.listLoading = false;
      })
    },
    
    // 同步
    syncTag() {
      this.$confirm('是否要同步企业微信的标签信息?', '同步企业标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        syncTag().then(res => {
          this.getList();
          this.$successMsg('同步成功');
        })
      });
    },

    // 删除标签组
    deleteGroup(tagGroupId) {
      deleteGroup({tagGroupId}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 新增标签组
    addGroup() {
      this.addGroupFormVisible = true;
    },

    // 取消 新增标签组
    cancelAddGroupForm(){
      this.addGroupFormVisible = false;
      this.$refs.addGroupForm.resetFields();
    },

    // 提交 新增标签组
    submitAddGroupForm() {
      this.$refs.addGroupForm.validate((valid) => {
        if (valid) {
          let params = {
            groupName: this.addGroupForm.groupName,
          }
          addGroup(params).then(res => {
            this.cancelAddGroupForm();
            this.getList();
            this.$successMsg('新增成功');
          })
        }
      })
    },

    // 新增标签
    addTag(tagGroupId) {
      this.addTagFormVisible = true;
      this.addTagGroupId = tagGroupId;
    },

    // 取消 新增标签
    cancelAddTagForm(){
      this.addTagFormVisible = false;
      this.$refs.addTagForm.resetFields();
    },

    // 提交 新增标签
    submitAddTagForm() {
      this.$refs.addTagForm.validate((valid) => {
        if (valid) {
          let params = {
            tagGroupId: this.addTagGroupId,
            tagName: this.addTagForm.tagName,
          }
          addTag(params).then(res => {
            this.cancelAddTagForm();
            this.getList();
            this.$successMsg('新增成功');
          })
        }
      })
    },

    // 删除标签
    deleteTag(index) {
      this.editForm.tags.splice(index, 1);
    },

    // 编辑标签组
    editGroup(row) {
      this.editFormVisible = true;
      this.editForm.tagGroupId = row.tagGroupId;
      this.editForm.groupName = row.tagGroupName;
      getTagListById({
        tagGroupId: row.tagGroupId
      }).then(res => {
        this.editForm.tags = res.data;
      })
    },

    // 取消 编辑标签组
    cancelEditForm(){
      this.editFormVisible = false;
      this.$refs.editForm.resetFields();
    },

    // 提交 新增标签
    submitEditForm() {
      let that = this;
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          Promise.all(this.editForm.tags.map(function(item){
            return new Promise(function(resolve, reject){
              if(!item.name) {
                that.$errorMsg('标签名称不能为空');
                return false;
              }
              resolve();
            })
          })).then(function(){
            editGroup(that.editForm).then(res => {
              that.cancelEditForm();
              that.getList();
              that.$successMsg('编辑成功');
            })
          })
        }
      })
    },

  }
}
</script>

<style scoped>
  .table >>> .el-tag {
    margin-right: 6px;
    margin-top: 3px;
    margin-bottom: 3px;
  }
  .table >>> .el-tag:last-child {
    margin-right: 0;
  }
  .table >>> th:first-child {
    text-align: left !important;
  }
  .table >>> th:last-child {
    text-align: center !important;
  }
</style>