<template>
  <a-form layout="inline" :model="form" ref="queryForm">
    <a-row :gutter="48">
      <a-col :md="6" :sm="24" v-for="(item, index) in list" :key="index">
        <a-form-item :label="item.placeholder" :style="{marginBottom: '8px'}">
          <!-- input -->
          <a-input v-if="item.type === 'input'" v-model="form[item.key]" :type="item.type || 'text'" :placeholder="item.placeholder || '请输入'" :allowClear="true" />

          <!-- select-common -->
          <a-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择" :allowClear="true" :mode="item.mode ? item.mode : 'default'">
            <a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.id">{{ j.name }}</a-select-option>
          </a-select>

          <!-- select-dictionary -->
          <a-select v-if="item.type === 'select-dic'" v-model="form[item.key]" placeholder="请选择" :allowClear="true" :mode="item.mode ? item.mode : 'default'">
            <a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.value">{{ j.name }}</a-select-option>
          </a-select>

          <!-- select-dictionary-tree -->
          <a-tree-select v-if="item.type === 'select-dic-tree'" v-model="form[item.key]" :tree-data="item.options" placeholder="请选择" :allowClear="true" :multiple="item.mode ? true : false"></a-tree-select>

          <!-- date -->
          <a-date-picker v-if="item.type === 'date'" v-model="form[item.key]" style="width: 100%" :format="item.format" :valueFormat="item.format" :placeholder="item.placeholder || '请输入日期'" />

        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="24">
        <a-button type="primary" @click="handleQuery">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-col>

      <!-- orgTree -->
      <!-- <a-col :span="24" :style="{marginTop: '-8px', marginBottom: '8px'}" v-show="orgTree.ifshow">
        <org-tree :startOrganizationId="orgTree.startOrganizationId" @getSelectTreeKey="key => form[orgTree.formKey] = key"></org-tree>
      </a-col> -->

    </a-row>
  </a-form>
</template>

<script>
import orgTree from '../OrgTree/Index'
export default {
  components: { orgTree },
  props: {
    form: {
      type: Object,
      required: true,
      default: () => ({})
    },
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    orgTree: {
      type: Object,
      required: false,
      default: () => { return { ifshow: false, formKey: '', startOrganizationId: '' } }
    }
  },
  data() {
    return {}
  },
  methods: {
    handleQuery() {
      this.$emit('search')
    },
    resetQuery() {
      this.$emit('reset')
    }
  }
}
</script>

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