<template>
  <div style="background: rgba(0, 0, 0, 0.8)">
    <a-segmented
      v-model:value="type"
      :options="data"
      style="
        width: 100%;
        height: 37px;
        border-radius: 19px;
        background: #102649;
        margin-bottom: 23px;
        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';

  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: 371300,
    });
    data.forEach((item) => {
      item.isClick = false;
    });
    list.value = data;
    let linyishi = {
      id: '',
      name: '临沂市',
    };
    list.value.unshift(linyishi);
  }
  // 获取用户可以访问的机构信息
  async function handlerGetOrgs() {
    let orgs = await getUserOrgs({});
    let isLevel = orgs.find((item, index) => {
      return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
    });
    if (isLevel) {
      // 市级
      getOptions();
    } else {
      // 县区级
      let levesl = orgs.filter((item, index) => {
        return item.parentName == '临沂市' || item.parentId == 371300;
      });
      list.value = levesl;
    }
  }
  onMounted(async () => {
    await handlerGetOrgs();
  });
</script>
<style lang="less" scoped>
  :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>
