<template>
  <Modal class="th-provider" v-model="dlg" :mask-closable="false" width="1000" height="600" title="选择数据" :styles="{top: '60px'}">
    <div class="th-list-wrapper">
      <div class="groups inline" v-if="filters.length > 1">
        <div class="menu" :class="{active: selectedMenu===menu.type}" v-for="menu in menus" :key="menu.type" @click="menuChange(menu)">
          <div :class="`th-icon inline th-icon-${menu.icon}`"></div>
          {{menu.name}}
        </div>
      </div>
      <div class="sources inline" :style="`width:${filters.length > 1?'calc(100% - 186px)':'100%'};`">
        <SourcePanel ref="sourcePanel" @on-select="itemSelectChange" v-show="selectedMenu==='source'"  :editByUrl="editUrl"/>
        <ModelPanel @on-select="itemSelectChange" v-show="selectedMenu==='model'" :editByUrl="editUrl" @on-change="parameterChange"/>
      </div>
    </div>
    <template #footer>
      <div class="btn-group">
        <Input class="url" v-model="url" type="text" @on-change="changeUrl" v-if="urlEditable"/>
        <div class="btn inline" @click="hide">取消</div>
        <div class="btn inline" @click="onOk">确定</div>
      </div>
    </template>
  </Modal>
</template>

<script>
import util from '../../libs/util'
import _ from 'lodash'
import {modelLoad} from '../../libs/request'
import SourcePanel from './SourcePanel.vue'
import ModelPanel from './ModelPanel.vue'
export default {
  props: {
    filters: {
      type: Array,
      default: () => ['source', 'model']
    },
    urlEditable: {
      type: Boolean,
      default: true
    }
  },
  components: {SourcePanel, ModelPanel},
  methods: {
    show(options) {
      this.dlg = true
      this.$refs.sourcePanel.refreshSource()
      this.options = options
      this.selectedMenu = 'source'
    },
    hide() {
      this.keyword = ''
      this.selectedItem = null
      this.selectedMenu = ''
      this.dlg = false
    },
    async onOk() {
      if (!this.selectedItem && !this.editUrl) {
        this.$Message.warning('未选中任何文件')
        return
      }
      let item = _.cloneDeep(this.selectedItem) || {}
      Object.assign(item, {url: this.finalUrl})
      if (this.selectedItem && this.selectedItem.type === 'model') { // 选中的是模型，需要获取模型参数
        let response = await modelLoad(this.selectedItem.owner, this.selectedItem.modelId)
        Object.assign(item, {parameters: response.data.parameters})
      }
      if (this.options.onSelect) {
        this.options.onSelect(item)
      }
      this.$emit('on-change', item)
      this.hide()
    },
    menuChange(menu) {
      this.selectedItem = null
      this.selectedMenu = menu.type
    },
    itemSelectChange(item) {
      this.selectedItem = item
    },
    changeUrl(){
      this.editUrl=true
      this.selectedItem=null
    },
    parameterChange(data){
      this.selectedItem=data
    }
  },
  data() {
    return {
      options: {},
      dlg: false,
      selectedItem: null,
      selectedMenu: 'source',
      editUrl:false,
      finalUrl: ''
    }
  },
  computed: {
    url: {
      get(){
        let result = ''
        if(this.selectedItem){
          if(this.selectedMenu==="source"){
            result = `${util.getAPI('tables')}/${this.selectedItem.owner}/${
              this.selectedItem.resId
            }/data`
          }else{
            let url=`${util.getAPI('models')}/${this.selectedItem.owner}/${
                this.selectedItem.modelId
                }/data`
            url=util.contractUrl(url,this.selectedItem.parameters)
            result = url
          }
        }else{
          if (this.options&&this.options.source && this.options.source.url) {
            result = this.options.source.url
          } else {
            result = ''
          }
        }
        // this.finalUrl = result
        return result
      },
      set(value){
        this.finalUrl = value
      }
    },
    menus(){
      let items = []
      this.filters.forEach(filter => {
        if (filter === 'source') {
          items.push({
            type: 'source',
            icon: 'data-small',
            name: '数据'
          })
        } else if (filter === 'model') {
          items.push({
            type: 'model',
            icon: 'model-small',
            name: '模型'
          })
        }
      })
      return items
    }
  },
  watch:{
    selectedItem(){
      this.editUrl=false
    },
    url:{
      deep: true,
      handler: function (newVal) {
        this.finalUrl = newVal
      }
    }
  }
}
</script>

