<template>
  <ych-modal
    :fullscreen="false"
    :visible="visible"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel">

    <view-select-redirect v-if="type === 'table'" ref="container" :viewCode="viewCode" :multi="multi" :stores="stores"
                          :rows="rows" :keys="keys" @selected="handleOk" :fks="fks" :parameterValue="parameterValue" @setDialogTitle="setDialogTitle"/>
    <view-editable-select-redirect v-else-if="type === 'editableTable'" ref="editableContainer" :viewCode="viewCode" :multi="multi" :stores="stores"
                                   :rows="rows" :keys="keys" @selected="handleOk" :fks="fks" :parameterValue="parameterValue" @setDialogTitle="setDialogTitle"/>
    <tree-select-redirect v-else-if="type === 'tree'" ref="treeContainer" :viewCode="viewCode" :multi="multi" :stores="stores"
                          :rows="rows" :keys="keys" @selected="handleOk" :labelField="labelField"/>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $locle('m.common.button.close') }}</a-button>
      <a-button v-if="!hideClearBut" key="handleClear" @click="handleClear">{{ $locle('m.common.button.clear') }}</a-button>
      <a-button key="submit" type="primary" @click="handleOk">{{ $locle('m.common.button.ok') }}</a-button>
    </template>

    <template slot="title">
      <span v-if="dialogTitle" v-html="dialogTitle"></span>
      <span v-else>{{ title }}</span>
    </template>
  </ych-modal>
</template>

<script>

  import ViewSelectRedirect from './ViewSelectRedirect'
  import ViewEditableSelectRedirect from './ViewEditableSelectRedirect'
  import TreeSelectRedirect from './TreeSelectRedirect'
  import { getAction } from '../../utils/manage'
  import YchConstant from "../../utils/YchConstant";
  import locleUtil from "../../utils/LocleUtil";

  export default {
    name: 'ViewSelectModal',
    components: {
      ViewSelectRedirect,
      ViewEditableSelectRedirect,
      TreeSelectRedirect,
    },
    props: {
      multi: Boolean,
      viewCode: String,
      rows: Array,
      keys: Array,
      labelField: String,
      fks: {
        type: Array,
        default: () => []
      },
      hideClearBut: {
        type: Boolean,
        default: false
      },
      stores: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    created() {
      console.log('ViewSelectModal')
    },
    data () {
      return {
        title: null,
        visible: false,
        type: null,
        url: {
          getViewType: YchConstant.PREFIX_EFORM + '/engine/viewEngine/getViewType'
        },
        parameterValue: [],
        dialogTitle: null
      }
    },
    methods: {
      $locle(params){
        return locleUtil.getLocale(params);
      },
      show (parameterValue) {
        this.parameterValue = parameterValue || []
        this.visible = true
        this.type = null
      },
      handleOk () {
        if (this.type === 'table') {
          if (this.$refs.container.rowSelection.selectionRows.length === 0) {
            this.$message.warning(this.$locle('m.eform.formDesign.label.qing-xuan-ze-shu-ju'))
            return
          }
          this.$emit('ok', this.$refs.container.rowSelection.selectionRows)
          this.handleCancel()
        } else if (this.type === 'editableTable') {
          const selectionRows = this.$refs.editableContainer.getCheckboxRecords()
          if (selectionRows.length === 0) {
            this.$message.warning(this.$locle('m.eform.formDesign.label.qing-xuan-ze-shu-ju'))
            return
          }
          this.$emit('ok', selectionRows)
          this.handleCancel()
        } else if (this.type === 'tree') {
          if (this.$refs.treeContainer.checkedRows.length === 0) {
            this.$message.warning(this.$locle('m.eform.formDesign.label.qing-xuan-ze-shu-ju'))
            return
          }
          this.$emit('ok', this.$refs.treeContainer.checkedRows)
          this.handleCancel()
        }
      },
      handleClear () {
        this.$emit('ok')
        this.handleCancel()
      },
      handleCancel () {
        this.visible = false
        this.type = null
        this.dialogTitle = null
        this.title = null
      },
      init () {
        getAction(this.url.getViewType, { viewCode: this.viewCode }).then((res) => {
          if (res.success) {
            this.type = res.result
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
        })
      },
      setDialogTitle(dialogTitle){
        this.dialogTitle = dialogTitle
        this.title = this.$locle('m.eform.formDesign.label.xuan-ze-shu-ju')
      }
    },
    watch: {
      visible: {
        handler (value) {
          if (value) {
            this.init()
          }
        },
        immediate: true
      }
    }
  }
</script>
