<template>
  <app-dialog v-model="visible" :fullscreen="true" :hide-footer="true" :loading="loading" :title="title" append-to-body
              class="detail-dialog" width="550px"
  >
    <el-form ref="form" :label-position="labelPosition" :model="form" :rules="rules" label-width="130px">
      <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-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="18" label="SQL查询语句:" prop="apiSql">
          <!--          <el-input v-model="form.apiSql" placeholder="请在此输入sql代码" style="background-color: black; color: white;" type="textarea" />-->
          <code-editor v-model="form.apiSql" :full-screen="true" disabled="1" language="sql"
                       style="min-height: 100px"
          />
        </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="formdataa" style="width: 72%; border: solid 1px #e8e8e8">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column
              label="是否必填"
              prop="required"
            >
              <template #default="{row}">
                {{ row.required === '' ? '' : row.required ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
        <app-filter-item :span="24" label="请求头说明:" prop="requestHeader">
          <el-table :data="formdatab" style="width: 72%; border: solid 1px #e8e8e8">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column
              label="是否必填"
              prop="required"
            >
              <template #default="{row}">
                {{ row.required === '' ? '' : row.required ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
        <app-filter-item :span="18" label="请求参数样例:" prop="requestExample">
          <code-editor v-model="form.requestExample" :full-screen="true" disabled="1" language="sql"
                       style="min-height: 100px"
          />
        </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">
          <el-table :data="formdatac" style="width: 72%; border: solid 1px #e8e8e8">
            <el-table-column label="参数名称" prop="param" width="180" />
            <el-table-column label="类型" prop="type" width="180" />
            <el-table-column label="说明" prop="comment" />
          </el-table>
        </app-filter-item>
        <app-filter-item :span="18" label="返回数据样例:" prop="responseExample">
          <code-editor v-model="form.responseExample" :full-screen="true" disabled="1" language="sql"
                       style="min-height: 100px"
          />
        </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">
          <el-table :data="formdatad" style="width: 72%; border: solid 1px #e8e8e8">
            <el-table-column label="参数编码" prop="code" width="180" />
            <el-table-column label="参数说明" prop="comment" />
          </el-table>
        </app-filter-item>
      </el-row>
    </el-form>
    <el-row>
      <el-button class="btn" @click="shutDown">关闭</el-button>
    </el-row>
  </app-dialog>
</template>

<script>
import API from '@/api/business/shareApi'
import dialogMixin from '@/mixins/dialog.js'
import codeEditor from '@/components/codeEditor/index.vue'

export default {
  name: 'CompanyDialog',
  components: {codeEditor},
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => []
    },
    addId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formdataa: [],
      formdatab: [],
      formdatac: [],
      formdatad: [],
      labelPosition: 'left',
      timeValue: '',
      qurey: '',
      mode: '',
      sqloptions: [],
      form: {
        sourceType: '1',
        sql: '',
        apiQureyType: '',
        // 本应该将其改为初始化空数组
        // params: [],
        apiDesc: '',
        apiMode: '',
        apiName: '',
        apiSql: '',
        apiUrl: '',
        dbAlias: '',
        requestExample: '',
        requestHeader: '',
        // requestParams: [],
        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, '------------');
      API.interfaceData(id)
        .then((res) => {
          console.log('cacacacssaa1111', res)
          const requestParamsData = JSON.parse(res.value.requestParams || '[]') // 请求参数说明
          const requestHeaderData = JSON.parse(res.value.requestHeader || '[]') // 请求头说明
          const responseParamsData = JSON.parse(res.value.responseParams || '[]') // 返回参数说明
          const responseStatusData = JSON.parse(res.value.responseStatus || '[]') // 响应状态码信息
          this.formdataa = requestParamsData
          this.formdatab = requestHeaderData
          this.formdatac = responseParamsData
          this.formdatad = responseStatusData
          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,
            requestParams: data.requestParams,
            responseExample: data.responseExample,
            responseParams: data.responseParams ? JSON.parse(data.responseParams) : [],
            responseStatus: data.responseStatus
          }
        })
        .catch((error) => {
          console.error('获取数据源失败', error)
        })
    },
    // 取消按钮
    onCancel() {
      this.visible = false
      this.form = {}
    },
    shutDown() {
      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;
}

.btn {
  float: right;
  margin-right: 190px;
  margin-top: 10px;
}

//el-table-column背景色
//.el-table > .el-table__header th {
//  background-color: #f5f5f5; /* 你想要的背景颜色 */
//}
</style>
