<template>
  <!-- 新增编辑 -->
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    style="top: 40px"
    :title="isUpdate ? '编辑按钮' : '新增按钮'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :labelCol="{ span: 5 }">
      <a-form-item label="按钮名称:" name="buttonName">
        <a-input v-model:value="form.buttonName" allow-clear placeholder="请输入按钮名称" />
      </a-form-item>
      <a-form-item label="按钮编码:" name="buttonCode">
        <a-input v-model:value="form.buttonCode" allow-clear placeholder="请输入按钮编码" :disabled="disabled" />
      </a-form-item>
      <a-form-item label="权限编码:" name="buttonPermissionCode">
        <a-input v-model:value="form.buttonPermissionCode" allow-clear placeholder="请输入权限编码" />
      </a-form-item>
      <a-form-item label="是否展示:" name="buttonVisible">
        <a-radio-group v-model:value="form.buttonVisible">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false"> 否 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="按钮位置:" name="buttonPlace" v-if="!disabled">
        <a-radio-group v-model:value="form.buttonPlace">
          <a-radio :value="1">更多</a-radio>
          <a-radio :value="2"> 操作栏 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="按钮图标:" name="buttonIcon" v-if="!disabled">
        <icon-select v-model:value="form.buttonIcon" placeholder="请选择图标"></icon-select>
      </a-form-item>
      <a-form-item label="路由URL:" name="customRouterUrl" v-if="!disabled">
        <a-input v-model:value="form.customRouterUrl" allow-clear placeholder="请输入路由URL" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup name="ButtonAddEdit">
import { deepClone } from '@/utils/common/util';
import { message } from 'ant-design-vue/es';
import { ref, onMounted, reactive, computed } from 'vue';

const props = defineProps({
  visible: Boolean,
  data: Object,
  // 已有列表
  list: {
    type: Array,
    default: []
  },
  // 当前索引
  currentIndex: Number
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);
// 是否是编辑状态
const isUpdate = ref(false);
// 表单数据
const form = ref({
  buttonVisible: true,
  buttonPlace: 1,
});

const formRef = ref();

// 是否禁用
const disabled = computed(() => {
  if (props.data?.buttonCode && ['add', 'edit', 'detail', 'delete', 'export'].includes(props.data.buttonCode)) {
    return true;
  }
  return false;
});

// 验证规则
const rules = reactive({
  buttonName: [{ required: true, message: '请输入按钮名称', type: 'string', trigger: 'blur' }],
  buttonCode: [{ required: true, message: '请输入按钮编码', type: 'string', trigger: 'blur' }],
  customRouterUrl: [{ required: true, message: '请输入路由URL', type: 'string', trigger: 'blur' }]
});

onMounted(() => {
  if (props.data) {
    isUpdate.value = true;
    form.value = Object.assign({}, props.data);
  } else {
    isUpdate.value = false;
  }
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  await formRef.value.validate();
  let list = deepClone(props.list);
  if (props.data) {
    list = list.filter((item, index) => index != props.currentIndex);
  }

  if (list.find(item => item.buttonCode == form.value.buttonCode)) {
    return message.warn('存在重复按钮编码，请重新输入');
  }
  emits('done', form.value);
  emits('update:visible', false);
};
</script>

<style></style>
