<script setup name="menuDialog">
import { getCurrentInstance, ref, watch, nextTick } from 'vue'
import { tagDel, tagList, tagSave } from '@/http/apis/performanceEvaluation/indicatorTemplate'
const { proxy } = getCurrentInstance(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  emits = defineEmits(['close']),
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '标签名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '涉及项目指标',
      key: 'relatedNum',
      prop: 'relatedNum'
    },
    {
      label: '操作',
      slot: 'action',
      width: '160',
      fixed: 'right'
    }
  ],
  data = ref([]),
  total = ref(0),
  tableListRef = ref(),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await tagList({
      ...pageParams
    })
    total.value = res.data.total
    data.value = res.data.records
  },
  formTitle = ref(''),
  edit = (type, data) => {
    if (type === 0) {
      formTitle.value = '新增标签'
      form.value = {}
    } else {
      formTitle.value = '编辑标签'
      form.value = {
        ...data
      }
    }
    formDialogVisible.value = true
  },
  del = (data) => {
    proxy.$messageBox
      .confirm('确定要删除该标签吗?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await tagDel(data.id)
        proxy.$message.success('删除成功！')
        await getTableData()
      })
  },
  formRef = ref(),
  form = ref(),
  formDialogVisible = ref(false),
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        const postData = {
          ...form.value
        }
        await tagSave(postData)
        proxy.$message.success('编辑成功！')
        formDialogVisible.value = false
        getTableData()
      }
    })
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      await nextTick()
      getTableData()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="项目指标标签管理"
    width="600px"
    destroy-on-close
    :close-on-click-modal="false"
    @close="emits('close')"
  >
    <p style="text-align: right">
      <el-button
        class="mb-8"
        icon="Plus"
        type="primary"
        @click="edit(0)"
      >新增标签</el-button>
    </p>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #action="{scope}">
        <a @click="edit(1,scope.row)">编辑</a>
        <a class="text-danger" @click="del(scope.row)">删除</a>
      </template>
    </table-list>
  </el-dialog>
  <el-dialog
    :model-value="formDialogVisible"
    width="400px"
    :title="formTitle"
    @close="formDialogVisible=false"
  >
    <el-form ref="formRef" :model="form">
      <el-form-item label="标签名称" :rules="[{required:true,message:'请输入'}]" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="formDialogVisible=false">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
