<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-button @click="add()" type="success" style="margin-left: 20px;" size="mini"><i
            class="el-icon-plus"></i>
          新增
        </el-button>
      </el-col>
      <el-col :span="20">
        <div style="text-align: right">
          <el-input style="width:200px;" size="mini" v-model="queryApiName"
                    placeholder="Api名称"></el-input>
          <el-input style="width:200px;margin-left:20px" size="mini" v-model="queryApiUrl"
                    placeholder="ApiUrl"></el-input>
          <el-select
              v-model="queryRequestMode"
              placeholder="请求方式"
              style="width:100px;margin-left:20px"
              size="mini">
            <el-option
                v-for="option in requestModeOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value">
            </el-option>
          </el-select>
          <el-button @click="query" type="primary" size="mini" style="margin-left:20px"><i
              class="el-icon-search"></i> 查询
          </el-button>
          <el-button @click="resetSearch" type="info" size="mini" style="margin-left:20px"><i
              class="el-icon-refresh"></i> 重置
          </el-button>
        </div>
      </el-col>
      <el-col :span="24">
        <myTable :metaData="metadata" :tableData="tableData" :isLoading="isLoading">
          <template #default="{ index }">
            <el-button-group>
              <el-button size="small" icon="fa fa-edit" @click="edit(index)"></el-button>
              <el-button size="small" icon="fa fa-trash" @click="deleteOne(tableData[index])"></el-button>
            </el-button-group>
          </template>
        </myTable>
      </el-col>
      <el-pagination
          style="padding: 15px"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :current-page="pageIndex"
          @current-change="onPageChange"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {mapState, mapActions, mapMutations} from 'vuex'
import Vue from 'vue'
import {
  Card,
  Col,
  Row,
  Button,
  Input,
  Checkbox,
  Radio,
  Select,
  Option,
  Pagination,
  Message, MessageBox
} from 'element-ui'
import myTable from "../components/CustomTable";
import apiRulesApi from "@/js/api/apiRulesApi";

Vue.use(Card);
Vue.use(Button);
Vue.use(Input);
Vue.use(Checkbox);
Vue.use(Col);
Vue.use(Row);
Vue.use(Radio);
Vue.use(Select);
Vue.use(Option);
Vue.use(Pagination);

export default {
  name: "ApiTab",
  components: {
    'myTable': myTable
  },
  data() {
    return {
      pageIndex: 1,
      queryApiName: "",
      queryApiUrl: "",
      queryRequestMode: "",
      requestModeOptions: [
        {value: "POST", label: "POST"},
        {value: "GET", label: "GET"}
      ],
      showSensitiveWord: false,
      dialogVisible: false,
      dialogTitle: "",
      form: {
        delFlag: 0,
        apiName: "",
        apiUrl: "",
        requestMode: "",
      },
      formLabelWidth: "60px",
      formInputWidth: "200px",
      saveLoading: false,
      deleteLoading: false
    }
  },
  methods: {
    setDataBody() {
      let dataBody = {
        delFlag: 0
      }
      if (this.queryApiName.length > 0) {
        dataBody.apiName = this.queryApiName;
      }
      if (this.queryApiUrl.length > 0) {
        dataBody.apiUrl = this.queryApiUrl;
      }
      if (this.queryRequestMode.length > 0) {
        dataBody.requestMode = this.queryRequestMode;
      }
      return dataBody;
    },
    onPageChange(index) {
      this.pageIndex = index;
      let dataBody = this.setDataBody();
      this.queryPageable({
        index: index - 1,
        size: 10,
        data: dataBody,
      });
    },
    add() {
      this.$router.push({path: '/oscm/target/api/settings'});
    },
    edit(index) {
      this.showCronList = true;
      this.showDepthList = true;
      let editParam = {};
      editParam.data = this.copyFormData.table[index]
      editParam.isEdit = true;
      this.$router.push({path: '/oscm/target/api/settings', query: editParam});
    },
    deleteOne(dataBody) {
      MessageBox.confirm("是否删除？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        dataBody.delFlag = 1
        apiRulesApi.save(dataBody, (response) => {
          if (response.data.message === "success") {
            Message({
              message: '删除成功',
              type: 'success'
            });
            this.refreshPage()
          } else {
            this.refreshPage()
          }
        })
      }).catch(() => {
      })
    },
    closeDialog() {
      this.saveLoading = false;
      this.dialogVisible = false;
      this.refreshPage();
    },
    query() {
      this.pageIndex = 1;
      let dataBody = this.setDataBody();
      this.queryPageable({
        index: 0,
        size: 10,
        data: dataBody,
      });
    },
    resetSearch() {
      this.pageIndex = 1;
      this.queryApiName = ""
      this.queryApiUrl = ""
      this.queryRequestMode = ""
      this.queryPageable({
        index: 0,
        size: 10,
        data: this.setDataBody(),
      });
    },
    resetFormData() {
      this.form = {
        delFlag: 0,
        apiName: "",
        apiUrl: "",
        requestMode: ""
      }
    }
    ,
    btn_close() {
      this.dialogVisible = false;
      this.resetFormData();
    },
    refreshPage() {
      this.saveLoading = false;
      let dataBody = this.setDataBody();
      this.queryPageable({
        index: this.pageIndex - 1,
        size: 10,
        data: dataBody,
      });
    }
    ,
    ...
        mapMutations({}),
    ...
        mapActions({
          queryPageable: 'apiRules/queryPageable'
        })
  }
  ,
  computed: {
    metadata: function () {
      const temp = [];
      this.$store.state.metadata.metadata.forEach((element) => {
        if (element.tableName === "api_rules") {
          let tempElement = {...element};
          tempElement.minWidth = tempElement.columnWidth + "%";
          tempElement.columnWidth = 0;
          temp.push(tempElement);
        }
      });
      return temp;
    }
    ,
    ...
        mapState({
          tableData: (state) => state.apiRules.table,
          total: (state) => state.apiRules.count,
          isLoading: (state) => state.apiRules.isLoading
        }),
    copyFormData() {
      return this.$store.state.apiRules
    }
  }
  ,
  mounted() {
    this.refreshPage();
  }
}
</script>

<style scoped>

.el-pagination {
  display: flex;
  justify-content: center;
}

</style>