<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="接口名称" prop="productName" style="width: 30%">
        <el-input type="text" v-model="ruleForm.productName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-select v-model="ruleForm.productState" placeholder="请选择状态" @change="changestate(ruleForm.productState)">
          <el-option label="全部" value=""></el-option>
          <el-option label="未上线" value="0"></el-option>
          <el-option label="已上线" value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="add()">新增+</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="序号"
        width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.productId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="接口名称"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.productName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="接口描述"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              {{ scope.row.productContent }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="接口来源"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.productFrom }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="接口销量"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.productSales }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="danger"
              @click="handlelook(scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleEdit(scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </div>
          <br>
          <div v-if="scope.row.productState===0">
            <el-button
              size="mini"
              type="success"
              @click="handleUpdState(scope.row)">上线</el-button>
          </div>
          <div v-if="scope.row.productState===1">
            <el-button
              size="mini"
              type="success"
              @click="handleUpdState(scope.row)">下架</el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>

    <!--分页-->
    <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-dialog
      title="新增接口"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <center>
        <el-form :model="api" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="接口名称" prop="productName" style="width: 70%">
            <el-input type="text" v-model="api.productName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接口类型" prop="productType" style="width: 70%">
            <el-input type="text" v-model="api.productType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接口描述" prop="productContent" style="width: 70%">
            <el-input type="text" v-model="api.productContent" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接口来源" prop="productFrom" style="width: 70%">
            <el-input type="text" v-model="api.productFrom" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="重要路由" prop="apiRouter" style="width: 70%">
            <el-input type="text" v-model="api.apiRouter" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接口地址" prop="apiAddress" style="width: 70%">
            <el-input type="text" v-model="api.apiAddress" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="返回格式" prop="returnFormat" style="width: 70%">
            <el-input type="text" v-model="api.returnFormat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请求方式" prop="requestMethod" style="width: 70%">
            <el-input type="text" v-model="api.requestMethod" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选择默认规格" prop="requestMethod" style="width: 70%">
            <el-select v-model="api.productSpecification" placeholder="请选择默认规格">
              <el-option label="按次查询" value="按次查询"></el-option>
              <el-option label="包日" value="包日"></el-option>
              <el-option label="包月" value="包月"></el-option>
              <el-option label="包年" value="包年"></el-option>
            </el-select>
          </el-form-item>
          <el-divider></el-divider>
          <span>价格</span>
          <el-form-item label="按次查询" prop="requestMethod" style="width: 70%">
            <el-input type="text" v-model="api.timemoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包日" prop="requestMethod" style="width: 70%">
            <el-input type="text" v-model="api.daymoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包月" prop="requestMethod" style="width: 70%">
            <el-input type="text" v-model="api.monthmoney" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包年" prop="requestMethod" style="width: 70%">
            <el-input type="text" v-model="api.yearmoney" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </center>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" @click="addForm(api)">确 定</el-button>
  </span>
    </el-dialog>





  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  addproduct,
  delapi, getprice,
  selectapiList,
  UpdproductState
} from "@/api/background/apimanage";
import {resetForm} from "@/utils/muyu";
import {add} from "lodash/math";
import api from "js-cookie";

export default {
    name: "Apimanage",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        tableData:[],
        moneyData:[],
        money:{
          timemoney:'',
          daymoney:'',
          monthmoney:'',
          yearmoney:''
        },
        ruleForm:{
          pageNum:1,
          pageSize:9,
          productType:'' ,
          productState:''
        },
        total:0,
        dialogVisible: false,
        api:{},
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      resetForm,
      //新增对话框关闭
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getapiList(){
        selectapiList(this.ruleForm).then(response=>{
          console.log(response)
            this.tableData=response.data.productListResps
            this.total=response.data.total
        })
      },
      // //状态查询
      // productStateLis(){
      //   productStateLis().then(response=>{
      //     this.productStateList=response.data
      //   })
      // },
      changestate(value){
        this.ruleForm.productState=value
        this.getapiList()
      },
      //查询
      submitForm(){
        this.getapiList()
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.ruleForm.pageSize=val
        this.getapiList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ruleForm.pageNum=val
        this.getapiList()
      },
      //接口详情
      handlelook(row){
        this.$router.push({path:"/apidetailmessage/index",query:{api:row}})
      },
      //修改
      handleEdit(row){
        //查询中间表，获取不同规格对应的价格
        getprice(row.productId).then(response=>{
          this.moneyData=response.data
            this.money.timemoney=this.moneyData[0].middlePrice
            this.money.daymoney=this.moneyData[1].middlePrice
            this.money.monthmoney=this.moneyData[2].middlePrice
            this.money.yearmoney=this.moneyData[3].middlePrice
          row.timemoney = this.money.timemoney;
          row.daymoney = this.money.daymoney;
          row.monthmoney = this.money.monthmoney;
          row.yearmoney = this.money.yearmoney;
          this.$router.push({path:"/apiupdmessage/index",query:{api:row}})
        })


      },
      //删除
      handleDelete(row){
        if (confirm("确定删除么")){
          delapi(row.productId).then(response=>{
            alert(response.msg)
            if (response.code==200){
              this.getapiList()
            }
          })
        }
      },
      //新增
      add(){
        this.dialogVisible=true
      },
      addForm(){
        addproduct(this.api).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.dialogVisible=false
            this.getapiList()
          }
        })
      },
      //产品上/下线
      handleUpdState(row){
        if (row.productState==0){
          if (confirm("确定上线么")){
            row.productState=1
            alert(JSON.stringify(row))
            UpdproductState(row).then(response=>{
              alert(response.msg)
              if (response.code==200){
                this.getapiList()
              }
            })
          }
        }else {
          if (confirm("确定下架么")){
            row.productState=0
            UpdproductState(row).then(response=>{
              alert(response.msg)
              if (response.code==200){
                this.getapiList()
              }
            })
          }
        }

      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getapiList()
      // this.productStateList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
