<template>
  <div class="interpretation-box">
    <InterpretMap :interpretData="interpretData" @setArea="setArea"></InterpretMap>
    <div :class="prefixCls" v-if="disabledType">
      <div :class="`${prefixCls}__top`">
        <a-form ref="formRef" :model="listQuery" labelAlign="left">
          <a-form-item placeholder="状态">
            <a-select
              v-model:value="listQuery.is_intact"
              placeholder="请选择"
              :options="data.intactDatas"
              :field-names="{ label: 'itemName', value: 'itemValue' }"
            >
            </a-select>
          </a-form-item>
          <a-form-item placeholder="办理状态">
            <a-select
              v-model:value="listQuery.handle_status_id"
              placeholder="请选择"
              :options="data.handleDealOptions"
              :field-names="{ label: 'itemName', value: 'itemValue' }"
            >
            </a-select>
          </a-form-item>
          <a-form-item placeholder="办理状态">
            <a-tree-select
              v-model:value="value"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="data.OrgList"
              placeholder="查询地区"
            />
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="listQuery.key" placeholder="请输入关键字" />
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="listQuery.identification_user" placeholder="判读人姓名" />
          </a-form-item>
          <a-form-item class="btn_item">
            <a-button @click="getList">
              <template #icon><SearchOutlined /></template>
            </a-button>
            <a-button>
              <template #icon><VerticalAlignBottomOutlined /></template>
            </a-button>
          </a-form-item>
        </a-form>
        <div class="clear"></div>
      </div>

      <div :class="`${prefixCls}__content`">
        <List :pagination="pagination">
          <template v-for="item in data.dataList" :key="item.id">
            <List.Item class="list">
              <List.Item.Meta>
                <template #avatar>
                  <a-image
                    :width="60"
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                </template>
                <template #title>
                  <span>{{ item.case_description }}</span>
                </template>
                <template #description>
                  <div class="description-box">
                    <div class="description">
                      <span>{{ item.streetname }}&nbsp;{{ item.communityname }}</span>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <span style="float: right">{{ item.createtime }}</span>
                    </div>
                    <div class="description">
                      {{ item.identification_user }}
                    </div>
                    <div class="extra">
                      <a-button type="primary" @click="interpretBnt(item)">操作</a-button>
                    </div>
                  </div>
                </template>
              </List.Item.Meta>
            </List.Item>
          </template>
        </List>
      </div>
    </div>
    <div class="case_info" v-else>
      <CollapseContainer title="案件信息" :canExpan="false">
        <template #action>
          <div class="case_close" @click="changeType">
            <CloseOutlined />
          </div>
        </template>
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="案件判读">
            <Interpret :interpretData="interpretData" @close="changeType"></Interpret>
          </a-tab-pane>
          <a-tab-pane key="2" tab="案件处理">
            <Dispose :id="interpretData.id"></Dispose>
          </a-tab-pane>
        </a-tabs>
      </CollapseContainer>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { Progress, Row, Col, List, Tag, Tabs } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { CollapseContainer } from '@/components/Container';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { VerticalAlignBottomOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import { BasicForm } from '@/components/Form';
  import MapboxMaps from '@/components/MapboxMaps/index.vue';
  import { getCaseInfoList } from '@/api/monitor/index';
  import { Interpret, Dispose, InterpretMap } from '../index';
  const disabledType = ref(true);
  const prefixCls = 'list-basic';
  const activeKey = ref('1');
  const interpretData = ref({});
  const pagination = ref({
    onChange: (page: number) => {
      console.log(page);
      listQuery.value.page = page;
      getList();
    },
    pageSize: 5,
    total: 0,
  });
  const listQuery = ref({
    page: 1,
    limit: 5,
    is_intact: 0,
  });
  const data = reactive({
    OrgList: [],
    handleDealOptions: [],
    intactDatas: [],
    dataList: [],
  });

  const mapOptions = {
    center: [117.84714891969796, 35.22152309532066],
    zoom: 10,
  };
  const detailMap = ref();
  const mapBox = ref();
  const mapOnLoad = (map) => {
    mapBox.value = map;
    // 测试地址
    const testSource =
      'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
    map.U.addVector('name', testSource);
    map.U.addLineLayer('ffff', {
      source: 'name',
      'source-layer': 'lindi',
    });
    detailMap.value = map;
  };
  async function getList() {
    const obj = await getCaseInfoList(listQuery.value);
    console.log(obj);
    data.dataList = obj.items;
    pagination.value.total = obj.total;
  }
  function changeType() {
    disabledType.value = true;
  }
  function interpretBnt(item) {
    disabledType.value = false;
    console.log(item);
    interpretData.value = item;
  }
  function setArea(area) {
    interpretData.value.area = area;
  }
  onMounted(() => {
    getList();
  });
</script>
<style scoped lang="less">
  .w-full {
    width: 100%;
    position: relative;
    height: 90vh;
  }
  .case_info {
    position: absolute;
    top: 12px;
    left: 25px;
    width: 40%;
    height: 87vh;
    .vben-collapse-container {
      height: 100%;
    }
    .case_close {
      cursor: pointer;
    }
  }
  .list-basic {
    position: absolute;
    top: 12px;
    left: 25px;
    width: 30%;
    height: 90vh;
    &__top {
      padding: 10px;
      background-color: @component-background;
      text-align: center;
      height: 10vh;
      .clear {
        clear: both;
      }
    }

    &__content {
      height: 76vh;
      overflow: auto;
      margin-top: 12px;
      padding: 10px 0;
      background-color: @component-background;

      .list {
        position: relative;
      }

      .icon {
        font-size: 40px !important;
      }

      .extra {
        display: flex;
        justify-content: flex-end;
      }
      .description-box {
        display: flex;
        flex-direction: column;
      }
    }
  }
  ::v-deep .ant-form {
    .ant-form-item {
      float: left;
      margin-bottom: 4px;
      margin-left: 4px;
      width: 30%;
      button {
        margin-right: 10px;
      }
    }
  }
</style>
