<template>
  <div>
    <span>产品名称</span>
    <el-container style="height: 1200px; border: 1px solid #eee">
      <el-aside width="150px" style="background-color: rgb(238, 241, 246)">
        <span @click="choseall()">全部</span>
        <div v-for="(type,index1) in typeList" :key="index1">
          <span @click="chosetype(index1)">{{type}}</span>
        </div>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="productName">
              <el-input type="text" v-model="ruleForm.productName" style="width: 200px;" autocomplete="off" placeholder="关键词搜索"></el-input>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-header>

        <el-main>
          <el-row :gutter="18" class="mb8">
            <el-col :span="8" v-for="(product,index) in productList" :key="index" >
              <el-card class="box-card" style="height: 300px">
                <div slot="header" class="clearfix">
                  <el-form  ref="form" :model="product" label-width="120px" :rules="rules">
                    <el-form-item label="产品名称:">
                      <el-textarea v-model="product.productName">{{product.productName}}</el-textarea>
                    </el-form-item>
                    <el-form-item label="产品价格:">
                      <el-textarea v-model="product.productPrice">￥{{product.productPrice}}</el-textarea>
                    </el-form-item>
                    <el-form-item label="产品介绍:">
                      <el-textarea v-model="product.productContent">{{product.productContent}}</el-textarea>
                    </el-form-item>
                    <el-form-item label="重要路由:">
                      <el-textarea v-model="product.apiRouter">{{product.apiRouter}}</el-textarea>
                    </el-form-item>
                    <el-row>
                      <el-col :span="9"><div class="grid-content bg-purple">
                        <el-button type="primary" @click="test(product)">立即申请</el-button>
                      </div></el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="ruleForm.pageNum"
            :page-sizes="[5, 7, 9, 11]"
            :page-size="ruleForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>





  </div>
</template>

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


import {ifbuy, selectList, selectTypeList} from "@/api/market/product";

export default {
    name: 'Product',
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        //产品列表
        productList:[],
        product:{},
        ruleForm:{
          pageNum:1,
          pageSize:9,
          productType:''
        },
        total:0,
        typeList:[]
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //产品列表
      getList(){
        selectList(this.ruleForm).then(response=>{
          console.log(response)
          this.productList=response.data.productListResps
          this.total=response.data.total
        })
      },
      //查询
      submitForm(){
        this.getList()
      },
      //产品类型
      gettypeList(){
        selectTypeList().then(response=>{
          this.typeList=response.data
        })
      },
      //选择类型
      chosetype(index1){
        this.ruleForm.productType=this.typeList[index1]
        this.getList()
      },
      //选择全部
      choseall(){
        this.ruleForm.productType=''
        this.getList()
      },
      //接口测试页面
      test(product){
        //判断是否已购买
        ifbuy(product).then(response=>{
          if (response.code!=200) {
            alert(response.msg)
          }
        })
        this.$router.push({path:"/apitest/index",query:{myapi:JSON.stringify(product)}})
      },
      // test(product) {
      //   if (product && product.productAddress) {
      //     let url = product.productAddress; // 使用 product.address 的值
      //     window.open(url, '_blank'); // 在新标签页中打开 URL
      //   } else {
      //     console.error('无效的 address 或 product 未定义');
      //     // 或者您可以根据需要处理错误情况
      //   }
      // },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.ruleForm.pageSize=val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ruleForm.pageNum=val
        this.getList()
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getList()
      this.gettypeList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>
.box-card{
  margin: 10px 0;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

</style>
