<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    :confirmLoading="spinning > 0"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$locale('m.common.button.close')">
    <a-spin :spinning="spinning != 0">
      <a-form :form="form"
              layout="horizontal"
              :hideRequiredMark="false"
              style="">
        <a-row :gutter="8">
          <a-col :span="8" v-for="(query, index) in queryColumns" :key="query.colCode">
            <a-form-item :label="$locale(query.queryAlias || query.colName)" :labelCol="typeof query.queryFormatJson.labelColSpan !== 'undefined' ? {span: query.queryFormatJson.labelColSpan} : labelCol" :wrapperCol="typeof query.queryFormatJson.wrapperColSpan !== 'undefined' ? {span: query.queryFormatJson.wrapperColSpan} : wrapperCol">
              <view-select-tag
                v-if="query.showType === 'page'"
                :placeholder="$locale(query.queryFormatJson.placeholder || query.queryAlias || query.colName)"
                v-model="query.queryDefaultValue"
                :viewCode="query.queryFormatJson.viewCode"
                :keyField="query.queryFormatJson.keyField"
                :labelField="query.queryFormatJson.labelField"
                :multi="query.queryFormatJson.multiple"
              />
              <query-field v-else :placeholder="$locale(query.queryFormatJson.placeholder || query.queryAlias || query.colName)" v-model.trim="query.queryDefaultValue"
                           :type="query.showType"
                           :showConfig="query.queryFormatJson"
                           :dictOptions="dictOptions" :dictOptionsFlg="dictOptionsFlg"></query-field>
            </a-form-item>
          </a-col>

        </a-row>

      </a-form>
      <template slot="footer">
        <a-button type="primary" @click="handleOk">{{ $locale('m.common.button.ok') }}</a-button>
        <a-button key="close" @click="handleCancel">{{ $locale('m.common.button.close') }}</a-button>
      </template>
    </a-spin>
  </ych-modal>
</template>

<script>
  import { getAction,httpAction} from '../../utils/manage'
  import YchConstant from "../../utils/YchConstant"
  import QueryField from '../tag/QueryField'
  import ViewSelectTag from '../viewSelect/ViewSelectTag'
  import locleUtil from "../../utils/LocleUtil";
  export default {
    name: 'CustomQueryModal',
    components: {
      QueryField,
      ViewSelectTag
    },
    props: {
      initQueryColumns: {
        type: Array,
        default: () => []
      },
      dictOptions: {
        type: Object,
        default: {}
      },
      dictOptionsFlg: Number
    },
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        model: {},
        spinning: 0,//遮罩
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        title:this.$locale('m.components.title.queryConditionConfig'),
        url:{
          saveCustom: YchConstant.PREFIX_SYSTEM + '/collection/getCollectionCatalogTree/v1',
          add:YchConstant.PREFIX_SYSTEM + '/collection/add',
        },
        queryColumns:[]

      }
    },
    methods: {
      $locale(params){
        return locleUtil.getLocale(params)
      },
      open(queryConditon,record){
        this.queryColumns = []
        this.initQueryColumns.map(item => {
          let newObj = Object.assign({}, item);
          newObj.queryDefaultValue = ''
          this.queryColumns.push(newObj);
        });
        if(queryConditon && queryConditon.length>0){
          let selfQueryColumns = JSON.parse(queryConditon)
          for(let i=0;i<this.queryColumns.length;i++){
            for(let j=0;j<selfQueryColumns.length;j++){
              if(this.queryColumns[i].colCode==selfQueryColumns[j].colCode){
                this.queryColumns[i].queryDefaultValue = selfQueryColumns[j].queryDefaultValue
              }
            }
          }

        }
        this.visible = true

      },
      handleOk(){
        let queryColumns = []
        this.queryColumns.map(item => {
          let newObj = {
            colCode:item.colCode,
            queryDefaultValue:item.queryDefaultValue
          }
          queryColumns.push(newObj);
        });
        const modelStr = JSON.stringify(queryColumns)
        this.$emit('selectFinished', modelStr)
        this.visible = false
      },
      handleCancel() {
        this.visible = false;
      },
    },
  }
</script>

<style lang="less">
</style>
