<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple" style="border: 2px solid #ebeef5;">
        <span>HI，{{companymessage.companyName}}<br>
          <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple">地址：{{companymessage.companyAddress}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">企业法人：{{companymessage.companyLeader}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">时间：{{companymessage.registrantDate}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="12"><div class="grid-content bg-purple"><el-button type="primary">登录日志</el-button></div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light"><el-button type="primary">操作日志</el-button></div></el-col>
              </el-row>
            </div></el-col>
          </el-row>
        </span>
      </div></el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="border: 1px solid #ebeef5;">
          <span>账户余额：<br>
            <el-row>
              <el-col :span="12"><div class="grid-content bg-purple">￥{{companymessage.companyMoney}}</div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"><el-button type="primary" @click="addmoney()">充值</el-button></div></el-col>
            </el-row>
          </span>
      </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="border: 2px solid #ebeef5;">
          <el-row>
            <el-col :span="20"><div class="grid-content bg-purple"><span>热点接口</span></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"><el-button type="primary" @click="otherapi">申请其他接口</el-button></div></el-col>
          </el-row><br>
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark flex-container">
              <div v-for="(form,index) in hostportList" :key="index" class="flex-item">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item >
                    <span>{{form.productName}}</span>
                    <el-button @click="tovalidation(form)">查看</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div></el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>


    <!--提示需要验证--->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false">
      <span>亲，需要认证才能使用哦！！！</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="validationYes()">去认证</el-button>
  </span>
    </el-dialog>

    <!---企业验证页面-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1"
      :close-on-click-modal="false">
      <span>企业信息</span>
      <el-divider></el-divider>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="企业名称" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户职位" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司所在省市区" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司详细地址" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="pass">
          <el-input type="text" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="push()">提交认证申请</el-button>
  </span>
    </el-dialog>

    <!--充值页面-->
    <el-dialog
      title="充值"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose2"
      :close-on-click-modal="false">
      <h2 style="color: #1ab394">请选择充值金额</h2>
      <el-divider></el-divider>
      <el-form :model="moneyForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="请选择">
          <el-radio-group v-model="moneyForm.resource">
            <el-radio label="5">5元</el-radio>
            <el-radio label="20">20元</el-radio>
            <el-radio label="50">50元</el-radio>
            <el-radio label="100">100元</el-radio>
            <el-radio label="">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="moneyForm.resource === ''" label="自定义充值" prop="pass" style="width: 50%">
          <el-input type="text" v-model="moneyForm.resource1" autocomplete="off"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="选择支付方式">
          <el-radio-group v-model="moneyForm.pay">
            <el-radio label="1">支付宝</el-radio>
            <el-radio label="2">微信</el-radio>
            <el-radio label="3">银行卡</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="insertmoney(moneyForm)">充值</el-button>
</span>
    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,


import {getcompany, gethostportList} from "@/api/market/workbench";
import {ifbuy} from "@/api/market/product";

export default {
    name: 'Workbench',
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        form:{},
        //热点前五的产品
        hostportList:[],
        dialogVisible: false,
        dialogVisible1:false,
        dialogVisible2:false,
        //企业信息
        ruleForm:{},
        companymessage:{},
        moneyForm:{}
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //绑定的企业信息
      getcompany(){
        getcompany().then(response=>{
          this.companymessage=response.data
        })
      },
      //打开充值页面
      addmoney(){
        this.dialogVisible2=true




      },
//确认充值
      insertmoney(moneyForm){
        if (moneyForm.pay==1){
          if (moneyForm.resource!=''){
            window.open("http://localhost:9701/alipay/pay?ordersPrice="+moneyForm.resource)
            this.$message.success('付款成功')
          }else {
            window.open("http://localhost:9701/alipay/pay?ordersPrice="+moneyForm.resource1)
            this.$message.success('付款成功')
          }

        }
// this.dialogVisible2=false

      },
      //申请其他接口
      otherapi(){
        this.$router.push("/product/index")
      },
      //热点数据列表
      gethostportList(){
        gethostportList().then(response=>{
          this.hostportList=response.data
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      tovalidation(form){
        // this.dialogVisible=true
        //判断是否已购买
        ifbuy(form).then(response=>{
          if (response.code!=200) {
            alert(response.msg)
          }
        })
        this.$router.push({path:"/apitest/index",query:{myapi:JSON.stringify(form)}})
      },
      validationYes(){
        this.dialogVisible1=true
      },
      push(){
        this.dialogVisible=false
        this.dialogVisible1=false
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.gethostportList()
      this.getcompany()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 如果需要的话，允许换行 */
  justify-content: space-between; /* 或者您想要的任何对齐方式 */
}

.flex-item {
  /* 您可以根据需要添加一些内边距、外边距或宽度设置 */
  padding: 10px;
}
</style>
