<template>
  <div class="tag-list-box">
    <p class="tip pt-15px p-l-5px p-r-5px p-b-5px"
      >将上述条件设为快捷显示（最多5条）</p
    >
    <div class="flex items-center p-b-15px">
      <div class="flex-1">
        <t-form :data="formData" :rules="rules" ref="formRef">
          <t-form-item label="" :labelWidth="0" name="name">
            <t-input v-model="formData.name" maxlength="50" />
          </t-form-item>
        </t-form>
      </div>
      <t-button
        type="primary"
        class="m-l-10px"
        @click="save"
        :disabled="list.length >= 5"
        >保存</t-button
      >
    </div>
    <div class="tag-list flex" v-if="!!list.length">
      <div
        class="fast-tag"
        v-for="item in list"
        :key="item.id"
        @click="tagClick(item)"
      >
        <span class="title">{{ item.name }}</span>
        <MultiplyIcon class="icon" @click="deleteItem(item)" />
      </div>
    </div>
  </div>
</template>
<script name="TagList" setup>
import { MultiplyIcon } from 'tdesign-icons-vue-next';
import { ref, onMounted, reactive, nextTick } from 'vue';
import {
  getSopFastOptionsApi,
  saveSopFastOptionsApi,
  deleteSopFastOptionsApi,
} from '@/api/sop';
import { MessagePlugin } from 'tdesign-vue-next';
import bus from '@/utils/bus';
const emit = defineEmits(['tagClick']);
const formRef = ref();
const props = defineProps({
  type: String,
  contentType: String,
  fastOptionContent: {
    type: Object,
    default: () => ({
      dataList: [],
      metadataList: [],
      formWidgetMetadataOperation: '',
    }),
  },
});
const formData = reactive({
  name: '',
});
const rules = {
  name: [{ required: true, message: '请输入想要保存的快捷选项的名称' }],
};
const list = ref([]);
const getList = () => {
  getSopFastOptionsApi({
    type: props.type,
    contentType: props.contentType,
  }).then((res) => {
    list.value = res || [];
  });
};
onMounted(() => {
  getList();
});
const save = async () => {
  const valid = await formRef.value?.validate();
  if (valid !== true) return;

  saveSopFastOptionsApi({
    content: JSON.stringify(props.fastOptionContent),
    type: props.type,
    contentType: props.contentType,
    name: formData.name,
  }).then(() => {
    MessagePlugin.success('保存成功');
    formData.name = '';
    getList();
    setTimeout(() => {
      formRef.value?.clearValidate();
    }, 0);
    bus.emit('updateFast' + props.contentType);
  });
};
const tagClick = (item) => {
  let content = JSON.parse(item.content);
  emit('tagClick', content);
};
const deleteItem = (item) => {
  const confirmDia = DialogPlugin({
    header: '操作提示',
    body: `确定要删除这条快捷选项吗？`,
    confirmBtn: '确定',
    cancelBtn: '取消',
    attach: 'body',
    onConfirm: async () => {
      confirmDia.hide();
      deleteSopFastOptionsApi({ id: item.id }).then(() => {
        MessagePlugin.success('删除成功');
        getList();
        bus.emit('updateFast' + props.contentType);
      });
    },
  });
};
</script>
<style lang="less" scoped>
.tag-list {
  padding: 5px 0;
  flex-wrap: wrap;
  * {
    transition: all 0.2s;
  }
  .fast-tag {
    background-color: #e5e5e5;
    border-radius: 3px;
    padding: 3px 3px 3px 8px;
    margin-bottom: 6px;
    &:not(:last-child) {
      margin-right: 4px;
    }
    span.title {
      font-size: 12px;
      color: #262626;
    }
    .icon {
      color: #666;
      font-size: 22px;
      margin-left: 5px;
      cursor: pointer;
      &:hover {
        color: #262626;
      }
    }
  }
}
</style>
