<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`绑定接口 ${params.menu_name}`"
    width="80%"
    @open="openDialog"
    @closed="closeDialog"
  >
    <DataTable
      ref="tableRef"
      style="width: 100%"
      :onSelectionChange="(data) => (selectionData = data)"
      :column="column"
      :params="params"
      :request="(params) => getMenuApiList(params)"
    >
    </DataTable>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleAddClick"> 添加 </el-button>
        <el-button type="danger" @click="handleDeleteClick"> 删除 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { getMenuApiList, addMenuApi, deleteMenuApi } from '~/service/menu';
const tableRef = ref();

const column = [
  {
    fixed: true,
    type: 'selection'
  },
  {
    prop: 'menu_api_url',
    label: '接口',
    width: '300'
  },
  {
    prop: 'menu_api_status_text',
    label: '状态',
    width: '150'
  }
];

const props = defineProps({
  modelValue: Boolean,
  data: Object,
  done: Function
});
const emits = defineEmits(['update:modelValue']);

const dialogVisible = ref(props.modelValue);
const selectionData = ref([]);

const params = reactive({
  menu_guid: '',
  menu_name: ''
});
watch(
  () => props.modelValue,
  (v) => {
    console.log('watch props.modelValue', v);
    dialogVisible.value = v;
  }
);

const openDialog = () => {
  params.menu_guid = props.data.menu_guid;
  params.menu_name = props.data.menu_name;
};

const closeDialog = () => {
  dialogVisible.value = false;
  emits('update:modelValue', false);
  props.done();
};

const handleAddClick = async () => {
  ElMessageBox.prompt('请输入接口地址', '添加接口', {
    inputPlaceholder: 'controller/action',
    async beforeClose(action, instance, done) {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        try {
          const value = instance.inputValue;
          if (!value) {
            throw new Error('请输入接口地址');
          }
          const { code, msg } = await addMenuApi({
            menu_guid: params.menu_guid,
            menu_api_url: value
          });
          if (code == 0) {
            tableRef.value.reload();
            done();
          } else {
            throw new Error(msg);
          }
        } catch (error) {
          instance.confirmButtonLoading = false;
          ElMessage.warning(error.message);
        }
      } else {
        done();
      }
    }
  });
};

const handleDeleteClick = async () => {
  if (selectionData.value.length == 0) {
    ElMessage.warning('请选择数据');
    return;
  }
  ElMessageBox.alert('您确定要删除选中接口吗？', '批量删除接口', {
    confirmButtonText: 'OK'
  }).then(async () => {
    const { code } = await deleteMenuApi({
      ...params,
      menu_api_guid: selectionData.value.map((v) => v.menu_api_guid).join()
    });
    if (code == 0) {
      tableRef.value.reload();
    }
  });
};
</script>
