<script setup name="AssetLibrary">
import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
import FormGroup from './modules/formGroup.vue'
import img from '@/assets/images/assetLibrary/index.js'

const emit = defineEmits(['page'])

const step = ref('select') // select  edit
const selectData = reactive({
  name: '',
  type: ''
})

const listData = ref([
  {
    title: '关系型数据库',
    type: 1,
    list: [
      {
        name: 'MYSQL',
        icon: img.MYSQL,
      },
      {
        name: 'ORACLE',
        icon: img.ORACLE,
      },
      {
        name: 'POSTGRESQL',
        icon: img.POSTGRESQL,
      },
      {
        name: 'DB2',
        icon: img.DB2,
      },
      {
        name: 'MSSQLSERVER',
        icon: img.MSSQLSERVER,
      },
      {
        name: 'MARIADB',
        icon: img.MARIADB,
      },
      {
        name: 'GBASE8S',
        icon: img.GBASE8S,
      },
      {
        name: 'KINGBASE',
        icon: img.KINGBASE,
      },
      {
        name: 'DM',
        icon: img.DM,
      },
      {
        name: 'GREENPLUM',
        icon: img.GREENPLUM,
      },
      {
        name: 'GAUSS',
        icon: img.GAUSS,
      },
      {
        name: 'OCEANBASE',
        icon: img.OCEANBASE,
      },
      {
        name: 'GAUSSDB',
        icon: img.GAUSSDB,
      }
    ]
  },
  {
    title: 'NoSQL',
    type: 2,
    list: [
      {
        name: 'ES',
        icon: img.ES,
      },
      {
        name: 'MONGODB',
        icon: img.MONGODB,
      }
    ]
  },
  {
    title: '消息队列',
    type: 3,
    list: [
      {
        name: 'KAFKA',
        icon: img.KAFKA,
      }
    ]
  }
])

const hadoopData = reactive({
  index: null,
  list: [
    {
      name: 'Apache',
      icon1: img.apache1,
      icon2: img.apache2,
      list: [
        {
          name: 'HIVE',
          icon: img.HIVE,
          type: 4,
        }
      ]
    },
    {
      name: 'CLOUDERA',
      icon1: img.cloudera1,
      icon2: img.cloudera2,
      list: [
        {
          name: 'HIVE',
          icon: img.HIVE,
          type: 4,
        }
      ]
    },
    {
      name: '星环',
      icon1: img.star1,
      icon2: img.star2,
      list: [
        {
          name: 'HIVE_TDH',
          icon: img.HIVE,
          type: 4,
        }
      ]
    }
  ]
})

// hadoop事件
const hadoopClick = (index) => { 
  hadoopData.index = index
}

// 新增
const editTo = (item,type) => {
  selectData.name = item.name
  selectData.type = type
  step.value = 'edit'
}

// 新增回调
const modalConfirm = () => {
  console.log('modalConfirm')
  emit('page', 'list')
}

</script>

<template>
  <div class="app-container scroller">
    <PageTitle back @back="emit('page', 'list')">
      <template #title>
        <span id="badDebt" class="title-icon">
          新增数据源
          <PageTour tourType="badDebt" />
        </span>
      </template>
    </PageTitle>
    <div class="app-container__body">
      <div v-if="step === 'select'">
        <div class="listBox" v-for="(item,index) in listData" :key="index">
          <div class="title">{{ item.title }}</div>
          <div class="img-warpper">
            <img class="img" :src="liItem.icon" :alt="liItem.name" @click="editTo(liItem, item.type)" v-for="(liItem, i) in item.list" :key="i">
          </div>
        </div>
        <div class="title">Hadoop品牌：<span class="data-base-name">{{ hadoopData.index !== null ? hadoopData.list[hadoopData.index].name : '' }}</span></div>
        <div style="display: inline-block;">
          <div class="hadoop-list-box">
            <div class="hadoop-item-box" :class="hadoopData.index === index ? 'hadoop-item-box-active' : ''" v-for="(item,index) in hadoopData.list" :key="index" @click="hadoopClick(index)">
              <img :src="item.icon1" alt="">
              <img :src="item.icon2" alt="" class="hidden-img">
              <div class="name">
                <span>{{ item.name }}</span>
                <div class="bar"></div>
              </div>
            </div>
          </div>
        </div>
        <div style="padding-top: 10px;color: #7a8495;">*点击图标切换Hadoop品牌</div>
        <div v-if="hadoopData.index !== null" style="color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; padding: 10px 0px;">Hadoop</div>
        <div class="img-warpper" v-if="hadoopData.index !== null">
          <img class="img" :src="item.icon" :alt="item.name" @click="editTo(item, item.type)" v-for="(item, index) in hadoopData.list[hadoopData.index].list" :key="index">
        </div>
      </div>
      <div v-if="step === 'edit'" style="padding: 30px 150px;">
        <div style="padding-bottom: 20px;">
          <span style="color: rgb(102, 102, 102);">数据源类型：</span> 
          <span class="source-title">{{ selectData.name }}</span>
        </div>
        <FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="step = 'select'" @confirm="modalConfirm" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: #21333f;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  padding: 10px 0 10px 12px;
  .data-base-name{
    color: #2c9ef7;
    font-size: 20px;
    font-weight: 400;
  }
}
.img-warpper {
  background-color: #f3f5fa;
  padding: 7.5px;
  margin-top: 24px;
  margin-bottom: 50px;
  margin-left: 12px;
  line-height: 1;
  .img {
    width: 132px;
    font-size: 0;
    margin: 0 10px 10px 0;
    cursor: pointer;
  }
}
.hadoop-list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  background: #f1f3f5;
  padding: 10px;
  .hadoop-item-box {
    padding: 8px;
    background: #fff;
    cursor: pointer;
    position: relative;
    -webkit-transition: -webkit-box-shadow 0.3s;
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    margin-right: 16px;
    img {
      font-size: 0;
      vertical-align: bottom;
      width: 132px;
    }
    .hidden-img {
      position: absolute;
      left: 8px;
      opacity: 0;
      -webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
    }
    .name {
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin-top: 8px;
      position: relative;
      .bar {
        position: absolute;
        opacity: 0;
        background-color: #1f85df;
        height: 2px;
        width: 0;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        left: 0;
        bottom: -4px;
      }
    }
  }
  .hadoop-item-box-active{
    -webkit-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
    .hidden-img{
      opacity: 1;
    }
    .name{
      .bar{
        opacity: 1;
        width: 132px;
        left: 0;
      }
    }
  }
  .hadoop-item-box:hover {
    -webkit-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
    .hidden-img {
      opacity: 1;
    }
  }
}
.source-title{
  font-size: 18px;
  font-weight: 700;
  color: #1f85df;
}
</style>