<template>
  <div class="middle-content h-860px bottom-0 bg-red flex flex-col">
    <div class="title">Guest Experience</div>
    <div class="absolute top-93px right-52px">
      <Tabs
        :items="[
          { name: 'Daily Data', value: '1' },
          { name: 'Last 60Days', value: '2' },
        ]"
        v-model:active="timeType"
        styles="font-family: PingFangSC-Medium;font-size: 44px;"
      />
    </div>
    <div class="flex-1 mt-30px p-l-100px p-b-60px p-r-87px flex justify-between">
      <!-- Yas Island Campaigns -->
      <section class="w-900px">
        <div class="flex items-center justify-between">
          <span class="chart-title">Yas Island Campaigns</span>
          <span class="text-24px text-#9BABBA">As of {{ endDate }}</span>
        </div>
        <div class="text-36px text-#fff leading-50px mb-27px">
          MTD campaigns
          <span class="num text-36px">{{
            dataSource.yasIslandCampaignsData?.mtdCampaigns ?? 'N/A'
          }}</span>
        </div>
        <div class="flex items-center justify-between text-32px leading-45px">
          <span class="text-#4EB2FF">Total campaign emial sent</span>
          <span class="text-#3EFDFF">Delivered</span>
        </div>
        <div class="flex h-18px my-6px">
          <div class="h-full bg-#4EB2FF" :style="{ width: totalCampaignEmailSentWidth }"></div>
          <div class="h-full bg-#3EFDFF" :style="{ width: deliveredWidth }"></div>
        </div>
        <div class="flex items-center justify-between text-36px leading-45px num mb-20px">
          <span class="text-#4EB2FF">{{
            dataSource.yasIslandCampaignsData?.totalCampaignEmailSent ?? 'N/A'
          }}</span>
          <span class="text-#3EFDFF">{{
            dataSource.yasIslandCampaignsData?.delivered ?? 'N/A'
          }}</span>
        </div>

        <div class="flex gap-20px items-center">
          <div
            class="w-310px h-281px box-border border-2px border-solid border-#33A3FF flex flex-col items-center justify-center"
          >
            <div class="text-32px text-#afb9c8">Email open rate%</div>
            <div class="num text-#fff text-36px m-b-30px leading-45px">
              {{ dataSource.yasIslandCampaignsData?.emailOpenRate ?? 'N/A' }}%
            </div>
            <div class="text-32px text-#afb9c8">Click rate%</div>
            <div class="num text-#fff text-36px leading-45px">
              {{ dataSource.yasIslandCampaignsData?.clickRate ?? 'N/A' }}%
            </div>
          </div>
          <div class="flex-1 flex flex-col justify-between">
            <div v-for="(item, index) in dataSource.yasIslandCampaignsData?.list || []" :key="index">
              <div class="text-32px leading-45px">{{ item.apStatus }}</div>
              <div class="flex items-center gap-10px">
                <div class="w-480px h-18px bg-#808DEF" :style="{ width: calcWidth(item.totalCount || 0)}" />
                <div class="num text-36px">
                  {{ item.totalCount ?? 'N/A' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Journey Touch Point -->
      <section class="w-980px flex flex-col">
        <div class="flex items-center justify-between mb-25px">
          <span class="chart-title">Journey Touch Point</span>
          <span class="text-24px text-#9BABBA">As of {{ endDate }}</span>
        </div>
        <Tabs
          default-value="SWAD"
          v-model:active="journeyTouchPointActive"
          :items="parkOptions"
          :gap="16"
        />
        <div class="flex-1 mt-25px">
          <div
            class="flex mb-53px transition-all duration-300 ease-in-out"
            v-for="item in journeyTouchPointsItems"
            :key="item.id"
          >
            <div class="label w-320px text-right mr-8px text-32px text-#36AEFF">
              {{ item.label }}
            </div>
            <div class="cusbar flex-1 mr-10px">
              <div
                class="cusbar-inner transition-all duration-300 ease-in-out"
                :style="{ width: (item.percent > 100 ? 100 : item.percent) + '%' }"
              ></div>
            </div>
            <div class="value w-44px num text-36px leading-1em">
              {{ item.value }}
            </div>
          </div>
        </div>
      </section>

      <!-- Happiness Meters -->
      <section class="w-900px flex flex-col">
        <div class="flex items-center justify-between mb-25px">
          <span class="chart-title">Happiness Meters</span>
          <span class="text-24px text-#9BABBA">As of {{ endDate }}</span>
        </div>
        <Tabs
          default-value="SWAD"
          v-model:active="happinessMetersAcitve"
          :items="parkOptions"
          :gap="16"
        />
        <div class="flex-1 mt-25px">
          <Bar :options="happinessMetersBar" />
        </div>
      </section>

      <!-- Queue Time -->
      <section class="w-900px flex flex-col">
        <div class="flex items-center justify-between mb-25px">
          <span class="chart-title">Queue Time</span>
          <span class="text-24px text-#9BABBA">As of {{ endDate }}</span>
        </div>
        <Tabs
          default-value="SWAD"
          v-model:active="queueTimeActive"
          :items="parkOptions"
          :gap="16"
        />
        <div class="flex-1 mt-25px">
          <Bar :options="ququeTimeBar" />
        </div>
      </section>

      <!-- Visitor Breakdown By Country Of Residence -->
      <section class="w-934px flex flex-col">
        <div class="flex items-center justify-between">
          <span class="chart-title">Visitor Breakdown By Country Of Residence</span>
        </div>
        <div class="text-24px text-#9BABBA">As of {{ endDate }}</div>
        <div class="flex-1 mt-25px">
          <Bar :options="vistorCountryBar" />
        </div>
      </section>

      <!-- Transport -->
      <section class="w-988px flex flex-col">
        <div class="flex items-center justify-between mb-21px">
          <span class="chart-title">Transport</span>
          <span class="text-24px text-#9BABBA">As of {{ endDate }}</span>
        </div>
        <div class="flex justify-between mb-15px">
          <div class="left">
            <div class="text-36px leading-50px mb-17px">On time services</div>
            <div class="flex items-baseline gap-12px">
              <span class="num text-48px leading-60px"
                >{{ dataSource.transportData?.onTimeRate ?? 'N/A' }}%</span
              >
              <span v-if="dataSource.transportData?.onTimeRateChange">
                <img
                  v-if="dataSource.transportData?.onTimeRateChange > 0"
                  src="@/assets/images/up-arrow.svg"
                  alt=""
                />
                <img v-else src="@/assets/images/down-arrow.svg" alt="" />
              </span>
              <span
                class="num text-36px"
                :class="
                  dataSource.transportData?.onTimeRateChange > 0 ? 'text-upcolor' : 'text-downcolor'
                "
                >{{ dataSource.transportData?.onTimeRateChange > 0 ? '+' : ''
                }}{{ dataSource.transportData?.onTimeRateChange ?? 'N/A' }}%</span
              >
            </div>
            <div class="w-411px h-18px bg-#1669B424 rounded-30px relative mt-20px">
              <div
                class="h-full bg-#4CA3FF rounded-30px"
                :style="{
                  width: (dataSource.transportData?.onTimeRate || 0) + '%',
                }"
              ></div>
            </div>
          </div>
          <div class="flex flex-col items-center justify-center">
            <div class="w-120px h-120px">
              <Circle :percentage="dataSource.transportData?.onScheduleRate" />
            </div>
            <div class="text-24px text-center leading-32px mt-12px">On-schedule rate</div>
          </div>
          <div class="flex flex-col items-center justify-center">
            <div class="w-142px h-127px relative">
              <img src="@/assets/images/bus-lines.png" alt="bus lines" />
              <div class="absolute left-1/2 top-1/2 translate--1/2 num text-36px">
                {{ dataSource.transportData?.lineCount ?? 'N/A' }}
              </div>
            </div>
            <div class="text-24px text-center leading-32px mt-12px">The number of lines</div>
          </div>
        </div>
        <div class="flex-1 mt-20px">
          <Bar :options="passengerOptions" />
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, computed } from 'vue';
import Tabs from '@/components/Tabs.vue';
import Bar from '@/components/charts/Bar.vue';
import Circle from '@/components/charts/Circle.vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import { Receiver } from '@/utils/sseReceiver';
import {
  GetYasIslandCampaigns,
  GetJourneyTouchPoint,
  GetHappinessMeters,
  GetQueueTime,
  GetVisitorBreakdownByCountryOfResidence,
  GetTransport,
} from '@/api';
import { getIDBData } from '@/utils/database';
import dayjs from 'dayjs';

import type {
  IHappinessMeter,
  IJourneyTouchPoint,
  IQueueTime,
  IVisitorBreakdownByCountryOfResidence,
  ITransport,
} from '@/api';

import icon0 from '@/assets/images/emoji0.png';
import icon1 from '@/assets/images/emoji1.png';
import icon2 from '@/assets/images/emoji2.png';
import icon3 from '@/assets/images/emoji3.png';
import icon4 from '@/assets/images/emoji4.png';

const parkOptions = [
  { name: 'SWAD', value: 'SWAD' },
  { name: 'FWAD', value: 'FWAD' },
  { name: 'YWW', value: 'YWW' },
  { name: 'WBW', value: 'WBW' },
  { name: 'QAW', value: 'QAW' },
  { name: 'CLYMB', value: 'CLYMB' },
  { name: 'YI', value: 'YI' },
  { name: 'TeamLab', value: 'TeamLab' },
];

// 时间类型 1 daily 2 近60天
const timeType = ref('1');
const happinessMetersAcitve = ref('SWAD');
const queueTimeActive = ref('SWAD');
const journeyTouchPointActive = ref('SWAD');
// 截止日期
const endDate = ref(dayjs().format('YY/MM/DD'));
// 数据源
const dataSource = reactive<Record<string, any>>({
  yasIslandCampaignsData: {},
  journeyTouchPointData: [],
  happinessMetersData: [],
  queueTimeData: [],
  visitorBreakdownByCountryOfResidenceData: [],
  transportData: {},
});

/**********************计算样式************************/
const totalCampaignEmailSentWidth = computed(() => {
  const { totalCampaignEmailSent = 1, delivered = 1 } = dataSource.yasIslandCampaignsData;
  const total = Number(totalCampaignEmailSent) + Number(delivered);
  return (totalCampaignEmailSent / total) * 100 + '%';
});

const deliveredWidth = computed(() => {
  const { totalCampaignEmailSent = 1, delivered = 1 } = dataSource.yasIslandCampaignsData;
  const total = Number(totalCampaignEmailSent) + Number(delivered);
  return (delivered / total) * 100 + '%';
});

const calcWidth = (n: number) => {
  const list = dataSource.yasIslandCampaignsData?.list || [];
  const count = 480;

  const total = list.reduce((acc: any, cur: any) => acc + cur.totalCount, 0);

  return (n / total) * count + 'px';
}

// 设置实时数据
const setDailyData = async () => {
  getIDBData('Yas_Island_Campaigns').then((res) => {
    if (res?.value) {
      dataSource.yasIslandCampaignsData = res.value;
    }
  });
  getIDBData('Journey_Touch_Point' + journeyTouchPointActive.value).then((res) => {
    if (res?.value) {
      dataSource.journeyTouchPointData = res.value;
    }
  });
  getIDBData('Park_Happiness_Meters' + happinessMetersAcitve.value).then((res) => {
    if (res?.value) {
      dataSource.happinessMetersData = res.value;
    }
  });
  getIDBData('Park_Queue_Time' + queueTimeActive.value).then((res) => {
    if (res?.value) {
      dataSource.queueTimeData = res.value;
    }
  });
  getIDBData('Visitor_Breakdown_By_Country_Of_Residence').then((res) => {
    if (res?.value) {
      dataSource.visitorBreakdownByCountryOfResidenceData = res.value;
    }
  });
  getIDBData('Transport').then((res) => {
    if (res?.value) {
      dataSource.transportData = res.value;
    }
  });
};

// 实时数据 从websocket获取数据
const getDailyData = () => {
  setDailyData();
  endDate.value = dayjs().format('YY/MM/DD');
  // 获取websoket
  const ws = Receiver.getInstance(import.meta.env.VITE_APP_SOCKET_SERVER + '/kpi/ws/data');
  ws.onMessage(async (message) => {
    const { module, data } = message || {};
    if (module && data && timeType.value === '1') {
      setDailyData();
    }
  });
};

// 近60天 从api获取数据
const getLast60DayData = async () => {
  GetYasIslandCampaigns().then((res) => {
    dataSource.yasIslandCampaignsData = res;
  });

  GetJourneyTouchPoint(journeyTouchPointActive.value).then((res) => {
    dataSource.journeyTouchPointData = res;
  });

  GetHappinessMeters(happinessMetersAcitve.value).then((res) => {
    dataSource.happinessMetersData = res;
  });

  GetQueueTime(queueTimeActive.value).then((res) => {
    dataSource.queueTimeData = res;
  });

  GetVisitorBreakdownByCountryOfResidence().then((res) => {
    dataSource.visitorBreakdownByCountryOfResidenceData = res;
  });

  GetTransport().then((res) => {
    dataSource.transportData = res;
  });
};

let timer: NodeJS.Timeout | null = null;

// 获取数据
const getData = async () => {
  timer && clearTimeout(timer);
  timer = null;

  if (timeType.value === '1') {
    getDailyData();
  } else {
    getLast60DayData();
    // 60天数据轮询请求
    timer = setInterval(getLast60DayData, Number(import.meta.env.VITE_APP_POLLING_INTERVAL));
  }
};

// 实时/60天切换
watch(
  () => timeType.value,
  () => {
    getData();
  },
);

// journeyTouchPoint切换
watch(
  () => journeyTouchPointActive.value,
  () => {
    if (timeType.value === '2') {
      GetJourneyTouchPoint(journeyTouchPointActive.value).then((res) => {
        dataSource.journeyTouchPointData = res;
      });
    } else {
      getIDBData('Journey_Touch_Point' + journeyTouchPointActive.value).then((res) => {
        if (res?.value) {
          dataSource.journeyTouchPointData = res.value;
        }
      });
    }
  },
);

// happinessMeters切换
watch(
  () => happinessMetersAcitve.value,
  () => {
    if (timeType.value === '2') {
      GetHappinessMeters(happinessMetersAcitve.value).then((res) => {
        dataSource.happinessMetersData = res;
      });
    } else {
      getIDBData('Park_Happiness_Meters' + happinessMetersAcitve.value).then((res) => {
        if (res?.value) {
          dataSource.happinessMetersData = res.value;
        }
      });
    }
  },
);

// queueTime切换
watch(
  () => queueTimeActive.value,
  () => {
    if (timeType.value === '2') {
      GetQueueTime(queueTimeActive.value).then((res) => {
        dataSource.queueTimeData = res;
      });
    } else {
      getIDBData('Park_Queue_Time' + queueTimeActive.value).then((res) => {
        if (res?.value) {
          dataSource.queueTimeData = res.value;
        }
      });
    }
  },
);

/**************************计算图表等数据***********************/
// 获取journeyTouchPoint
const journeyTouchPointsItems = computed(() => {
  const list = (dataSource.journeyTouchPointData || []).splice(0, 5);

  return list.map((item: IJourneyTouchPoint, index: number) => ({
    id: item.id || index,
    label: item.experienceProject,
    value: item.value,
    percent: (Number(item.value) / 10) * 100,
  }));
});

// 幸福指数柱形图
const happinessMetersBar = computed((): EChartsOption => {
  const { happinessMetersData = [] } = dataSource;
  // 根据park_code过滤数据前5条数据
  const list = happinessMetersData
    .filter((item: IHappinessMeter) => item.parkCode === happinessMetersAcitve.value)
    .splice(0, 5);

  return {
    grid: {
      left: '5%',
      right: '0%',
      bottom: '0%',
      top: '0%',
    },
    xAxis: {
      type: 'category',
      data: list.map((item: IHappinessMeter) => item.project),
      axisLabel: {
        color: '#fff',
        fontFamily: 'PingFangSC-Regular, sans-serif',
        fontSize: 24,
        interval: 0,
      },
      axisLine: {
        lineStyle: {
          color: '#456189',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#9caabc',
        fontFamily: 'PingFangSC-Regular, sans-serif',
        fontSize: 24,
      },
      minInterval: 1,
      min: 0,
      max: 5,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#304c76',
        },
      },
    },
    series: [
      {
        data: list.map((item: IHappinessMeter) => item.happinessMeters),
        type: 'bar',
        itemStyle: {
          // 渐变色
          color: new (echarts as any).graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#59A4FF',
            },
            {
              offset: 1,
              color: '#0059FF',
            },
          ]),
          // 条宽度
        },
        barWidth: 18,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontFamily: 'PingFangSC-Medium, sans-serif',
          fontSize: 36,
          formatter: (params) => {
            const value = Number(params?.value || 0);
            if (value >= 0 && value <= 0.9) {
              return ['{a|}', params.value].join('\n');
            }
            if (value > 0.9 && value <= 1.9) {
              return ['{b|}', params.value].join('\n');
            }
            if (value > 0.9 && value <= 2.9) {
              return ['{c|}', params.value].join('\n');
            }

            if (value > 2.9 && value < 3.9) {
              return ['{c|}', params.value].join('\n');
            }

            return ['{e|}', params.value].join('\n');
          },
          rich: {
            a: {
              backgroundColor: {
                image: icon0,
              },
            },
            b: {
              backgroundColor: {
                image: icon1,
              },
            },
            c: {
              backgroundColor: {
                image: icon2,
              },
            },
            d: {
              backgroundColor: {
                image: icon3,
              },
            },
            e: {
              backgroundColor: {
                image: icon4,
              },
            },
          },
        },
      },
    ],
  };
});

// 排队时间柱形图
const ququeTimeBar = computed((): EChartsOption => {
  const { queueTimeData = [] } = dataSource;
  // 根据park_code过滤数据前5条数据
  const list = queueTimeData
    .filter((item: IQueueTime) => item.parkCode === queueTimeActive.value)
    .splice(0, 5);

  return {
    grid: {
      left: '5%',
      right: '0%',
      bottom: '0%',
      top: '0%',
    },
    yAxis: {
      type: 'category',
      data: list.map((item: IQueueTime) => item.project),
      axisLabel: {
        color: '#879bbd',
        fontFamily: 'PingFangSC-Regular, sans-serif',
        fontSize: '32px',
      },
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#879bbd',
        fontFamily: 'PingFangSC-Regular, sans-serif',
        fontSize: 24,
      },
      minInterval: 10,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#304c76',
        },
      },
    },
    series: [
      {
        data: list.map((item: IQueueTime) => item.queueTime),
        type: 'bar',
        itemStyle: {
          // 渐变色
          color: new (echarts as any).graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: '#59A4FF',
            },
            {
              offset: 1,
              color: '#0059FF',
            },
          ]),
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 20,
          fontFamily: 'URWGothic-Book',
          formatter: '{c}min',
        },
        barWidth: 20,
      },
    ],
  };
});

// 游客来源柱形图
const vistorCountryBar = computed((): EChartsOption => {
  const { visitorBreakdownByCountryOfResidenceData = [] } = dataSource;
  // 根据park_code过滤数据前5条数据
  const list = visitorBreakdownByCountryOfResidenceData.splice(0, 5);
  return {
    grid: {
      left: '0%',
      right: '5%',
      bottom: '0%',
      top: '0%',
    },
    yAxis: {
      type: 'category',
      data: list.map((item: IVisitorBreakdownByCountryOfResidence) => item.country),
      axisLabel: {
        color: '#5BBAFF',
        fontFamily: 'PingFangSC-Regular, sans-serif',
        fontSize: '32px',
        inside: true,
        verticalAlign: 'bottom',
        padding: [0, 0, 16, 0],
        margin: 0,
      },
      axisLine: { show: false },
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        data: list.map((item: IVisitorBreakdownByCountryOfResidence) => item.visitorCount),
        type: 'bar',
        itemStyle: {
          // 渐变色
          color: new (echarts as any).graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: '#59A4FF',
            },
            {
              offset: 1,
              color: '#0059FF',
            },
          ]),
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 20,
          fontFamily: 'URWGothic-Book',
          formatter: (params) => {
            return `${params.value}(${list[params.dataIndex]?.percentage}%)`;
          },
        },
        barWidth: 20,
      },
    ],
  };
});

// 乘客数据
const passengerOptions = computed((): EChartsOption => {
  const { transportData } = dataSource;
  // 根据park_code过滤数据前5条数据
  const list = (transportData?.passengers || []) as ITransport['passengers'];
  return {
    title: {
      text: 'Number of passengers',
      left: 0,
      top: 0,
      textStyle: {
        color: '#fff',
        fontSize: '36px',
        fontFamily: 'PingFangSC-Medium, sans-serif',
        lineHeight: 50,
      },
    },
    legend: {
      right: 0,
      top: 0,
      textStyle: {
        color: '#9BAEC1',
        fontSize: 24,
        fontFamily: 'PingFangSC-Regular, sans-serif',
      },
    },
    grid: {
      left: '18px',
      right: '0%',
      bottom: '3%',
      top: '20%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: [...new Set(list.map((item) => item.day))],
        axisLabel: {
          color: '#fff',
          fontFamily: 'PingFangSC-Regular, sans-serif',
          fontSize: 24,
          rotate: 15,
          margin: 20,
        },
        axisLine: {
          lineStyle: {
            color: '#456189',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#9caabc',
          fontFamily: 'PingFangSC-Regular, sans-serif',
          fontSize: 24,
        },
        minInterval: 1,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#304c76',
          },
        },
      },
    ],
    series: [
      {
        name: 'Passengers',
        type: 'bar',
        data: list.map((item) => item.passengerCount),
        barWidth: 18,
        itemStyle: {
          color: '#2E90FF',
        },
      },
      {
        name: 'Buses',
        type: 'bar',
        data: list.map((item) => item.busCount),
        barWidth: 18,
        itemStyle: {
          color: '#1AFF90',
        },
      },
    ],
  };
});

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.middle-content {
  background: url(@/assets/images/mb-bg.svg);
  background-size: contain;
  .title {
    width: 2700px;
    margin: 0 auto;
    margin-top: 87px;
    text-align: center;
    font-family: PingFangSC-Semibold, sans-serif;
    font-weight: 600;
    font-size: 72px;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
    font-style: normal;
    text-transform: none;
    background: url(@/assets/images/tit-bg1.png) no-repeat center;
  }
}

.cusbar {
  height: 36px;
  background: rgba(217, 217, 217, 0);
  border-radius: 0px 0px 0px 0px;
  border: 2px solid #16396f;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: 4px;
    height: calc(100% + 4px);
    background: linear-gradient(180deg, #41a2d5 0%, #698dd3 100%);
    border-radius: 0px 0px 0px 0px;
    z-index: 2;
  }
  .cusbar-inner {
    height: 18px;
    width: 50%;
    background: linear-gradient(270deg, #59a4ff 0%, #0059ff 100%);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 3px;
      height: 18px;
      background: linear-gradient(180deg, #f57721 0%, #f9c722 100%);
      border-radius: 0px 0px 0px 0px;
    }
  }
}
</style>
