<template>
  <!-- 详情 -->
  <common-drawer
    :width="formWidth"
    :visible="props.visible"
    :title="props.tableConfig?.businessName + '详情'"
    @close="updateVisible(false)"
  >
    <div class="action-button">
      <a-space>
        <template v-for="aItem in props.actionCustomButtonList" :key="aItem">
          <a-button
            v-if="props.showCustomButton(aItem) && aItem.buttonCode != 'detail'"
            :type="aItem.buttonCode == 'delete' ? 'danger' : 'primary'"
            class="border-radius flex"
            @click="buttonClick(aItem)"
          >
            <icon-font
              iconClass="icon-opt-bianji"
              color="#fff"
              v-if="aItem.buttonCode == 'edit'"
              :title="aItem.buttonName || '编辑'"
            ></icon-font>
            <icon-font
              iconClass="icon-opt-shanchu"
              color="#fff"
              v-else-if="aItem.buttonCode == 'delete'"
              :title="aItem.buttonName || '删除'"
            ></icon-font>
            <icon-font :iconClass="aItem.buttonIcon" :title="aItem.buttonName" color="#fff" v-else-if="aItem.buttonIcon"></icon-font>
            {{ aItem.buttonName }}
          </a-button>
        </template>
      </a-space>
    </div>
    <!-- 应用设计表单 -->
    <MoreFormViewer
      v-model:form="form.formDetail"
      :isEdit="isEdit"
      readonly
      :formDesignConfigList="formDesignConfigList"
      ref="moreFormViewerRef"
    />

    <!-- 新增编辑弹框 -->
    <PreviewAddEdit
      v-model:visible="showEdit"
      v-if="showEdit"
      :data="props.data"
      @done="closeEdit"
      :businessId="props.businessId"
      :tableConfig="props.tableConfig"
    />
  </common-drawer>
</template>

<script setup name="PreviewDetail">
import { ref, onMounted, createVNode } from 'vue';
import { PreviewApi } from '../api/PreviewApi';
import { message, Modal } from 'ant-design-vue/es';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import PreviewAddEdit from './preview-add-edit.vue';
import MoreFormViewer from '../../../form/preview/more-form-viewer.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  visible: Boolean,
  //当前行数据
  data: Object,
  //业务id
  businessId: String,
  // 业务配置详情
  tableConfig: Object,
  // 操作栏列表
  actionCustomButtonList: {
    type: Array,
    default: []
  },
  // 判断是否有操作权限
  showCustomButton: Function
});

const emits = defineEmits(['update:visible', 'done']);
// 表单数据
const form = ref({
  formDetail: {}
});
// ref
const moreFormViewerRef = ref(null);

// 是否是编辑
const isEdit = ref(false);

// 表单配置列表
const formDesignConfigList = ref([]);

// 是否显示编辑
const showEdit = ref(false);

// 表单宽度
const formWidth = ref(1000);

onMounted(() => {
  if (props?.tableConfig?.formDesignConfigList) {
    formWidth.value = props.tableConfig?.formDesignConfigList[0].formConfig?.formWidth ?? 1000;
    formDesignConfigList.value = JSON.parse(JSON.stringify(props?.tableConfig.formDesignConfigList));
    // 设置表单的值
    formDesignConfigList.value.forEach(item => {
      form.value.formDetail[item.formDefinitionId] = {};
    });
    if (props.data) {
      getDetail();
    }
  }
});

// 获取详情
const getDetail = async () => {
  const res = await PreviewApi.getDetail({ businessId: props.businessId, primaryKeyId: props.data.id });
  form.value = Object.assign({}, res.data);
  isEdit.value = true;
};

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

// 按钮点击
const buttonClick = item => {
  const { buttonCode } = item;
  if (buttonCode == 'edit') {
    showEdit.value = true;
  } else if (buttonCode == 'delete') {
    remove();
  } else {
    const { href } = router.resolve({
      path: item.customRouterUrl,
      query: {
        businessId: props.businessId,
        id: props.data?.id
      }
    });
    window.open(href, '_blank');
  }
};

// 删除
const remove = () => {
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中数据吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await PreviewApi.delete({ businessId: props.businessId, primaryKeyId: props.data.id });
      message.success(res.message);
      updateVisible(false);
      emits('done');
    }
  });
};

// 关闭编辑
const closeEdit = () => {
  getDetail();
  emits('done');
};
</script>

<style scoped lang="less">
.action-button {
  margin-bottom: 10px;
}
</style>
