<template>
  <div class="content">
    <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: 130px"
          v-model:value="infoScreenData.year"
          :options="yearOptions"
          @change="(value) => 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: 130px"
          v-model:value="infoScreenData.tubanlaiyuan"
          :options="patchSourceOptions"
          @change="(value) => mapListScreenChange(value, 'tubanlaiyuan')"
        />
      </div>
      <div class="screen-item">
        <div class="screen-item-label">批次</div>
        <a-select
          allowClear
          style="width: 103px"
          v-model:value="infoScreenData.picihao"
          :options="batchOptions"
          @change="(value) => mapListScreenChange(value, 'batch')"
        />
      </div>
      
      <div class="screen-item" style="margin-right: 56px;margin-bottom: 12px">
        <div class="screen-item-label">县区</div>
        <a-select
          allowClear
          style="width:130px;"
          v-model:value="infoScreenData.countyid"
          :options="countyOptions"
          :field-names="{ label: 'name', value: 'id' }"
          @change="changeCounty"
        />
      </div>
      <div class="screen-item" style="margin-right: 13px;margin-bottom: 12px">
        <div class="screen-item-label">乡镇</div>
        <a-select
          allowClear
          style="width:130px;"
          v-model:value="infoScreenData.streetid"
          :options="streetsAreaOptions"
          :field-names="{ label: 'name', value: 'id' }"
          @change="(value) => mapListScreenChange(value, 'streetid')"
        />
      </div>
      <div class="screen-item" style="margin-bottom: 12px;width:240px">
        <a-input
          allowClear
          placeholder="请输入图斑编号"
          class="item-input"
          v-model:value="infoScreenData.caseNo"
          @change="(value) => mapListScreenChange(value.target.value, 'caseNo')"
          @press-enter="querysBtn"
        />
      </div>
      <div class="screen-item" style="flex: 1;justify-content: flex-end;">
        <a-button class="item-button" style="background: #2B75E1;" type="primary" :icon="h(SearchOutlined)" @click="querysBtn"
          >查询</a-button>
          <a-button class="item-button img" type="primary" @click="changeArea">
            <img src="@/assets/images/tiankongdi/tiaozheng.png" class="img-box small" />
            调整
          </a-button>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="handleOperateClick">
              <a-menu-item key="1">图斑分割</a-menu-item>
              <a-menu-item key="2">分割还原</a-menu-item>
              <!-- <a-menu-item key="3">分宗示意图</a-menu-item> -->
            </a-menu>
          </template>
          <a-button type="primary" class="item-button img" style="background: #0CBD62">
            <img src="@/assets/images/tiankongdi/fenge.png" class="img-box small" style="width:16px;"/>
            分割
            <!-- <DownOutlined /> -->
          </a-button>
        </a-dropdown>
        <Icon
          style="font-size: 25px; margin-left: 14px;cursor: pointer;"
          icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading"
          @click="resetScreenData"
        />
      </div>
    </div>
    <div class="sift-div">
      <div class="layout-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 
                  @change="(value) => mapListScreenChange(value,'mapStatus')"
                  style="width: 100%" 
                  v-model:value="infoScreenData.mapStatus"
                  :options="mapStatusOptions" />
                </div>
            </div>
            <div style="display:flex;align-items: center;">
              <div>图斑面积：</div>
              <div style="display:flex;">
                <a-input style="width:30%;" 
                  v-model:value="infoScreenData.tubanArea1"
                  @change="(e) => mapListScreenChange(e.target.value,'tubanArea1')"
                  />
                <span>---</span>
                <a-input  style="width:30%;margin-right: 4px;"
                  v-model:value="infoScreenData.tubanArea2"
                  @change="(e) => mapListScreenChange(e.target.value,'tubanArea2')"
                  />
                  亩
              </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="infoScreenData.gengdiArea1"
                  @change="(e) => mapListScreenChange(e.target.value,'gengdiArea1')"
                  />
                <span>---</span>
                <a-input  style="width:30%;margin-right: 4px;"
                  v-model:value="infoScreenData.gengdiArea2"
                  @change="(e) => mapListScreenChange(e.target.value,'gengdiArea2')"
                  />
                  亩
              </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 infoDataList" :key="index" @click="selectAreaId(item)" :class="classFun(item)">
        <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" @click="selectAreaId(item)">
              <div class="item-label">{{ item.countyname }}</div>
              <div class="item-sub-label">
                <span style="margin-right: 12px">{{ item.streetname }}</span>
                <span>{{ item.caseno }}</span>
              </div>
            </div>
            <div class="item-mark" v-if="item.isbuildname">{{ item.isbuildname }}</div>
          </div>
          <div class="data-item-type-div" >
            {{ item.unitname }}
          </div>
        </div>
        <div class="data-list-info-div">
          <div class="info-layout-div" @click="selectAreaId(item)">
            <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">
            <div>
              <!-- <Icon
                title="飞地调整"
                style="font-size: 30px; cursor: pointer"
                icon="ant-design:send-outlined"
                @click="changeArea(item)"
              /> -->
              <!-- <Icon
                title="详情"
                style="font-size: 30px; cursor: pointer"
                icon="bx:detail"
                @click="showInfo(item)"
              /> -->
              <!-- <Icon
                title="图斑分宗"
                style="font-size: 30px; cursor: pointer"
                icon="ant-design:split-cells-outlined"
                @click="handlerSplitPolygon(item)"
              /> -->
            </div>
          </div>
        </div>
      </div>

      <div  class="no-data" v-if="infoDataList.length == 0">
        <a-empty :image="simpleImage" />
      </div>
    </div>
    <div class="pagination-div">
      <a-pagination
        size="small"
        v-model:pageSize="pageSize"
        v-model:current="pageNo"
        :total="total"
        :show-total="total => `共 ${total} 条数据`"
        show-size-changer
        show-quick-jumper
        @change="changePage"
      />
    </div>
    <!-- 飞地调整 -->
    <Amend @success="handleSuccess" v-if="modalShow" :modalShow="modalShow" :record="modalRecord" @closeModel="closeModal"/>
    <!-- 详情 -->
    <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"
        @closeModel="closeMolder"
      />
    </a-modal>


    <a-modal
      style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
      wrap-class-name="full-modal"
      v-model:open="showSplitPolygon"
      title="图斑分综"
      :footer="null"
      :maskClosable="true"
      :destroyOnClose="true"
      @cancel="showSplitPolygon = false"
    >
      <div class="modal-content" > 
        <SplitPolygonModal  :showInfoData="showInfoData"  @closeModal="handlerSplitComplete"/>
      </div>
    </a-modal>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, computed, h } from 'vue';
import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { getLoadDroneCaseInfoDetail, getCaseInfoById, getLoadStreet } from '@/api/tiankongdi/index';
import {
  batchOptions,
  yearOptions,
  patchSourceOptions,
} from '@/utils/global';
import Amend from './amend.vue';
import { Empty, message,Modal } from 'ant-design-vue';
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
import SplitPolygonModal from '@/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue';
import {recoverCase} from '@/api/tiankongdi'
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 { getChildrenTree } from '@/api/demo/system';


const modalShow = ref(false);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const pageSize = ref(10);
const pageNo = ref(1);
const total = ref(0);
const mapStatusOptions = ref([
  {
    label: '正常',
    value: '正常',
  },
  {
    label: '分割后关闭',
    value: '分割后关闭',
  },
]);
const modalRecord = ref('');
const emits = defineEmits(['changeSpin', 'changeTask']);
const order = ref(0); // 0: 不排序 1: 升序 2: 降序
const showSortMark = (key, sort) => {
  if (infoScreenData.value.sortType === key && sort === order.value) {
    return true;
  }
  return false;
};

const streetsAreaOptions =  ref<{ label: string; value: string}[]>([])
const countyOptions = ref<[]>([])
const infoDataList = ref([]);
const infoScreenData: any = ref({
  year: null,
  picihao: null,
  batch: null,
  countyid: null,
  streetid: null,
  geomid: null,
  nowStatus: null,
  is_illegal: null,
  weifaleixing: null,
  measure_name: null,
  handle_status_id: null,
  is_build_complete: null,
  areaid: null,
  level: null,
  page: 1,
  limit: 10,
  sort: null,
  order: null,
  type: null,
});
const selectItem = ref();
const classFun = (item) => {
  let string = 'data-list-item';
  if (selectItem.value && item.id == selectItem.value.id) {
    string += ' checked';
  }
  if (item.unitname == '已关闭') {
    string += ' close-div';
  }
  return string;
};
const mapListScreenChange = (value, type) => {
  switch (type) {
    case 'year':
      infoScreenData.value.year = value;
      break;
    case 'batch':
      infoScreenData.value.picihao = value;
      break;
    case 'caseNo':
      infoScreenData.value.caseNo = value;
      break;
    case 'countyid':
      infoScreenData.value.countyid = value;
      break;
    case 'streetid':
      infoScreenData.value.streetid = value;
      break;
    case 'isIllegal':
      infoScreenData.value.isIllegal = value;
      if (value !== 1) {
        infoScreenData.value.weifaleixing = null;
        infoScreenData.value.measureName = null;
      }
      break;
    case 'illegalType':
      infoScreenData.value.weifaleixing = value;
      if (value !== 0) {
        infoScreenData.value.measureName = null;
      }
      break;
    case 'measureName':
      infoScreenData.value.measureName = value;
      break;
    case 'isBuildName':
      infoScreenData.value.isBuildName = value;
      break;
    case 'mapStatus':
      if (value.length > 0) {
        infoScreenData.value.isSplit = value.join(',');
      } else {
        delete infoScreenData.value.isSplit;
      }
      break;
  }
};
const getInfoList = () => {
  emits('changeSpin', true);
  getLoadDroneCaseInfoDetail(infoScreenData.value)
    .then((res) => {
      infoDataList.value = res.items;
      total.value = res.total;
    })
    .finally(() => {
      emits('changeSpin', false);
    });
};
const showInfoOpen = ref(false);
const openCollect = computed(() => {
  if (!infoScreenData.value.type) return false;
  return true;
});
const showInfoData = ref();
onMounted(() => {
  // getLoadStreet().then(res => {
  //   console.log(res)
  //   res.forEach(item => {
  //     streetsAreaOptions.value.push({
  //       label: item.Name,
  //       value: item.Id,
  //     })
  //   })
  // })
  getCountyOptions()
  getInfoList();
});
// 获取区县
function getCountyOptions(){
  getChildrenTree({ parentId: 371300}).then(res => {
    console.log(res)
    countyOptions.value = res
  })
}
// 选中区县，获取乡镇
function changeCounty(value){
  console.log(value)
  infoScreenData.value.streetid = ''
  getChildrenTree({ parentId: value}).then(res => {
    console.log(res)
    streetsAreaOptions.value = res
  })
  mapListScreenChange(value, 'countyid')
}
// 分割
const splitPolygon = (record) => {
  showSplitPolygon.value = true;
  emits('changeTask', record.geomid);
}
const showSplitPolygon = ref(false);

function handlerSplitComplete(){
  showSplitPolygon.value=false;
  getInfoList();
}
// 查看位置
async function locationFun(record) {
  console.log(record);
  emits('changeTask', record.geomid);
}
const changePage = (page, pageSize) => {
  infoScreenData.value.page = page;
  infoScreenData.value.limit = pageSize;
  getInfoList();
};
// 查看接受处理里收藏的
const getCollectList = () => {
  let collect = infoScreenData.value.type;
  if (collect === '' || collect == null) {
    infoScreenData.value.type = 1;
  } else if (collect === 1) {
    delete infoScreenData.value.type;
  }
  getInfoList();
};
const handlerRevertPolygon = (item)=>{
  Modal.confirm({
    title:'是否确认还原分割图斑?',
    onCancel() {
    },
    async onOk() {
      let params = {
        "caseid": selectItem.value.id,
        "parts": [
          {
            "caseid": null
          }
        ],
        "type": 0,
      };
      recoverCase(params).then(res=>{
        if(res){
          message.info(res);
          getInfoList();     
        }
      })
    }
  })
}
const handlerSplitPolygon = (item) => {
  getCaseInfoById({id:item.processid}).then(res => {
    if(res){
      showInfoData.value = res
      showInfoData.value['processid'] = item.processid;
      showSplitPolygon.value = true
    }else{
      message.error("数据为空");
    }
  })
}
const dataListSort = (type) => {
  order.value = (order.value + 1) % 3;
  switch (order.value) {
    case 0:
      delete infoScreenData.value.sortType;
      delete infoScreenData.value.order;
      break;
    case 1:
      infoScreenData.value.sortType = type;
      infoScreenData.value.order = 'asc';
      break;
    case 2:
      infoScreenData.value.sortType = type;
      infoScreenData.value.order = 'desc';
      break;
  }
  getInfoList();
};


const showDataIndex = ref()
const auditOpen = ref(false);
const processId = ref('');
const taskId = ref('');
const type = ref('');
const handoffShow = ref(true)
const isRead: any = ref(0);
const flowWfDataStore = flowStore();
async function goAudit(record) {

  // showDataIndex.value = props.infoDataList.findIndex(item => item.taskid === record.taskid)
  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;
}

const showInfo = (item) => {
  getCaseInfoById({ id: item.processid }).then((res) => {
    showInfoData.value = res;
    showInfoOpen.value = true;
  });
};
function changeArea() {
  if (!selectItem.value) {
    message.warning('请选择一条数据进行飞地调整');
    return;
  }
  if (selectItem.value.unitname == '已关闭') {
    message.warning('已关闭的不能进行飞地调整！');
    return;
  }
  modalShow.value = true;
  modalRecord.value = selectItem.value.id;
}
function selectAreaId(item) {
  selectItem.value = item;
}
const resetScreenData = () => {
  infoScreenData.value = {
    limit: pageSize.value,
    page: 1,
  };
  pageNo.value = 1;
  getInfoList();
};
function closeModal() {
  modalShow.value = false;
  getInfoList();
}
function handleSuccess() {
  getInfoList();
}
const handleOperateClick = (e: Event) => {

  if(!selectItem.value){
    message.warning("选择需要操作的数据");
    return;
  }
  if (selectItem.value.unitname == '已关闭') {
    message.warning('已关闭的不能进行分割操作！');
    return;
  }
  if(e['key'] == 1){
    handlerSplitPolygon(selectItem.value);
  }else if(e['key'] == 2){
    handlerRevertPolygon(selectItem.value);
  }
  
};
function querysBtn(){
  pageNo.value = 1;
  infoScreenData.value.page = 1
  getInfoList();
}
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.screen-div {
  padding: 10px 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: 389px;
      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;
      color: #ffffff;
      background: #139af8;
      margin-left: 4px;
      height: 39px;
      font-size: 17px;
    }
  }
  .screen-button-div {
    display: flex;
    width: 100%;
    button {
      margin-right: 5px;
    }
  }
}
.pagination-div {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-data {
  padding: 20px 0;
}
.rollback {
  background: @component-background;
  padding: 10px;
}

::v-deep .ant-modal-content {
  width: 100vw;
  height: 100vh;
  border-radius: 0px;
}

::v-deep .ant-modal .ant-modal-content {
  border-radius: 0px !important;
}

.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;
  }
}
.modal-content {
  padding: 15px;
  width: 100%;
  height: calc(100vh - 65px);
  overflow: auto;
}
.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: 10px;
    // border-radius:6px;
    border:2px solid #fff;
    margin-bottom: 1px;

    .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;
          cursor: pointer;
        }
        .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;
        }
        .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;
      padding-top: 10px;
      .info-layout-div {
        display: flex;
        align-items: center;
        cursor: pointer;
        .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: 30px;
        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-item.checked {
    border: 2px solid #139af8;
  }
  .data-list-item.close-div {
    background: #eff3fc;
  }
  .data-list-item.checked.close-div {
    background: #eff3fc;
    border: 1px solid #139af8;
  }
}
.img-box{
  width: 25px;
  cursor: pointer;
}
.mr-r-20{
  margin-right: 20px;
}
.img-box.small{
  width: 18px;
  margin-right: 6px;
  margin-bottom: 2px;
}

</style>
