<template>
  <div class="map-list-content">
    <div class="top-radio-button-div">
      <a-radio-group 
        v-model:value="props.infoScreenData.landType"
        @change="(e) => emits('mapListScreenChange',e.target.value,'landType')"
        button-style="solid"
        style="width:100%">
        <a-radio-button :value="0" class="radio-item">农用地</a-radio-button>
        <a-radio-button :value="1" class="radio-item">建设用地</a-radio-button>
        <a-radio-button :value="2" class="radio-item">推堆土</a-radio-button>
      </a-radio-group>
    </div>
    <div class="screen-div">
      <div class="screen-item" style="margin-right:20px;margin-bottom:12px;">
        <div class="screen-item-label">年份</div>
        <a-select
          allowClear
          style="width:120px;"
          v-model:value="props.infoScreenData.year"
          :options="yearOptions"
          @change="(value) => emits('mapListScreenChange',value,'year')"
        />
      </div>
      <div class="screen-item" style="margin-right:17px;margin-bottom:12px;">
        <div class="screen-item-label" style="margin-right: 11px;">图斑来源</div>
        <a-select
          allowClear
          style="width:120px;"
          v-model:value="props.infoScreenData.patchSource"
          :options="patchSourceOptions"
          @change="(value) => emits('mapListScreenChange',value,'patchSource')"
        />
      </div>
      <div class="screen-item" style="margin-bottom:12px;">
        <div class="screen-item-label">批次</div>
        <a-select
          allowClear
          style="width: 118px"
          :options="batchOptions"
          v-model:value="props.infoScreenData.batch"
          @change="(value) => emits('mapListScreenChange',value,'batch')"
        />
      </div>
      <!-- <div class="screen-item" style="margin-right:15px;margin-bottom:12px;">
        <div class="screen-item-label">标注</div>
        <a-select
          allowClear
          style="width:130px;"
          v-model:value="props.infoScreenData.markType"
          :options="markTypeOptions"
          @change="(value) => emits('mapListScreenChange',value,'markType')"
        />
      </div> -->
   
      <div class="screen-item" style="margin-bottom:12px;">
        <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
        <a-range-picker
          :format="'YYYY-MM-DD'"
          allowClear
          style="width: 306px;"
          class="item-time-select"
          @change="(value) => emits('mapListScreenChange',value,'time')"
        />
      </div>
      <div class="screen-item" style="margin-left: 13px;">
        <div class="screen-item-label">乡镇</div>
        <a-select
          allowClear
          style="width:120px;"
          v-model:value="props.infoScreenData.streetId"
          :options="streetsAreaOptions"
          @change="(value) => emits('mapListScreenChange',value,'streetId')"
        />
      </div>
     
      <div class="screen-item" style="margin-right: 14px;">
        <a-input
          allowClear
          placeholder="请输入图斑编号"
          class="item-input"
          v-model:value="props.infoScreenData.mapNo"
          @change="(value) => emits('mapListScreenChange',value.target.value,'mapNo')"
          style="width:404px;"
          @press-enter="querysBtn"
        />
      </div>
      <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
        <a-button 
          class="item-button"
          type="primary"
          :icon="h(SearchOutlined)"
          @click="querysBtn">查询</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>
    <div class="sift-div">
      <div class="layout-div">
        <!-- <RollbackOutlined  class="back-button" @click="emits('closeShowInfo', false)"/> -->
        <!-- <div class="interval-div"></div> -->
        <div class="sift-item" @click="dataListSort('area')">
          <div class="sift-label">总面积</div>
          <div class="sift-icon">
            <div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">&#9650</div>
            <div :style="`${showSortMark('area',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.infoScreenData.mapStatus"
                  @change="(value) => emits('mapListScreenChange',value,'mapStatus')"
                  style="width: 100%" 
                  :options="mapStatusOptions"></a-checkbox-group>
                </div>
            </div>
            <!-- <div style="display:flex;">
              <div>是否超期：</div>
              <div>
                <a-checkbox-group 
                v-model:value="props.infoScreenData.isOverdue"
                @change="(value) => emits('mapListScreenChange',value,'isOverdue')"
                style="width: 100%" 
                :options="isOverdueOptions"></a-checkbox-group>
              </div>
            </div> -->
            <div style="display:flex;align-items: center;margin-top: 4px;">
              <div>图斑面积：</div>
              <div style="display:flex;">
                <a-input style="width:30%;" 
                  v-model:value="props.infoScreenData.mapAreaFirst"
                  @change="(e) => emits('mapListScreenChange',e.target.value,'mapAreaFirst')"
                  />
                <span>---</span>
                <a-input  style="width:30%;margin-right: 4px;"
                  v-model:value="props.infoScreenData.mapAreaLast"
                  @change="(e) => emits('mapListScreenChange',e.target.value,'mapAreaLast')"
                  />
                  亩
              </div>
            </div>
            <div style="display:flex;margin-top: 4px;">
              <div>耕地面积：</div>
              <div style="display:flex;align-items: center;">
                <a-input style="width:30%;"
                  v-model:value="props.infoScreenData.arableAreaFirst"
                  @change="(e) => emits('mapListScreenChange',e.target.value,'arableAreaFirst')"
                  />
                <span>---</span>
                <a-input  style="width:30%;margin-right: 4px;"
                  v-model:value="props.infoScreenData.arableAreaLast"
                  @change="(e) => emits('mapListScreenChange',e.target.value,'arableAreaLast')"
                  />
                  亩
              </div>
            </div>
          </template>
          <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" />
        </a-popover>
        <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList" v-if="openCollect"/>
        <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList" v-else/>
      </div>
    </div>
    <div class="data-list-div" style="padding-top: 1px;">
      <div v-for="(item, index) in props.infoDataList" :key="index" class="data-list-item">
        <div class="back-box" v-if="showDrawBack(item,true)">{{ drawBackSpan(item,true) }}</div>
        <div class="data-list-layout-div">
          <div class="data-list-title-div">
            <img src="/positioning.png" class="map-mark" style="cursor:pointer;" @click="locationFun(item)"/>
            <div class="label-div">
              <div class="item-label">{{item.countyname}}</div>
              <div class="item-sub-label">
                <div style="margin-right:12px;max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.streetname}}</div>
                <span>{{item.caseno}}</span>
              </div>
            </div>
            <div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
          </div>
          <div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
            {{item.unitname}}
          </div>
        </div>
        <div class="data-list-info-div">
          <div class="info-layout-div">
            <div class="info-item" style="width: 130px;">
              <div class="info-label">总面积</div>
              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
            </div>
            <div class="info-item">
              <div class="info-label">农用地</div>
              <div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
            </div>
            <div class="info-item">
              <div class="info-label">耕地</div>
              <div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
            </div>
            <div class="info-item" style="width: 120px;">
              <div class="info-label">永农面积</div>
              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtianarea)">{{dataProcessing(item.yongjiujibennongtianarea)}}</div>
            </div>
          </div>
          <div class="info-layout-div">
            <!-- <span class="info-time">{{item.createdate}}</span> -->
            <div>
              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.fid"/>
              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-div">
      <a-pagination 
        size="small" 
        v-model:pageSize="props.pageSize"
        v-model:current="props.pageNo" 
        :total="props.total" 
        :show-total="total => `共 ${total} 条数据`"
        show-size-changer 
        show-quick-jumper
        @change="changePage" />
    </div>
    <a-modal
      style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
      wrap-class-name="full-modal"
      v-model:open="showInfoOpen"
      title="详情"
      :footer="null"
      :maskClosable="true"
      :destroyOnClose="true"
      @cancel="showInfoOpen = false"
    >
      <div class="modal-content">
        <ShowInfoModal :showInfoData="showInfoData"/>
      </div>
    </a-modal>
    <a-modal
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="auditOpen"
      title="接收办理"
      footer=""
      :destroyOnClose="true"
    >
      <template #footer> </template>
      <div class="handoff">
        <a-button
          type="primary" 
          style="margin-right: 25px;"
          @click="prevData"
        >上一条</a-button>
        <a-button
          type="primary"
          @click="nextData"
        >下一条</a-button>
      </div>
      <Audit
        v-if="handoffShow"
        ref="posRef"
        :processId="processId"
        :taskId="taskId"
        :isRead="isRead"
        :type="type"
        :auditData="auditData"
        @closeModel="closeMolder"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, defineProps, computed, h, watch } from "vue"
import { StarOutlined, StarFilled, SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { addCaseFavorite,addTaskFavorite,getCaseInfoById, deleteFavoriteCase,deleteTaskCase,getLoadStreet, getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index.ts';
import { 
  batchOptions,
  yearOptions,
  mapTypeOptions,
  illegalTypeOptions,
  measureOptions,
  mapStatusOptions,
  markTypeOptions,
  patchSourceOptions,
  isOverdueOptions,
} from '@/utils/global'
import { useUserStore } from '@/store/modules/user.ts'
import { message } from "ant-design-vue";
import ShowInfoModal from './ShowInfoModal/index.vue'
import { flowStore } from '@/store/modules/flow';
import { getDetail } from '@/api/sys/WFSchemeInfo';
import { Audit } from '@/views/demo/workflow/task/process/page';
import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
import {showDrawBack, drawBackSpan} from '@/views/demo/util'
const userStore = useUserStore()
const flowWfDataStore = flowStore();
const emits = defineEmits([
  "closeShowInfo",
  "mapListScreenChange",
  "changeInfoPage",
  "getInfoList",
  "changeTask",
  "infoDataListSort",
  "collectChange",
  "resetScreenData",
  "changeInfoDataList",
])
const props = defineProps([
  "infoScreenData",
  "cityType",
  "municipalAreaOptions",
  "countiesAreaOptions",
  "communitiesAreaOptions",
  "pageNo",
  "pageSize",
  "total",
  "infoDataList"
])
const order = ref(0) // 0: 不排序 1: 升序 2: 降序
const landType = ref(0)
const orderMark = () => {
  switch(order.value){
    case 0:
      return '-'
    case 1:
      return '↑'
    case 2:
      return '↓'
  }
}
const showInfoOpen = ref(false)
const showDataId = ref()
const nextShowDataId = ref()
const prevShowDataId = ref()
watch(() => showDataId.value, () => {
  let index = props.infoDataList.findIndex(item => item.id == showDataId.value)
  if(index < props.infoDataList.length - 1){
    nextShowDataId.value =  props.infoDataList[index + 1].id
  }else{
    nextShowDataId.value = 0
  }
  if(index > 0){
    prevShowDataId.value = props.infoDataList[index - 1].id
  }else{
    prevShowDataId.value = 0
  }
})
const auditOpen = ref(false);
const processId = ref('');
const taskId = ref('');
const type = ref('');
const auditData = ref()
const handoffShow = ref(true)
const isRead: any = ref(0);
const openCollect = computed(() => {
  if(props.infoScreenData.type === '') return false
  return true
})
const showInfoData = ref()
const streetsAreaOptions =  ref([
  { label: '全部', value: '' },
])

onMounted(() => {
  getLoadStreet().then(res => {
    console.log(res)
    res.forEach(item => {
      streetsAreaOptions.value.push({
        label: item.Name,
        value: item.Id,
      })
    })
  })
  console.log('onMounted')
})

async function locationFun(record) {
  console.log(record);
  emits('changeTask', record.geomid);
}

const changePage = (page, pageSize) => {
  console.log(page,pageSize)
  emits('changeInfoPage',page,pageSize)
}
const querysBtn = ()=>{
  emits('getInfoList')
  emits('changeInfoPage',1,props.pageSize)

}
const collectItem = (item) => {
  console.log(item)
  if(item.fid){
    cancelCollectItem(item)
    return
  }
  let userInfo = userStore.getUserInfo
  let params = {
    // id: item.id,
    taskId: item.taskid,
    favoriteUserId: userInfo.id
  }
  addTaskFavorite(params).then(res => {
    console.log(res)
    message.success('收藏成功')
    emits('getInfoList')
  })
}
const cancelCollectItem = (item) => {
  deleteTaskCase(item.fid).then(res => {
    message.success('取消收藏成功')
    emits('getInfoList')
  })
}
const getCollectList = () => {
  let collect = props.infoScreenData.type
  let value: number|string = ''
  if(collect === ''){
    value = 1
  }else if(collect === 1){
    value = ''
  }
  emits('collectChange', value)
}
const showSortMark = (key, sort) => {
  if(props.infoScreenData.sort === key && sort === order.value){
    return true
  }
  return false
}
const dataListSort = (type) => {
  if(props.infoScreenData.sort === '' || props.infoScreenData.sort === type){
    order.value = (order.value + 1) % 3
  }else{
    order.value = 1
  }
  emits('infoDataListSort', type, order.value)
}




const showInfo = (item) => {
  getCaseInfoById({id:item.id}).then(res => {
    showInfoData.value = res
    showInfoOpen.value = true
  })
}
async function goAudit(record) {
  showDataId.value = record.id
  let data = await getDetail({ code: record.processcode });
  let scheme = JSON.parse(data.scheme.content);
  let wfData = scheme.wfData;
  flowWfDataStore.setWfDataAll(wfData);
  auditOpen.value = true;
  processId.value = record.processid;
  taskId.value = record.taskid;
  type.value = record.type;
  auditData.value = record;
}
const prevData = async () => {
  if(prevShowDataId.value === 0){
    if(props.pageNo === 1 || props.total == 0){
      message.warning('已经是第一条数据了')
      return
    }
    getLoadDroneCaseInfoDetail(getParams({page: props.pageNo - 1})).then(async res => {
      emits('changeInfoDataList',res.items,res.total,props.pageNo - 1)
      handoffShow.value = false
      let record = res.items[res.items.length -1]
      let data = await getDetail({ code: record.processcode });
      let scheme = JSON.parse(data.scheme.content);
      let wfData = scheme.wfData;
      flowWfDataStore.setWfDataAll(wfData);
      processId.value = record.processid;
      taskId.value = record.taskid;
      type.value = record.type;
      handoffShow.value = true
      showDataId.value = res.items[res.items.length -1].id
      auditData.value = res.items[res.items.length -1];
    })
    return
  }else{
    showDataId.value = prevShowDataId.value
  }
  handoffShow.value = false
  let record = props.infoDataList.find(item => item.id == showDataId.value)
  let data = await getDetail({ code: record.processcode });
  let scheme = JSON.parse(data.scheme.content);
  let wfData = scheme.wfData;
  flowWfDataStore.setWfDataAll(wfData);
  processId.value = record.processid;
  taskId.value = record.taskid;
  type.value = record.type;
  handoffShow.value = true
  auditData.value = record;
}
const nextData = async () => {
  if(nextShowDataId.value === 0){
    if((Math.ceil(props.total / props.pageSize) <= props.pageNo) || props.total == 0){
      message.warning('已经是最后一条数据了')
      return
    }
    getLoadDroneCaseInfoDetail(getParams({page: props.pageNo + 1})).then(async res => {
      emits('changeInfoDataList',res.items,res.total,props.pageNo + 1)
      handoffShow.value = false
      let record = res.items[0]
      let data = await getDetail({ code: record.processcode });
      let scheme = JSON.parse(data.scheme.content);
      let wfData = scheme.wfData;
      flowWfDataStore.setWfDataAll(wfData);
      processId.value = record.processid;
      taskId.value = record.taskid;
      type.value = record.type;
      handoffShow.value = true
      showDataId.value = res.items[0].id
      auditData.value = res.items[0]
    })
    return
  }else{
    showDataId.value = nextShowDataId.value
  }
  handoffShow.value = false
  let record = props.infoDataList.find(item => item.id == showDataId.value)
  let data = await getDetail({ code: record.processcode });
  let scheme = JSON.parse(data.scheme.content);
  let wfData = scheme.wfData;
  flowWfDataStore.setWfDataAll(wfData);
  processId.value = record.processid;
  taskId.value = record.taskid;
  type.value = record.type;
  handoffShow.value = true
  auditData.value = record;
}
const closeMolder = () => {
  emits('getInfoList')
}
const getParams = (data) => {
  let result = {}
  let params = {
    landType: props.infoScreenData.landType, //0 农用地 1建设用地
    isOutTime: props.infoScreenData.isOverdue, //是否超期
    year: props.infoScreenData.year, //年
    tubanlaiyuan: props.infoScreenData.patchSource, //图斑来源
    picihao: props.infoScreenData.batch, //批次号
    streetid: props.infoScreenData.streetId,
    caseNo: props.infoScreenData.mapNo, //图版编号
    startTime: props.infoScreenData.startTime, // 下发开始时间
    endTime: props.infoScreenData.endTime, // 下发结束时间
    nowStatus: props.infoScreenData.mapStatus, // 当前状态
    isBuildName: props.infoScreenData.markType, // 标注
    tubanArea1: props.infoScreenData.mapAreaFirst, // 图斑面积1
    tubanArea2: props.infoScreenData.mapAreaLast, // 图斑面积2
    gengdiArea1: props.infoScreenData.arableAreaFirst, //耕地面积1
    gengdiArea2: props.infoScreenData.arableAreaLast, //耕地面积2
    page: props.pageNo,
    limit: props.pageSize,
    sortType: props.infoScreenData.sort,
    order: props.infoScreenData.order,
    type: props.infoScreenData.type,
    ...data,
  }
  Object.keys(params).forEach(key => {
    if(params[key] !== '' && params[key] !== null){
      if(key === 'nowStatus'){
        result[key] = params[key].join(',')
      }else if(key === 'isOutTime'){
        if(params[key].length == 1){
          result[key] = params[key][0]
        }
      }else{
        result[key] = params[key]
      }
    }
  })
  return result
}
</script>

<style lang="scss" scoped>
.handoff{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 25px;
}
.full-modal {
  .ant-modal {
    min-width: 100vw;
    top: 0px;
    padding: 0px;
    margin: 0px;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
  }
  .ant-modal-body {
    flex: 1;
  }
}
::v-deep .ant-modal {
  width: 100vw!important;
  top: 0px;
  padding: 0px;
  margin: 0px;
}
::v-deep .ant-modal-content{
  width: 100vw!important;
  background:red!important;
}
.map-list-content{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rollback {
  background: #fff;
  padding: 10px;
}
.screen-div{
  padding: 10px 12px 20px 13px;
  display: flex;
  width:590px;
  flex-wrap: wrap;
  .screen-item{
    // width: 33.3%;
    display: flex;
    height: 39px;
    // margin-bottom: 12px;
    // font-family: Alibaba PuHuiTi;
    // font-weight: 500;
    // font-size: 17px;
    // color: #000000;
    .screen-item-label{
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 17px;
      color: #000000;
      line-height: 30px;
      // width: 53px;
      // padding-left: 10px;
      display: flex;
      align-items: center;
      margin-right: 9px;
      // font-size: 15px;
    }
    :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;
      // margin-left:12px;
    }
  }
  .screen-button-div{
    display: flex;
    // justify-content: space-between;
    width: 100%;
    button{
      margin-right: 5px;
    }
  }
}
.top-radio-button-div{
  width:100%;
  padding: 33px 12px 8px 13px;
  .ant-radio-group{
    display: flex;

  }
  :deep(.ant-radio-button-wrapper-checked){
    font-family: Alibaba PuHuiTi;
    font-weight: 500 !important;
    font-size: 20px;
    color: #FFFFFF !important;
    line-height: 40px;
    background: #086DEC;
  }
  .radio-item{
    width:33%;
    text-align: center;
    height: 40px;
    user-select: none;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
  }
}
.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;
     }
  }
.data-list-div{
  flex: 1;
  overflow: auto;
  padding: 10px;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  .data-list-item{
    background:#fff;
    padding:20px 10px 10px 10px;
    // border-radius:6px;
    margin-bottom:1px;
    position: relative;
    .back-box{
      position: absolute;
      right: 0;
      top:0;
      background: #EA1C06;
      padding: 3px 6px;
      color: #fff;
      font-size: 12px;
      border-radius: 0px 0px 0px 8px;
    }
    .data-list-layout-div{
      display:flex;
      justify-content: space-between;
      padding-bottom: 8px;
      border-bottom: 1px solid #E5E5E5;
      height: 45px;
      .data-list-title-div{
        display:flex;
        align-items: center;
        .map-mark{
          width:17px;
          height:17px;
        }
        .label-div{
          display: flex;
          align-items: baseline;
          margin-right: 12px
        }
        .item-label{
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 23px;
          color: #000000;
          margin-left: 9px;
          margin-right:10px;
        }
        .item-sub-label{
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 17px;
          color: #000000;
          display: flex;
        }
        .item-mark{
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 13px;
          margin-left: 17px;
          color: #696969;    
          margin-top: 4px;
        }
      }
      .data-item-type-div{
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 15px;
        color: #696969;
        display: flex;
        align-items: center;
        cursor:pointer;
        user-select: none;
      }
    }
    .data-list-info-div{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      height: 40px;
      .info-layout-div{
        display:flex;
        align-items: center;
        .info-time{
          font-family: HarmonyOS Sans;
          font-weight: 500;
          font-size: 15px;
          color: #000000;
          margin-right: 5px;
        }
      }
      .info-item{
        display:flex;
        background: rgba(237, 237, 237, 0.55);
        align-items: center;
        width: 110px;
        border-radius: 7px;
        margin-right: 8px;
        height: 33px;
        justify-content: center;
        .info-label{
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 13px;
          color: #959494;
          // width:45%;
          display: flex;
          justify-content: center;
          padding-right: 5px;
          white-space: nowrap;
        }
        .info-data{
          font-family: HarmonyOS Sans;
          font-weight: 500;
          font-size: 13px;
          color: #000000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  } 
  .data-list-item:nth-last-child(1){
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px
  }
}
.data-list-div::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.pagination-div{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content{
  padding:15px;
  width: 100%;
  height: calc(100vh - 65px);
  overflow: auto;
}

::v-deep .ant-modal{
 min-width:100vw!important;
}
.img-box{
  width: 25px;
  cursor: pointer;
}
.mr-r-20{
  margin-right: 20px;
}
.img-box.small{
  width: 18px;
  margin-right: 6px;
  margin-bottom: 2px;
}
</style>
