<template>
  <a-form-item v-if="item.view === 'Date' || item.view === 'date'"
               :label="item.label">
    <template v-if="item.mode === single_mode">
      <j-date :placeholder="'请选择' + item.label"
              v-model="queryParam[item.field]"></j-date>
    </template>
    <template v-else>
      <div>
        <j-date :style="getRangeItemStyle(item)"
                placeholder="开始日期"
                v-model="queryParam[item.field+'_begin']"></j-date>
        <span class="group-query-strig">~</span>
        <j-date :style="getRangeItemStyle(item)"
                placeholder="开始日期"
                v-model="queryParam[item.field+'_end']"></j-date>
      </div>
    </template>

  </a-form-item>
  <a-form-item v-else-if="item.view === 'Datetime' || item.view === 'datetime'"
               :label="item.label">
    <template v-if="item.mode === single_mode">
      <j-date :placeholder="'请选择' + item.label"
              :show-time="true"
              date-format="YYYY-MM-DD HH:mm:ss"
              v-model="queryParam[item.field]"></j-date>
    </template>
    <template v-else>
      <div>
        <j-date :style="getRangeItemStyle(item)"
                placeholder="开始日期"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                v-model="queryParam[item.field+'_begin']"></j-date>
        <span class="group-query-strig">~</span>
        <j-date :style="getRangeItemStyle(item)"
                placeholder="开始日期"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                v-model="queryParam[item.field+'_end']"></j-date>
      </div>
    </template>

  </a-form-item>
  <a-form-item v-else-if="item.view === 'list' || item.view === 'radio'"
               :label="item.label">
    <a-select :placeholder="'请选择' + item.label"
              v-model="queryParam[item.field]"
              allowClear>
      <a-select-option v-for="(option,index) in dictOptions[item.field]"
                       :key="index"
                       :value="option.value">{{option.text}}</a-select-option>
    </a-select>

  </a-form-item>
  <a-form-item v-else-if="item.view === 'search'"
               :label="item.label">
    <a-select :placeholder="'请选择' + item.label"
              v-model="queryParam[item.field]"
              allowClear>
      <a-select-option v-for="(option,index) in dictOptions[item.field]"
                       :key="index"
                       :value="option.value">{{option.text}}</a-select-option>
    </a-select>

  </a-form-item>
  <a-form-item v-else-if="item.view === 'checkbox'"
               :label="item.label">
    <j-select-multiple :placeholder="'请选择' + item.label"
                       :options="dictOptions[item.field]"
              v-model="queryParam[item.field]"
              >
    </j-select-multiple>

  </a-form-item>
  <a-form-item v-else :label="item.label">
    <div v-if="item.mode === single_mode">
      <a-input :style="getRangeItemStyle(item)"
               :placeholder="'开始' + item.label"
               v-model="queryParam[item.field+'_begin']"
      />
      <span class="group-query-strig">~</span>
      <a-input :style="getRangeItemStyle(item)"
               :placeholder="'结束' + item.label"
               v-model="queryParam[item.field+'_end']"
      />
    </div>
    <template v-else>
      <a-input :placeholder="'请输入' + item.label"
               v-model="queryParam[item.field]"
      />
    </template>

  </a-form-item>

</template>

<script>

import JOnlineSearchSelect from './JOnlineSearchSelect';
import {mixinDevice} from "@/utils/mixin";

export default {
  name: 'OnlineQueryFormItem',
  mixins : [mixinDevice],
  components : {
    JOnlineSearchSelect : JOnlineSearchSelect
  },
  props : {
    item : {
      type : Object,
      default : function() {
      },
      required : true
    },
    dictOptions : {
      type : Object,
      default : function() {
      },
      required : true
    },
    queryParam : {
      type : Object,
      default : function() {
      },
      required : true
    }
  },
  data : function() {
    return {
      single_mode : "single",
      group_mode : "group"
    };
  },
  methods : {
    getRangeItemStyle : function(canCreateDiscussions) {
      let width = "";
      return width = this.isMobile() ? "100% !important" : "calc(50% - 10px) !important", {
        width : width,
        minWidth : width
      };
    }
  }
}
</script>

<style scoped>

</style>