<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-10-09 16:04:09
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-15 11:00:14
 -->
<!--
<import-dubbo
  :showDialog="showDialog"
  @hideDialog="hideDialog">
</import-dubbo>

import importDubbo from '@/components/createApi/import-dubbo.vue'
 -->
<template>
  <div v-show="customDialog">
    <el-dialog class="edit-dialog" title="导入dubbo数据" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div class="edit-dialog-body">
        <el-form :model="formData" label-width="126px" :rules="rules" ref="importForm">
          <el-form-item label="dubbo接口名称:" prop="apiPackage">
            <el-popover placement="bottom-start" style="min-width: 350px" width="350" v-model="apiPackageShow">
              <div class="select-tree-wrap">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="apiPackageInput" @keyup.native="value => searchData(value, 'name', apiPackageInput)"> </el-input>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                  <li :class="['el-select-dropdown__item', activePack == item ? 'selected hover' : '']" v-for="(item, index) in apiPackageList" :key="index + 'api'" @click="selectApiPackage(item)">
                    <el-tooltip class="item" effect="dark" :content="item" placement="top-start">
                      <span>{{ item }}</span>
                    </el-tooltip>
                  </li>
                </ul>
              </div>
              <div class="flex-column item-cell-select inline-block" slot="reference">
                <div class="depart-item-wrap">
                  <div style="" class="el-select el-select--large">
                    <div class="el-input el-input--suffix is-focus">
                      <span :class="['el-input__inner font-14 p-l-10', formData.apiPackage ? 'color-606266' : 'color-c0c4cc']" style="display: inline-block;line-height: 32px;">{{ formData.apiPackage ? formData.apiPackage : '请选择dubbo接口名称' }}</span>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i :class="['el-select__caret el-input__icon el-icon-arrow-up ', apiPackageShow ? 'is-reverse' : '']"></i>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </el-popover>
          </el-form-item>
          <el-form-item label="dubbo请求方法:" prop="method">
            <el-popover placement="bottom-start" style="min-width: 350px" width="350" v-model="methodShow">
              <div class="select-tree-wrap">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="methodInput" @keyup.native="value => searchData(value, 'method', methodInput)"> </el-input>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                  <li :class="['el-select-dropdown__item', activeMethod == item ? 'selected hover' : '']" v-for="(item, index) in methodList" :key="index + 'method'" @click="selectMethod(item)">
                    <el-tooltip class="item" effect="dark" :content="item" placement="top-start">
                      <span>{{ item }}</span>
                    </el-tooltip>
                  </li>
                </ul>
              </div>
              <div class="flex-column item-cell-select inline-block" slot="reference">
                <div class="depart-item-wrap">
                  <div style="" class="el-select el-select--large">
                    <div class="el-input el-input--suffix is-focus">
                      <span :class="['el-input__inner font-14 p-l-10', formData.method ? 'color-606266' : 'color-c0c4cc']" style="display: inline-block;line-height: 32px;">{{ formData.method ? formData.method : '请选择dubbo请求方法' }}</span>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i :class="['el-select__caret el-input__icon el-icon-arrow-up', methodShow ? 'is-reverse' : '']"></i>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </el-popover>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
        <el-button @click="customCancel">取消</el-button>
        <el-button type="primary" @click="customConfirm('importForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
// import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
import { _debounce } from '@/assets/js/public';
export default {
  name: 'import-dubbo',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      customDialog: false, // 弹框显示
      apiPackageInput: '',
      activePack: '',
      apiPackageList: [],
      apiPackageListCopy: [],
      methodInput: '',
      activeMethod: '',
      methodList: [],
      methodListCopy: [],
      formData: {
        apiPackage: '',
        method: ''
      },
      rules: {
        apiPackage: [{ required: true, message: '请选择dubbo接口名称', trigger: 'change' }],
        method: [{ required: true, message: '请选择dubbo接口方法', trigger: 'change' }]
      },
      // popover
      apiPackageShow: false,
      methodShow: false,
      // data
      returnData: {}
    };
  },
  methods: {
    /**
     *  搜索
     */
    searchData: _debounce(function(e, type, value) {
      const that = this;
      if (type == 'name') {
        that.apiPackageList = [];
        const copyData = JSON.parse(JSON.stringify(that.apiPackageListCopy));
        copyData.forEach(ele => {
          if (ele.includes(value)) {
            that.apiPackageList.push(ele);
          }
        });
        if (value == '') {
          that.apiPackageList = copyData;
        }
      } else {
        that.methodList = [];
        const copyData = JSON.parse(JSON.stringify(that.methodListCopy));
        copyData.forEach(ele => {
          if (ele.includes(value)) {
            that.methodList.push(ele);
          }
        });
        if (value == '') {
          that.methodList = copyData;
        }
      }
    }, 500),
    /**
     *   选择api名称
     */
    selectApiPackage(item) {
      const that = this;
      that.activePack = item;
      that.formData.apiPackage = item;
      that.formData.method = '';
      that.activeMethod = '';
      that.apiPackageShow = false;
      that.getData();
    },

    /**
     *   选择api方法
     */
    selectMethod(item) {
      const that = this;
      that.activeMethod = item;
      that.formData.method = item;
      that.methodShow = false;
      that.postEditData();
    },
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideDialog', '', that.formData);
      /* that.$nextTick(() => {
        that.formData.classifyName = '';
      }); */
    },

    /**
     *  确定
     */
    customConfirm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.$emit('hideDialog', that.returnData, that.formData);
        } else {
          return false;
        }
      });
    },
    postEditData() {
      const that = this;
      let para = {
        apiPackage: that.formData.apiPackage || '',
        method: that.formData.method || ''
      };
      getRequest('/gateway-manage/list-register-data', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.returnData = resData.result || {};
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     *  提交数据
     */
    setData(list) {
      const that = this;
      that.$emit('hideDialog', that.formData);
    },
    /**
     * 获取dubbo接口名称和方法
     */
    getData() {
      const that = this;
      let para = {
        apiPackage: that.formData.apiPackage || ''
      };
      getRequest('/gateway-manage/list-register', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            if (that.formData.apiPackage) {
              that.methodList = resData.result || [];
              that.methodListCopy = resData.result || [];
              return;
            }
            that.apiPackageList = resData.result || [];
            that.apiPackageListCopy = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    showDialog: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
      that.getData();
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.showDialog;
    that.getData();
  }
};
</script>

<style lang="less" scoped>
.edit-dialog {
  /deep/ .el-dialog__body {
    padding: 2px 55px 0 34px;
  }

  /deep/ .el-dialog__footer {
    border: none;
    padding-top: 3px;
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }

  .el-alert--info {
    width: 400px;
    font-size: 14px;
    color: #606266;
    background: #e6f7ff;
    border: 1px solid rgba(145, 213, 255, 1);
  }
  .el-icon-info {
    width: 12px;
    font-size: 12px;
    color: #1890ff;
  }
  .el-form {
    margin-top: 40px;
  }
  .el-input {
    width: 350px;
    overflow: hidden;
    .el-input__inner {
      &.color-c0c4cc {
        color: #c0c4cc;
      }
    }
  }

  .el-input__suffix {
    position: absolute;
    height: 30px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    text-align: center;
    color: #c0c4cc;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;
    background: #fff;
    border-radius: 4px;
  }
}
</style>
