<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="商品名称" prop="spuName">
        <el-input
          v-model="queryParams.spuName"
          placeholder="请输入商品名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-cascader
          v-model="queryParams.categoryId"
          ref="formCascader"
          placeholder="请选择分类"
          :props="categoryprops"
          style="width: 240px"
          @change="cascaderChange"
        />
      </el-form-item>

      <el-form-item label="商品状态" prop="spuStatus">
        <el-select
          v-model="queryParams.spuStatus"
          placeholder="请选择商品状态"
          style="width: 240px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="售罄" value="2"> </el-option>
          <el-option label="上架" value="0"> </el-option>
          <el-option label="下架" value="1"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售方式" prop="saleModel">
        <el-select
          v-model="queryParams.saleModel"
          placeholder="请选择销售方式"
          style="width: 240px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="普通商品" value="1"> </el-option>
          <el-option label="新人福利" value="5"> </el-option>
          <el-option label="团购秒杀" value="3"> </el-option>
          <el-option label="特价" value="4"> </el-option>
          <el-option label="预售" value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="!activeShowBtn">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="addActive"
          :disabled="!multipleSelection.length > 0"
          >添加商品到活动</el-button
        >
      </el-col>
      <template v-else>
        <el-col :span="1.5">
          <el-button type="primary" plain size="mini" @click="prouctAdd"
            >发布商品</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" plain size="mini" @click="handleExportAll"
            >导出全部</el-button
          >
        </el-col>

        <el-dropdown :hide-on-click="false" trigger="click">
          <el-button type="primary" plain size="mini">
            更多批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="BatchRemove">批量删除</el-dropdown-item>
            <el-dropdown-item @click.native="handleExport">批量导出</el-dropdown-item>
            <el-dropdown-item @click.native="handleDelist">批量下架</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-row>

    <el-table
      v-loading="loading"
      :data="configList"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.pic"
            :preview-src-list="[scope.row.pic]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        align="center"
        prop="spuName"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="分类" align="center" prop="categoryName" />
      <el-table-column label="价格" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.lowestPrice.toFixed(2) }}/{{ scope.row.unit }}
        </template> 
      </el-table-column>

      <el-table-column label="起批量" align="center">
        <template slot-scope="scope">
          {{ scope.row.lowestPurchase }}{{ scope.row.unit }}
        </template>
      </el-table-column>

      <el-table-column label="预计库存" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalPredictStocks ? scope.row.totalPredictStocks : 0
          }}{{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column label="实际库存" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalStocks }}{{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column label="实际销量" align="center" prop="salesVolume">
      </el-table-column>
      <el-table-column label="展示销量" align="center" prop="lookSalesVolume">
      </el-table-column>

      <el-table-column label="销售方式" align="center">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.saleModel == 1
                ? "普通商品"
                : scope.row.saleModel == 2
                ? "预售"
                : scope.row.saleModel == 3
                ? "团购秒杀"
                : scope.row.saleModel == 4
                ? "特价"
                : scope.row.saleModel == 5
                ? "新人福利"
                : ""
            }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="商品状态" align="center">
        <template slot-scope="scope">
          {{
            scope.row.spuStatus == 2
              ? "售罄"
              : scope.row.spuStatus == 0
              ? "上架"
              : scope.row.spuStatus == 1
              ? "下架"
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="300"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleLook(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >预览</el-button
          >
          <el-button
            size="mini"
            type="text"
            :style="scope.row.spuStatus == 1 ? 'color:green' : 'color:red'"
            @click="handleStatus(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >{{
              scope.row.spuStatus == 1 ? "上架" : scope.row.spuStatus == 0 ? "下架" : ""
            }}</el-button
          >

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >编辑商品</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <lookProduct ref="lookProductRefs"></lookProduct>
    <el-dialog
      title="活动列表"
      :visible.sync="dialogVisible"
      :before-close="dialogVisible == false"
      width="60%"
    >
      <el-table
        :data="eventList"
        row-key="id"
        @current-change="eventsChange"
        highlight-current-row
      >
        <el-table-column label width="45">
          <template slot-scope="scope">
            <el-radio :label="scope.row.id" v-model="radioId"><span></span></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="活动名称"> </el-table-column>
        <el-table-column prop="intro" label="活动介绍"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间">
          <template slot-scope="scope">
            {{
              scope.row.startTime
                ? $moment(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
          <template slot-scope="scope">
            {{
              scope.row.endTime
                ? $moment(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}-
          </template>
        </el-table-column>
        <el-table-column prop="tag" label="是否使用代金券">
          <template slot-scope="scope">
            <el-tag>
              {{ scope.row.useVoucher == 1 ? "是" : "否" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tag" label="备注" width="160">
          <template slot-scope="scope">
            <el-tag>
              {{ scope.row.tag == 1 ? "年货节" : "" }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="eventsSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设为特价商品"
      :visible.sync="bargainVisible"
      :before-close="bargainVisible == false"
      width="80%"
    >
      <el-table
        :data="speList ? speList.skuList : []"
        row-key="id"
        @current-change="eventsChange"
        highlight-current-row
      >
        <el-table-column prop="title" label="规格名称">
          <template slot-scope="scope">
            {{ scope.row.skuSpecsList ? scope.row.skuSpecsList[0].specsName : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="规格内容">
          <template slot-scope="scope">
            {{ scope.row.skuSpecsList ? scope.row.skuSpecsList[0].specsValue : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="单价">
          <template slot-scope="scope">
            {{
              scope.row.skuPriceList ? scope.row.skuPriceList[0].originalPrice : ""
            }}元/{{ speList.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="优惠价">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.skuPriceList[0].price"
              placeholder="请输入优惠价"
              clearable
              style="width: 160px"
              @input="passValue"
            >
              <template slot="suffix"> 元/{{ speList.unit }} </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="单次最多购买量">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.limitationDto.oneCount"
              placeholder="请输入单次最多购买量"
              clearable
              style="width: 160px"
              @input="passValue"
            >
              <template slot="suffix"> {{ speList.unit }} </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="单日最多购买量">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.limitationDto.dayCount"
              placeholder="请输入单日最多购买量"
              clearable
              style="width: 160px"
              @input="passValue"
            >
              <template slot="suffix"> {{ speList.unit }} </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="每人总购买量">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.limitationDto.totalCount"
              placeholder="请输入每人总购买量"
              clearable
              style="width: 160px"
              @input="passValue"
            >
              <template slot="suffix"> {{ speList.unit }} </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bargainVisible = false">取 消</el-button>
        <el-button type="primary" @click="bargainSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import {
  getGoodsListPage,
  getGoodsInfo,
  GoodsUpOrDown,
  editGoods,
  goodsRemove,
  setLowPrice,
  cancelLowPrice,
} from "@/api/manage/product";

import { promotionList, promotionSku } from "@/api/active/index";
import { getClassificationListPage } from "@/api/common/index";
import lookProduct from "../lookProduct.vue";
import { getStoreInfo } from "@/api/common/index";
export default {
  components: { lookProduct },
  name: "product",
  data() {
    return {
      // 遮罩层
      bargainVisible: false,
      loading: true,
      showSearch: true,
      total: 0,
      configList: [],
      title: "",
      subTitle: "",
      open: false,
      subOpen: false,
      dialogVisible: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        spuName: "",
        categoryId: "",
        spuStatus: "",
        saleType: "",
        scope: "",
        spuType: 1,
      },
      // 表单参数
      form: {},
      categoryprops: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.categoryLazyLoad,
      },
      activeShowBtn: true,
      multipleSelection: [],
      toggle: true,
      dataTable: {},
      unit: "",
      skuId: "",
      eventList: [],
      radioId: "",
      shopInfo: {},
      speList: {},
      speRecord: {},
    };
  },
  mounted() {
    this.getList();
    this.getInfo();
  },
  methods: {
    bargainSubmit() {
      for (let index = 0; index < this.speList.skuList.length; index++) {
        let e = this.speList.skuList[index];
        if (e.skuPriceList[0].price == "" || !e.skuPriceList[0].price) {
          this.$message.error("优惠价不能为空！");
          return;
        } else if (
          parseFloat(e.skuPriceList[0].price) >
          parseFloat(e.skuPriceList[0].originalPrice)
        ) {
          this.$message.error("优惠价不能大于原价");
          return;
        }
      }
      let params = {
        id: this.speRecord.id,
        lowestSend: 0,
        saleType: this.speRecord.saleType,
        skuList: this.speList.skuList,
      };
      setLowPrice(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("设置特价成功！");
          this.bargainVisible = false;
          this.getList();
        }
      });
    },
    handleCancal(record) {
      this.$confirm("是否确定取消该商品的特价", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cancelLowPrice({
            id: record.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`取消特价成功！`);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    handleBargain(record) {
      this.speRecord = record;
      getGoodsInfo({ spuId: record.id }).then((res) => {
        if (res.code == 200) {
          let params = res.data;
          this.speList = params;
          this.speList.skuList.forEach((e) => {
            e.skuPriceList[0].price = "";
            if (!e.limitationDto) {
              this.$set(e, "limitationDto", {
                dayCount: "",
                oneCount: "",
                totalCount: "",
              });
              // e.limitationDto = {
              //   dayCount: "",
              //   oneCount: "",
              //   totalCount: "",
              // };
            }
          });
          this.$forceUpdate();
          this.bargainVisible = true;
        }
      });
    },
    getInfo() {
      getStoreInfo().then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
          this.form.scope = res.data.scope;
        }
      });
    },
    eventsSubmit() {
      if (!this.radioId) {
        this.$message.error("请选择要参与的活动！");
        return;
      }
      let ids = [];
      this.multipleSelection.forEach((e) => {
        ids.push({
          spuId: e.id,
        });
      });
      let params = {
        promotionId: this.radioId,
        skuList: ids,
        type: 1,
      };
      promotionSku(params).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$message.success("添加成功！");
          this.getList();
        }
      });
    },
    eventsChange(val) {
      console.log(val);
      this.radioId = val.id;
    },
    /**
     * 批量加入活动
     */
    handleEvents() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请选择要参与活动的商品！");
        return;
      }

      for (let index = 0; index < this.multipleSelection.length; index++) {
        if (this.multipleSelection[index].scope == 3) {
          this.$message.error("所选商品包含同城秒送商品，无法批量加入活动，请重新选择");
          return;
        }
      }
      for (let index = 0; index < this.multipleSelection.length; index++) {
        if (
          this.multipleSelection[index].promotionTag ||
          this.multipleSelection[index].scope == 2
        ) {
          this.$message.error("所选商品包含已参加活动商品，无法批量加入活动，请重新选择");
          return;
        }
      }
      this.dialogVisible = true;
      promotionList({
        pageNo: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 200) {
          this.eventList = res.data.records;
        }
      });
    },
    back() {
      this.toggle = true;
    },

    handleDelete(record) {
      this.$confirm("是否确认删除该商品,删除后无法恢复？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodsRemove({
            spuIds: record.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`删除成功！`);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    submitGg() {
      console.log(this.dataTable);
      console.log(this.dataTable.skuList);
      let params = {
        spuId: this.skuId,
        skuList: this.dataTable.skuList,
      };
      editGoods(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("编辑成功");
          this.dialogVisible = false;
          this.getList();
        }
      });
      console.log(params);
    },

    handRef(type, scope) {
      if (type == "active") {
        this.queryParams.scope = scope;
        this.multipleSelection = [];
        this.activeShowBtn = false;
        this.getList();
      }
    },
    addActive() {
      this.$emit("multipleTable", this.multipleSelection);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelist() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请选择要下架的商品！");
        return;
      }
      for (let index = 0; index < this.multipleSelection.length; index++) {
        if (this.multipleSelection[index].spuStatus == 1) {
          this.$message.error("所选商品包含已下架商品，无法批量下架，请重新选择");
          return;
        }
      }

      let ids = [];
      this.multipleSelection.forEach((e) => {
        ids.push(e.id);
      });
      this.$confirm("是否批量下架商品？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          GoodsUpOrDown({
            spuId: ids.toString(),
            spuStatus: 1,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`操作成功！`);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    handleExportAll() {
      this.download(
        "system/goods/export",
        {
          ...this.queryParams,
        },
        `商品信息_${new Date().getTime()}.xlsx`
      );
    },
    handleExport() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请选择要导出的商品！");
        return;
      }
      let ids = [];
      this.multipleSelection.forEach((e) => {
        ids.push(e.id);
      });
      this.queryParams.spuIds = ids.toString();
      this.download(
        "system/goods/export",
        {
          ...this.queryParams,
        },
        `同城秒送商品信息_${new Date().getTime()}.xlsx`
      );
    },
    BatchRemove() {
      console.log(this.multipleSelection);
      if (this.multipleSelection.length < 1) {
        this.$message.error("请选择要删除的商品！");
        return;
      }
      let ids = [];
      this.multipleSelection.forEach((e) => {
        ids.push(e.id);
      });
      this.$confirm("是否确认批量删除商品，删除后无法恢复？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodsRemove({
            spuIds: ids.toString(),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`批量删除成功！`);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getGoodsListPage(this.queryParams).then((res) => {
        this.configList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    prouctAdd() {
      this.$router.push({ path: "/product/transmission/createProduct" });
      // this.toggle = false;
    },
    handleStatus(record) {
      let title = "";
      if (record.spuStatus == 0) {
        title = "是否确认下架该商品";
      } else {
        title = "是否确认上架该商品";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          GoodsUpOrDown({
            spuId: record.id,
            spuStatus: record.spuStatus == 1 ? 0 : record.spuStatus == 0 ? 1 : "",
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`操作成功！`);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    handleSpecification(record) {
      this.skuId = record.id;
      getGoodsInfo({ spuId: record.id }).then((res) => {
        if (res.code == 200) {
          let params = res.data;
          this.dataTable = params;
          this.dataTable = JSON.parse(JSON.stringify(this.dataTable));
          this.unit = record.unit;
          console.log("1321231", this.dataTable);
          this.dialogVisible = true;
        }
      });
    },
    handleUpdate(record) {
      if (record.scope == 2) {
        this.$message.error("特价商品不能编辑商品，请先取消特价！");
        return false;
      }
      let params = {
        id: record.id,
        type: "all",
      };
      window.localStorage.setItem("productInfo", JSON.stringify(params));
      this.$router.push({
        path: "/product/transmission/updateProduct",
        query: { params, type: "" },
      });
    },
    computePrice(data) {
      if (
        data.skuCost.purchaseFee &&
        data.skuCost.laborFee &&
        data.skuCost.agencyFee &&
        data.skuCost.materialFee
      ) {
        return (
          parseInt(data.skuCost.purchaseFee) +
          parseInt(data.skuCost.laborFee) +
          parseInt(data.skuCost.agencyFee) +
          parseInt(data.skuCost.materialFee)
        );
      } else {
        return 0;
      }
    },
    handleLook(record) {
      getGoodsInfo({ spuId: record.id }).then((res) => {
        if (res.code == 200) {
          this.$refs.lookProductRefs.openDialog(res.data);
        }
      });
    },
    cascaderChange(val) {
      if (val.length == 1) {
        this.queryParams.categoryId = val[0];
      } else if (val.length == 2) {
        this.queryParams.categoryId = val[1];
      } else if (val.length == 3) {
        this.queryParams.categoryId = val[2];
      }
      // this.getList();
    },
    categoryLazyLoad(node, resolve) {
      let level = node.level;
      console.log(node);
      if (!node.data) {
        getClassificationListPage({ parentId: 0 }).then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
          }));
          console.log("111", node);
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 2,
            // level: 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 2) {
        getClassificationListPage({ parentId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.id,
            label: `${item.className}`,
            leaf: level >= 1,
            level: 1,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
  },
};
</script>
<style>
.el-form-item {
  margin-bottom: 10px;
}
</style>
