<template>
  <div>
    <div :class="`aj-query`" style="display: flex;" v-drag="`#toolBar .aj-query .ant-card-head`">
      <a-card v-show='value' title="案件查询" style=" max-height: 80vh; width: 355px;  box-shadow: 0 0 5px #357ee5;">
        <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
        <div>
          <label for="">
            案件查询：
            <a-input-search allow-clear :loading="isLoading" style="width: 60%" v-model.trim='keyword' @search="handleSearch"
                            placeholder="请输入案件号"
                            @pressEnter='handleSearch'/>
          </label>
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>重置</span>
            </template>
            <a-button type="primary" icon='reload' style='width: 10%;margin-left:0.5em;' @click='reset'></a-button>
          </a-tooltip>
          <a-list style='margin-top: 20px;' item-layout="horizontal" :data-source="data" :pagination="pagination">
            <a-list-item slot="renderItem" slot-scope="item, index" :style="item.style">
              <a-list-item-meta @click="handleCoord(item)" :description="item.ssxz+item.sscz">
                <span slot="title">{{ item.ajh }}</span>
                <a-avatar slot="avatar" class="result" :src="require(`@/assets/result${index+1}.png`)">
                </a-avatar>
              </a-list-item-meta>
              <a-tag v-if="item.anjzt_dictText.includes('待处理')" color="blue">
                {{ item.anjzt_dictText }}
              </a-tag>
              <a-tag v-else-if="item.anjzt_dictText.includes('未派发')" color="red">
                {{ item.anjzt_dictText }}
              </a-tag>
              <a-tag v-else-if="item.anjzt_dictText.includes('待审核')" color="purple">
                {{ item.anjzt_dictText }}
              </a-tag>
              <a-tag v-else-if="item.anjzt_dictText.includes('待复飞')" color="orange">
                {{ item.anjzt_dictText }}
              </a-tag>
              <a-tag v-else-if="item.anjzt_dictText.includes('结案')" color="green">
                {{ item.anjzt_dictText }}
              </a-tag>
              <a-tag v-else>
                {{ item.anjzt_dictText }}
              </a-tag>
              <!--            <a slot="actions"><a-icon type="file-text" />详情</a>-->
              <a-button slot="actions" type="primary" ghost size="small" @click="handleDetail(item)">
                详情
              </a-button>
            </a-list-item>
          </a-list>
        </div>
      </a-card>
    </div>
    <info-details ref="detail" v-model="infoShow" cls="query"></info-details>
    <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>

  </div>

</template>

<script>
import {getAction, httpAction} from "../../../api/manage";
import LocateByGeoinfo from "./LocateByGeoinfo";
import InfoDetails from "./InfoDetails";

export default {
  name: 'AjQueryTool',
  components: {InfoDetails, LocateByGeoinfo},

  data() {
    return {
      map: '',
      visible: false,
      list: [],
      isLoading: false,
      vectorLayer: '',
      queryType: '',
      lastType: '',
      keyword: '',
      data: [],
      onPage: false,
      pagination: {
        onChange: page => {
          this.pagination.current = page;
          this.onPage = true;
          this.handleSearch();
        },
        disabled: false,
        pageSize: 10,
        total: 0,
        size: 'small',
        current: 1,
      },
      infoShow:false,
      listUrl:'ajgl.ajxx/tinXjglSglistPolygon/ajsbxxlist',
      geoUrl:'/onemap.txbj/tinXjglSglistPolygon/getGeometry',
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  watch: {
    value(val) {
      if (val === false) {
        //清空搜索框
        this.lineShow = false;
        this.onlineShow = false;
        this.ajShow = false;
      } else {
        this.basicMap.changeLayerVisibleByLayerName("TIN_XJGL_SGLIST_POLYGON",true);
      }
    }
  },
  inject: ['basicMap'],
  async created() {
  },
  methods: {
    async handleSearch() {
      if (this.keyword) {
        this.isLoading = true;
        this.pagination.disabled = true;
        if (!this.onPage) {
          this.pagination.current = 1;
        }
        let {success, message, result} = await getAction(this.listUrl, {
          createBy: this.$store.state.user.info.username,
          ajh: this.keyword,
          pageNo: this.pagination.current,
          pageSize: 10
        });
        this.onPage = false;
        if (success) {
          this.isLoading = false;
          this.pagination.disabled = false;
          if(result.records){
            if (result.total === 0 || result.records === '') {
              this.$message.error('没有查询到信息');
              this.data = [];
              this.pagination.total = 0;
              return;
            }
            result.records.forEach((item)=>{
              item.style='position: relative';
              if(item.anjzt_dictText==='已派发待处理'){
                var str = item.zprq;
                var d1 = new Date(str);
                var d2 = new Date();
                // 将两个日期都转换为毫秒格式，然后做差
                let diffDate = Math.abs(d2 - d1) // 取相差毫秒数的绝对值
                let totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
                if(totalDays>=3&&totalDays<10){
                  item.style='position: relative;border: blue solid 1px;border-radius: 5px';
                }else if(totalDays>=10&&totalDays<30){
                  item.style='position: relative;border: orange solid 1px;border-radius: 5px';
                }else if(totalDays>=30&&totalDays<365){
                  item.style='position: relative;border: yellow solid 1px;border-radius: 5px';
                }else if(totalDays>=365){
                  item.style='position: relative;border: red solid 1px;border-radius: 5px';
                }else {

                }
              }
            })
            this.data = result.records;
            this.pagination.total = result.total;
          }else {
            if (result.length === 0 || result === '') {
              this.$message.error('没有查询到信息');
              this.data = [];
              this.pagination.total = 0;
              return;
            }
            this.data = result;
            this.pagination.total = result.length;
          }

        } else {
          this.$message.info(message);
        }
      } else {
        this.$message.warn('请输入查询关键字！');
      }
    },
    handleDetail(item){
      this.infoShow=true;
      this.$refs.detail.loadDetail(item);
    },
    handleCoord(item) {
      this.basicMap.changeLayerVisibleByLayerName("SBWJ_P",true);
      this.loadGeom(item.ajh);
    },
    async loadGeom(ajh) {
      this.clear()
      this.ajh = ajh
      let { success, message, result } = await getAction(this.geoUrl, {
        ajh
      })
      if (success) {
        if (result.records) {
          if (result.total === 0 || result.records === '') {
            this.$message.error('没有查询到信息')
            return
          }
        } else {
          if (result.length === 0 || result === '') {
            this.$message.error('没有查询到信息')
            return
          }
          this.map = this.basicMap.esriMap
          this.$refs.locateByGeoinfo.locate({ geoinfo: JSON.stringify(result.geometry) }, this.map)
        }
      } else {
        this.$message.info(message)
      }
    },
    clear() {
      this.$refs.locateByGeoinfo.clear();
    },
    reset(){
      this.data = [];
      this.pagination.total = 0;
      this.infoShow = false;
      this.keyword = '';
      this.clear();
    }

  },

};
</script>

<style>
.query a > .anticon {
  /* vertical-align: 0.2em; */
}

.query .ant-avatar {
  /* background: url("https://img1.baidu.com/it/u=1159474645,508069395&fm=26&fmt=auto"); */
}

.query .ant-list-item {
  align-items: flex-start;
}

.toolBar .ant-list-item-action {
  margin-left: 10px;
  position: absolute;
  bottom: 3px;
  right: 0;
}

.query .ant-spin-nested-loading,
.draw .ant-spin-nested-loading{
  max-height: 30vh;
  overflow-y: auto;

}
</style>
