<template>
  <div class="apiInfo">
    <el-tabs style="background:#fff;">
      <el-tab-pane label="API文档">
        <api-doc :data="data"></api-doc>
      </el-tab-pane>
      <el-tab-pane label="接口调试">
        <api-debug :data="data"></api-debug>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import apiDebug from "./apiDebug";
import apiDoc from "./apiDoc";
export default {
  name: "api-info",
  components: {
    apiDebug,
    apiDoc,
  },
  props: {
    data: {
      default() {
        return    {
            serviceName: '职住地查询',
            timeType: 'date',
            URL:`${ipPort}/${nginxKey}/${serviceName}/jobhouse/data`,
            url: `/${nginxKey}/${serviceName}/jobhouse/data`,
            format: 'json',
            requestMethod: "Get",
            example: `${ipPort}/${nginxKey}/${serviceName}/jobhouse/data?areaType=0&date=2020-08-05&tel=15011026795`,
            paramsData: [
                {
                    name: 'areaType',
                    type: 'String',
                    isRequired: '是',
                    desc: '办公地、居住地',
                    label: '职住地类型',
                    areaType: '',
                    placeholder:'1:职,2:住,0:全部'
                },
                {
                    name: 'date',
                    type: 'dataTime',
                    isRequired: '是',
                    desc: '统计日期',
                    label: '统计日期',
                    date: '',
                }, {
                    name: 'tel',
                    type: 'String',
                    isRequired: '是',
                    desc: '查询用户手机号码',
                    label: '手机号码',
                    tel: "",
                    placeholder:''
                }
            ],
            resultDesc:[
                {
                    name: 'phone_no',
                    type: 'String',
                    desc: '查询用户手机号码',
                },
                {
                    name: 'neight_lon',
                    type: 'decimal(10,7)',
                    desc: '居住地经度',
                },
                {
                    name: 'night_cellname',
                    type: 'String',
                    desc: '居住地基站名',
                },
                {
                    name: 'work_lat',
                    type: 'decimal(10,7)',
                    desc: '工作地纬度',
                },
                {
                    name: 'work_cellname',
                    type: 'String',
                    desc: '工作地基站名',
                },
                {
                    name: 'work_lon',
                    type: 'decimal(10,7)',
                    desc: '工作地经度',
                },
                {
                    name: 'night_lat',
                    type: 'decimal(10,7)',
                    desc: '居住地纬度',
                },
            ],
            resultData: [{
                "phone_no": "15011026795",
                "work_cellname": "cellname16795",
                "night_lat": "116.6272400",
                "work_lon": "39.9611700",
                "work_eci": "eci16795",
                "night_cellname": "cellname16795",
                "night_eci": "eci16795",
                "work_lat": "116.5459300",
                "neight_lon": "39.9415500"
            }],
            paramsRules: {
                areaType:[
                    { required: true, message: '请输入职住地类型',  trigger: 'blur' },
                ],
                date: [
                    { required: true, message: '请选择统计日期',  trigger: 'blur' },
                ],
                tel: [
                    { required: true, validator: validatePhone, trigger: 'blur' },
                ]
            }
        };
      },
    },
  },
  data() {
  },
  mounted() {

  },
  methods: {
  },
};
</script>


<style lang='scss'>
.apiInfo {
  .el-button-group .el-button--primary:first-child {
    border-right-color: #409eff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .el-button-group .el-button--primary:last-child {
    border-left-color: #b3d8ff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .CodeMirror {
    border: 1px solid #eee;
    height: 100%;
    overflow: unset;
  }

  .CodeMirror-scroll {
    height: auto;
    overflow-y: auto;
    overflow-x: auto;
  }
}
</style>
<style scoped lang='scss'>
.apiInfo {
  
}
</style>
