<template>
  <div class="right-data-screen">
    <a-segmented
      v-model:value="type"
      :options="data"
      style="
        width: 60%;
        height: 37px;
        border-radius: 19px;
        margin: 0 auto;
        background: #102649;
        margin-top: 6px;
        margin-bottom: 4px;
        border-top: 1px solid #4bb8f4;
        border-top: 1px solid #4bb8f4;
        border-left: 1px solid #4bb8f4;
      "
      @change="changeType"
    />
    <!-- columnar 下发线索 柱状图 -->
    <Columnar :type="type" :typeName="typeName" />
    <!-- brokenline 下发线索趋势 折线图 -->
    <Brokenline :type="type" :typeName="typeName" :countyList="list" />
    <!-- circulation 数据分析 环比 -->
    <Circulation :countyList="list" />
  </div>
</template>
<script lang="ts" setup>
  import { Columnar, Brokenline, Circulation } from './page';
  import { ref, onMounted } from 'vue';
  import { getUserOrgs } from '@/api/tiankongdi';
  import { getChildrenTree } from '@/api/demo/system';
  import { getAppEnvConfig } from '@/utils/env';

  const { VITE_GLOB_GEOSERVER_PREFECTURE_CITY, VITE_GLOB_GEOSERVER_PREFECTURE_CITY_NAME } =
    getAppEnvConfig();
  const type: any = ref(1);
  const typeName: any = ref('下发线索');
  const data = ref([
    {
      label: '下发线索',
      value: 1,
    },
    {
      label: '核实后新增违法',
      value: 2,
    },
    {
      label: '整改后剩余新增违法',
      value: 3,
    },
  ]);
  function changeType(val) {
    console.log(val);
    type.value = val;
    typeName.value = data.value.find((item) => item.value == val)?.label;
  }
  // 初始数据
  const list = ref();
  async function getOptions() {
    const data = await getChildrenTree({
      parentId: VITE_GLOB_GEOSERVER_PREFECTURE_CITY,
    });
    data.forEach((item) => {
      item.isClick = false;
    });
    list.value = data;
    let linyishi = {
      id: '',
      name: VITE_GLOB_GEOSERVER_PREFECTURE_CITY_NAME,
    };
    list.value.unshift(linyishi);
  }
  // 获取用户可以访问的机构信息
  async function handlerGetOrgs() {
    let orgs = await getUserOrgs({});
    let isLevel = orgs.find((item, index) => {
      return (
        item.name == VITE_GLOB_GEOSERVER_PREFECTURE_CITY_NAME ||
        item.parentId == 0 ||
        item.parentName == '根节点'
      );
    });
    if (isLevel) {
      // 市级
      getOptions();
    } else {
      // 县区级
      let levesl = orgs.filter((item, index) => {
        return (
          item.parentName == VITE_GLOB_GEOSERVER_PREFECTURE_CITY_NAME || item.parentId == VITE_GLOB_GEOSERVER_PREFECTURE_CITY
        );
      });
      list.value = levesl;
    }
  }
  onMounted(async () => {
    await handlerGetOrgs();
  });
</script>
<style lang="less" scoped>
  .right-data-screen {
    // background: linear-gradient(
    //   to right,
    //   rgba(0, 0, 0, 0),
    //   rgba(0, 0, 0, 0.3),
    //   rgba(0, 0, 0, 0.5),
    //   rgba(0, 0, 0, 0.7)
    // );
    max-width: calc(100vw - 580px);
    width: calc(100vw - 500px);
    padding: 24px 20px;
    height: 100vh;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
    margin-left: 80px;
  }
  :deep(.ant-segmented-thumb) {
    background: linear-gradient(-38deg, #3058e1, #4cbbf5);
    border-radius: 19px;
  }
  :deep(.ant-segmented-item) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
  }
  :deep(.ant-segmented-group) {
    height: 100%;
  }
  :deep(.ant-segmented-item-selected) {
    background: linear-gradient(-38deg, #3058e1, #4cbbf5);
    box-shadow: 0px 1px 3px 0px rgba(3, 10, 26, 0.25);
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
  }
</style>
