<template>
  <app-dialog v-model="visible" :hide-footer="true" :loading="loading" :title="title" append-to-body
              class="detail-dialog" width="1500px"
  >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form class="demo-table-expand" inline label-position="left">
            <!--            <el-form-item label="访问接口名称:">-->
            <!--              <span>{{ props.row.apiName }}</span>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="访问接口URL地址:">-->
            <!--              <span>{{ props.row.apiUrl }}</span>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item label="请求访问时间:">-->
            <!--              <span>{{ props.row.requestTime }}</span>-->
            <!--            </el-form-item>-->
            <el-form-item label="请求参数信息:">
              <span class="divider">{{ props.row.requestParams }}</span>
            </el-form-item>
            <el-form-item label="返回参数信息:">
              <span class="divider">{{ props.row.responseResult }}</span>
            </el-form-item>
            <el-form-item label="客户端访问IP地址:">
              <span>{{ props.row.requestIp }}</span>
            </el-form-item>
            <el-form-item label="接口响应时长:">
              <span>{{ props.row.responseTimeLength }}</span>
            </el-form-item>
            <!--            <el-form-item label="请求执行状态:">-->
            <!--              <el-radio-group v-model="props.row.requestStatus"-->
            <!--                              :fill="props.row.requestStatus===1?'#67C23A' : '#F56C6C'"-->
            <!--              >-->
            <!--                <el-radio-button v-for="radio in tableNameList" :key="radio.value"-->
            <!--                                 :label="radio.value"-->
            <!--                >-->
            <!--                  {{ radio.label-->
            <!--                  }}-->
            <!--                </el-radio-button>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->

          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="访问接口名称" prop="apiName" />
      <el-table-column label="访问接口URL地址" prop="apiUrl" />
      <el-table-column label="请求执行状态" prop="requestStatus">
        <template slot-scope="scope">
          <el-tag :color="scope.row.requestStatus === 1 ? '#67C23A' : '#F56C6C'" dark
                  style="color: white;">
            {{ scope.row.requestStatus === 1 ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="请求访问时间" prop="requestTime" />
    </el-table>
  </app-dialog>
</template>

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

export default {
  name: 'ServiceDialog',
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      form: {
        sourceType: '1'
      },
      id: '',
      loading: false,
      tableNameList: [
        {label: '成功', value: 1},
        {label: '失败', value: 0}
      ]
    }
  },
  mounted() {
  },
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form
      this.form = {...orgForm, ...data}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.id = data.id
      this.updateApiCallsData(data.id)
      this.apiCalls()
    },
    // updateApiCallsData用于更新请求参数中的apiId
    updateApiCallsData(id) {
      // console.log('八嘎', id);
      const data = {
        groupRelation: 'AND',
        groupTree: {},
        pageBean: {
          page: 1,
          pageSize: 10,
          showTotal: true
        },
        params: {},
        querys: [
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'apiId', // 明确指定查询属性为 id，与后端接口接收的参数对应
            relation: 'AND',
            value: id // 设置为传入的接口id，实现按点击行的id查询日志
          }
        ],
        sorter: [
          {
            direction: 'ASC',
            property: ''
          }
        ]
      }
      return data
    },
    apiCalls() {
      const data = this.updateApiCallsData(this.id)
      // console.log('======', data);
      API.apiLog(data)
        .then((res) => {
          console.log('cacacacssaa', res.rows)
          this.tableData = res.rows || []
          if (res && res.rows && Array.isArray(res.rows)) {
            this.tableData = res.rows.map((item) => {
              return {
                apiName: item.apiName,
                apiUrl: item.apiUrl,
                requestIp: item.requestIp,
                requestTime: item.requestTime,
                requestParams: item.requestParams,
                responseResult: item.responseResult,
                responseTimeLength: item.responseTimeLength,
                requestStatus: item.requestStatus
              }
            })
          } else {
            console.error('接口返回数据格式不符合预期，无法正确渲染日志信息')
            this.tableData = []
          }
        })
        .catch((error) => {
          console.error('获取数据源失败', error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
  display: flex;
  flex-direction: column;
  gap: 5px; // 增加表单项之间的间距
}

.demo-table-expand label {
  width: 150px;
  color: #606266;
  font-size: 14px; // 调整标签字体大小
  font-weight: bold; // 标签加粗
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
  //overflow-y: auto;
  //color: #3f4552;
  padding: 10px; // 增加内边距
  border: 1px solid #e0e0e0; // 添加边框线
  border-radius: 4px; // 边框圆角
  background-color: #f9f9f9; // 背景色
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影
}

.el-radio-button {
  margin-right: -80px;
}

.demo-table-expand .el-form-item span {
  color: #333; // 调整内容字体颜色
  font-size: 14px; // 调整内容字体大小
}

.divider {
  display: inline-block;
  //border: solid 0.5px #e0e0e0;
  max-height: 80px;
  overflow-y: auto;
  color: #666; // 调整参数信息的字体颜色
  font-size: 13px; // 调整参数信息的字体大小
  margin-left: 100px;
  margin-top: -30px; //后添加的样式margin
}
</style>
