<template>
  <div class="data-list-div" style="padding-top: 1px;">
    <div v-for="(item, index) in props.dataList" :key="index" class="data-list-item">
      <div class="back-box" v-if="showDrawBack(item)">{{ illegalminingDrawBackSpan(item) }}</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.typename">{{item.typename}}</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.weifaarea_base)">{{dataProcessing(item.weifaarea_base)}}</div>
          </div>
          <div class="info-item" style="width: 130px;">
            <div class="info-label">违法</div>
            <div class="info-data" :title="dataProcessing(item.illegalarea)">{{dataProcessing(item.illegalarea)}}</div>
          </div>
          <div class="info-item" style="width: 130px;">
            <div class="info-label">耕地</div>
            <div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
          </div>
        </div>
        <div class="info-layout-div">
          <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>
    <a-modal
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="auditOpen"
      :title="modalTitle"
      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 { defineProps, defineEmits, ref, watch } from "vue"
import {showDrawBack, illegalminingDrawBackSpan} from '@/views/demo/util'
import { dataProcessing } from '@/views/demo/tiankongdi/util'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/store/modules/user'
import { flowStore } from '@/store/modules/flow';
import { getDetail } from '@/api/sys/WFSchemeInfo';
import { Audit } from '@/views/demo/workflow/task/process/page';
import dayjs from 'dayjs';
import { usePageRequestUrl } from '@/components/illegalmining/util'
import { defHttp } from '@/utils/http/axios';
import { AddTaskFavorite, CancelTaskFavorite } from '@/api/illegalmining/index'

const userStore = useUserStore()
const flowWfDataStore = flowStore();

const props = defineProps(["usePage","dataList","screenData","sortData","pageData","total"])
const emits = defineEmits(["changeTask","query","flipChange"])

const mapNo = ref('')
const searchList = ref([])
const auditOpen = ref(false);
const processId = ref('');
const taskId = ref('');
const type = ref('');
const auditData = ref()
const isRead: any = ref(0);
const handoffShow = ref(true)
const showDataId = ref()
const nextShowDataId = ref()
const prevShowDataId = ref()
const modalTitle = ref('')

watch(() => showDataId.value, () => {
  let index = props.dataList.findIndex(item => item.id == showDataId.value)
  if(index < props.dataList.length - 1){
    nextShowDataId.value =  props.dataList[index + 1].id
  }else{
    nextShowDataId.value = 0
  }
  if(index > 0){
    prevShowDataId.value = props.dataList[index - 1].id
  }else{
    prevShowDataId.value = 0
  }
})

const locationFun = (record) => {
  console.log(record);
  emits('changeTask', record.geomid);
}
const goAudit = async (record) => {
  modalTitle.value = record.unitname
  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 collectItem = (item) => {
  console.log(item,userStore.getUserInfo)
  if(item.Fid){
    cancelCollectItem(item)
    return
  }
  let userInfo = userStore.getUserInfo
  let params = {
    taskId: item.taskid,
    favoriteUserId: userInfo.id
  }
  AddTaskFavorite(params).then(res => {
    console.log(res)
    message.success('收藏成功')
    emits('query')
  })
}
const cancelCollectItem = (item) => {
  CancelTaskFavorite(item.Fid).then(res => {
    message.success('取消收藏成功')
    emits('query')
  })
}
const prevData = async () => {
  if(prevShowDataId.value === 0){
    if(props.pageData.page === 1 || props.total == 0){
      message.warning('已经是第一条数据了')
      return
    }
    defHttp.get({ url: usePageRequestUrl[props.usePage], params:  getParams({page: props.pageData.page - 1})}).then(async res => {
      emits('flipChange',res.items,res.total,props.pageData.page - 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.dataList.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.pageData.limit) <= props.pageData.page) || props.total == 0){
      message.warning('已经是最后一条数据了')
      return
    }
    defHttp.get({ url: usePageRequestUrl[props.usePage], params: getParams({page: props.pageData.page + 1}) }).then(async res => {
      emits('flipChange',res.items,res.total,props.pageData.page + 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.dataList.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 getParams = (data) => {
  let params = {
    ...props.pageData,
    ...props.sortData,
  }
  Object.keys(props.screenData).forEach(key => {
    switch(key){
      case 'time':
        if(props.screenData.time){
          params['startTime'] = dayjs(props.screenData.time[0]).format('YYYY-MM-DD')
          params['endTime'] = dayjs(props.screenData.time[1]).format('YYYY-MM-DD')
        }
        break
      case 'nowStatus':
        if(props.screenData.nowStatus.length > 0){
          params['nowStatus'] = props.screenData.nowStatus.join(',')
        }
        break
      default:
        if(props.screenData[key] !== null && props.screenData[key] !== undefined  && props.screenData[key] !== ''){
          params[key] = props.screenData[key]
        }
        break
    }
  })
  return {...params, ...data}
}
const closeMolder = () => {
  emits('query')
}
</script>

<style lang="scss" scoped>
.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 */
}
.img-box{
  width: 25px;
  cursor: pointer;
}
.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;
  }
}
.handoff{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 25px;
}
</style>
