<!-- 统计页 -->
<template>
  <view class="content">
    <view class="c-top">
      <view class="" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="c-title">业务统计</view>
      <view class=""></view>
    </view>
    <view class="ail">

      <!-- 			<view class="top-box">
              <view class="t-top">
                <view class="sis">
                  <view class="t-title">检测进行中</view>
                  <view class="t-num">{{threenum.workingNum}}</view>
                </view>
                <view class="sis">
                  <view class="t-title">当日订单</view>
                  <view class="t-num" >{{threenum.todayOrderNum}}</view>
                </view>
                <view class="sis">
                  <view class="t-title">当日结算订单</view>
                  <view class="t-num">{{threenum.workedNum}}</view>
                </view>
              </view>
            </view> -->
      <!-- ↓ 新增 -->
      <view class="ping-bottom" style="margin-top: 2%;">
        <view class="dinga">检测数量统计</view>
        <view class=""></view>
        <!-- 	<view class="dinga">选择时间</view> -->
      </view>
      <view style="width: 95%; margin: 5px auto;">
        <uni-datetime-picker v-model="ranges" type="daterange" @maskClick="maskClick"/>
      </view>


      <view class="top-box" @click="goOrderList">
        <view class="t-top">
          <view class="sis">
            <view class="t-title">订单数量</view>
            <view class="t-num">{{ data2.allNum || 0 }}</view>
          </view>
          <view class="sis">
            <view class="t-title">完成数量</view>
            <view class="t-num">{{ data2.ywcNum || 0 }}</view>
          </view>
          <view class="sis">
            <view class="t-title">检测中数量</view>
            <view class="t-num">{{ data2.jxzNum || 0 }}</view>
          </view>
        </view>
      </view>
      <view class="ping-bottom">
        <view class="dinga">营业额统计</view>
        <view class=""></view>
        <!-- 	<view class="dinga">选择时间</view> -->
      </view>
      <view style="width: 95%; margin: 5px auto;">
        <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick"/>
      </view>

      <view class="top-box">

        <view class="t-top">
          <view class="sys">
            <view class="t-title">公示价格</view>
            <view class="t-num">{{ data1.gsAmount || 0 }}</view>
          </view>
          <view class="sys">
            <view class="t-title">应收款</view>
            <view class="t-num">{{ data1.ysAmount || 0 }}</view>
          </view>
          <view class="sys">
            <view class="t-title">已收款</view>
            <view class="t-num">{{ data1.yjsAmount || 0 }}</view>
          </view>
          <view class="sys">
            <view class="t-title">待收款</view>
            <view class="t-num">{{ data1.ysAmount - data1.yjsAmount || 0 }}</view>
          </view>
        </view>
      </view>
      <view class="ping-bottom">
        <view class="dinga">客户来源统计</view>
        <!-- <view class="dinga" @click="goxiangqing(1)">更多<uni-icons type="right" size="12"></uni-icons></view> -->
      </view>

      <view class="top-box">
        <view class="t-num" style="padding-top: 5%;" v-if="!data3">暂无数据...</view>
        <view class="t-top" v-if="data3" v-for="(item,index) in data3">
          <view class="sys2" @click="goCustomerDetail(item.remark)">
            <view class="t-title">客户来源</view>
            <view class="t-num">{{ item.remark || '' }}</view>

          </view>

          <view class="sys2">
            <view class="t-title">数量</view>
            <view class="t-num">{{ item.theNum || '' }}</view>

          </view>
          <view class="sys2">
            <view class="t-title">公示金额</view>
            <view class="t-num">{{ item.theAmount || '' }}</view>


          </view>
        </view>
      </view>
      <view class="ping-bottom">
        <view class="dinga">检测车型统计</view>
        <view class="dinga" @click="goxiangqing(2)">更多
          <uni-icons type="right" size="12"></uni-icons>
        </view>
      </view>

      <view class="top-box">
        <view class="t-num" style="padding-top: 5%;" v-if="!data4[0]">暂无数据...</view>
        <view class="t-top">
          <view class="sys" v-if="data4[0]">
            <view class="t-title">{{ data4[0].goodsTitle || '' }}</view>
            <view class="t-num">{{ data4[0].theNum || '' }}</view>

          </view>
          <view class="sys" v-if="data4[1]">
            <view class="t-title">{{ data4[1].goodsTitle || '' }}</view>
            <view class="t-num">{{ data4[1].theNum || '' }}</view>

          </view>
          <view class="sys" v-if="data4[2]">
            <view class="t-title">{{ data4[2].goodsTitle || '' }}</view>
            <view class="t-num">{{ data4[2].theNum || '' }}</view>

          </view>
          <view class="sys" v-if="data4[3]">
            <view class="t-title">{{ data4[3].goodsTitle || '' }}</view>
            <view class="t-num">{{ data4[3].theNum || '' }}</view>

          </view>
        </view>
      </view>

      <view class="ping-bottom">
        <view class="dinga">检测类型统计</view>
        <view class="dinga" @click="goxiangqing(4)">更多
          <uni-icons type="right" size="12"></uni-icons>
        </view>
      </view>

      <view class="top-box">

        <view class="t-top">
          <view class="sys" v-for="(skuData) in skuList">
            <view class="t-title">{{ skuData.skuName }}</view>
            <view class="t-num">{{ skuData.orderCount || 0 }}</view>
          </view>
        </view>
      </view>

      <view class="ping-bottom">
        <view class="dinga">待收款</view>
        <view class="dinga" @click="goxiangqing(3)">更多
          <uni-icons type="right" size="12"></uni-icons>
        </view>
      </view>

      <view class="top-box">
        <view class="t-top">
          <view class="t-num" v-if="!data5[0]">暂无数据...</view>
          <view class="sys" v-if="data5[0]">
            <view class="t-title">{{ data5[0].theName || '' }}</view>
            <view class="t-num">{{ data5[0].theAmount || '' }}</view>

          </view>
          <view class="sys" v-if="data5[1]">
            <view class="t-title">{{ data5[1].theName || '' }}</view>
            <view class="t-num">{{ data5[1].theAmount || '' }}</view>

          </view>
          <view class="sys" v-if="data5[2]">
            <view class="t-title">{{ data5[2].theName || '' }}</view>
            <view class="t-num">{{ data5[2].theAmount || '' }}</view>

          </view>
          <view class="sys" v-if="data5[3]">
            <view class="t-title">{{ data5[3].theName || '' }}</view>
            <view class="t-num">{{ data5[3].theAmount || '' }}</view>

          </view>


        </view>
      </view>


      <view class="cont-box">
        <view class="cont-title">成交金额(已收款)</view>
        <view class="cont-title" style="font-size: 10px; color:#0D2E8D ;">最近7天已收款金额</view>
        <view class="dis-t">
        </view>
        <qiun-data-charts
            :ontouch='true'
            type="line"
            :opts="dopts"
            :chartData="Amount"
        />
      </view>
      <view class="cont-box">
        <view class="cont-title">检测数量</view>
        <view class="cont-title" style="font-size: 10px; color:#0D2E8D ;">最近7天</view>
        <view class="dis-t">
        </view>
        <qiun-data-charts
            :ontouch='true'
            type="line"
            :opts="dopts"
            :chartData="chartDataNum"
        />
      </view>

      <view class="cont-box">
        <view class="cont-title">已收款金额(按车型)</view>
        <view class="dis-t">

          <view class="lan-you">
            <view class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index"
                  @click="gbindex(index,item.unit)"> {{ item.text }}
            </view>
          </view>
        </view>
        <qiun-data-charts
            :ontouch='true'
            type="column"
            :opts="dopts"
            :chartData="chartData1"
        />
      </view>
      <view class="cont-box">
        <view class="cont-title">数量统计(按车型)</view>
        <view class="dis-t">

          <view class="lan-you">

            <view class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index"
                  @click="gbindex1(index,item.unit)"> {{ item.text }}
            </view>
          </view>
        </view>
        <qiun-data-charts
            :ontouch='true'
            type="column"
            :opts="dopts"
            :chartData="chartData2"
        />
      </view>
      <view class="cont-box">
        <view class="cont-title">检测合格率(按车型)</view>
        <view class="dis-t">

          <view class="lan-you">

            <view class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index"
                  @click="gbindex2(index,item.unit)"> {{ item.text }}
            </view>
          </view>
        </view>
        <qiun-data-charts
            :ontouch='true'
            type="column"
            :opts="dopts1"
            :chartData="chartData3"
        />
      </view>

    </view>

    <u-popup :show="xling" @close="closexl" :round="10" @open="openxl">
      <view class="popup-box">
        <view class="sousuo">
          <uni-icons type="search" size="22"></uni-icons>
          <input type="text" v-model="searchValue" placeholder="请输入机构">
          <text @click="getgetPartnerList()">搜索</text>
        </view>
        <view class="list-box">
          <scroll-view class="list_scroll" scroll-y="true">
            <view class="list-qiu" v-for="(item,index) in qubu" :key="index">
              <view class="">
                <text class="tel">{{ item.partnerName }}</text>
              </view>
              <view class="banniu">
                <text @click="xinxuanze(item.partnerId,item.partnerName)">选择</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';

export default {
  data() {
    return {
      data1: '',
      data2: '',
      data3: [],
      data4: '',
      data5: '',
      //检测类型统计
      skuList: [],
      startTime: '2023-9-28',
      endTime: '2023-9-28',
      name: '全部机构',
      single: '',
      range: ['2023-9-28', '2023-10-7'],
      ranges: ['2023-9-28', '2023-10-7'],
      partnerId: '',
      searchValue: '',
      baseUrl: this.$imgeUrl,
      xling: false,
      earchValue: '',
      countdown: 3,
      qhindex: 0,
      qhindex1: 0,
      qhindex2: 0,
      countNoPass: 0,
      countPass: 0,
      sum: 0,
      qubu: [],
      phb: [],
      threenum: {},
      zilist: [
        {text: '日', unit: 'day'},
        {text: '周', unit: 'week'},
        {text: '月', unit: 'month'},
        {text: '年', unit: 'year'},

      ],
      carlist: [],

      unit: 'day',
      unit1: 'day',
      unit2: 'day',
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。

      // sdada
      chartData1: {},
      chartData2: {},
      chartData3: {},
      chartDataNum: {},
      Amount: {},
      dopts1: {
        fontSize: 12,

        color: ["#0D2E8D", "#3CBC6F", "#FF571A", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 15, 0, 5],
        touchMoveLimit: 24,
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 3,
          fontSize: 10,
        },
        yAxis: {
          data: [
            {
              min: 0,
              max: 100,
              unit: '%'
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 35,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      },
      dopts: {
        fontSize: 12,

        color: ["#0D2E8D", "#3CBC6F", "#FF571A", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 15, 0, 5],
        touchMoveLimit: 24,
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 3,
          fontSize: 10,

        },
        yAxis: {
          data: [
            {
              min: 0

            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 35,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      },

    }
  },

  watch: {
    range(newval) {
      this.getfive()
    },
    ranges(newval) {
      this.getfive()
    },
  },
  onLoad() {
    this.gettime()
    this.partnerId = uni.getStorageSync('partnerId')
    // this.getServerData();
    this.getServerData1();
    this.getServerData2();
    this.getServerData3();
    this.chartLineInspectionAmount()
    this.chartLineInspectionNum()
    this.getInspectionSku()
    // this.sanxiang()
    this.getfive()
  },
  onShow() {
    // this.getstatisticsTop()
    this.getstatisticsMid()
    this.getgetPartnerList()
    // this.getstatisticsZXT()
    this.getstatisticsOrder()
  },
  methods: {
    goCustomerDetail(remark) {
      uni.navigateTo({
        url: '/pages/statistics/statislist?id=1&remark=' + remark
      })
    },
    gettime() {
      // 获取当前时间
      var now = new Date();

      // 获取年份
      var year = now.getFullYear();

      // 获取月份
      var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
      if (month < 10) {
        var month = "0" + month
      }

      // 获取日期
      var date = now.getDate();

      // 格式化时间
      var currentTime = year + '-' + month + '-' + date
      this.range[0] = currentTime
      this.range[1] = currentTime
      this.ranges[0] = currentTime
      this.ranges[1] = currentTime
    },
    // 五条
    async getfive() {

      let data1 = {
        startTime: this.range[0],
        endTime: this.range[1]
      }
      let res1 = await request({
        url: '/partnerOwn/partner/staticsTable1',
        method: 'get',
        params: data1
      })
      this.data1 = res1.data
      // 2
      let data2 = {
        startTime: this.ranges[0],
        endTime: this.ranges[1]
      }
      let res2 = await request({
        url: '/partnerOwn/partner/staticsTable2',
        method: 'get',
        params: data2
      })
      this.data2 = res2.data
      // 3
      let data3 = {
        startTime: '',
        endTime: ''
      }
      let res3 = await request({
        url: '/partnerOwn/partner/staticsTable3',
        method: 'get',
        params: data3
      })
      this.data3 = res3.data
      // 4
      let data4 = {
        startTime: '',
        endTime: ''
      }
      let res4 = await request({
        url: '/partnerOwn/partner/staticsTable4',
        method: 'get',
        params: data4
      })
      this.data4 = res4.data
      // 5
      let data5 = {
        startTime: '',
        endTime: ''
      }
      let res5 = await request({
        url: '/partnerOwn/partner/staticsTable5',
        method: 'get',
        params: data5
      })
      this.data5 = res5.data

    },
    //
    goxiangqing(id) {
      uni.navigateTo({
        url: '/pages/statistics/statislist?id=' + id
      })
    },
    goOrderList() {
      uni.navigateTo({
        url: '/pages/index/ordermanage'
      })
    },
    // 检测类型统计
    getInspectionSku() {
      let data = {
        // partnerId: this.partnerId,
        // unit: this.unit,
      }
      request({
        url: '/partnerOwn/partner/queryInspectionSkuList',
        method: 'get',
        // params: data
      }).then((res) => {
        this.skuList = res.data
      })
    },
    maskClick(e) {
    },
    // 折线图
    async chartLineInspectionAmount() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartLineInspectionAmount',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.Amount = JSON.parse(JSON.stringify(res));

    },
    // 折线图
    async chartLineInspectionNum() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartLineInspectionNum',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartDataNum = JSON.parse(JSON.stringify(res));

    },

    gbindex(index, unit) {
      this.qhindex = index
      this.unit = unit
      this.getServerData1()
    },
    gbindex1(index, unit) {
      this.qhindex1 = index
      this.unit1 = unit
      this.getServerData2()
    },
    gbindex2(index, unit) {
      this.qhindex2 = index
      this.unit2 = unit
      this.getServerData3()
    },
    getback() {
      uni.navigateBack()
    },
    xinxuanze(name) {
      this.name = name
      this.xling = false
      this.getServerData1()

    },
    async sanxiang() {
      let res = await request({
        url: '/partnerOwn/partner/statisticsInfo?partnerId=' + this.partnerId,
        method: 'get',
      })
      let nums = {
        orderAmount: Math.trunc(res.data.orderAmount / 100),
        orderNum: res.data.orderNum,
        todayOrderAmount: res.data.todayOrderAmount / 100,
        todayOrderNum: res.data.todayOrderNum,
        workedNum: res.data.workedNum,
        workingNum: res.data.workingNum
      }
      this.threenum = nums
    },
    async getstatisticsTop() {
      let res = await request({
        url: '/appInspection/order/statisticsTop',
        method: 'get',
      })
      // this.chartData.series[0].data =  res.data.list
    },
    async getstatisticsMid() {
      let res = await request({
        url: '/appInspection/order/statisticsMid',
        method: 'get',
      })
      this.carlist = res.data
    },


    async getgetPartnerList() {
      let data = {
        partnerName: this.searchValue
      }
      let res = await request({
        url: '/appInspection/order/getPartnerList',
        method: 'get',
        params: data
      })
      this.qubu = res.data

    },
    async getstatisticsZXT() {
      let data = {
        partnerId: this.partnerId,
        type: this.value
      }
      let res = await request({
        url: '/appInspection/order/statisticsZXT',
        method: 'get',
        params: data
      })

    },
    async getstatisticsOrder() {
      let res = await request({
        url: '/appInspection/order/statisticsOrder',
        method: 'get',
      })
      this.phb = res.data

    },
    // 123123
    closexl(e) {
      this.xling = false

    },
    openxl(e) {
    },

    // 金额
    async getServerData1() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartInfoAmount',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData1 = JSON.parse(JSON.stringify(res));

    },
    // 数量
    async getServerData2() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit1,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartInfoNum',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData2 = JSON.parse(JSON.stringify(res));

    },
    // 合格率
    async getServerData3() {
      let data = {
        partnerId: this.partnerId,
        unit: this.unit2,
      }
      let rex = await request({
        url: '/partnerOwn/partner/chartInfoRatio',
        method: 'get',
        params: data
      })
      let res = rex.data

      this.chartData3 = JSON.parse(JSON.stringify(res));

    },

  },
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100vh);
  background-color: #F6F6F6;
  box-sizing: border-box;
  // padding-top: 45px;
}

.ping-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 15px;
}

.c-top {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.c-title {
  font-size: 18px;
  font-weight: bold
}

.ail {
  width: 100%;
  background-color: #F6F6F6;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.top-box {
  width: 95%;
  border-radius: 5px;
  box-sizing: border-box;
  // padding: 18px;
  background-color: white;
  margin: 10px auto;
}

.cont-box {
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 18px;
  background-color: white;
  margin: 10px auto;
}

.charts-box {
  width: 100%;
  height: 300px;
}

.t-bottom {
  width: 100%;
  height: 130px;
  border-top: 1px solid #EEEEEE;
  box-sizing: border-box;
  // padding: 20px;
}

.t-top {
  width: 100%;
  // height: 130px;
  display: flex;

  justify-content: center;
  box-sizing: border-box;
  padding: 15px;
  padding-bottom: 0px;
}

.sis {
  width: 33%;
}

.dinga {
  // margin-left: 25px;
  font-size: 14px;
  font-weight: bold;
}

.sys {
  width: 25%;
}

.sys2 {
  width: 33%;
}

.t-title {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
}

.t-num {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #0D2E8D;
  line-height: 26px;
  margin: 5px auto;
}

.cont-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.charts-box {
  width: 100%;
  height: 300px;
}

.wrap-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto;
}

.w-box {
  width: 33%;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 10px;
}

.imgicon {
  width: 33px;
  height: 28px;
  margin: 0 auto;

  image {
    width: 100%;
    height: 100%;
  }
}

.t-zhong {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin: 3px auto;
}

.lanbnum {
  font-size: 26px;
  font-weight: bold;
  color: #0D2E8D;
}

.b-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin-bottom: 10px;
}

.b-zuo {
  width: 20%;
}

.b-zhong {
  text-align: left;
  width: 60%;
  display: flex;
  align-items: center;
}

.b-you {
  width: 20%;
}

.touxiang {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: salmon;
  overflow: hidden;
  margin-right: 10px;

  image {
    width: 100%;
    height: 100%;
  }
}

.one {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FEB947;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;

}

.dis-t {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}

.lank {
  width: 102px;
  height: 27px;
  border-radius: 14px;
  border: 1px solid #0D2E8D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: #0D2E8D;
}

.lan-you {
  display: flex;
  align-items: center;
}

.yi {
  font-size: 15px;
  font-weight: 400;
  color: #666666;
  line-height: 15px;
  margin-right: 15px;
}

.er {
  width: 25px;
  height: 25px;
  background: #0D2E8D;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
}

// ----------------------
.popup-box {
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  background-color: white;
}

.sousuo {
  width: 95%;
  margin: 0 auto;
  margin-left: 0px;
  height: 30px;
  background: #F0F0F0;
  border-radius: 50px;
  color: #999999;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  input {
    width: 80%;
  }
}

.list-box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  box-sizing: border-box;

}

.list_scroll {
  height: 100%; // 需设置高度
  display: flex;
  flex-direction: column;

}

.list-qiu {
  width: 95%;
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tel {
  margin-left: 5px;
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}
</style>
