<template>
    <div class="app-picker-select-view">
        <Dropdown :visible="visible" trigger="custom" style="left:0px;width: 100%" @on-clickoutside="() => {triggerMenu(false);}" >
          <Input v-model="inputValue" class="tree-input" type="text" :placeholder="placeholder" :disabled="disabled" @on-change="OnInputChange" @on-focus="()=>{triggerMenu(true);}" >
              <template v-slot:suffix>
                  <i v-if="inputValue && !disabled" class='el-icon-circle-close' @click="onClear"></i>
                  <Icon :type="visible ? 'ios-arrow-up' : 'ios-arrow-down'" class="icon-arrow" @click="() => {triggerMenu();}"></Icon>
              </template>
          </Input>
          <DropdownMenu slot="list">
              <component
                :is="pickupView.viewname"
                :viewdata="viewdata"
                :viewparam="viewparam"
                :ifShowButtons="false"
                :viewDefaultUsage="false"
                @viewdataschange="setValue"
                style="height:100%;">
              </component>
          </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { Subject, Subscription } from 'rxjs';
import { ViewTool } from '@/utils/view-tool/view-tool';

@Component({})
export default class AppPickerSelectView extends Vue {
    /**
     * 视图上下文
     *
     * @type {*}
     * @memberof AppFormDRUIPart
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof AppFormDRUIPart
     */
    @Prop() public viewparams!: any;
    
    /**
     * 视图参数
     *
     * @type {string}
     * @memberof AppTreePicker
     */
    public viewparam: any = JSON.stringify(this.viewparams);;
    
    /**
     * 视图上下文
     *
     * @type {string}
     * @memberof AppTreePicker
     */
    public viewdata: any = JSON.stringify(this.context);

    /**
     * 表单数据
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public data!: any;

    /**
     * 值
     *
     * @type {*}
     * @memberof AppTreePicker
     */
    @Prop() public value: any;

    /**
     * 是否启用
     *
     * @type {boolean}
     * @memberof AppPicker
     */
    @Prop({default: false}) public disabled!: boolean;
    
    /**
     * 应用实体主信息属性名称
     *
     * @type {string}
     * @memberof AppAutocomplete
     */
    @Prop({default: 'srfmajortext'}) public deMajorField!: string;

    /**
     * 应用实体主键属性名称
     *
     * @type {string}
     * @memberof AppAutocomplete
     */
    @Prop({default: 'srfkey'}) public deKeyField!: string;

    /**
     * 输入框值
     *
     * @type {string}
     * @memberof AppTreePicker
     */
    public inputValue: any = '';

    /**
     * 值项名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public valueitem?: string;

    /**
     * 关联视图名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public pickupView?: any;

    /**
     * 提示信息
     *
     * @type {string}
     * @memberof AppTreePicker
     */
    @Prop({default:"请选择..."}) public placeholder!: string;

    /**
     * 属性项名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public name!: string;

    /**
     * 编辑器参数
     *
     * @type {*}
     * @memberof AppTreePicker
     */
    @Prop() public itemParam: any;

    /**
     * 下拉显示控制变量
     *
     * @type {string}
     * @memberof AppTreePicker
     */
    public visible: boolean = false;

    /**
     * 父视图数据
     *
     * @type {string}
     * @memberof AppTreePicker
     */
    public srfparentdata: any = {};

    /**
     * 输入框change事件
     * 
     * @param $event 事件对象
     * @memberof AppTreePicker
     */
    public OnInputChange($event: any){
        let _viewdata =  Object.assign({ query: this.inputValue }, JSON.parse(this.viewdata)) ;
        this.viewdata = JSON.stringify(_viewdata);
    }

    /**
     * 输入框change事件
     * 
     * @param $event 事件对象
     * @memberof AppTreePicker
     */
    public triggerMenu(visible?: boolean){
        if(this.disabled){
          return;
        }
        if (!visible) {
            this.visible = !this.visible;
        } else {
            this.visible = visible;
        }
    }

    /**
     * 设置视图参数
     *
     * @memberof AppTreePicker
     */
    public setViewParam(formData: any) {
        if (!this.itemParam || !formData) {
            return;
        }
        let arg: any = {};
        // 合并视图上下文参数和视图参数
        let param: any = JSON.parse(JSON.stringify(this.viewparams));
        let context: any = JSON.parse(JSON.stringify(this.context));
        // 附加参数处理
        if (this.itemParam.context) {
            let _context = this.$util.formatData(formData,this.itemParam.context);
            Object.assign(context,_context);
        }
        if (this.itemParam.param) {
            let _param = this.$util.formatData(formData,this.itemParam.param);
            Object.assign(param,_param);
        }
        if (this.itemParam.parentdata) {
            let _parentdata = this.$util.formatData(formData,this.itemParam.parentdata);
            Object.assign(param,_parentdata);
        }
        this.viewdata = JSON.stringify(context);
        this.viewparam = JSON.stringify(param);
    }

    /**
     * 监控值
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppFormDRUIPart
     */
    @Watch('data',{deep:true})
    onActivedataChange(newVal: any, oldVal: any) {
        const newFormData: any = JSON.parse(newVal);
        const oldFormData: any = JSON.parse(oldVal);
        this.setViewParam(newFormData);
    }

    /**
     * 值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppPicker
     */
    @Watch('value')
    public onValueChange(newVal: any, oldVal: any) {
        this.inputValue = newVal;
    }

    /**
     * 生命周期
     *
     * @memberof AppTreePicker
     */
    public created() {
        this.setViewParam(this.data);
    }

    /**
     * vue 生命周期
     *
     * @memberof SelectType
     */
    public destroyed() {

    }

    /**
     * 设置值
     *
     * @param {*} item
     * @memberof AppTreePicker
     */
    public setValue(item: any) {
        this.visible = false;
        if (this.valueitem) {
            let tempvalue = item[0][this.deMajorField] ? item[0][this.deKeyField] : item[0].srfkey;
            this.$emit('formitemvaluechange', { name: this.valueitem, value: item[0][this.deKeyField] });
        }
        if (this.name) {
            let tempvalue = item[0][this.deMajorField] ? item[0][this.deMajorField] : item[0].srfmajortext;
            this.$emit('formitemvaluechange', { name: this.name, value: tempvalue });
        }
    }

    /**
     * 清除
     */
    public onClear($event: any): void {
        if (this.valueitem) {
            this.$emit('formitemvaluechange', { name: this.valueitem, value: '' });
        }
        if (this.name) {
            this.$emit('formitemvaluechange', { name: this.name, value: '' });
        }
        this.$forceUpdate();
    }

}
</script>

<style lang='less'>
@import './app-picker-select-view.less';
</style>