<template>
  <div class="sift-div">
    <div class="layout-div">
      <div class="sift-item" @click="dataListSort('weifaarea_base')">
        <div class="sift-label">总面积</div>
        <div class="sift-icon">
          <div :style="`${showSortMark('weifaarea_base',1)? 'color: #086DEC;': ''}`">&#9650</div>
          <div :style="`${showSortMark('weifaarea_base',2)? 'color: #086DEC;': ''}`">&#9660</div>
        </div>
      </div>
      <div class="sift-item"  @click="dataListSort('gengdi_area')">
        <div class="sift-label">耕地面积</div>
        <div class="sift-icon">
          <div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
          <div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
        </div>
      </div>
      <div class="sift-item"  @click="dataListSort('synchronoustime')">
        <div class="sift-label">下发时间</div>
        <div class="sift-icon">
          <div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">&#9650</div>
          <div :style="`${showSortMark('synchronoustime',2)? 'color: #086DEC;': ''}`">&#9660</div>
        </div>
      </div>
    </div>
    <div class="collect-div">
      <a-popover placement="bottom">
        <template #content>
          <div style="display:flex;">
            <div>当前状态：</div>
            <div>
              <a-checkbox-group 
                v-model:value="props.reject"
                style="width: 100%" 
                @change="(e) => emits('rejectDataChange', e)"
                :options="auditMapStatusOptions"></a-checkbox-group>
              </div>
          </div>
        </template>
        <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20"  style="margin-right: 20px;"/>
      </a-popover>
      <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList(0)" v-if="openCollect"/>
      <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList(1)" v-else/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, computed } from "vue"
import { orderUtils } from '@/components/illegalmining/util'

const props = defineProps(["sortData","screenData","reject"])
const emits = defineEmits(["changeSort","collectChange","rejectDataChange"])

const order = ref(0) // 0: 不排序 1: 升序 2: 降序
const openCollect = computed(() => {
  if(props.screenData.type === '') return false
  return true
})
const auditMapStatusOptions = [
  { label: '市级驳回', value: '市级驳回' },
  { label: '县级驳回', value: '县级驳回' },
];

const dataListSort = (type) => {
  if(props.sortData.sortType === '' || props.sortData.sortType === type){
    order.value = (order.value + 1) % 3
  }else{
    order.value = 1
  }
  let str_order = orderUtils[order.value]
  if(order.value == 0){
     type = null
  }
  emits('changeSort', type, str_order)
}
const showSortMark = (key, sort) => {
  if(props.sortData.sortType === key && sort === order.value){
    return true
  }
  return false
}
const getCollectList = (type) => {
  if(type == 0){
    type = ""
  }
  emits('collectChange', type)
}
</script>

<style lang="scss" scoped>
.sift-div{
  background:#fff;
  height: 77px;
  padding:19px 13px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  justify-content: space-between;
  .layout-div{
    display:flex;
    .back-button{
      font-size:22px;
      cursor:pointer;
    }
    .interval-div{
      height:100%;
      width:1px;
      background:#EDEDED;
      margin-left: 10px;
      margin-right: 10px;
    }
    .sift-item{
      display: flex;
      align-items: center;
      margin-right:15px;
      cursor:pointer;
      user-select:none;
      .sift-label{
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 19px;
        color: #000000;
      }
      .sift-icon{
        font-size: 9px;
        margin-left:5px;
        opacity: 0.53;
      }
    }
  }
  .collect-div{
    display:flex;
    align-items:center;
  }
}
.img-box{
  width: 25px;
  cursor: pointer;
}
</style>
