<template>
  <div class="apiDebug">
    <div>
      <div class="title-panel font-12 p-20">API请求内容：</div>
      <div class="form-panel">
        <el-form
          label-width="90px"
          :model="params"
          :rules="data.paramsRules"
          size="mini"
          status-icon
          class="demo-ruleForm"
          ref="paramsForm"
        >
          <el-form-item label="URL">
            <el-input v-model="data.URL" disabled></el-input>
          </el-form-item>

          <el-form-item
            v-for="(item,idx) of data.paramsData"
            :label="item.label"
            :prop="item.name"
            :key="idx"
          >
              <el-select v-model="params[item.name]" placeholder="请选择定位类型"  @change="handelOptionChange"   v-if="item.type==='Number'">
                <el-option
                        v-for="items in options"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value">
                </el-option>
              </el-select>
            <el-date-picker
              v-model="params[item.name]"
              :type="pickOption.timeType"
              placeholder="选择日期时间"
              :value-format="pickOption.valueFormat"
              :format="pickOption.format"
              :picker-options="datePickerOptions"
              @input="handleTimeClick"
              v-if="item.type==='dataTime'"
            ></el-date-picker>
            <el-input v-model="params[item.name]" :placeholder="item.placeholder" v-if="item.type==='String'"></el-input>
          </el-form-item>
        </el-form>
        <div class="opearbtn-panel">
          <el-button type="primary"  @click="submitForm('paramsForm')" class='width-100'>运行</el-button>
        </div>
      </div>
    </div>
    <div class="result-panel font-12">
      <p class="pl-20">返回结果预览</p>
      <el-input class="texta" type="textarea" v-model="resultData" rows="10" cols="80"
       v-loading='loading'
      ></el-input>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  //import { mapState } from "vuex";
export default {
  name: "apiDebug",
  props: {
    data: {},
    column: {
      default() {
        return [
          {
            prop: "name",
            label: "名称",
          },
          {
            prop: "type",
            label: "类型",
          },
          {
            prop: "isRequired",
            label: "必填",
          },
          {
            prop: "desc",
            label: "说明",
          },
        ];
      },
    },
  },
  //  computed: {
  //   ...mapState(["loading"]),
  // },

 data() {
    return {
      params: {},
      pickOption: {},
      pickOptionList: {
        datetime: {
          timeType: "datetime",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          format: "yyyy-MM-dd HH:mm:ss",
        },
        month: {
          timeType: "month",
          valueFormat: "yyyy-MM",
          format: "yyyy-MM",
        },
        date: {
          timeType: "date",
          valueFormat: "yyyy-MM-dd",
          format: "yyyy-MM-dd",
        },
      },
      resultData: "",
      options: [{
        value: 1,
        label: '实时定位'
      }, {
        value: 2,
        label: '精准定位'
      },
      //   {
      //   value: '3',
      //   label: '全国拉链'
      // }
      ],
      value: 1,
      datePickerOptions: {},
      maxDate:getPreMin("-",'30'),
    };
  },
  watch: {
    maxDate: {
      handler(newV, oldV) {
        this.setMaxDateTime();
      },
      deep: true,
    },
  },
  created() {
    this.setMaxDateTime();
  },
  mounted() {
    this.data.paramsData.forEach((item) => {
      if(item.label==='定位类型'){
        this.$set(this.params, item.name, 1);
      }else{
        this.$set(this.params, item.name, "");
      }
    });
    this.pickOption = this.pickOptionList[this.data.timeType];
  },
  methods: {
    handleTimeClick(value){
      if(value.split(' ')[0]===this.maxDate.split(' ')[0]){
        this.datePickerOptions ={
           selectableRange: '00:00:00-'+this.maxDate.split(' ')[1]
        };
      }
    },
    //设置最大可选日期时间
    setMaxDateTime(){

      // this.datePickerOptions ={
      //    selectableRange: '00:00:00-'+this.maxDate.split(' ')[1]
      // };
      this.datePickerOptions.disabledDate = (datetime) => {
        return datetime > new Date(this.maxDate);
      };
    },
    handelOptionChange(v){
      if(v===1){
        this.maxDate=getPreMin("-",'30');
      }if(v===2){
        this.maxDate=getPreMin("-",'480');
      }
      this.data.paramsData.forEach((item) => {
        if(item.label!=='定位类型'){
          this.$set(this.params, item.name, "");
        }
      });
    },
    //表单验证运行
    submitForm(formName) {
      //this.$store.commit('showLoading')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get(`${this.data.url}`, {
            params:this.params
          })
            .then((response) => {
              // this.$store.commit('hideLoading')
              if (response.data.data !== null&&JSON.stringify(response.data.data)!=='{}') {
                this.resultData=JSON.stringify(response.data.data,null,4);
              }else {
                this.resultData=response.data.msg
              }
            })
            .catch((e) => {
              this.$store.commit('hideLoading')
              this.resultData = "接口异常";
            });
        } else {
          this.$store.commit('hideLoading')
          this.resultData = "";
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.apiDebug {
  .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 480px;
  }
  .el-input--mini .el-input__inner {
    height: 28px;
    line-height: 28px;
    width: 480px;
  }
}
</style>
<style lang="scss" scoped>
.apiDebug {
  background: #fff;

  .title-panel {
    width: 50%;
    margin: 0 auto;
  }
  .form-panel {
    width: 50%;
    margin: 0 auto;

    .opearbtn-panel {
      width: 50%;
      margin: 0 auto;
    }
  }
  .result-panel {
    padding: 10px;
    .texta {
      padding: 10px 50px;
    }

  }
  .text {
    white-space: pre-wrap;
  }
}
</style>
