<template>
  <div>
    <el-button icon="el-icon-plus" type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        label="id"
        width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.connectorId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="接口名称"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="接口分类"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.connectorSort }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="接口描述"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.connectorDescribe }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="接口图片"
        width="180">
        <template slot-scope="scope">
<!--          <image-preview :src="scope.row.connectorPicture" width="50" height="50"/>-->
          <el-image style="width: 100px; height: 100px" :src="scope.row.connectorPicture" :fit="fit"></el-image>
        </template>
      </el-table-column>

      <el-table-column
        label="公司"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.connectorCompany }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="更新时间"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.connectorTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="状态"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==0">审核中</span>
          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==1">审核通过</span>
          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==2">审核失败</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-pear"
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--  新增接口-->
    <el-dialog title="新增接口" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="接口名称" :label-width="formLabelWidth">
          <el-input v-model="formLabelAlign.connectorName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="接口分类">
          <el-select v-model="formLabelAlign.connectorSort" 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-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-form-item label="接口描述" :label-width="formLabelWidth">
          <el-input v-model="formLabelAlign.connectorDescribe" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="接口图片" :label-width="formLabelWidth">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input v-model="formLabelAlign.connectorCompany" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="formLabelAlign.connectorPrice" autocomplete="off"></el-input>
        </el-form-item>

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

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

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

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addConnector">确 定</el-button>
      </div>
    </el-dialog>

    <!--  编辑接口-->
    <el-dialog title="编辑接口" :visible.sync="dialogFormVisible1">
      <el-form :model="formInline">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="formInline.connectorId" autocomplete="off" readonly></el-input>
        </el-form-item>

        <el-form-item label="接口名称" :label-width="formLabelWidth">
          <el-input v-model="formInline.connectorName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="接口分类" :label-width="formLabelWidth">
          <el-input v-model="formInline.connectorSort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="接口描述" :label-width="formLabelWidth">
          <el-input v-model="formInline.connectorDescribe" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="接口图片" :label-width="formLabelWidth">
          <el-input v-model="formInline.connectorPicture" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input v-model="formInline.connectorCompany" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item label="剩余次数" :label-width="formLabelWidth">-->
<!--          <el-input v-model="formInline.connectorResidueDegree" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="购买次数" :label-width="formLabelWidth">-->
<!--          <el-input v-model="formInline.connectorFrequency" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

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

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

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

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="formInline.connectorStatus" placeholder="请审核">
            <el-option label="审核中" value="0">审核中</el-option>
            <el-option label="审核成功" value="1">审核成功</el-option>
            <el-option label="审核失败" value="2">审核失败</el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateConnector">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {findConnectorList} from "@/api/port/port";
import {addConnector} from "@/api/port/port";
import {getDeleteConnector} from "@/api/port/port";
import {updateConnector} from "@/api/port/port";
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      formInline:{},
      form:{},
      tableData:[],
      formLabelAlign:{},
      dialogFormVisible:false,
      dialogFormVisible1:false,
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    updateConnector(){
      updateConnector(this.formInline).then((res)=>{
        alert(res.msg);
        if (200==res.code){
          this.findConnectorList();
          this.dialogFormVisible1=false;
        }
      })
    },
    handleEdit(row){
      this.formInline=row;
      this.dialogFormVisible1=true;
    },
    handleDelete(row){
      getDeleteConnector(row.connectorId).then((res)=>{
        alert(res.msg);
        if (200==res.code){
          this.findConnectorList();
        }
      })
    },
    addConnector(){
      addConnector(this.formLabelAlign).then((res)=>{
        alert(res.msg);
        if (200==res.code){
          this.findConnectorList();
          this.dialogFormVisible=false;
        }
      })
    },
    findConnectorList(){
      findConnectorList(this.form).then((res)=>{
        this.tableData=res.data;
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.findConnectorList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
