<template>
  <div>
    <el-container style="height: 1000px; border: 1px solid #eee">
      <el-aside width="180px">
        <el-menu :default-openeds="['1', '3']">
          <el-menu-item-group>
            <span style="font-weight: bold;font-size: 25px;">全部类型：</span>
          </el-menu-item-group>
          <el-menu-item-group >
            <el-link type="primary" style="font-weight: bold;font-size: 20px;"  v-for="(connectSort, index) in connectSort"
                     :key="index"
            @click="findApiList(connectSort.connectorSort)">
              {{ connectSort.connectorSort }}
            </el-link>
          </el-menu-item-group>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <el-form label-width="40px" :model="form">
            <el-form-item>
              <input v-model="form.connectorName" style="padding: 10px 10px;float: initial;" placeholder=请输入关键字>
              <el-button @click="findApiList()" style="padding: 10px 20px;margin-left: 40px">查询</el-button>

            </el-form-item>
          </el-form>
          <el-row :gutter="50">
            <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
              <el-card class="box-card" style="margin-top: 15px;width: 400px; height: 600px;" shadow="hover">
                <div slot="header" class="clearfix">
                  <span style="font-weight: bold;font-size: 30px">{{connector.connectorName}}</span>
                  <el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)">购买</el-button>
                </div>
                <span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
                <el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
                <span style="font-weight: bold;font-size: 20px">产品介绍：</span>
                {{connector.connectorDescribe}}<br>
                <span style="font-weight: bold;font-size: 20px">价格：</span>
                {{connector.connectorPrice}}/次<br>

                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">测试API</el-button>
                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>
                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>
                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>
                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>
                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>
                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="connector.connectorName=='天气预报'">测试API</el-button>
              </el-card>
            </el-col>
          </el-row>
          <!--    手机号查询归属地-->
          <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
            <el-form :model="formInline">
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
        省份：{{this.formInline.province}}<br>
        城市：{{this.formInline.city}}<br>
        区号：{{this.formInline.areacode}}<br>
        邮编：{{this.formInline.zip}}<br>
        运营商：{{this.formInline.company}}<br>
        </span>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="phonePlace()">发起请求</el-button>
            </div>
          </el-dialog>

          <!--IP查询归属地-->
          <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
            <el-form :model="formIp">
              <el-form-item label="IP" >
                <el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
              </el-form-item>
              <span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
        国家：{{this.formIp.country}}<br>
        省份：{{this.formIp.province}}<br>
        城市：{{this.formIp.city}}<br>
        运营商：{{this.formIp.isp}}<br>
        </span>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="getIpPlace()">发起请求</el-button>
            </div>
          </el-dialog>
          <!--    新闻头条-->
          <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column property="title" label="新闻标题" width="150"></el-table-column>
              <el-table-column property="date" label="新闻时间" width="200"></el-table-column>
              <el-table-column property="category" label="新闻分类"></el-table-column>
              <el-table-column property="authorName" label="新闻来源"></el-table-column>
            </el-table>
          </el-dialog>

          <!--生辰助手-->
          <el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
            <el-form :model="formBirthday">
              <el-form-item label="年" >
                <el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
              </el-form-item>

              <el-form-item label="月" >
                <el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
              </el-form-item>

              <el-form-item label="日" >
                <el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
              </el-form-item>

              <el-form-item label="时" >
                <el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
              </el-form-item>
              <span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
                   years： {{this.formBirthday.years}}<br>
                   months： {{this.formBirthday.months}}<br>
                   days： {{this.formBirthday.days}}<br>
                   animal： {{this.formBirthday.animal}}<br>
                   imonthcn： {{this.formBirthday.imonthcn}}<br>
                   idaycn： {{this.formBirthday.idaycn}}<br>
                   cyear： {{this.formBirthday.cyear}}<br>
                   cmonth： {{this.formBirthday.cmonth}}<br>
                   cday： {{this.formBirthday.cday}}<br>
                   gzyear： {{this.formBirthday.gzyear}}<br>
                   gzmonth： {{this.formBirthday.gzmonth}}<br>
                   gzday： {{this.formBirthday.gzday}}<br>
                   isleap： {{this.formBirthday.isleap}}<br>
                   ncweek： {{this.formBirthday.ncweek}}<br>
                   isterm： {{this.formBirthday.isterm}}<br>
                   term： {{this.formBirthday.term}}<br>
                   astro： {{this.formBirthday.astro}}<br>
                   eightall： {{this.formBirthday.eightall}}<br>
                   fiveall： {{this.formBirthday.fiveall}}
              </span>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="getBirthday()">发起请求</el-button>
            </div>
          </el-dialog>

          <!--邮编查询-->
          <el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
            <el-form :model="formPostCode">
              <el-form-item label="邮编" >
                <el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
              </el-form-item>
              <el-table :data="gridData2" v-if="formPostCode.reason==true">
                <el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
                <el-table-column property="province" label="省" width="200"></el-table-column>
                <el-table-column property="city" label="市"></el-table-column>
                <el-table-column property="district" label="区"></el-table-column>
                <el-table-column property="address" label="县"></el-table-column>
              </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="getPostcode()">发起请求</el-button>
            </div>
          </el-dialog>

          <!--    气象预警-->
          <el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
            <el-aside width="100%">
              <el-tree :data="data" :props="defaultProps">
                <template slot-scope="{data,node}">
                  <span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
                </template>
              </el-tree>
            </el-aside>
          </el-dialog>
          <!--天气预报-->
          <el-dialog title="天气预报" :visible.sync="dialogFormVisible6">
            <el-form :model="formWeatherForecast">
              <el-form-item label="城市名" >
                <el-input v-model="formWeatherForecast.cityName" autocomplete="off" placeholder="请输入城市名"></el-input>
              </el-form-item>
              <span style="font-weight: bold;font-size: 20px" v-if="formWeatherForecast.reason==true">
                城市：{{this.formWeatherForecast.city}}<br>
                天气：{{this.formWeatherForecast.info}}<br>
                温度：{{this.formWeatherForecast.temperature}}<br>
                湿度：{{this.formWeatherForecast.humidity}}<br>
                风向：{{this.formWeatherForecast.direct}}<br>
                风力：{{this.formWeatherForecast.power}}<br>
                空气质量：{{this.formWeatherForecast.aqi}}<br>
              </span>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="getWeatherForecast(cityName)">发起请求</el-button>
            </div>
          </el-dialog>
          <!--  购买-->
          <el-dialog title="购买API" :visible.sync="dialogFormVisible5">
            <el-form :model="buyForm">
              <el-form-item label="产品编号" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="产品介绍" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="产品价格" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="产品公司" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="API_URL" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="API_EYE" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="请求方式" :label-width="formLabelWidth">
                <el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
              </el-form-item>

              <el-form-item label="购买次数" :label-width="formLabelWidth">
                <el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
              </el-form-item>
              <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
              <span style="font-weight: bold;font-size: 20px">共计：{{buyForm.connectorPrice*buyForm.connectorFrequency}}元</span>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="buyInterface()">购 买</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
<!--    <el-button type="primary">+申请新数据</el-button>-->

  </div>
</template>

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

    return {
      userBalanceData: {
        userBalance: '加载中...'
      },
      formWeatherForecast:{
        cityName:"",
        city:"",
        info:"",
        temperature:"",
        humidity:"",
        direct:"",
        power:"",
        aqi:"",
        reason:"",
      },
      formWeather:{},
      data:[],
      defaultProps: {
        children:"citys",
        label:'provinceName',
      },
      connectSort:[],
      connectorList:[],
      gridData:[],
      gridData2:[],
      form:{
        connectorSort:"",
      },
      // 邮编查询
      formPostCode:{
        code:"",
        // postNumber:"",
        // province:"",
        // city:"",
        // district:"",
        // address:"",
        reason:"",
      },
      // 手机号查询归属地formInline
      formInline:{
        tel:"",
        province:"",
        city:"",
        areacode:"",
        zip:"",
        company:"",
        reason:"",
      },

      formIp:{
        ip:"",
        country:"",
        province:"",
        city:"",
        isp:"",
        reason:"",
      },
      formBirthday:{
        year:"",
        month:"",
        day:"",
        hour:"",
        years:"",
        months:"",
        days:"",
        animal:"",
        imonthcn:"",
        idaycn:"",
        cyear:"",
        cmonth:"",
        cday:"",
        gzyear:"",
        gzmonth:"",
        gzday:"",
        isleap:"",
        ncweek:"",
        isterm:"",
        term:"",
        astro:"",
        eightall:"",
        fiveall:"",
        reason:"",
      },
      formNews:{
        news:"",
        reason:"",
      },
      buyForm:{},
      // IP查询归属地
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      dialogFormVisible3:false,
      dialogFormVisible4:false,
      dialogFormVisible5:false,
      dialogFormVisible6:false,
      dialogTableVisible:false,
    };
  },
  //计算属性 类似于data概念",
  computed: {
    index() {
      return index
    },
    node() {
      return node
    }
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    async fetchUserBalance() {
      try {
        const userId = localStorage.getItem('userId');
        console.log(userId)// 登录后把userId存到了localStorage
        if (!userId) {
          this.userBalanceData = {userBalance: '未登录'};
          return;
        }
        const response = await userBalance(userId);
        if (response.data) {
          console.log(response.data)
          this.userBalanceData.userBalance = response.data;
        } else {
          this.userBalanceData.userBalance = {userBalance: '获取失败'};
        }
      } catch (error) {
        this.userBalanceData = {userBalance: '获取失败'};
        console.error('Error fetching user balance:', error);
      }
    },
    buyInterface(){
      this.$prompt('请输入支付密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\d{6}?/,
        inputErrorMessage: '密码格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的密码是: ' + value
        });
        doBuyInterface(this.buyForm).then((res)=>{
          console.log(res);
          alert(res.msg);
          this.dialogFormVisible5=false;
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });

    },
    //购买
    buy(connector){
      this.buyForm=connector;
      this.dialogFormVisible5=true;
    },
    // 气象预警
    testWeather(){

      getWeather().then((res)=>{
        this.data=res.data;

        this.dialogFormVisible4=true;
      })
    },
    // 邮编查询
    getPostcode(){
      getPostcode(this.formPostCode.code).then((res)=>{
        console.log(res.data);
        this.gridData2=res.data;
        this.formPostCode.reason=true;
      })
    },
    //天气预报
    getWeatherForecast(){
      getWeatherForecast(this.formWeatherForecast.cityName).then((res)=>{
        console.log(res.data);
        this.formWeatherForecast.city=res.data.city;
        this.formWeatherForecast.info=res.data.info;
        this.formWeatherForecast.temperature=res.data.temperature;
        this.formWeatherForecast.humidity=res.data.humidity;
        this.formWeatherForecast.direct=res.data.direct;
        this.formWeatherForecast.power=res.data.power;
        this.formWeatherForecast.aqi=res.data.aqi;
        this.formWeatherForecast.reason=true;
      })
    },
    //天气预报
    testWeatherForecast(){
      this.dialogFormVisible6=true;
    },
    testMailbox(){
      this.dialogFormVisible3=true;
    },
    getBirthday(){
      getBirthday(this.formBirthday).then((res)=>{
        console.log(res.data);
        this.formBirthday.reason=true;
        this.formBirthday.years=res.data.years;
        this.formBirthday.months=res.data.months;
        this.formBirthday.days=res.data.days;
        this.formBirthday.animal=res.data.animal;
        this.formBirthday.imonthcn=res.data.imonthcn;
        this.formBirthday.idaycn=res.data.idaycn;
        this.formBirthday.cyear=res.data.cyear;
        this.formBirthday.cmonth=res.data.cmonth;
        this.formBirthday.cday=res.data.cday;
        this.formBirthday.gzyear=res.data.gzyear;
        this.formBirthday.gzmonth=res.data.gzmonth;
        this.formBirthday.gzday=res.data.gzday;
        this.formBirthday.isleap=res.data.isleap;
        this.formBirthday.ncweek=res.data.ncweek;
        this.formBirthday.isterm=res.data.isterm;
        this.formBirthday.term=res.data.term;
        this.formBirthday.astro=res.data.astro;
        this.formBirthday.eightall=res.data.eightall;
        this.formBirthday.fiveall=res.data.fiveall;

      })
    },
    testBirthdate(){
      this.dialogFormVisible2=true;
    },
    testNews(){
      getHeadlines().then((res)=>{
        this.gridData=res.data;
        this.dialogTableVisible=true;
      })
    },
    getIpPlace(){
      getIpPlace(this.formIp.ip).then((res)=>{
        console.log(res.data);
        if (200==res.code){
          this.formIp.country=res.data.country;
          this.formIp.province=res.data.province;
          this.formIp.city=res.data.city;
          this.formIp.isp=res.data.isp;
          this.formIp.reason=true;
        }
      })
    },
    testIP(){
      this.dialogFormVisible1=true;
    },
    testPhone(){
      this.dialogFormVisible=true;
    },
    phonePlace(){
      phonePlace(this.formInline.tel).then((res)=>{
        console.log(res.data);
        if (200==res.code){
          this.formInline.province=res.data.province;
          this.formInline.city=res.data.city;
          this.formInline.areacode=res.data.areacode;
          this.formInline.zip=res.data.zip;
          this.formInline.company=res.data.company;
          this.formInline.reason=true;
        }
      })
    },
    findApiList(connectorSort){
      this.form.connectorSort=connectorSort;
      findApiList(this.form).then((res)=>{
        this.connectorList=res.data;
        console.log(res.data);
      })
    },
    findConnectSort(){
      findConnectSort().then((res)=>{
        this.connectSort=res.data;
        console.log(this.connectSort);
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.fetchUserBalance();
    this.findApiList();
    this.findConnectSort()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
