<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      title="关联应用"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :key="showKey"
    >
      <div class="relate-application-content">
        <el-transfer 
          v-model="transferValue" 
          filterable 
          :filter-method="filterMethod" 
          filter-placeholder="请输入应用名称" 
          :titles="['未关联应用名称', '已关联应用名称']"
          :props="{
            key: 'id',
            label: 'name'
          }"
          :data="transferData"
        ></el-transfer>
      </div>
      <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="confirmSubmitHandle()">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  components: {

  },
  data () {
    return {
      showKey: 0,
      visible: true,
      transferData: [], //穿梭框所有数据
      transferValue: [], //已关联的数据id
    }
  },
  props: {
    relateInfo: {
      type: Object,
      default: {}
    }
  },
  computed: {
    
  },
  methods: {
    close () {
      this.$emit('isShowRelatePopup', false)
    },
    // 表单提交
    confirmSubmitHandle: debounce(
      function () {
        this.$http.post('/dataResourceRel/saveDataResourceRel', { 
          linkType: this.relateInfo.linkType || 2, 
          id: this.relateInfo.id,
          referenceIds: this.transferValue
        }).then(({ data: res }) => {
          if(res.code == 0) {
            this.$message.success('关联成功！')
          } else {
            this.$message.error('关联失败，请联系管理员！')
          }
          this.$emit('isShowRelatePopup', false);
        }).catch(() => { })
      },
      1000,
      { leading: true, trailing: false }
    ),
    filterMethod(query, item) {
      return item.name.indexOf(query) > -1;
    }
  },
  mounted () {
    if(this.relateInfo && this.relateInfo.responseData) {
      const alreadLinkedArr = this.relateInfo.responseData.alreadLinked || [];
      this.transferData = alreadLinkedArr.concat(this.relateInfo.responseData.notLinked || []);
      alreadLinkedArr.length && alreadLinkedArr.forEach(item => {
        this.transferValue.push(item.id);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-input ::v-deep .el-input__inner {
  cursor: pointer;
}
::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
}
::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
}
.relate-application-content {
  height: 100%;
  ::v-deep .el-transfer {
    height: 100%;
  }
  ::v-deep .el-transfer-panel {
    width: 39.5%;
    height: 100%;
  }
  ::v-deep .el-transfer-panel__body {
    height: 100%;
  }
  ::v-deep .el-transfer-panel__list.is-filterable {
    height: calc(100% - 102px);
  }
}

</style>