<template>
  <div class="interpretation-box">
    <InterpretMap :interpretData="interpretData" @setArea="setArea" />
    <div :class="prefixCls" v-if="disabledType">
      <div :class="`${prefixCls}__top`">
        <a-form ref="formRef" :model="listQuery" labelAlign="left">
          <a-form-item label="案件状态">
            <a-select
              v-model:value="listQuery.is_intact"
              placeholder="请选择"
              :options="data.intactDatas"
              :field-names="{ label: 'name', value: 'id' }"
              :allow-clear="true"
            />
          </a-form-item>
          <a-form-item label="办理状态">
            <a-select
              v-model:value="listQuery.handle_status_id"
              placeholder="请选择"
              :options="data.handleDealOptions"
              :field-names="{ label: 'name', value: 'id' }"
              :allow-clear="true"
            />
          </a-form-item>
          <a-form-item label="查询地区">
            <a-tree-select
              v-model:value="listQuery.countyid"
              :dropdown-style="{ maxHeight: '400px', width: '600px', overflow: 'auto' }"
              :tree-data="data.OrgList"
              :field-names="{ label: 'name', value: 'id' }"
              placeholder="请选择"
              :allow-clear="true"
            />
          </a-form-item>
          <a-form-item label="关 键 字 ">
            <a-input v-model:value="listQuery.key" placeholder="请输入" :allow-clear="true" />
          </a-form-item>
          <a-form-item label="姓名">
            <a-input
              v-model:value="listQuery.identification_user"
              placeholder="请输入"
              :allow-clear="true"
            />
          </a-form-item>

          <a-form-item class="btn_item">
            <a-button type="primary" @click="getList">查询</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"
                    :height="80"
                    :src="uploadUrl + '/' + item.case_pic_list[0]"
                  />
                </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 ref="interpretRef" :interpretData="interpretData" @close="changeType" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="案件处理">
            <Dispose :id="interpretData.id" />
          </a-tab-pane>
        </a-tabs>
      </CollapseContainer>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { List } from 'ant-design-vue';
  import { CollapseContainer } from '@/components/Container';
  import {
    VerticalAlignBottomOutlined,
    CloseOutlined,
    SearchOutlined,
  } from '@ant-design/icons-vue';
  import { getCaseInfoList } from '@/api/monitor/index';
  import { Interpret, Dispose, InterpretMap } from '../index';
  import { getDeptList } from '@/api/demo/system';
  import { useGlobSetting } from '@/hooks/setting';

  const { uploadUrl } = useGlobSetting();
  const disabledType = ref(true);
  const prefixCls = 'list-basic';
  const activeKey = ref('1');
  const interpretData = ref({});
  const interpretRef = ref();
  interface listParam {
    page?: number;
    limit?: number;
    is_intact?: number;
    handle_status_id?: string;
    identification_user?: string;
    identification_time?: string;
    key?: string;
    countyid?: string;
  }
  type dataModel = {
    dataList: any;
    OrgList: any[];
    handleDealOptions: any[];
    intactDatas: any[];
  };
  const pagination = ref({
    onChange: (page: number, pageSize: number) => {
      listQuery.value.page = page;
      listQuery.value.limit = pageSize;
      getList();
    },
    pageSize: 5,
    total: 0,
  });
  const listQuery = ref<listParam>({
    page: 1,
    limit: 5,
    is_intact: 0,
  });
  const data = reactive<dataModel>({
    OrgList: [],
    handleDealOptions: [
      { id: 0, name: '未办理' },
      { id: 1, name: '待审核' },
      { id: 2, name: '已办结' },
    ],
    intactDatas: [
      { id: 0, name: '未判读' },
      { id: 1, name: '已提交' },
      { id: 99, name: '已关闭' },
      { id: null, name: '全部' },
    ],
    dataList: [],
  });
  async function getOrg() {
    const obj = await getDeptList();
    data.OrgList = obj;
  }
  async function getList() {
    const obj = await getCaseInfoList(listQuery.value);
    data.dataList = obj.items;
    pagination.value.total = obj.total;
  }
  function changeType() {
    disabledType.value = true;
  }
  function interpretBnt(item) {
    disabledType.value = false;
    interpretData.value = item;
  }
  function setArea(area) {
    interpretData.value.area = area;
    interpretRef.value.setMap(area);
  }
  onMounted(() => {
    getList();
    getOrg();
  });
</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: 34%;
    height: 70vh;
    &__top {
      padding: 10px;
      background-color: @component-background;
      text-align: center;
      height: 16vh;
      .clear {
        clear: both;
      }
    }

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

      .list {
        position: relative;
      }

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

      .extra {
        display: flex;
        justify-content: flex-end;
      }
      .description-box {
        display: flex;
        flex-direction: column;
      }
      .ant-list {
        height: 100%;
      }
      ::v-deep .ant-spin-nested-loading {
        height: 90%;
        overflow: auto;
      }
      ::v-deep .ant-list-pagination {
        background-color: @component-background;
      }
    }
  }
  ::v-deep .ant-form {
    .ant-form-item {
      float: left;
      margin-bottom: 6px;
      margin-left: 4px;
      width: 48%;
      button {
        margin-right: 10px;
      }
      .ant-form-item-label {
        width: 70px;
      }
      .ant-select-selector {
        text-align: left;
      }
    }
  }
</style>
