<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 remarkList" :key="index + 'tag'">
        <a-textarea v-model:value="item.remarkContent" :rows="4" placeholder="请输入备注内容" >
        </a-textarea>
        <!-- 删除按钮 -->
        <a-button type="primary" danger ghost class="color-btn" v-if="index != remarkList.length - 1" @click="deleteRemark(index)">
          <close-outlined />
        </a-button>
        <!-- 添加按钮 -->
        <a-button type="primary" ghost class="color-btn" v-if="index == remarkList.length - 1" @click="addRemark"><plus-outlined /></a-button>
      </div>
    </div>
  </a-modal>
</template>

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

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

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

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

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

onMounted(() => {
  if (props.data?.remarkList?.length > 0) {
    remarkList.value = deepClone(props.data.remarkList);
  } else {
    remarkList.value = [
      {
        remarkContent: '',
      }
    ];
  }
});

const deleteRemark = index => {
  remarkList.value.splice(index, 1);
};

const addRemark = () => {
  let obj = {
    remarkContent: '',
  };
  remarkList.value.push(obj);
};

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

// 点击保存
const save = () => {
  if (remarkList.value.find(item => item.remarkContent == '')) {
    message.warning('备注内容不能为空');
    return;
  }

  let params = {
    instanceId: props.data.instanceId,
    userRemarkList: remarkList.value
  };

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

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

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

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

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