<template>
  <view class="bar_comp-sys-db">
    <view class="bar_title" @click="openPick">
      {{ db_name }}
    </view>

    <nut-picker
      v-model:visible="execConfig.visible"
      v-model="execConfig.value"
      :columns="execConfig.options"
      title="选择"
      @confirm="execConfig.confirm"
      :swipe-duration="0"
      :three-dimensional="false"
    >
      <template #top>
        <view class="picker_title_comp-sys-db">
          <view class="span">系统</view>
          <view class="span">数据库</view>
        </view>
      </template>
    </nut-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Storage from '@/common/utils/storage/index'
import EXEC from '@/common/utils/exec';
import { set_db , saveMenus} from '@/common/utils/create/index'


const openPick = () => {
  for(let item of EXEC.list_arr){
    if(item.value == EXEC.comp_id){
      execConfig.options = item.children
    }
  }
  execConfig.value = [ EXEC.system_id, EXEC.db_code]
  execConfig.visible=true
}
const changeData = () => {
  emit('changeData', {
    system_name: EXEC.system_name,
    db_name: EXEC.db_name
  })
}
const db_name = ref('')
const execConfig = <any>reactive({
  visible: false,
  value: [],
  options:[],
  confirm: (...args:any)=>{
    let options = args[0].selectedOptions
    if(options.length > 0){
      EXEC.system_id = options[0]?.value
      EXEC.system_name = options[0]?.text
      EXEC.db_code = options[1]?.value
      EXEC.db_name = options[1]?.text
      Storage.set('system_id', EXEC.system_id)
      Storage.set('system_name', EXEC.system_name)
      Storage.set('db_code', EXEC.db_code)
      Storage.set('db_name', EXEC.db_name)
      db_name.value = `${EXEC.system_name} - ${EXEC.db_name}`

      set_db().then(()=>{
        saveMenus()
      })
      changeData()
    }
  },
})


onBeforeMount(async() => {
  execConfig.value = [EXEC.system_id, EXEC.db_code]
  db_name.value =  `${EXEC.system_name} - ${EXEC.db_name}`
})
onMounted(()=>{
})
onUnmounted(() => {
})
const emit = defineEmits(['changeData'])


</script>

<style lang="scss">
.bar_comp-sys-db{
  position: sticky;
  top: 0;
  z-index: 10;
  .bar_title{
    height: 60rpx;
    width: 100vw;
    font-size: 13px;
    text-align: center;
    background: #007aff;
    line-height: 60rpx;
    color:#fff;
  }
  .picker_title_comp-sys-db{
    position: absolute;
    top: 60px;
    z-index: 10;
    width: 100vw;
    background: #444;
    color: #fff;
    display: flex;
    justify-content: space-between;
    >.span{
      display: block;
      text-align: center;
      padding: 10rpx;
      width: 33.3333%;
      font-size: 12px;
    }
  }
}
</style>
