<template>
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="标签管理"
    :body-style="{ paddingBottom: '8px', height: '400px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <div class="tag-list">
      <div class="tag-item" v-for="(item, index) in tagList" :key="index + 'tag'">
        <a-input v-model:value="item.tagName" placeholder="请输入标签内容"></a-input>
        <div class="color-group">
          <div v-for="cItem in colorList" :key="cItem" class="color-item" :style="{ background: cItem }" @click="colorClick(item, cItem)">
            <check-outlined class="color-select" v-if="item.tagColor == cItem" />
          </div>
        </div>
        <!-- 删除按钮 -->
        <a-button type="primary" danger ghost class="color-btn" v-if="index != tagList.length - 1" @click="deleteTag(index)">
          <close-outlined />
        </a-button>
        <!-- 添加按钮 -->
        <a-button type="primary" ghost class="color-btn" v-if="index == tagList.length - 1" @click="addTag"><plus-outlined /></a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup name="TagManage">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { deepClone } from '@/utils/common/util';
import { FlowTagApi } from '../../api/FlowTagApi';

const props = defineProps({
  visible: Boolean,
  data: {
    type: Object,
    default: {}
  }
});

const emits = defineEmits(['update:visible', 'done']);

// 弹框加载状态
const loading = ref(false);

// 标签列表
const tagList = ref([]);

const colorList = ref(['#ff453b', '#ff823b', '#ffd03b', '#151aff', '#1bb854']);

onMounted(() => {
  if (props.data?.tagList?.length > 0) {
    tagList.value = deepClone(props.data.tagList);
  } else {
    tagList.value = [
      {
        tagName: '',
        tagColor: '#ff453b'
      }
    ];
  }
});

const deleteTag = index => {
  tagList.value.splice(index, 1);
};

const addTag = () => {
  if (tagList.value.length == 5) {
    message.warning('最多只能添加五个标签!');
    return;
  }
  let obj = {
    tagName: '',
    tagColor: '#ff453b'
  };
  tagList.value.push(obj);
};

// 颜色选中
const colorClick = (item, cItem) => {
  item.tagColor = cItem;
};

// 切换弹框显示隐藏状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  if (tagList.value.find(item => item.tagName == '')) {
    message.warning('标签内容不能为空');
    return;
  }

  let params = {
    instanceId: props.data.instanceId,
    runtimeTagList: tagList.value
  };

  FlowTagApi.updateUserTag(params).then(res => {
    if (res.code == '00000') {
      emits('done', tagList.value);
      emits('update:visible', false);
    }
  });
};
</script>

<style scoped lang="less">
.tag-list {
  width: 100%;
  height: 100%;
}

.tag-item {
  display: flex;
  width: 100%;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

.color-group {
  display: flex;
  align-items: center;
  border: 1px solid #dadbde;
  margin: 0 10px;
  padding: 6px 10px;
  border-radius: 4px;

  .color-item {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &:not(:last-child) {
      margin-right: 10px;
    }

    .color-select {
      font-size: 12px;
      color: #fff;
    }
  }
}

.color-btn {
  height: 32px !important;
  line-height: 10px !important;
  padding: 8px 10px !important;
}
</style>
