<template>
  <div ref="form" class="settingPanel">
    <el-row>
      <el-page-header @back="goBack" content="站点设置"></el-page-header>
    </el-row>
    <el-divider></el-divider>
    <div>
      <el-card class="box-card">
        <div class="demo-input-suffix">
          <div class="title">
            <div class="dot"></div>
            基本设置
            <div class="dot"></div>
          </div>
          <el-col class="card-item" :span="2">
            <label class="text_label">名称：</label>
          </el-col>
          <el-col class="card-item" :span="6">
            <el-input v-model="formData.apiName" size="mini" autocomplete="off"></el-input>
          </el-col>
          <el-col class="card-item" :span="2"><label class="text_label">链接：</label></el-col>
          <el-col class="card-item" :span="6">
            <el-input v-model="formData.apiUrl" size="mini" autocomplete="off"></el-input>
          </el-col>
          <el-col class="card-item" :span="2"><label class="text_label">Headers：</label></el-col>
          <el-col class="card-item" :span="6">
            <el-input v-model="formData.headers" size="mini" autocomplete="off"></el-input>
          </el-col>
          <el-col class="card-item" :span="2">
            <label class="text_label">请求方式：</label>
          </el-col>
          <el-col class="card-item" :span="6">
            <el-select
                v-model="formData.requestMode" size="mini"
                placeholder="请选择"
                style="width:100%"
            >
              <el-option
                  v-for="item in requestModeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col class="card-item" :span="2">
            <label class="text_label">登录方式：</label>
          </el-col>
          <el-col class="card-item" :span="6">
            <el-select
                v-model="formData.loginType" size="mini"
                placeholder="请选择"
                style="width:100%"
            >
              <el-option
                  v-for="item in loginTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </div>
      </el-card>

      <el-card class="box-card" v-if="formData.loginType === '1'">
        <div class="demo-input-suffix">
          <div style="position:relative;">
            <div class="title" style="padding:10px 90px 10px 90px;">
              <div class="dot"></div>
              登录参数
              <div class="dot"></div>
            </div>
          </div>
          <el-row>
            <el-col class="card-item" :span="2">
              <label class="text_label">登录参数：</label>
            </el-col>
            <el-col class="card-item" :span="22">
              <el-input size="mini" autocomplete="off" v-model="formData.loginParam" rows="1" placeholder="请输入登录参数"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="card-item" :span="2">
              <label class="text_label">登录脚本：</label>
            </el-col>
            <el-col class="card-item" :span="22">
              <el-input size="mini" type="textarea" autocomplete="off" v-model="formData.loginScript" rows="3" placeholder="请输入登录脚本"></el-input>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="demo-input-suffix">
          <div style="position:relative;">
            <div class="title" style="padding:10px 90px 10px 90px;">
              <div class="dot"></div>
              自定义参数
              <div class="dot"></div>
            </div>
          </div>
          <el-row class="demo-input-suffix" v-if="formData.requestMode==='GET'">
            <el-col class="card-item" :span="2">
              <label class="text_label">请求参数：</label>
            </el-col>
            <el-col class="card-item" :span="4">
              <el-input size="mini" autocomplete="off" v-model="formData.params" rows="1" placeholder="请输入请求参数"></el-input>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col class="card-item" :span="2">
              <label class="text_label">请求体：</label>
            </el-col>
            <el-col class="card-item" :span="22">
              <el-input size="mini" autocomplete="off" v-model="formData.dataBody" rows="1" placeholder="请输入请求体"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="card-item" :span="2">
              <label class="text_label">解析脚本：</label>
            </el-col>
            <el-col class="card-item" :span="22">
              <el-input size="mini" type="textarea" autocomplete="off"
                        v-model="formData.analyzeScript" rows="3" placeholder="请输入解析脚本"></el-input>
            </el-col>
          </el-row>

        </div>
      </el-card>
      <div align="center" class="footer_container">
        <el-button @click="saveTargetWebsite" type="primary" icon="el-icon-check" size="mini">保存</el-button>
        <el-button icon="el-icon-close" size="mini" @click=" cancelSave()">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import {PageHeader, Select, Message, Switch, Slider, Link, Rate, RadioButton, Option, Col, Dialog} from 'element-ui';
import metaDictApi from '../../js/api/metaDictApi';
import apiRulesApi from "@/js/api/apiRulesApi";

Vue.use(PageHeader)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Slider)
Vue.use(Link)
Vue.use(Rate)
Vue.use(RadioButton)
Vue.use(Option)
Vue.use(Col)
Vue.use(Dialog)

export default {
  name: 'ApiWebsiteSetting',
  components: {},
  data() {
    return {
      formData: {
        loginType:"0",
        requestMode:"GET"
      },
      requestModeOptions: [],
      loginTypeOptions: [],
    }
  },
  mounted: function () {
    const isEdit = this.$route == null ? false : this.$route.query.isEdit;
    if (isEdit === true || isEdit === 'true' ) {
      this.formData = this.$route.query.data;
    }
    metaDictApi.queryByTableName('api_rules', (response) => {
      if (response.data.code === 200) {
        this.requestModeOptions = this.buildDictTree(response.data.content, 'requestMode');
        this.loginTypeOptions = this.buildDictTree(response.data.content, 'loginType');
      }
    })
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    buildDictTree(data, columnString) {
      const siteOptions = [];
      let nodeList = []
      data.forEach(e => {
        if (e.columnName === columnString)
          nodeList.push({
            value: e.dictCode,
            label: e.dictValue,
            children: undefined,
            parentDictCode: e.parentDictCode
          });
      })
      nodeList.forEach(e1 => {
        if (e1.parentDictCode !== undefined) {
          nodeList.forEach(e2 => {
            if (e1.parentDictCode === e2.value) {
              if (e2.children === undefined) {
                e2.children = []
              }
              e2.children.push(e1);
            }
          })
        } else {
          siteOptions.push(e1);
        }
      })
      return siteOptions;
    },
    saveTargetWebsite() {
      const tempData = {...this.formData};
      if ((tempData.apiName == null || tempData.apiName.trim() === "") || (tempData.apiUrl == null || tempData.apiUrl.trim() === "")) {
        Message({
          message: '请输入API名称和API链接',
          type: 'warning'
        });
        return;
      }
      tempData.delFlag = 0;
      tempData.requestMode = tempData.requestMode.constructor === Array ? tempData.requestMode[tempData.requestMode.length - 1] : tempData.requestMode;
      tempData.loginType = tempData.loginType.constructor === Array ? tempData.loginType[tempData.loginType.length - 1] : tempData.loginType;
      apiRulesApi.save(tempData, (response) => {
        if (response.data.message === 'success') {
          this.$router.push({path: '/oscm/target'});
          Message({
            message: '保存成功',
            type: 'success'
          });

        } else {
          Message({
            message: '保存失败',
            type: 'error'
          });
        }
      })
    },
    cancelSave() {
      this.$router.push({path: '/oscm/target'})
      // this.$router.go(-1);
    }
  },
  computed: {

  }
}
</script>

<style scoped>
.box-card .text_label {
  text-align: right;
  font-weight: bold;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 100%;
  line-height: 28px;
}


.box-card {
  background-color: #f8f8f8;
  margin-bottom: 10px;
  padding-bottom: 15px;
}

.box-card .title {
  text-align: center;
  font-size: 18px;
  padding: 10px;
  color: #666;
}

.load-more-card .title {
  text-align: center;
  font-size: 18px;
  padding: 10px;
  color: #666;
}

.load-more-card .title:hover {
  text-align: center;
  font-size: 18px;
  padding: 10px;
  color: #409EFF;
  cursor: pointer;
}


.box-card .dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin: 0 15px;
  background-color: #0080e5;
}

.card-item {
  height: 41px;
}

</style>