<template>
  <div class="app-container">
    <!-- 过滤条件 -->
    <el-form label-width="90px" inline>
      <el-form-item label="应用选择">
        <zx-app-select
          v-model="condition.pkg"
          defaultValue=""
          :addAllOption="false"
          menuCode="game.Overview,android"
          @change="getAgentList"
        ></zx-app-select>
      </el-form-item>

      <el-form-item label="日期选择">
        <el-date-picker
          v-model="condition.dateNow"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时段选择">
        <el-select v-model="condition.hourNow" filterable placeholder="请选择">
          <el-option
            v-for="item in hours"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 对比模块 时间 -->
      <el-form-item label="对比日期" v-if="compareSwitch">
        <el-date-picker
          v-model="compareDate.day"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="对比时段" v-if="compareSwitch">
        <el-select
          v-model="compareDate.hour"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in hours"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 剩余的参数 -->
      <el-form-item label="投放方式">
        <el-select
          v-model="condition.agentMethod"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in putList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作状态">
        <el-select
          v-model="condition.optStatus"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="(item, idx) in planStatusList"
            :key="idx"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投放状态">
        <el-select v-model="condition.adStatus" filterable placeholder="请选择">
          <el-option
            v-for="(item, idx) in planPutStatus"
            :key="idx"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计划考核">
        <el-select v-model="condition.planKPI" filterable placeholder="请选择">
          <el-option
            v-for="item in planAssessLIst"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="代理商">
        <el-select v-model="condition.agentId" filterable placeholder="请选择">
          <el-option
            v-for="item in agentList"
            :key="item.agent_id"
            :label="item.agent_name"
            :value="item.agent_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告主ID">
        <el-input
          v-model.number="condition.advertiserId"
          placeholder="请输入广告主ID"
        ></el-input>
      </el-form-item>
      <el-form-item label="广告计划ID">
        <el-input
          v-model.number="condition.planId"
          placeholder="请输入计划ID"
        ></el-input>
      </el-form-item>
      <el-form-item label="考核指标范围:" label-width="100px">
        <div>
          <el-input v-model="condition.kpiMin" style="width:120px" placeholder="考核最小值"></el-input>
          ~
          <el-input v-model="condition.kpiMax" style="width:120px" placeholder="考核最大值"></el-input>
        </div>
      </el-form-item>
      <!-- 提交的按钮 -->
      <el-form-item>
        <el-button type="primary" :loading="riceLoading" @click="riceClick"
          >筛选</el-button
        >
      </el-form-item>
      <!-- 对比开关 -->
      <el-form-item label="时段对比">
        <el-switch v-model="compareSwitch" />
      </el-form-item>




    </el-form>

    <!-- 批量开启或者关闭计划 -->
    <div style="margin-bottom: 5px">
      <el-button size="mini" type="primary" @click="changeListStatus('enable')">
        开启选择
      </el-button>
      <el-popconfirm
        confirm-button-text="确定"
        confirm-button-type="danger"
        cancel-button-text="取消"
        cancel-button-type="primary"
        icon="el-icon-circle-close"
        icon-color="red"
        title="确定批量关闭选择的状态吗？"
        @onConfirm="changeListStatus('disable')"
      >
        <el-button slot="reference" size="mini" type="danger">
          关闭选择
        </el-button>
      </el-popconfirm>
    </div>
    <!-- 表格展示 -->
    <zx-table
      :header-cell-style="{
        color: '#848484',
        fontSize: '12px',
        backgroundColor: '#qua',
        padding: '0',
      }"
      :select="true"
      :table-list="tableData"
      :header="header"
      :loading="riceLoading"
      @selection-change="selectTableRows"
    ></zx-table>
    <!-- 分页的地方 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40, 50, 60, 80, 100, pageInfo.total]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- 引入修改计划的组件 -->
    <update-plan ref="upPlanComponent"></update-plan>

    <!-- 修改投放计划配置 -->
    <putin-cfg
      v-if="showDialog"
      ref="putinCfg"
      :putinCfg="putinCfg"
      :putinCfgType="putinCfgType"
      @saveSuccess="riceAssessList"
    />
  </div>
</template>

<script>
import {
  pickerOptions,
  putLIst,
  planStatusList,
  planPutStatus,
  planAssessLIst,
} from "./const.js";
import ZxAppSelect from "@/components/zx-common-cpn/zx-app-select";
import { v2TableMappingAPI, attributionStatusChange } from "@/api/report.js";
import { getDateToSeconds } from "@/utils/utils.js";
//计划修改组件
import UpdatePlan from "./components/UpdatePlan";

// 修改计划配置组件
import PutinCfg from "./components/PutinCfg";

export default {
  components: {
    ZxAppSelect,
    UpdatePlan,
    PutinCfg,
  },
  data() {
    //0-23小时，暂时排除全时段
    let hours = [];
    for (let i = 0; i < 24; i++) {
      let val = i < 10 ? "0" + i : i;
      hours.push({ label: val.toString(), value: val.toString() });
    }
    //添加全时段
    hours.unshift({ label: "全时段", value: "all" });
    //比较数据处理 函数
    let compareFun = (row, col, cellValue, idnex) => {
      let cur = parseInt(row[col.property] * 100) / 100;
      if (this.compareSwitch) {
        let unit = this.compareList.filter(
          (itm) => itm.plan_id === row.plan_id
        );
        //对比存在
        if (unit.length && unit[0][col.property]) {
          let pre = parseInt(unit[0][col.property] * 100) / 100;
          //精度处理 2021-1-19 18 19 亿万达人-畅效 1688846769123351
          let rate =
            parseInt(((cur * 100 - pre * 100) / (pre * 100)) * 10000) / 100;
          return (
            <span>
              {cur + " "}
              {rate <= 0 ? (
                <font color="green">{rate + "%"}</font>
              ) : (
                <font color="red">{"+" + rate + "%"}</font>
              )}
            </span>
          );
        } else {
          return (
            <span>
              {cur + " "}
              {cur ? (
                <font color="red">+100%</font>
              ) : (
                <font color="green">0%</font>
              )}
            </span>
          );
        }
      } else {
        return cur;
      }
    };
    //点击复制单元格内容方法
    let unitCopy = (row, col, cellValue) => {
      return (
        <span
          onClick={() => {
            this.copyText(cellValue);
          }}
        >
          {cellValue}
        </span>
      );
    };
    return {
      pickerOptions: pickerOptions, //日期格式设置
      hours: hours, //时段列表
      condition: {
        dateNow: new Date(), //当前日期
        hourNow: "all", //当前时段
        pkg: "", //设置便利村的默认值 应用分组选择
        agentId: "", //代理商
        agentMethod: "", //投放方式
        advertiserId: "", //广告主ID
        planId: "", //广告计划ID
        optStatus: "AD_STATUS_ENABLE", //操作状态
        adStatus: "AD_STATUS_DELIVERY_OK", //投放状态
        planKPI: "", //计划考核
        kpiRange: [],
        kpiMin: '',
        kpiMax: '',
      }, //查询参数
      compareSwitch: false, //时段比较开关
      compareDate: {
        day: new Date(), //对比的日期
        hour: "all", //对比的时间
      },
      agentList: [], //代理商列表
      putList: putLIst, //投放方式list
      planStatusList: planStatusList, //操作状态
      planPutStatus: planPutStatus, //投放状态
      planAssessLIst: planAssessLIst, //计划考核
      header: [
        {
          prop: "opt_status",
          label: "操作",
          width: "180",
          fixed: "left",
          formatter: (row, col, cellValue, index) => {
            return (
              <div>
                <el-button
                  size="mini"
                  type="primary"
                  onClick={() => {
                    this.$refs.upPlanComponent.opPlanForm(row);
                  }}
                >
                  更改
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  onClick={() => {
                    this.putinCfgClick(row);
                  }}
                >
                  广告配置
                </el-button>
              </div>
            );
          },
        },
        // { prop: "agent_name", label: "代理商", width: "80", fixed: "left" },
        {
          prop: "advertiser_id",
          label: "账号ID",
          width: "80",
          fixed: "left",
          formatter: unitCopy,
          tooltip: true,
        },
        {
          prop: "plan_id",
          label: "广告计划ID",
          width: "90",
          fixed: "left",
          formatter: unitCopy,
          tooltip: true,
        },
        {
          prop: "putinCfgType",
          label: "配置类型",
          width: "80",
          fixed: "left",
          formatter: (row, col, cellValue, index) => {
            return (
              <div>
                {row.putinCfgType == "plan" ? (
                  <el-tag>计划</el-tag>
                ) : row.putinCfgType == "advert" ? (
                  <el-tag type="success">广告主</el-tag>
                ) : row.putinCfgType == "pkg" ? (
                  <el-tag type="warning">包</el-tag>
                ) : (
                  <el-tag type="danger">未配置</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "kpi_3",
          label: "计划考核",
          width: "80",
          fixed: "left",
          render: (h, data) => {
            let row = data.row;
            let tmp = planAssessLIst.filter((itm) => itm.value === row.kpi_3);
            tmp = tmp.length ? tmp[0].label : "未知";
            return (
              <span>
                {tmp === "提高出价" ? (
                  <font color="red">{tmp}</font>
                ) : tmp === "关停计划" ? (
                  <font color="green">{tmp}</font>
                ) : (
                  tmp
                )}
              </span>
            );
          },
        },
        // {
        //   prop: "status",
        //   label: "投放状态",
        //   width: "80",
        //   tooltip: true,
        //   formatter: (row, col, cellValue, index) => {
        //     let tmp = {
        //       AD_STATUS_DELIVERY_OK: "投放中",
        //       AD_STATUS_DISABLE: "计划暂停",
        //       AD_STATUS_AUDIT: "新建审核中",
        //       AD_STATUS_REAUDIT: "修改审核中",
        //       AD_STATUS_DONE: "已完成（投放达到结束时间）",
        //       AD_STATUS_CREATE: "计划新建",
        //       AD_STATUS_AUDIT_DENY: "审核不通过",
        //       AD_STATUS_BALANCE_EXCEED: "账户余额不足",
        //       AD_STATUS_BUDGET_EXCEED: "超出预算",
        //       AD_STATUS_NOT_START: "未达到投放时间",
        //       AD_STATUS_NO_SCHEDULE: "不在投放时段",
        //       AD_STATUS_CAMPAIGN_DISABLE: "已被广告组暂停",
        //       AD_STATUS_CAMPAIGN_EXCEED: "广告组超出预算",
        //       AD_STATUS_DELETE: "已删除",
        //       AD_STATUS_ADVERTISER_BUDGET_EXCEED: "超出广告主预算"
        //     };
        //     return tmp[cellValue] || "其他";
        //   }
        // },
        {
          prop: "kpi_1",
          label: "考核回收",
          width: "80",
          formatter: compareFun,
        },
        {
          prop: "video_per_uv_60",
          label: "考核人均视频",
          width: "120",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "arpu_60",
          label: "考核arpu1",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "arpu_120",
          label: "考核arpu2",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "arpu_180",
          label: "考核arpu3",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "ecpm_60",
          label: "考核ecpm",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "uv",
          label: "考核用户数",
          width: "80",
          formatter: compareFun,
        },
        {
          prop: "budget",
          label: "预算",
          width: "80",
        },
        {
          prop: "cpa_bid",
          label: "出价",
          width: "80",
        },
        {
          prop: "cost",
          label: "新增消耗",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "video_per_uv",
          label: "人均视频数",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "cash_per_uv",
          label: "人均提现数",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "ecpm",
          label: "预估eCPM",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "arpu",
          label: "预估ARPU",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "new_uv",
          label: "新增用户数",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "cost_price",
          label: "新增成本",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "active_price",
          label: "激活成本",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "conv",
          label: "新增转化数",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "convert_price",
          label: "新增转化成本",
          width: "80",
          sortable: true,
          formatter: compareFun,
        },
        {
          prop: "k1_ratios",
          label: "昨日新增实时次留率",
          width: "80",
          sortable: true,
          formatter: (row, col, cellValue, index) => {
            let cur = parseInt(row.k1_ratios * 10000) / 100 + "%";
            if (this.compareSwitch) {
              let unit = this.compareList.filter(
                (itm) => itm.plan_id === row.plan_id
              );
              let rate = row.k1_ratios;
              if (unit.length) {
                rate = parseInt(rate * 10000 - unit[0].k1_ratios * 10000) / 100;
              }
              return (
                <span>
                  {cur + " "}
                  {rate <= 0 ? (
                    <font color="green">{rate + "%"}</font>
                  ) : (
                    <font color="red">{"+" + rate + "%"}</font>
                  )}
                </span>
              );
            } else {
              return cur;
            }
          },
        },
        {
          prop: "conv_ratios",
          label: "关键行为转化率",
          width: "80",
          sortable: true,
          formatter: (row, col, cellValue, index) => {
            let cur = parseInt(row.conv_ratios * 10000) / 100 + "%";
            if (this.compareSwitch) {
              let unit = this.compareList.filter(
                (itm) => itm.plan_id === row.plan_id
              );
              let rate = row.conv_ratios;
              if (unit.length) {
                rate =
                  parseInt(rate * 10000 - unit[0].conv_ratios * 10000) / 100;
              }
              return (
                <span>
                  {cur + " "}
                  {rate <= 0 ? (
                    <font color="green">{rate + "%"}</font>
                  ) : (
                    <font color="red">{"+" + rate + "%"}</font>
                  )}
                </span>
              );
            } else {
              return cur;
            }
          },
        },
      ], //表头
      tableData: [], //表格数据
      compareList: [], //对比的数据
      pageInfo: {
        total: 0,
        page: 1,
        size: 100,
      }, //默认的分页信息
      riceLoading: false, //筛选按钮等待
      selRowsList: [], //表格数据被选中的list列表

      showDialog: false,
      matchId: "", // 计划id
      putinCfg: null, // 广告配置回显数据
      // planId: "", // 传入到广告配置组件中的计划id
      putinCfgType: "", // 配置类型
    };
  },
  mounted() {
    //目前注释了，进来不用加载
    // this.getAgentList(); //获取代理商
    // this.riceAssessList();
  },
  methods: {
    /**
     * 点击复制功能实现
     */
    copyText(text) {
      var input = document.createElement("input"); // js创建一个input输入框
      input.value = text; // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input); // 将输入框暂时创建到实例里面
      input.select(); // 选中输入框中的内容
      document.execCommand("Copy"); // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message.success(`${text}复制成功`);
    },
    /**
     * 获取代理商
     */
    getAgentList() {
      this.condition.agentId = ""; //获取代理商之前先将代理清空
      v2TableMappingAPI({ sqlId: 1109, pkg: this.condition.pkg[1] }).then(
        (res) => {
          if (res.status == 200) {
            if (!res.result.data.length) {
              this.$message.info(`当前应用没有代理商！`);
            }
            this.agentList = res.result.data;
            this.agentList.unshift({ agent_id: "", agent_name: "全部" });
          } else {
            this.$message.error(`请求错误，错误: ${res.status}`);
            console.error(res);
          }
        }
      );
    },
    /**
     * 筛选按钮，每次筛选前恢复分页信息
     */
    riceClick() {
      this.pageInfo = {
        total: 0,
        page: 1,
        size: 100,
      }; //默认的分页信息
      this.riceAssessList();
    },
    /**
     * 条件筛选表格前，先处理一下参数
     */
    riceAssessList() {
      let params = { ...this.condition };

      if (typeof params.pkg === "object") {
        params.pkg = params.pkg[1];
      } //app-select内数据判断

      //按小时查询的sqlId
      params["sqlId"] = 1316;
      //判断是否是凌晨
      if (params.hourNow === "00") {
        params["dateBefore"] = getDateToSeconds(
          new Date(params.dateNow.getTime() - 24 * 60 * 60 * 1000),
          "day"
        );
        params["hourBefore"] = "23";
      } else if (params.hourNow === "all") {
        //全时段不需要获取多余的参数 如果是全时段更换sqlId请求数据
        params["sqlId"] = 1319;
        params["dateBefore"] = getDateToSeconds(params.dateNow, "day");
      } else {
        params["dateBefore"] = getDateToSeconds(params.dateNow, "day");
        let tmp = params.hourNow - 1;
        tmp = tmp < 10 ? "0" + tmp : tmp.toString();
        params["hourBefore"] = tmp;
      }
      params.dateNow = getDateToSeconds(params.dateNow, "day"); //时间格式转化
      //请求需要查看的时段数据
      this.getAssessList(params, false);
      this.getTotal(params);

      //开启对比获取数据
      if (this.compareSwitch) {
        if (!this.compareDate.day || !this.compareDate.hour) {
          this.$message.warning("请先选择对比时段！");
          return;
        }
        //comParams是新的参数配置
        let comParams = { ...params };
        //按小时查询的sqlId
        params.sqlId = 1316;
        comParams.hourNow = this.compareDate.hour;
        comParams.dateNow = this.compareDate.day;
        if (comParams.hourNow === "00") {
          comParams.dateBefore = getDateToSeconds(
            new Date(comParams.dateNow.getTime() - 24 * 60 * 60 * 1000),
            "day"
          );
          comParams.hourBefore = "23";
        } else if (comParams.hourNow === "all") {
          //全时段不需要获取多余的参数
          params.sqlId = 1319;
          comParams.dateBefore = getDateToSeconds(comParams.dateNow, "day");
        } else {
          comParams.dateBefore = getDateToSeconds(comParams.dateNow, "day");
          let tmp = comParams.hourNow - 1;
          tmp = tmp < 10 ? "0" + tmp : tmp.toString();
          comParams.hourBefore = tmp;
        }
        comParams.dateNow = getDateToSeconds(comParams.dateNow, "day"); //时间格式转化
        //获取需要对比的数据
        this.getAssessList(comParams, true);
      }
    },
    /**
     * 接口请求表格所用数据
     */
    getAssessList(params, isCompare) {
      this.tableData = [];
      this.compareList = [];
      this.riceLoading = true;
      v2TableMappingAPI({
        ...params,
        page: this.pageInfo.page,
        size: this.pageInfo.size,
      })
        .then((res) => {
          if (res.status == 200) {
            if (!res.result.data.length) {
              this.$message.info(`没有查询到${isCompare ? "对比" : ""}数据！`);
            }
            if (isCompare) {
              this.compareList = res.result.data;
              this.riceLoading = false;
            } else {
              this.tableData = res.result.data;
              if (!this.compareSwitch) {
                this.riceLoading = false;
              }
            }
          } else {
            this.$message.error(`请求错误，错误: ${res.status}`);
            console.error(res);
            this.riceLoading = false;
          }
        })
        .catch((err) => {
          console.error("请求错误", err);
          this.riceLoading = false;
        });
    },
    /**
     * 选择表格行后获取的数据保存在selRowsList中
     */
    selectTableRows(selList) {
      this.selRowsList = selList;
    },
    /**
     * 按照广告主ID划分出一个数据结构
     */
    doAdvertiseIdGroup() {
      let groupByAdId = {};
      let keys = new Set(this.selRowsList.map((itm) => itm.advertiser_id));
      keys.forEach((key) => {
        groupByAdId[key] = [];
      });
      this.selRowsList.map((itm) => {
        groupByAdId[itm.advertiser_id].push({ ...itm }); //深拷贝
      });
      return groupByAdId;
    },
    /**
     * 批量开启或者关闭 按钮事件处理
     */
    changeListStatus(status) {
      if (this.selRowsList.length == 0) {
        this.$message.warning(`请先选择数据`);
        return;
      }
      let groupByAdId = this.doAdvertiseIdGroup();
      for (let key in groupByAdId) {
        let param = {
          advertiserId: key,
          optStatus: status,
          planId: groupByAdId[key].map((itm) => itm.plan_id).join(","),
        };
        //请求批量更改
        this.modifyPLanListStatus(param);
      }
    },
    /**
     * 批量开启或者关闭 计划
     */
    modifyPLanListStatus(params) {
      attributionStatusChange(params)
        .then((res) => {
          if (res.status == 200) {
            this.$message.success(
              `广告主：${params.advertiserId},状态${params.optStatus}批量更新成功！`
            );
            this.riceAssessList(); //刷新表格
          } else if (res.status == 500) {
            this.$message.warning(res.msg);
          } else {
            this.$message.error(`更改参数异常，错误代码：${res.status}`);
            console.error(res);
          }
        })
        .catch((err) => {
          this.$message.error("状态更改请求出错！");
          console.error(err);
        });
    },
    /**
     * 获取分页数据的总条数
     */
    getTotal(params) {
      let data = { ...params }; //需要的参数
      //全时段
      if (params.hourNow === "all") {
        data.sqlId = 1320;
      } else {
        data.sqlId = 1317;
      }
      v2TableMappingAPI(data).then((res) => {
        this.pageInfo.total = res.result.data[0].total_nums;
      });
    },
    /**
     * 分页size
     */
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.riceAssessList();
    },
    /**
     * 分页页数page
     */
    handleCurrentChange(page) {
      this.pageInfo.page = page;
      this.riceAssessList();
    },

    // 打开弹窗配置计划
    putinCfgClick(row) {
      //
      this.putinCfg = row.putinCfg; // 广告配置回显数据
      this.putinCfgType = row.putinCfgType; // 广告配置类型

      if (this.putinCfgType != "plan") {
        delete this.putinCfg.id;
        this.putinCfg.matchId = row.plan_id;
        this.putinCfg.idGroups = [row.plan_id];
        this.putinCfg.matchIdType = 3;
      }

      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs.putinCfg.init();
      });
    },
  },
};
</script>

<style></style>
