<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>手机号查询归属地</span>
            <el-button style="float: right; padding: 3px 0" @click="buyPhone">购买</el-button>
          </div>
          <div>
            <el-form :model="formPhone">
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="formPhone.tel" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item  :label-width="formLabelWidth">
                <el-button @click="textPhone()">测试</el-button>
              </el-form-item>
<!--              省份:{{this.formPhone.province}}<br>-->
<!--              城市:{{this.formPhone.city}}<br>-->
<!--              区号:{{this.formPhone.zip}}<br>-->
<!--              邮编:{{this.formPhone.zip}}<br>-->
<!--              运营商:{{this.formPhone.company}}-->
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>IP查询归属地</span>
            <el-button style="float: right; padding: 3px 0" @click="buyIp">购买</el-button>
          </div>
          <div>
            <el-form :model="formIP">
              <el-form-item label="IP" :label-width="formLabelWidth">
                <el-input v-model="formIP.ip" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item  :label-width="formLabelWidth">
                <el-button @click="textIp">测试</el-button>
              </el-form-item>
<!--              省份:{{this.formPhone.province}}<br>-->
<!--              城市:{{this.formPhone.city}}<br>-->
<!--              区号:{{this.formPhone.zip}}<br>-->
<!--              邮编:{{this.formPhone.zip}}<br>-->
<!--              运营商:{{this.formPhone.company}}-->
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>邮编查询</span>
            <el-button style="float: right; padding: 3px 0" @click="buyPostcodd">购买</el-button>
          </div>
          <div>
            <el-form :model="formIP">
              <el-form-item label="邮编" :label-width="formLabelWidth">
                <el-input v-model="formIP.ip" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item  :label-width="formLabelWidth">
                <el-button @click="textPhone()">测试</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>新闻头条</span>
            <el-button style="float: right; padding: 3px 0" @click="buyNews">购买</el-button>
          </div>
          <div>
            <el-form :model="formIP">
              <el-form-item  :label-width="formLabelWidth">
                <el-button @click="textPhone()">测试</el-button>
              </el-form-item>
              <!--              省份:{{this.formPhone.province}}<br>-->
              <!--              城市:{{this.formPhone.city}}<br>-->
              <!--              区号:{{this.formPhone.zip}}<br>-->
              <!--              邮编:{{this.formPhone.zip}}<br>-->
              <!--              运营商:{{this.formPhone.company}}-->
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>气象预警</span>
            <el-button style="float: right; padding: 3px 0" @click="buyWeather">购买</el-button>
          </div>
          <div>
            <el-form :model="formIP">
              <el-form-item  :label-width="formLabelWidth">
                <el-button @click="textPhone()">测试</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>生辰助手</span>
            <el-button style="float: right; padding: 3px 0" @click="buyBirth">购买</el-button>
          </div>
          <div>
            <el-form :model="formIP">
              <el-form-item  :label-width="formLabelWidth">
                <el-button @click="textPhone()">测试</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getPhonePlace} from "@/api/port/port";
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      dialogFormVisible:false,
      dialogFormVisible1:false,
      formPhone:{
        province:"",
        city:"",
        address:"",
        zip:"",
        company:"",
        tel:"",
      },
      formIP:{

      }
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    textPhone(){
      getPhonePlace(this.formPhone.tel).then((res)=>{
        this.formPhone.province = res.data.province;
        this.formPhone.city = res.data.city;
        this.formPhone.address = res.data.address;
        this.formPhone.zip = res.data.zip;
        this.formPhone.company = res.data.company;
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
