<template>
  <app-dialog
    v-model="visible"
    :fullscreen="true"
    :loading="loading"
    :title="title"
    append-to-body
    class="detail-dialog"
    width="550px"
    @cancel="onCancel"
    @confirm="onConfirm"
  >
    <el-form ref="form" :label-position="labelPosition" :model="form" :rules="rules" label-width="110px">
      <!--      <el-divider content-position="left"><i class="el-icon-tickets" style="color: rgb(24, 144, 255)" /><span class="divider-top">基础信息</span></el-divider>-->
      <el-row :gutter="15" style="flex-wrap: wrap; margin-left: 5vw;margin-top: 1vw" type="flex">
        <app-filter-item label="接口名称:" prop="apiName">
          <span>{{ form.apiName }}</span>
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap; margin-left: 5vw" type="flex">
        <app-filter-item label="数据库:" prop="dbAlias">
          <span>{{ form.dbAlias }}</span>
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw;margin-top: 1vh " type="flex">
        <app-filter-item :span="12" label="接口地址:" prop="apiUrl">
          <span>{{ form.apiUrl }}</span>
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw;margin-top: 1vh " type="flex">
        <app-filter-item :span="12" label="接口描述:" prop="apiDesc">
          <span>{{ form.apiDesc }}</span>
        </app-filter-item>
      </el-row>
      <!--      <el-divider content-position="left"><i class="el-icon-setting" style="color: rgb(24, 144, 255)" /><span class="divider-top">接口配置</span></el-divider>-->
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw" type="flex">
        <app-filter-item :span="6" label="请求方式:" prop="apiMode">
          <span>{{ form.apiMode }}</span>
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw;margin-top: 1vh" type="flex">
        <app-filter-item :span="16" label="SQL查询语句" prop="apiSql">
          <el-input v-model="form.apiSql" placeholder="请在此输入sql代码" style="background-color: black; color: white;" type="textarea" />
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw;margin-top: 5vh" type="flex">
        <app-filter-item :span="24" label="请求参数说明" prop="requestParams">
          <el-table :data="formdata" style="width: 60%;">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column label="是否必填" prop="required" />
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
        <app-filter-item :span="24" label="请求头说明" prop="requestHeader">
          <!--          <request-header />-->
          <el-table :data="formdata" style="width: 60%">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column label="是否必填" prop="required" />
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
        <app-filter-item :span="16" label="请求参数样例" prop="requestExample">
          <el-input v-model="form.requestExample" clearable placeholder="请输入javascript代码" style="background-color: black; color: white;" type="textarea" />
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw;margin-top: 5vh" type="flex">
        <app-filter-item :span="24" label="返回参数说明" prop="responseParams">
          <!--          <return-description />-->
          <el-table :data="formdata" style="width: 60%">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column label="是否必填" prop="required" />
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
        <app-filter-item :span="16" label="返回数据样例" prop="responseExample">
          <el-input
            v-model="form.responseExample"
            clearable
            placeholder="请输入javascript代码"
            style="background-color: black; color: white;"
            type="textarea"
          />
        </app-filter-item>
      </el-row>
      <el-row :gutter="15" style="flex-wrap: wrap;margin-left: 5vw;margin-top: 5vh" type="flex">
        <app-filter-item :span="24" label="响应状态码信息" prop="responseStatus">
          <!--          <response-message />-->
          <el-table :data="formdata" style="width: 60%">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column label="是否必填" prop="required" />
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import interfaceId from '@/api/business/dataServiceAPI';
import dialogMixin from '@/mixins/dialog.js';

export default {
  name: 'CompanyDialog',
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => [],
    },
    addId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // formdata: [{ param: 'cacac', comment: 'sadfhabasjf', type: '是', required: false }],
      formdata: [],
      // tabItemId: 1, // 表格数据的 id
      labelPosition: 'left',
      timeValue: '',
      qurey: '',
      mode: '',
      sqloptions: [],
      form: {
        sourceType: '1',
        sql: '',
        apiQureyType: '',
        // 本应该将其改为初始化空数组
        // params: [
        //   { param: 'name_', comment: '学生姓名', type: 'string', required: 'false' },
        //   { param: 'page', comment: '页码', type: 'integer', required: 'false' },
        //   { param: 'limit', comment: '每页大小', type: 'integer', required: 'false' },
        // ],
        // params: [],
        apiDesc: '',
        apiMode: '',
        apiName: '',
        apiSql: '',
        apiUrl: '',
        dbAlias: '',
        requestExample: '',
        requestHeader: '',
        requestParams: [],
        responseExample: '',
        responseParams: '',
        responseStatus: '',
      },
      loading: false,
      rules: [],
    };
  },
  created() {
    // this.fetchRequestParams();
    // this.onConfirm();
    // this.interfaceShow('1861698613869289472');
    // console.log('我的数目', this.currentRow);
  },

  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      // console.log('idididi', this.addId); // 进页面打印id
      // const orgForm = this.$options.data().form;
      // this.form = { ...orgForm, ...data };
      // this.$nextTick(() => {
      //   this.$refs.form.clearValidate();
      // });
      console.log(data.id, data, '--------------');
      this.interfaceShow(data.id);
    },
    // 数据源接口调用    浏览接口文档
    interfaceShow(id) {
      // console.log(id, '------------');
      interfaceId
        .interfaceData(id)
        .then(res => {
          // console.log('cacacacssaa', res);
          // console.log('cacacacssaa11', res.value);
          this.formdata = res.params || [];
          const data = res.value;
          this.form = {
            apiDesc: data.apiDesc,
            apiMode: data.apiMode,
            apiName: data.apiName,
            apiQureyType: data.apiQureyType,
            apiSql: data.apiSql,
            apiUrl: data.apiUrl,
            dbAlias: data.dbAlias,
            requestExample: data.requestExample,
            requestHeader: data.requestHeader,
            responseExample: data.responseExample,
            responseParams: data.responseParams ? JSON.parse(data.responseParams) : [],
            responseStatus: data.responseStatus,
          };
          this.form.requestParams = JSON.parse(data.requestParams);
        })
        .catch(error => {
          console.error('获取数据源失败', error);
        });
    },
    // fetchRequestParams() {
    //   // // 模拟从后端获取的数据;
    //   const requestParams = [{ param: 'name_', comment: '学生姓名', type: 'string', required: 'false' }];
    //   this.form.params = requestParams;
    //
    //   // 此处有错误---------------
    //   console.log('----1', this.form.params);
    //   // console.log('----333', this.form.params[0].param);
    // },
    // 取消按钮
    onCancel() {
      this.visible = false;
      this.form = {};
    },
    // 确定按钮-新增后接口调用，展示在列表
    onConfirm() {
      // this.$refs.form.validate(async valid => {
      //   if (valid) {
      //     this.form.catalogId = this.addId;
      //     interfaceId
      //       .addAction(this.form, false)
      //       .then(res => {
      //         console.log(res);
      //         // this.visible = false;
      //       })
      //       .catch(error => {
      //         console.error('获取数据失败', error);
      //       });
      //   } else {
      //     console.log('表单验证失败，请检查所有必填项');
      //     return false;
      //   }
      // });
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.divider-top {
  color: rgb(24, 144, 255);
  font-weight: bold;
  font-size: 16px;
  margin-left: 5px;
}

.custom-textarea {
  background-color: black;
  color: white;
}

.detail-dialog {
}

.app-filter-item {
  ::v-deep {
    .el-form-item .el-form-item__label {
      color: #000000a6;
      font-size: 16px;
      font-weight: 700;
    }
  }
}

.el-form {
  height: 85vh;
  width: 80%;
  margin: 0 auto;
  border: solid 1px #e0e0e0;
  background-color: #fff;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.button-footer {
  margin-top: 20px;
  //border: solid 1px red;
  position: absolute;
  right: 150px;
  bottom: 0;
}

.el-dialog__header {
  border: solid 1px red;
}
</style>
