<template>
  <div class="th-provider-panel full">
    <div class="top">
      <div class="top-left">
        <Input search clearable class="search inline" placeholder="请输入关键词筛选" v-model="keyword"/>
        <div class="tools inline">
          <IconButton name="md-refresh" :size="22" @on-click="refreshSource"/>
          <IconButton name="md-add" :size="22" @on-click="createModel" v-if="sourceScope==='private'"/>
        </div>
        <div class="tab-btns inline">
          <IconButton name="ios-apps" :selected="currentMode==='icon'" :size="22" @on-click="currentMode='icon'"/>
          <IconButton name="md-list" :selected="currentMode==='list'" :size="22" @on-click="currentMode='list'"/>
        </div>
      </div>
    </div>
    <ModelList class="list inline" :list="displayModelList" :isprivate="sourceScope==='private'" :mode="currentMode" :sortBy="sortBy" @on-select="modelSelect" @on-update="refreshSource" :style="{width:activeProperties?'calc(100% - 186px)':'100%',borderRight:activeProperties?'1px solid #e8eaec':'none'}"/>
    <div class="properties inline"  :style="{width:activeProperties?'186px':'0px'}" v-if="activeProperties">
      <ModelProperties :data="activeProperties" :isprivate="sourceScope==='private'" @on-change="parameterChange"/>
    </div>
  </div>
</template>

<script>
import {modelLoad, modelCreate, getModelList} from '../../libs/request'
import util from '../../libs/util'
import IconButton from '../icon-button'
import ModelList from '../model-list'
import ModelProperties from '../model-list/ModelProperties.vue'
import config from '../../constants/config'
export default {
  props:["editByUrl"],
  components: {IconButton, ModelList,ModelProperties},
  methods: {
    createModel() {
      let name = '新建统计模型'
      let index = 2
      do { // 检查表名是否已存在，如果已存在则在后面加上数字索引
        if (!this.isNameExist(name)) {
          break;
        }
        name = '新建统计模型' + index
      } while (index++)
      let ownerId = config.USER
      let modelId = util.generateId()
      modelCreate(ownerId, modelId, {
        version: '1.0',
        name,
        parameters: [],
        tables: [],
        operators: [],
        output: ''
      }).then((res) => {
        this.modelList.unshift(res.data)
        window.open(`#/models/${modelId}`)
      })
    },
    isNameExist(value) {
      return !!this.modelList.find(g => g.name === value)
    },
    modelSelect(item) {
      this.$emit('on-select', item)
      this.selectedItem=item
    },
    refreshSource() {
      let ownerId = config.USER
      getModelList(ownerId).then(res => {
        this.modelList = res.data
      })
    },
    closeProperty(){
      this.activeProperties = null
      this.$emit("on-close")
    },
    async showProperties(node) {
      let {owner, modelId} = node
      let  response = await modelLoad(owner, modelId)
      this.activeProperties = response.data
    },
    parameterChange(data){
       this.$emit("on-change",data)
    }
  },
  mounted() {
    this.refreshSource()
  },
  data() {
    return {
      currentMode: 'icon',
      sourceScope: 'private',
      sortBy: 'updatedAt',
      keyword: '',
      activeProperties:null,
      selectedItem:null,
      modelList: []
    }
  },
  computed: {
    displayModelList(){
       if(this.keyword!==""){
         let list=[]
         list=this.modelList.filter(m=>{
           if(m.name.indexOf(this.keyword)>-1){
             return m
           }
         })
         return list
       }else{
         return this.modelList
       }
    }
  },
  watch:{
    selectedItem(newV){
      if(newV){
        this.showProperties(newV)
      }
    },
    editByUrl(newV){
      if(newV){
        this.selectedItem=null
        this.activeProperties=null
      }
    }
  }

}
</script>
