<template>
  <a-modal
    :width="1200"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="数据加载"
    :body-style="{ padding: '8px 16px', height: '70vh' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-form layout="vertical" v-if="formConfig.currentItem?.formItemDataLoad">
      <a-row :gutter="16" style="height: 100%">
        <a-col :span="4" class="first-col" style="height: 100%">
          <a-radio-group v-model:value="formConfig.currentItem.formItemDataLoad.dataLoadType">
            <a-radio :value="1" class="radio-item">静态数据</a-radio>
            <a-radio :value="2" class="radio-item">API调用</a-radio>
            <a-radio :value="3" class="radio-item">当前用户信息</a-radio>
          </a-radio-group>
        </a-col>
        <a-col :span="13" style="height: 100%">
          <a-form layout="vertical" :model="formConfig.currentItem.formItemDataLoad" :rules="rules" ref="formRef">
            <template v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 1">
              <a-form-item label="静态数据值" name="staticData">
                <a-textarea v-model:value="formConfig.currentItem.formItemDataLoad.staticData" :rows="4" placeholder="请输入"></a-textarea>
              </a-form-item>
            </template>
            <template v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 2">
              <a-form-item label="远程接口URL" name="apiUrl">
                <a-input v-model:value="formConfig.currentItem.formItemDataLoad.apiUrl" placeholder="请输入" allowClear></a-input>
              </a-form-item>
              <a-form-item label="HTTP方法" name="httpMethod">
                <a-radio-group v-model:value="formConfig.currentItem.formItemDataLoad.httpMethod">
                  <a-radio value="get">GET方法</a-radio>
                  <a-radio value="post">POST方法</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="参数列表" name="apiRequestParamList">
                <a-form-item-rest>
                  <common-table
                    :columns="columns"
                    size="middle"
                    rowId="id"
                    ref="tableRef"
                    :height100="false"
                    :rowSelection="false"
                    :showToolTotal="false"
                    :isPage="false"
                    :dataSource="formConfig.currentItem.formItemDataLoad.apiRequestParamList"
                  >
                    <template #toolRight>
                      <a @click="addClick">新增</a>
                      <a style="color: #60666b" @click="clearAll">清空</a>
                    </template>
                    <template #bodyCell="{ column, record, index }">
                      <template v-if="column?.key == 'index'">{{ index + 1 }}</template>
                      <template v-if="['paramName', 'paramValue', 'paramDesc'].includes(column?.dataIndex)">
                        <a-input v-model:value="record[column.dataIndex]" allowClear placeholder="请输入"></a-input>
                      </template>
                      <template v-if="column?.key == 'action'">
                        <icon-font
                          iconClass="icon-opt-shanchu"
                          font-size="24px"
                          title="删除"
                          color="#60666b"
                          @click="remove(index)"
                        ></icon-font>
                      </template>
                    </template>
                  </common-table>
                </a-form-item-rest>
              </a-form-item>
            </template>
            <template v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 3">
              <a-form-item label="HTTP方法" name="userInfoFieldName">
                <a-radio-group v-model:value="formConfig.currentItem.formItemDataLoad.userInfoFieldName">
                  <a-radio value="1">当前用户姓名</a-radio>
                  <a-radio value="2">当前用户的公司</a-radio>
                  <a-radio value="3">当前用户的部门</a-radio>
                </a-radio-group>
              </a-form-item>
            </template>
          </a-form>
        </a-col>
        <a-col :span="7" class="three-col" style="height: 100%">
          <template v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 1">
            <div class="three-col-h">提示：</div>
            <div class="three-col-b">请直接填写固定值，该值会直接显示在表单元素上。</div>
          </template>
          <template v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 2">
            <div class="three-col-h">说明：</div>
            <div class="three-col-b">1. Url填写请以/开头，例如/sysUser/validateUser</div>
            <div class="three-col-b">2. Get方法参数会传递在param参数上Post方法的参数会产地在Body上，使用Json进行参数拼接</div>
            <div class="three-col-b">3.Value如需传递表单中的某些值，请使用#开头，例如：#formObj.formData.user_real_name</div>
          </template>
          <template v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 3">
            <div class="three-col-h">说明：</div>
            <div class="three-col-b">采用当前用户信息时，加载表单元素时候，会自动获取当前用户的姓名、公司、当前用户的部门等信息。</div>
          </template>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup name="DataLoadingConfig">
import { ref, onMounted, reactive } from 'vue';

const props = defineProps({
  visible: Boolean,
  formConfig: Object,
});

const emits = defineEmits(['update:visible']);
// 弹框加载
const loading = ref(false);

const rules = reactive({
  staticData: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
  apiUrl: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
  httpMethod: [{ required: true, message: '请选择', type: 'string', trigger: 'change' }],
  userInfoFieldName: [{ required: true, message: '请选择', type: 'string', trigger: 'change' }]
});

const formRef = ref(null);

// 表格配置
const columns = ref([
  {
    key: 'index',
    title: '序号',
    width: 60,
    align: 'center',
    isShow: true,
    hideInSetting: true
  },
  {
    dataIndex: 'paramName',
    title: 'Key',
    width: 150,
    isShow: true
  },
  {
    dataIndex: 'paramValue',
    title: 'Value',
    width: 150,
    isShow: true
  },
  {
    dataIndex: 'paramDesc',
    title: 'Description',
    width: 150,
    isShow: true
  },
  {
    key: 'action',
    title: '操作',
    width: 80,
    isShow: true
  }
]);

onMounted(() => {
  if (!props.formConfig.currentItem?.formItemDataLoad) {
    props.formConfig.currentItem.formItemDataLoad = {
      apiRequestParamList: [],
      apiUrl: '',
      dataLoadType: 1,
      httpMethod: '',
      staticData: '',
      userInfoFieldName: ''
    };
  }
});

const addClick = () => {
  let obj = { paramName: '', paramValue: '', paramDesc: '' };
  props.formConfig.currentItem.formItemDataLoad.apiRequestParamList.push(obj);
};

const clearAll = () => {
  props.formConfig.currentItem.formItemDataLoad.apiRequestParamList = [];
};

const remove = index => {
  props.formConfig.currentItem.formItemDataLoad.apiRequestParamList.splice(index, 1);
};

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

// 点击保存
const save = async () => {
  await formRef.value.validate();
  updateVisible(false);
};
</script>

<style lang="less" scoped>
.ant-form {
  height: 100%;
}
.ant-row {
  .first-col {
    border-right: 1.5px solid #eee;
    .ant-radio-group {
      width: 100%;
    }

    .radio-item {
      width: 100%;
      display: flex;
      padding: 8px;
      gap: 4px;
      align-self: stretch;
      border-radius: 4px;
      border: 1px solid rgba(197, 207, 209, 0.6);

      &:not(:last-child) {
        margin-bottom: 16px;
      }
    }

    .ant-radio-wrapper-checked {
      border-color: #3f78df;
    }
  }

  .three-col {
    border-radius: 6px;
    background: rgba(246, 246, 249, 0.85);
    display: flex;
    padding: 16px;
    flex-direction: column;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;

    .three-col-h {
      color: #60666b;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    .three-col-b {
      color: #60666b;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}
</style>
