<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" width="1000px"
              @cancel="onCancel" @confirm="onCancel">
    <el-form ref="form" :model="form" disabled label-width="155px">
      <el-row :gutter="15">
        <app-filter-item :span="24" label="访问接口名称：">
          <!--          <el-input v-model="form.apiName" />-->
          <span>{{ form.apiName }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="访问URL接口地址：">
          <span>{{ form.apiUrl }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="客户端访问IP地址：">
          <span>{{ form.requestIp }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="请求访问时间：">
          <span>{{ form.requestTime }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="请求参数信息：" prop="requestParams">
          <span class="divider">{{ form.requestParams }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="返回参数信息：" prop="responseResult">
          <span class="divider">{{ form.responseResult }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="接口响应时长：" prop="responseTimeLength">
          <span>{{ form.responseTimeLength }}</span>
        </app-filter-item>

        <app-filter-item :span="24" label="请求访问状态：" prop="requestStatus">
          <!--          <span>{{ form.requestStatus }}</span>-->
          <el-radio-group v-model="form.requestStatus" :fill="form.requestStatus === 1 ? '#67C23A' : '#F56C6C'"
                          class="status-radio-group">
            <el-radio-button
              v-for="radio in tableNameList"
              :key="radio.value"
              :label="radio.value"
            >
              {{ radio.label }}
            </el-radio-button>
          </el-radio-group>
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js'

export default {
  companyName: 'DetailDialog',
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        sourceType: '1'
      },
      tableNameList: [
        {label: '成功', value: 1},
        {label: '失败', value: 0}
      ],
      loading: false
    }
  },
  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()
      })
    },
    onCancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-filter-item {
  ::v-deep {
    .el-form-item .el-form-item__label {
      color: #000000a6;
      font-size: 15px;
      font-weight: 700;
    }
  }
}

.divider {
  display: inline-block;
  //border: solid 0.5px #e0e0e0;
  max-height: 80px;
  overflow-y: auto;
}

::v-deep .status-radio-group .el-radio-button__inner {
  color: #909399;
}

::v-deep .status-radio-group .is-active .el-radio-button__inner {
  color: white !important;
  background-color: inherit;
  border-color: inherit;
  box-shadow: none;
}
</style>
