<template>
  <div class="screen-div">
    <div class="screen-item" style="margin-right:20px;margin-bottom:12px;" v-if="showItem('year')">
      <div class="screen-item-label">年份</div>
      <a-select
        allowClear
        style="width:99px;"
        v-model:value="props.screenData.year"
        :options="yearOptions"
        @change="(value) => emits('screenDataChange',value,'year')"
      />
    </div>
    <div class="screen-item" style="margin-right:17px;margin-bottom:12px;" v-if="showItem('tubanlaiyuan')">
      <div class="screen-item-label" style="margin-right: 11px;">线索来源</div>
      <a-select
        allowClear
        style="width:144px;"
        v-model:value="props.screenData.tubanlaiyuan"
        :options="polygonSourceOptions"
        @change="(value) => emits('screenDataChange',value,'tubanlaiyuan')"
      />
    </div>
    <div class="screen-item" style="margin-bottom:12px;" v-if="showItem('countyid')">
      <div class="screen-item-label">县区</div>
      <a-select
        allowClear
        style="width:120px;"
        v-model:value="props.screenData.countyid"
        :options="countiesOptions"
        @change="(value) => changeCounties(value)"
      />
    </div>
    
    
    <div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('streetid')">
      <div class="screen-item-label">乡镇</div>
      <a-select
        allowClear
        style="width:120px;"
        v-model:value="props.screenData.streetid"
        :options="streetsOptions"
        @change="(value) => emits('screenDataChange',value,'streetid')"
      />
    </div>
    <div class="screen-item" style="margin-bottom:12px;" v-if="showItem('nowStatus')">
      <div class="screen-item-label">处理状态</div>
      <a-select
        allowClear
        mode="multiple"
        style="width:312px;"
        v-model:value="props.screenData.nowStatus"
        :options="statusOptions"
        :max-tag-count="1"
        @change="(value) => emits('screenDataChange',value,'nowStatus')"
      />
    </div>
    <div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('typename')">
      <div class="screen-item-label">线索类型</div>
      <a-select
        allowClear
        style="width: 97px"
        :options="polygonTypeOptions"
        v-model:value="props.screenData.typename"
        @change="(value) => emits('screenDataChange',value,'typename')"
      />
    </div>
    <div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('register')">
      <div class="screen-item-label">是否立案</div>
      <a-select
        allowClear
        style="width: 97px"
        :options="registerOptions"
        v-model:value="props.screenData.register"
        @change="(value) => emits('screenDataChange',value,'register')"
      />
    </div>
    <div class="screen-item" style="margin-bottom:12px;" v-if="showItem('time')">
      <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
      <a-range-picker
        :format="'YYYY-MM-DD'"
        allowClear
        style="width: 300px;"
        class="item-time-select"
        v-model:value="props.screenData.time"
        @change="(value) => emits('screenDataChange',value,'time')"
      />
    </div>
    <div class="screen-item" style="margin-right: 14px;" v-if="showItem('caseNo')">
      <a-input
        allowClear
        placeholder="请输入线索编号"
        class="item-input"
        v-model:value="props.screenData.caseNo"
        @change="(value) => emits('screenDataChange',value.target.value,'caseNo')"
        :style="`width:${smallInput.includes(props.usePage)? '219': '404'}px;`"
      />
    </div>
    <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
      <a-button 
        class="item-button"
        type="primary"
        :icon="h(SearchOutlined)"
        @click="emits('search')">查询</a-button>
      <Icon style="font-size: 25px;margin-left: 10px;" icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading" @click="emits('resetScreenData')" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, h } from "vue"
import { SearchOutlined } from "@ant-design/icons-vue"
import Icon from '@/components/Icon/Icon.vue';
import { yearOptions } from '@/utils/global'
import { polygonSourceOptions, polygonTypeOptions, countiesOptions, statusOptions, usePageGetSearchItem, smallInput, registerOptions } from '@/components/illegalmining/util'
import { getChildrenTree } from '@/api/demo/system';

const props = defineProps(["screenData","usePage"])
const emits = defineEmits(["screenDataChange","search","resetScreenData"])

const streetsOptions = ref([])

const changeCounties = (value) => {
  emits('screenDataChange',value,'countyid')
  emits('screenDataChange','','streetId')
  if(value && usePageGetSearchItem[props.usePage].includes('streetid')){
    getChildrenTree({ parentId: value }).then(res => {
      let data = res
      streetsOptions.value = data.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    })
  }
}
const showItem = (key) => {
  if(usePageGetSearchItem[props.usePage].includes(key)){
    return true
  }else{
    return false
  }
}

</script>

<style lang="scss" scoped>
.screen-div{
  padding: 22px 12px 20px 13px;
  display: flex;
  width:590px;
  flex-wrap: wrap;
  .screen-item{
    display: flex;
    height: 39px;
    .screen-item-label{
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 17px;
      color: #000000;
      line-height: 30px;
      display: flex;
      align-items: center;
      margin-right: 9px;
    }
    :deep(.ant-select-selector){
      display: flex;
      align-items: center;
      font-family: HarmonyOS Sans;
      font-weight: 500;
      font-size: 19px;
      color: #000000;
      line-height: 30px;
      height: 39px;
      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
    }
    .item-input{
      width:373px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 17px;
      color: #000000;
      line-height: 30px;
      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
    }
    .item-time-select{
      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
      :deep(input){
        font-family: HarmonyOS Sans;
        font-weight: 500;
        font-size: 15px;
        color: #000000;
        line-height: 30px;
      }
    }
    .item-button{
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 19px;
      color: #FFFFFF;
      line-height: 30px;
      height:39px;
      width: 97px;
      background: #086DEC;
    }
  }
}
</style>
