<template>
  <div class="right-section-wrapper">
    <div class="create-cont">
      <ul class="edb-list" v-if="edbList.length">
        <li :class="['edb-item',{'selected':selectEdb.EdbInfoId===item.EdbInfoId}]" v-for="(item,index) in edbList" :key="index" @click="chooseEdb(item)">
          <span>{{item.EdbName}}</span>
          <div class="item-right">
            <!-- <i class="el-icon-edit" style="margin-right:10px" @click.stop="editEdbSettingHandle"/> -->
            <img :src="$icons.jupm_icon" class="jump-icon" @click.stop="linkToEdbBase(item)">
          </div>
        </li>
      </ul>
      <div style="padding-top: 50px;" v-else>
        <tableNoData text="暂无指标"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  watch: {
    list(nval) {
      this.edbList = nval;
    }
  },
  data() {
    return {
      edbList:[],
      selectEdb: {},
    }
  },
  mounted(){

  },
  methods:{

    chooseEdb(item) {
      if(item.EdbInfoId === this.selectEdb.EdbInfoId) {
        this.selectEdb = {};
      }else {
        this.selectEdb = item;
      }

      this.$emit('choose')
    },

    //跳转指标库
    linkToEdbBase({UniqueCode,EdbInfoId,ClassifyId}) {
      let {href} = this.$router.resolve({path:'/database', query: {
        code: UniqueCode,
        id: EdbInfoId,
        classifyId:ClassifyId
      }});
			window.open(href,'_blank');
    }
  },
}
</script>
<style scoped lang='scss'>
@import"~@/styles/theme-vars.scss";
.right-section-wrapper {
  width: 360px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #C8CDD9;
  background: #FFF;
  margin-left: 20px;
  .create-cont {
    .edb-list {
      padding: 30px;
      overflow-y: auto;
      .edb-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        margin: 10px 0;
        border-radius: 4px;
        border: 1px solid #C8CDD9;
        background: #FFF;
        &.selected { 
          border-color: $theme-color; background: #ECF2FE;
        }
        .item-right {
          display: flex;
          align-items: center;
          .jump-icon {
            cursor: pointer;
            &:hover {
              opacity: 0.8;
            }
          }
        }
        .el-icon-edit {
          font-size: 16px;
          &:hover {
            color: $theme-color;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.right-section-wrapper {
  .el-form--label-top .el-form-item__label {
    height: 20px;
    line-height: 20px;
  }
} 
</style>
