sen-yu-new-web/src/views/reportForms/cost-allocation-table.vue

<template>
  <!--报表 成本分配表 （保存后数据到单证的成本分配汇总内）-->
  <div id="costAllocationTable">
    <a-card :bordered="false">
      <!-- 主表信息 点击搜索后 回显--->
                <a-row :gutter="24">
      <div class="table-page-search-wrapper">
        <!-- ref="form" :model="costAllocationTable" -->
        <a-form-model layout="inline" class="kk">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划单号" prop="plannum">
                <a-input-search
                  placeholder="请输入计划单号"
                  enter-button
                  v-model="detailsPlanNum.planNum"
                  @search="onSearch"
                  :loading="this.loading"
                  v-show='showSelect==0'
                />
                <a-input-search
                  placeholder="请输入计划单号"
                  v-text="detailsPlanNum.planNum"
                  enter-button
                  @search="onSearch($event,'0')"
                  v-show='showSelect==1'
                />
              </a-form-model-item>
            </a-col>
            <!-- 回显以下【备注】需要输入，后进行保存 disabled -->

            <a-col :md="6" :sm="8">
              <a-form-model-item label="产品款号" prop="poStyleNum">
                <span :title=" detailsPlanNum.poStyleNum">{{ detailsPlanNum.poStyleNum | ellipsis}}</span>
                <!-- {{ detailsPlanNum.poStyleNum }} -->
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="外销员" prop="exportSales">
                {{ detailsPlanNum.exportSales }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="成衣合同号" prop="garmentContractno">
                {{ detailsPlanNum.garmentContractno }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="部门" prop="department">
                {{ detailsPlanNum.department }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="客户简称" prop="customerShortame">
                {{ detailsPlanNum.customerShortame }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="加工单位" prop="processUnit">
                <span :title=" detailsPlanNum.processUnit">{{ detailsPlanNum.processUnit | ellipsis}}</span>
                <!-- {{ detailsPlanNum.processUnit }} -->
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="出运日期" prop="outdata">
                {{ detailsPlanNum.outdata }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划数量" prop="planQuantity">
                {{ detailsPlanNum.planQuantity }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="美元外销总价" prop="usdTotalexportprice">
                {{ detailsPlanNum.usdTotalexportprice }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="人民币费用支出" prop="rmbExpense">
                <a href="javascript:void(0)" @click="mainTableExpenseCNY()">{{ detailsPlanNum.rmbExpense }}</a>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :md="6" :sm="8">
              <a-form-model-item label="税率%" prop="taxrate" class="fontColor">
                {{ detailsPlanNum.taxrate }}
              </a-form-model-item>
            </a-col> -->
            <a-col :md="6" :sm="8">
              <a-form-model-item label="实际出货数量" prop="actualShipquantity">
                {{ detailsPlanNum.actualShipquantity }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="人民币外销金额" prop="rmbExportamount">
                {{ detailsPlanNum.rmbExportamount }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="美元费用支出" prop="usdExpense" >
                <a href="javascript:void(0)" @click="mainTableExpenseUSD()" >{{ detailsPlanNum.usdExpense }}</a>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="加工费" prop="rmbProcesscost">
                {{ detailsPlanNum.rmbProcesscost }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="短出数" prop="shortseveral" >
                {{ detailsPlanNum.shortseveral }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="短出货值" prop="shortvalue" >
                {{ detailsPlanNum.shortvalue }}
              </a-form-model-item>
            </a-col>
            <!-- <a-col :md="6" :sm="8">
              <a-form-model-item label="短出面料成本" prop="fabricshortcost" class="fontColor">
                {{ detailsPlanNum.fabricshortcost }}
              </a-form-model-item>
            </a-col> -->
            <a-col :md="6" :sm="8">
              <a-form-model-item label="事故单美金金额" prop="accidentUsdamount" >
                {{ detailsPlanNum.accidentUsdamount }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="面料含税成本" prop="fabriccostIncludestax" >
                {{ detailsPlanNum.fabriccostIncludestax }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="辅料含税成本" prop="excipiencostIncludestax">
                {{ detailsPlanNum.excipiencostIncludestax }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="销售订单本币总额" prop="salesordersLocaltotal">
                {{ detailsPlanNum.salesordersLocaltotal }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="事故单人民币金额" prop="accidentcnyAmount" >
                {{ detailsPlanNum.accidentcnyAmount }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="面料不含税成本" prop="fabriccostNotincludestax" >
                {{ detailsPlanNum.fabriccostNotincludestax }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="辅料不含税成本" prop="excipiencostNotincludestax">
                {{ detailsPlanNum.excipiencostNotincludestax }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="销售订单原币总额" prop="salesrrdersOriginaltotal">
                {{ detailsPlanNum.salesrrdersOriginaltotal }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="制单人" prop="preparedBy">
                {{ detailsPlanNum.preparedBy }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8" class="noprint">
              <h4 style="color:red;">
                标记
                <span>（计算结果是负值时，该标记是红色）</span>
              </h4>
            </a-col>

        </a-form-model>
      </div>
                </a-row>
    </a-card>

    <!--tabs 组件引入  -->
    <a-card :bordered="false" style=" marginTop:10px;">
      <div><tabs ref="unitTabs" :showSelect='showSelect' /></div>
    </a-card>

    <!-- 事故单 -->
    <a-card :bordered="true" style="margin:10px 0">
      <div style="margin:60px 0 40px 0">
        <h6 class="table-title">事故单</h6>
        <a-table
          rowKey="id"
          :loading="loading"
          :columns="accidentListColumns"
          :data-source="accidentListData"
          bordered
          :pagination="false"
          :scroll="{ }"
        >
          <!-- 事故单 -->
          <span slot="accidentNum" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 费用支出 -->
      <div>
        <h6 class="table-title">费用支出</h6>
        <a-table
          rowKey="id"
          :loading="loading"
          :columns="costPayColumns"
          :data-source="costPayData"
           bordered
          :pagination="false"
        >
        </a-table>
      </div>

      <!-- 备注信息 根据角色权限控制【填写】、【查看】-->
      <div class="note-one" style="marginTop:40px;">
        <h6 class="table-title">备注</h6>
        <div class="noteDetail">
          <a-form-model ref="form" :model="detailsPlanNum">
            <a-form-model-item prop="remarks">
              <a-input  type="textarea" v-model="detailsPlanNum.remarks" placeholder="请输入备注"   style="minHeight:100px;"  v-show='showSelect==0' />
              <a-input type="textarea" v-text="detailsPlanNum.remarks" style="minHeight:100px;" v-show='showSelect==1'/>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>

      <!-- 页面底部保存 -->
      <a-row :gutter="24" style="marginTop:40px;float:right" class="noprint">
        <a-col :md="12" :sm="12" style="display:flex">
          <a-button type="primary" @click="daYin" style="margin-right:6px" :disabled ="PrintButton">
            打印
          </a-button> 
          <a-button type="primary" @click="save" :disabled="isDisabled">
            保存
          </a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 弹框 -->
    <div>
      <!-- 主表 人民币费用支出  弹框 -->
      <mainTableExpenseCNY-modal ref="mainTableExpenseCNYModal" :father="aa"></mainTableExpenseCNY-modal>
      <!-- 主表 美元费用支出  弹框 -->
      <mainTableExpenseUSD-modal ref="mainTableExpenseUSDModal" :father="bb"></mainTableExpenseUSD-modal>
      <!-- 事故单 -->
      <accidentList-modal ref="accidentListModal" :father="cc"></accidentList-modal>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

// 原始文件（应该跟单证内弹框一样，尝试公用，成功后可删除以下注释）
// import mainTableExpenseCNYModal from '@views/reportForms/cost-allocation-table/mainTableExpenseCNYModal.vue'
// import mainTableExpenseUSDModal from '@views/reportForms/cost-allocation-table/mainTableExpenseUSDModal.vue'
// import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue' // 事故单

// import tabs from '@views/cost-allocation-total/tabs.vue' // tabs组件
import tabs from '@views/reportForms/cost-allocation-table/tabs.vue' // tabs组件

import mainTableExpenseCNYModal from '@views/cost-allocation-total/modal/mainTableExpenseCNYModal.vue'
import mainTableExpenseUSDModal from '@views/cost-allocation-total/modal/mainTableExpenseUSDModal.vue'
import accidentListModal from '@views/cost-allocation-total/modal/accidentListModal.vue' // 事故单

import { seachPlanNum, addHalfInfo } from '@api/document/cost-allocation-total.js'

export default {
  name: 'CostAllocationTable', // 成本分配 (新增)
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },

  data() {
    return {
      key: '', //客户输入的订单号
      PrintButton:true,//打印按钮
      showSelect:0,//计划号是否是输入框
      loading: false, // 表格加载
      detailsPlanNum: {
        planNum: ''
      }, // 详情所有数据
      remarks: '', // 备注

      // 事故单 表头
      accidentListColumns: [
        {
          title: '单号',
          width: 120,
          dataIndex: 'accidentNum',
          className: 'replacecolor',
          customCell: this.accidentListCustomCell,
          scopedSlots: { customRender: 'accidentNum' }
        },
        { title: '事故承担方', width: 120, dataIndex: 'accidentUndertaker', className: 'replacecolor' },
        { title: '金额', dataIndex: 'amount', width: 120, className: 'replacecolor' }
      ],
      accidentListData: [],

      // 费用支出 表头
      costPayColumns: [
        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
        { title: '支出单号', width: 120, dataIndex: 'disbursementSlipNo', className: 'replacecolor' },
        { title: '费用项目', dataIndex: 'expenseItem', width: 120, className: 'replacecolor' },
        { title: ' 支出本币金额', dataIndex: 'disbursedLocalmoney', width: 120, className: 'replacecolor' },
        { title: '支出原币金额', dataIndex: 'disbursedOriginalmoney', width: 120, className: 'replacecolor' },
        { title: '发票号', dataIndex: 'invoicenum', width: 120, className: 'replacecolor' },
        { title: '制单人', dataIndex: 'preparedBy', width: 120, className: 'replacecolor' }
      ],
      costPayData: [],

      isDisabled: false, //按钮禁止
      billstatus: '' // 单据状态
      // dateFormat: 'YYYY-MM-DD',
    }
  },
  created() {},
  filters: {
                //文字数超出时，超出部分使用...
                ellipsis(value) {
                    if (!value) return ''
                    if (value.length > 20) {
                        return value.slice(0, 20) + '...'
                    }
                    return value
                }
            },
  methods: {
    // 【计划单号】 搜索
    onSearch() {
      this.$nextTick(() => {
        // TODO:接口完善后，type 应改为 add(暂时为了回显数据)
        this.loading = true
        seachPlanNum({ plannum: this.detailsPlanNum.planNum, type: 'query' }).then(res => {
          if (res.success) {
            this.PrintButton = false
             this.loading = false
            this.detailsPlanNum = res.result //所有详情
            this.accidentListData = res.result.syCostAllocationAccidentList //事故单
            this.accidentCalculation(this.accidentListData)
            var accidentNum = 0
            this.accidentListData.map(item =>{
              item.id = accidentNum + 1
              accidentNum += 1
            })
            this.costPayData = res.result.syCostAllocationCostpayList //支出费用
            var num = 0
            this.costPayData.map(item =>{
              item.id = num + 1
              num += 1
            })
            // tabs 名称集合
            this.$refs.unitTabs.tabNameList = res.result.processUnit.split(',')

            //所有tabs数据
            this.$refs.unitTabs.tabsAllData = res.result.processUnitList

            // 页面打开加载的数据
            var oneData = this.$refs.unitTabs.tabsAllData[0]
            this.$refs.unitTabs.fabData = oneData.syCostAllocationFabricList
            this.$refs.unitTabs.ingData = oneData.syCostAllocationIngredientList
            this.$refs.unitTabs.shipData = oneData.syCostAllocationShipdetail
            this.calculation(oneData.syCostAllocationShipdetail)
            //合计中面料相关金额
            var s=0
            oneData.syCostAllocationFabricList.map(item=>{
              s+=item.transferCost
            })
             this.$refs.unitTabs.sumInfo.fabricAmount = s.toFixed(3) //合计中的面料总额
             this.$refs.unitTabs.sumInfo.fabricExcludTax = (s/1.13).toFixed(3)//合计中的不含税面料总额
            this.detailsPlanNum.fabriccostIncludestax = s.toFixed(3) //表头中面料含税总额
            this.detailsPlanNum.fabriccostNotincludestax = (s/1.13).toFixed(3) //表头中面料不含税总额
            //合计中辅料相关金额
            var s = 0,
            v =0
            oneData.syCostAllocationIngredientList.map(item=>{
              s+=item.priceExcludingtax,
              v+=item.rmbAmount
            })
            this.$refs.unitTabs.sumInfo.ingExcludAmount = s.toFixed(3),//辅料不含税金额合计
            this.$refs.unitTabs.sumInfo.ingAmount =v.toFixed(3)//辅料金额合计
            //合计中出运明细相关金额
            var s =0,
            v = 0,
            d = 0,
            b = 0,
            f=0
            oneData.syCostAllocationShipdetail.map(item=>{
              s+=item.exportPrice
              v+=item.shipQuantity
              d+=item.processCost
              b+=item.exportPrice
            })
            this.$refs.unitTabs.sumInfo.exportPriceUSD = s.toFixed(3)//出运美元外销总价
            this.$refs.unitTabs.sumInfo.shipQua =v.toFixed(3)//出货数量合计
            this.$refs.unitTabs.sumInfo.shipProcesFees =d.toFixed(3)//出运加工费
            this.$refs.unitTabs.sumInfo.exportedAmountRMB =b.toFixed(3)//出运人民币外销金额 f
            f=Number(this.$refs.unitTabs.sumInfo.ingAmount)+Number(this.$refs.unitTabs.sumInfo.shipProcesFees)
            this.$refs.unitTabs.sumInfo.amountTotal =f.toFixed(3)//合计金额
            
            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }else {
            THIS.loading = false
            this.$message.error(res.message);
          }
        })
      })
    },

    //计算短出货值
    calculation(val){
      var  average = 0
       val.map(item=>{
         average += item.exportUnitPrice
       })
       this.detailsPlanNum.shortvalue = this.detailsPlanNum.shortseveral*average

       var shipQuantityAll =0,
        exportUnitPriceALll = 0,
        exportPriceAll =0,
        rmbAmountAll = 0,
        procesUnitPricermbAll = 0,
        procesUnitPriceusdAll = 0,
        processCostAll = 0
        val.map(item=>{
          shipQuantityAll+=Number(item.shipQuantity)
          exportUnitPriceALll+=Number(item.exportUnitPrice)
          exportPriceAll+=Number(item.exportPrice)
          rmbAmountAll+=Number(item.rmbAmount)
          procesUnitPricermbAll+=Number(item.procesUnitPricermb)
          procesUnitPriceusdAll+=Number(item.procesUnitPriceusd)
          processCostAll+=Number(item.processCost)
        })
        var allObj ={
          outdata:'合计',
          shipQuantity:shipQuantityAll.toFixed(3),
          exportUnitPrice:exportUnitPriceALll.toFixed(3),
          exportPrice:exportPriceAll.toFixed(3),
          rmbAmount:rmbAmountAll.toFixed(3),
          procesUnitPricermb:procesUnitPricermbAll.toFixed(3),
          procesUnitPriceusd:procesUnitPriceusdAll.toFixed(3),
          processCost:processCostAll.toFixed(3)
        }
        this.$refs.unitTabs.shipData.push(allObj)
    },
    daYin(){
      //  printJS({
	    //      printable:this.fabricLoss.fabricOMOrderList1,
	    //      properties:[
      //        {field:'cvcname',displayName:'制造工艺',columnSize:1},
      //        {field:'cvenAbbName',displayName:'工厂',columnSize:1},
      //        {field:'iquantityOut',displayName:'材料出库数量',columnSize:1},
      //        {field:'iquantity', displayName:'计划数量',columnSize:1},
      //        {field:'iquantityIn', displayName:'采购入库数量',columnSize:1},
      //        {field:'cinvCode', displayName:'物料编码',columnSize:1},
      //        {field:'cinvName', displayName:'货物名称',columnSize:1},
      //        {field:'ccolor', displayName:'颜色',columnSize:1},
      //        {field:'cquantityLoss', displayName:'损耗',columnSize:1},
      //        {field:'iquantityMoreLess', displayName:'多发少发',columnSize:1},
      //        ],
	    //      type:'json',
	    //      header:'C001',
	         //样式设置
	        //  gridStyle:'border:2px solid #3971A5;text-align: center',
	        //  gridHeaderStyle:'color:red; border:2px solid #3971A5;'
	    //  })
         this.showSelect = 1
         this.$nextTick(() => {
          const html = window.document.getElementById('costAllocationTable').innerHTML 
         const win = window.open();
         const style = '<style>\n'
         +'.noprint{display:none}'
        //  +'.ant-table-body-inner{overflow-x: hidden !important;overflow-y: hidden !important }' //去除滚动条
          +'.ant-table-body{overflow-x: hidden !important ;overflow-y: hidden !important}' 
           +'.ant-table-header {overflow-x: hidden !important ;overflow-y: hidden !important}' 
           +'.ant-table-fixed-left{display: none !important}' 
           +'.ant-tabs-nav-container{display: none !important}' 
         +'.kk{display:flex;flex-wrap: wrap}' //主要信息并排
         +'.ant-col-sm-8{width:40%;margin-bottom: 6px;}'
         +'.ant-form-item-label{width:55%;font-size: 12px;}'
         +'.ant-form-item-children{font-size: 12px}'
         +'.ant-card-head-title{font-weight: bold;font-size: 0.67em;margin-bottom: 9px;}'
         +'.ant-form-item-control-wrapper{width:100%}'
         +'.ant-input{width:100%}'
         +'.ant-form-item{display:flex}'
         + 'table{width: 100% !important;border-collapse: collapse;border-spacing: 0;overflow-x:hidden;}\n'
         + 'th,td{width:5%;height: 18px;border: 1px solid #999;font-size: 12px;color: #666;max-width:2000px;text-align: center;}\n'
         +'.ant-table-row-cell-break-word{width:5% !important}'
         + 'th{color: #333}\n'
         + 'a{color: #666; text-decoration:none;}\n'
         + '</style>';
         win.document.write(style+html);
         win.focus();
         win.print();
         win.close();
		     this.showSelect = 0
        })
        
    },
    //计算事故单美元金额和事故单人民币金额
    accidentCalculation(val){
      var usaMoney = 0,
          rmbMoney = 0
      val.map(item=>{
        usaMoney += item.amount,
        rmbMoney+=item.rmbAmount
      })
      this.detailsPlanNum.accidentUsdamount = usaMoney
      this.detailsPlanNum.accidentcnyAmount = usaMoney
    },

    // 页面 保存
    save() {
      console.log('点击保存')

      this.isDisabled = true
      setTimeout(() => {
        let that = this
        that.isDisabled = false
      }, 3000)

      if (this.detailsPlanNum.remarks) {
        // 保存 部分信息
        var halfInfo = {}
        // halfInfo.planNum = this.detailsPlanNum.planNum
        // halfInfo.remarks = this.detailsPlanNum.remarks
        // halfInfo.billstatus = '1'
        // console.log(halfInfo.planNum, halfInfo.remarks, halfInfo.billstatus)
        // var planNum = this.detailsPlanNum.planNum,
         var json = this.detailsPlanNum
        addHalfInfo(json).then(res => {
          if (res.success) {
            console.log('保存的部分信息', halfInfo)
            this.$message.success('保存成功')

            halfInfo = {}
          }
        })
      } else {
        this.$message.error('备注不能为空')
      }
    },

    //  主表：人民币费用支出  弹框
    mainTableExpenseCNY() {
      console.log('点击:主表人民币费用支出')
      this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYModVis = true
      this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYData = this.costPayData
      this.$refs.mainTableExpenseCNYModal.fixedData = this.costPayData
    },
    // 主表：美元费用支出  弹框
    mainTableExpenseUSD() {
      console.log('点击:主表美元费用支出')
      this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDModVis = true
      this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDData = this.costPayData
      this.$refs.mainTableExpenseUSDModal.fixedData = this.costPayData
    },

    // 事故单 单号 弹框
    accidentListCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            // 调用【面料损耗表】中的【事故单】弹框
            this.$refs.accidentListModal.accidentListModVis = true
          }
        }
      }
    },

    // father 方法
    aa() {},
    bb() {},
    cc() {}
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}
/deep/ .fontColor .ant-form-item-label > label{
  color: red !important;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

// 抽屉里的card样式
// /deep/ .ant-drawer-content {
//   background-color: #f0f2f5;
// }
// /deep/ .ant-drawer-body {
//   padding: 10px;
// }
</style>