<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-10-09 16:04:09
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-23 17:04:09
 -->
<!--
<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
          ref="importForm"
          :model="formData"
          label-width="126px"
          :rules="rules">
          <el-form-item
            label="dubbo接口名称:"
            prop="apiPackage">
            <el-popover
              v-model="apiPackageShow"
              placement="bottom-start"
              style="min-width: 350px"
              width="350">
              <div class="select-tree-wrap">
                <el-input
                  v-model="apiPackageInput"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  @keyup.native="value => searchData(value, 'name', apiPackageInput)" />
                <ul class="el-scrollbar__view el-select-dropdown__list">
                  <li
                    v-for="(item, index) in apiPackageList"
                    :key="index + 'api'"
                    :class="['el-select-dropdown__item', activePack == item ? 'selected hover' : '']"
                    @click="selectApiPackage(item)">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item"
                      placement="top-start">
                      <span>{{ item }}</span>
                    </el-tooltip>
                  </li>
                </ul>
              </div>
              <div
                slot="reference"
                class="flex-column item-cell-select inline-block">
                <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' : '']" />
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </el-popover>
          </el-form-item>
          <el-form-item
            label="dubbo请求方法:"
            prop="method">
            <el-popover
              v-model="methodShow"
              placement="bottom-start"
              style="min-width: 350px"
              width="350">
              <div class="select-tree-wrap">
                <el-input
                  v-model="methodInput"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  @keyup.native="value => searchData(value, 'method', methodInput)" />
                <ul class="el-scrollbar__view el-select-dropdown__list">
                  <li
                    v-for="(item, index) in methodList"
                    :key="index + 'method'"
                    :class="['el-select-dropdown__item', activeMethod == item ? 'selected hover' : '']"
                    @click="selectMethod(item)">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item"
                      placement="top-start">
                      <span>{{ item }}</span>
                    </el-tooltip>
                  </li>
                </ul>
              </div>
              <div
                slot="reference"
                class="flex-column item-cell-select inline-block">
                <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' : '']" />
                        </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: 'ImportDubbo',
  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: {}
    };
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.showDialog;
    that.getData();
  },
  methods: {
    /**
     * @description: 搜索
     * @param {Object} e
     * @param {Number} type
     * @param {Number} value
     * @author: 无尘
     */
    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),
    /**
     * @description: 选择api名称
     * @param {Object} item
     * @author: 无尘
     */
    selectApiPackage(item) {
      const that = this;
      that.activePack = item;
      that.formData.apiPackage = item;
      that.formData.method = '';
      that.activeMethod = '';
      that.apiPackageShow = false;
      that.getData();
    },

    /**
     * @description: 选择api方法
     * @param {Object} item
     * @author: 无尘
     */
    selectMethod(item) {
      const that = this;
      that.activeMethod = item;
      that.formData.method = item;
      that.methodShow = false;
      that.postEditData();
    },
    /**
     * @description: 关闭
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     * @description: 取消
     * @author: 无尘
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },

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

    /**
     * @description: 确定
     * @param {String} formName
     * @author: 无尘
     */
    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
          });
        });
    },

    /**
     * @description: 提交数据
     * @author: 无尘
     */
    setData() {
      const that = this;
      that.$emit('hideDialog', that.formData);
    },
    /**
     * @description: 获取dubbo接口名称和方法
     * @author: 无尘
     */
    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();
    }
  }
};
</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>
