<script name="editPersonInfoDialog" setup>
import { ref, getCurrentInstance, watch, nextTick } from 'vue'
import { tagList, saveToProject } from '@/http/apis/projectPortrait/tagsManage'
const { proxy } = getCurrentInstance(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  emits = defineEmits(['close']),
  loading = ref(false),
  dialogForm = ref({}),
  dialogFormRef = ref(),
  submit = async (formEl) => {
    if (!formEl) {
      return
    }
    formEl.validate(async (valid) => {
      if (valid) {
        loading.value = true
        try {
          const postData = dialogForm.value.tagId.map(i => {
            return {
              tagId: i,
              projectCode: props.data.projectCode
            }
          })
          await saveToProject(postData)
          proxy.$message.success('提交成功！')
          loading.value = false
          emits('close', true)
        } catch (e) {
          loading.value = false
        }
      }
    }
    )
  },
  tagListData = ref([]),
  selectLoading = ref(false),
  remoteMethod = async (query) => {
    selectLoading.value = true
    const res = await tagList(props.data.areaCode, {
      pageNumber: 1,
      pageSize: 10000,
      name: query
    })
    selectLoading.value = false
    tagListData.value = res.data.records
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      const res = await tagList(props.data.areaCode, {
        pageNumber: 1,
        pageSize: 10000
      })
      tagListData.value = res.data.records
      if (props.data?.tags?.length) {
        dialogForm.value = {
          tagId: props.data.tags.map(i => i.id)
        }
      } else {
        dialogForm.value = { tagId: [] }
        await nextTick()
        dialogFormRef.value.resetFields()
      }
    } else {
      dialogForm.value = {}
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="设置标签"
    width="600px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      label-width="auto"
      status-icon
      class="mt-16"
      label-suffix="："
    >
      <el-form-item label="标签" prop="tagId" :rules="[{required:true,message:'请选择'}]">
        <el-select
          v-model="dialogForm.tagId"
          class="w-full"
          multiple
          filterable
          remote
          :remote-method="remoteMethod"
          :loading="selectLoading"
        >
          <el-option
            v-for="(item,index) in tagListData"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        @click="submit(dialogFormRef)"
      >
        提交
      </el-button>
      <el-button
        @click="emits('close')"
      >
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
