<template>
  <div class="flex-row">
    <div class="span" style="overflow-y: auto;min-height: 500px;">
      <validator name='v'>
        <form novalidate class="form-horizontal">
          <!--          <div class="row" style="margin-top:10px;">-->
          <!--            -->
          <!--          </div>-->
          <div style="margin-top:10px;" v-for="(index, row) in model.otherdetail">
            <div class="row">
              <div class="col-sm-4" :class="{'select-error': row.f_brand_spec.length === 0 && config.checkFlag}">
                <label for="f_brand_spec" class="font_normal_body " title="参数名称：品名及规格">{{brandType}}</label>
                <v-select id="f_brand_spec"
                          placeholder='请选择'
                          v-model="row.f_brand_spec"
                          :value.sync="row.f_brand_spec"
                          :options='brandspec'
                          @change="setTypename(row,index)"
                          close-on-select clear-button>
                </v-select>
              </div>
              <div class="col-sm-4" :class="{'has-success':row.f_typename,'has-error':!row.f_typename}">
                <label for="f_typename" class=" font_normal_body">&nbsp;品名规格</label>
                <v-select
                  style="width: 100px"
                  v-model="row.f_typename"
                  placeholder='请选择'
                  :value.sync="row.f_typename"
                  :options='row.typeNameList'
                  @change="setTypenumber(row,index)"
                  close-on-select clear-button>
                </v-select>
              </div>
              <div class="col-sm-4" :class="{'has-success':row.f_typenumber,'has-error':!row.f_typenumber}">
                <label for="f_typenumber" class=" font_normal_body">&nbsp;型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                <v-select
                  style="width: 100px"
                  v-model="row.f_typenumber"
                  placeholder='请选择'
                  :value.sync="row.f_typenumber"
                  :options='row.typenumberList'
                  @change="setTypeprice(index)"
                  close-on-select clear-button>
                </v-select>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-4" :class="{'has-success':row.f_unitprice,'has-error':!row.f_unitprice}">
                <label style="" for="f_unitprice" class=" font_normal_body">*单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</label>
                <input class="input_search" style="width:60%" type="number" min="1" @input.prevent="getcollection()"
                       v-model="row.f_unitprice"
                       :value.sync="row.f_unitprice"
                       v-validate:f_unitprice='{required: true}'
                       :disabled="false"
                       placeholder="单价" v-next-el='sl'>
              </div>
              <div class="col-sm-4" :class="{'has-success':row.f_number,'has-error':!row.f_number}">
                <label style="" for="f_number" class="font_normal_body">*数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</label>
                <input class="input_search" style="width:60%" type="number" min='1' @input.prevent="getcollection()"
                       v-validate:f_number='{required: true, dctest: [0, ">" ] }'
                       v-model="row.f_number"
                       :value.sync="row.f_number"
                       placeholder="数量" v-next-el='sk' v-el:sl>
              </div>
              <div style="padding-top:10px">
                <button type="button" class="glyphicon glyphicon-minus btn-danger"
                        @click.stop="delthisdetail($index)"></button>&nbsp;&nbsp;&nbsp;
                <button type="button" class="glyphicon glyphicon-plus btn-success" @click.stop="addadetail()"></button>
              </div>
            </div>
          </div>
          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4 form-group" :class="[$v.payment.required ? 'select-error' : '']">
              <label class=" font_normal_body" title="参数名称：付款方式">收款方式</label>
              <input type="text" v-show="false" v-model="$refs.payment.selectedItems"
                     v-validate:payment='{required: true }'>
              <v-select v-model="model.f_payment"
                        placeholder='请选择'
                        :value.sync="model.f_payment"
                        close-on-select
                        :options='paytype' clear-button v-ref:payment></v-select>
            </div>
            <div class="col-sm-4">
              <label for="f_print" class="font_normal_body">&nbsp;打印格式</label>
              <v-select id="print"
                        v-model="f_print"
                        placeholder='请选择'
                        :value.sync="model.f_print"
                        :options='printstyle'
                        close-on-select clear-button>
              </v-select>
            </div>
            <div class="col-sm-4">
              <label for="f_collection" class="font_normal_body">&nbsp;收&emsp;&emsp;款</label>
              <label for="f_collection" class="font_normal_body">{{ model.f_collection }}</label>
            </div>
          </div>
          <div class="row" style="margin-top:10px;" v-if="model.f_payment[0].includes('POS')">
            <div class="col-sm-4">
              <label for="f_voucher_number" class="font_normal_body">&nbsp;&nbsp;&nbsp;凭证号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_voucher_number"
                     placeholder="凭证号">
            </div>
          </div>
          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4">
              <label for="f_voucher_number" class="font_normal_body">服务人员</label>
              <v-select v-model="model.f_service_person"
                        placeholder='请选择'
                        :value.sync="model.f_service_person"
                        :options='services'
                        close-on-select clear-button>
              </v-select>
            </div>
            <div class="col-sm-4" v-if="!mjshow" >
              <label for="f_serial_number" class=" font_normal_body">业务单号</label>
              <input class="input_search" style="width:60%"  type="text"
                     v-model="model.f_serial_number" placeholder="业务单号">
            </div>
            <div class="col-sm-4" v-if="mjshow" :class="[$v.f_serial_number.required || $v.f_serial_number.dctest ? 'has-error' : 'has-success']">
              <label for="f_serial_number" class=" font_normal_body">业务单号</label>
              <input class="input_search" style="width:60%"  type="text" v-validate:f_serial_number='{required: true }'
                     v-model="model.f_serial_number" placeholder="业务单号">
            </div>
            <div class="col-sm-8">
              <label for="f_comments" class=" font_normal_body">&nbsp;备&emsp;&emsp;注</label>
              <input type="text" class="input_search" style="width:80%" v-model="model.f_comments" rows="1"
                     placeholder="备注">
            </div>
          </div>
        </form>
        <validate-bill v-if="hasValidateBill" :data="model" @validate-bill="validateBill"></validate-bill>
        <print-bill :show="print" :data='row' :bill-config='config' :bill-data='billData' v-on:toggle="close"
                    @printok="printok" v-ref:printbill></print-bill>
        <ticket-print :show="eticket_show" @toggle="eticket_toggle" v-ref:eticketbill></ticket-print>
        <eticket-modal :show="eticket_msg" @closemodalshow="eticket_msg = false" :row="row" @confirm="confirm"></eticket-modal>
        <!-- <print-other-charge-bill :show="print" v-ref:printbill :row='row' :logic='model' v-on:success="close" v-on:toggle="close"></print-other-charge-bill> -->
        <!-- <tax-other-bill :show="taxprint"  v-ref:taxprintbill :row='row' :logic='model' v-on:success="close" v-on:toggle="close"></tax-other-bill> -->
        <div style="text-align:right;height: 25%;">
          <button v-if="config.modificationList" class="button_search" @click="confirm(true)"
                  :disabled=' validflag || validateOk || chargetypecheckflag'>确认并转单
          </button>
          <payment-code-button :clickable=" validflag || validateOk || chargetypecheckflag"
                               :payment.sync="model.f_payment" :payment-data="paytype"
                               @confirm-payment="confirm()">
          </payment-code-button>
          <button class="button_search btn-gn" v-if="authArr.includes('其它欠费生成')" @click="createQianfei()"
                  :disabled=' validflag || validateOk || !model.f_collection'>生成欠费
          </button>
          <button class="button_search btn-gn" @click="checkInvoiceMsg()" :disabled='validflag || validateOk || chargetypecheckflag || !model.f_collection'>确认
          </button>
          <button class="button_clear btn-gn" @click="clean()">取消</button>
        </div>
      </validator>
      <upload :blodid="row.f_userinfo_id" v-if="config.showupload" :businessid="randomBusinessId" isremark="true" fusetype="其他收费"></upload>
    </div>
    <payment-code v-ref:paymentcode :payment="model.f_payment" :row="row" :money="model.f_collection"></payment-code>
  </div>
</template>
<script>
import {HttpResetClass} from 'vue-client'
let otherChargeGen = async function (self, parameter) {
  try {
    // 加入扫码盒付款码支付流水号
    self.model.f_serial_id = self.$refs.paymentcode.paymentCodeReturnData.f_out_trade_no
    console.log('11111', self.model)
    let resid = await self.$LogicService.otherCharge(self.model, self.row)
    console.log('其他收费返回id', resid, self.config.hasPrint, self.$login.r.includes('不打印发票'))
    if (self.config.showupload) {
      let param = []
      for (let row of self.resid) {
        param.push({id: row.id})
      }
      let data = {
        param: param,
        f_blobid: resid.data
      }
      await self.$resetpost('rs/logic/updatefiles', data)
    }
    if (self.config.dispatch) {
      await self.$showMessage(`是否添加派工单`, ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          console.log('其他收费xinxi', self.model)
          console.log('其他收费xinxi', self.row)
          let batch = {
            sf_id: resid.data,
            f_userinfo_code: self.row.f_userinfo_code,
            f_dispathch_name: self.row.f_user_name,
            f_phone: self.row.f_user_phone,
            f_dispathch_address: self.row.f_address,
            f_meternumber: self.row.f_meternumber,
            f_dispathch_type: '安装',
            f_source: '其他收费',
            f_money: self.model.f_collection,
            f_remarks: self.model.f_comments,
            f_operator_date: self.$login.toStandardTimeString(),
            f_orgid: self.$login.f.orgid,
            f_dispathch_state: '待分配'
          }
          console.log('111:', batch)
          self.$resetpost('rs/logic/savePatch', batch).then((res1) => {
            // this.params.rows.splice(index, 1)
            console.log('更新成功！', res1.data.id)
          })
        }
      })
    }
    let localeSustainMoney = window.localStorage.getItem('sustainMoney')
    if (localeSustainMoney != null) {
      localeSustainMoney = (localeSustainMoney - 0) + (self.model.f_collection - 0)
      window.localStorage.setItem('sustainMoney', localeSustainMoney)
    }
    // // 转燃气改装工程单
    // if (self.config.modificationList && parameter) {
    //   let printSheet = {
    //     f_userinfo_id: self.row.f_userinfo_id,
    //     f_charge_id: resid.data,
    //     f_state: '有效',
    //     f_print_state: '未打印',
    //     f_type: '改装单',
    //     f_orgid: self.$login.f.orgid ? self.$login.f.orgid : '',
    //     f_orgname: self.$login.f.orgs ? self.$login.f.orgs : '',
    //     f_depid: self.$login.f.depids ? self.$login.f.depids : '',
    //     f_depname: self.$login.f.deps ? self.$login.f.deps : '',
    //     f_operator: self.$login.f.name,
    //     f_operatorid: self.$login.f.id
    //   }
    //   await self.$resetpost('rs/logic/savePrintSheet', {data: {printData: printSheet}}, {
    //     resolveMsg: '',
    //     rejectMsg: '转单失败, 请重试'
    //   })
    // }
    if (self.config.hasPrint && !self.$login.r.includes('不打印发票')) {
      if (self.printInvoiceType.indexOf(self.model.f_print) === -1) {
        if (self.config.hasBillManage) {
          self.row.id = resid.data
          self.row.f_bill_type = '其他收费'
          self.row.f_bill_style = self.model.f_print[0]
          self.print = true
        } else {
          self.row.id = resid.data
          self.print = true
        }
      } else if (self.model.f_print[0] === '国税发票') {
        // TODO
        self.$dispatch('success')
      } else if (self.printInvoiceType.indexOf(self.model.f_print[0]) !== -1) {
        self.eticket_show = true
        self.row.f_print = self.model.f_print[0]
        await self.$refs.eticketbill.openETicket(resid.data, self.row, '其他收费', '其他收费', '其他收费', self.model.f_print[0])
        // self.$CommonService.openEticket(resid.data, '其他收费')
        // self.$dispatch('success')
      }
    } else {
      self.$dispatch('success')
    }
  } catch (error) {
    console.log(error)
    self.$showAlert(error, 'danger', 0)
    self.$dispatch('refresh')
  }
}

let asyncOtherCharge = async function (self) {
  await self.$getConfig(self, 'OtherCharge')
  self.model.f_print = self.config.printType instanceof Array ? self.config.printType : [self.config.printType]
  self.model.f_payment = [self.config.payment]
  self.model.otherdetail[0].f_brand_spec = [self.config.brandspec]
  self.model.f_service_person = [self.config.services]

  self.model.f_use_type = self.config.billType
  self.model.f_bill_type = self.model.f_print
  self.hasValidateBill = self.config.hasBillManage
  self.initSecuritypersons()
  // self.setTypename(self.model.f_brand_spec[0])
}
export default {
  title: '其他收费',
  data () {
    return {
      config: {
        showupload: true,
        // 验证收费类型是否必填
        checkFlag: false,
        modificationList: false,
        dispatch: false,
        hasPrint: true,  // 默认打票
        hasBillManage: false,  // 默认不启用发票管理
        billType: '其他费用',   // 票据类型（燃气费，其他费用，调用的发票代码不同）
        printType: '普通收据', // 收据/电子票/专用发票/国税发票
        payment: '现金缴费',  // 付款方式
        brandspec: '材料费', // 收费类型
        services: this.$login.f.name // 服务人员
      },
      randomBusinessId: '',
      resid: [],  // 存放新增的f_files表中id
      model: {
        f_print: [],
        f_payment: '现金缴费',
        f_number: 0,
        f_unitprice: 0,
        f_collection: 0,
        f_comments: '',
        f_voucher_number: '',
        f_service_person: '',
        // 用户其他费用信息
        t_userfees: '',
        f_fee_type: ['其他费用'],
        f_fee_time: ['12'],
        otherdetail: [{f_brand_spec: [''], typeNameList: [], f_typenumber: '', typenumberList: [], f_unitprice: '', f_number: ''}]
      },
      eticket_msg: false,
      mjshow: false,
      eticket_show: false,
      invoice_is_pax: '征税',
      is_pax: [{label: '征税', value: '征税'}, {label: '不征税', value: '不征税'}],
      print: false,
      taxprint: false,
      billData: {
        url: 'rs/report/otherCharge_bill',
        bill: ''
      },

      // 启用发票管理需要对票号进行验证
      hasValidateBill: false,
      validateOk: false,
      f_typenumber: '',
      typeNameList: [],
      typenumberList: [],
      brandspec: this.$appdata.getParam('品名及规格'),
      brandType: this.$appdata.getSingleValue('其他收费类型') ? this.$appdata.getSingleValue('其他收费类型') : '收费类型',
      printInvoiceType: this.$appdata.getSingleValue('电子票打印类型') ? this.$appdata.getSingleValue('电子票打印类型') : '电子发票',
      printstyle: this.$appdata.getParam('打印格式'),
      paytype: this.$appdata.getParam('付款方式'),
      feetype: this.$appdata.getParam('其他费用'),
      services: this.$appdata.getParam('服务人员'),
      isflag: false
    }
  },
  props: ['row'],
  ready () {
    // this.model.f_unitprice = this.$appdata.getSingleValue('置换气费')
    asyncOtherCharge(this)
    this.getRandomId()
  },
  watch: {
    'model.f_fee_type' (val) {
      if (val[0]) {
        this.userfees(this.row.f_userinfo_id, val[0])
      }
    },
    'model.f_payment' (val) {
      let _payment = this.$appdata.getSingleValue('需要输入业务单号的付款方式') || ''
      this.mjshow = (val === '免交' || _payment.includes(val))
    }
  },
  events: {
    // 删除Resid数组元素
    'delResid' (val) {
      this.resid.$remove({id: val, f_biobid: ''})
      // this.resid.splice(this.resid.indexOf({id:val,f_biobid:''}),1);
    },
    // 增加Resid数组元素
    'resid' (val) {
      this.resid.push({id: val, f_biobid: ''})
    }
  },
  methods: {
    getRandomId () {
      this.randomBusinessId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let res = Math.random() * 16 | 0
        let v = c == 'x' ? res : (res & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    // 初始化安检人
    initSecuritypersons () {
      let origin = this.$appdata.getSingleValue('服务人员来源')
      if (origin) {
        try {
          this.services = []
          let http = new HttpResetClass()
          http.load('post', '/rs/search', {
            source: `this.getParentByType($organization$).getChildByName($${origin}$).getUsers()`,
            userid: this.$login.f.id
          }, {resolveMsg: null, rejectMsg: null}).then((res) => {
            console.log('获取安检人员', res.data)
            for (let i = 0; i < res.data.length; i++) {
              this.services.push({label: res.data[i].name, value: res.data[i].name})
            }
          })
        } catch (e) {
          console.log('获取安检人员失败')
        }
      }
    },
    setTypeprice (val) {
      console.log('单价变化：', val)
      if (this.model.otherdetail[val] && this.model.otherdetail[val].f_typenumber[0]) {
        let unitprice = this.$appdata.getSingleValue(this.model.otherdetail[val].f_typenumber[0])
        if (unitprice) {
          this.model.otherdetail[val].f_unitprice = Number(unitprice)
          this.$resetValidation()
          this.$nextTick(() => {
            this.$validate()
          })
        }
      }
    },
    async createQianfei () {
      let data = {
        f_serial_id: this.model.f_serial_id,
        record_userinfo: this.row.f_userinfo_id,
        f_serial_number: this.model.f_serial_number,
        f_userfiles_id: this.row.f_userfiles_id,
        f_user_id: this.row.f_user_id,
        f_user_name: this.row.f_user_name,
        f_address: this.row.f_address,
        f_user_type: this.row.f_user_type,
        f_gasproperties: this.row.f_gasproperties,
        // f_number: model.f_number,
        // f_unitprice: model.f_unitprice,
        f_collection: this.model.f_collection,
        f_comments: this.model.f_comments,
        f_payment: this.model.f_payment[0],
        f_voucher_number: this.model.f_voucher_number,
        f_bill_style: this.model.f_print[0],
        // f_brand_spec: model.f_brand_spec[0],
        f_userinfo_id: this.row.f_userinfo_id,
        f_service_person: this.model.f_service_person[0],
        f_operat_type: '其他收费欠费登记',
        f_describe: `${this.$login.f.name}对客户${this.row.f_user_name}进行其他收费欠费登记操作`,
        f_state: '有效',
        f_operator: this.$login.f.name,
        f_operatorid: this.$login.f.id,
        f_orgid: this.$login.f.orgid,
        f_orgname: this.$login.f.orgs,
        f_depid: this.$login.f.depids,
        f_depname: this.$login.f.deps,
        f_zoneid: this.$login.f.zoneid,
        f_zones: this.$login.f.zones,
        f_is_pay: '否',
        // 其他费用信息
        t_userfees: this.model.t_userfees,
        f_fee_type: this.model.f_fee_type[0],
        f_fee_time: this.model.f_fee_time[0],
        otherdetail: this.model.otherdetail
      }
      if (this.$appdata.getSingleValue('其他欠费审核') === '启用') {
        data.f_state = '待审核'
      }
      await this.$resetpost('rs/logic/sale_othercharge_logic_nopay', data, {
        resolveMsg: '生成其他欠费成功',
        rejectMsg: '生成其他欠费失败'
      })
      this.$dispatch('success')
    },
    // 校验发票信息
    checkInvoiceMsg () {
      if (this.printInvoiceType.indexOf(this.model.f_print[0]) !== -1) {
        if (!this.row.f_taxpayer_id) {
          this.row.f_taxpayer_id = this.row.f_idnumber
        }
        if (!this.row.f_paper_name) {
          this.row.f_paper_name = this.row.f_user_name
        }
        if (!this.row.f_address_phone) {
          this.row.f_address_phone = this.row.f_address + ' ' + this.row.f_user_phone
        }
        if (!this.row.f_email) {
          this.row.f_email = this.row.f_email
        }
        this.eticket_msg = true
      } else {
        this.confirm()
      }
    },
    eticket_toggle () {
      this.eticket_show = false
      this.$dispatch('success')
    },
    async setTypename (val, index) {
      this.model.otherdetail[index].f_typenumber = ''
      this.model.otherdetail[index].typeNameList = this.$appdata.getParam(val.f_brand_spec[0])
      this.model.otherdetail[index].typenumberList = []
      this.model.otherdetail[index].f_unitprice = ''
      let self = this
      if (val == '开卡费') {
        if (this.$appdata.getSingleValue('开卡费')) {
          let money = this.$appdata.getSingleValue('开卡费')
          await this.model.otherdetail.forEach(function (item) {
            self.isflag = false
            if (item.f_brand_spec[0] == '开卡费') {
              item.f_unitprice = money
              item.f_number = 1
              self.isflag = true
            }
          })
          this.getcollection()
        }
      }
    },
    setTypenumber (val, index) {
      this.model.otherdetail[index].typenumberList = this.$appdata.getParam(val.f_typename[0 ])
      this.model.otherdetail[index].f_unitprice = ''
    },
    async confirm (parameter) {
      let res = await this.$showMessage(`确定对客户${this.row.f_user_name}进行其他收费吗？`, ['confirm', 'cancel'])
      if (res != 'confirm') return
      this.eticket_msg = false
      // 先调用付款码支付组件流程
      let ss = await this.$refs.paymentcode.flowPath()
      this.$refs.paymentcode.paymentCodeShow = false
      console.log('付款码操作返回', ss)
      if (!ss.result) return
      otherChargeGen(this, parameter)
    },
    clean () {
      this.$dispatch('refresh', this.row)
    },
    close () {
      this.taxprint = false
      this.print = false
      this.clean()
    },
    printok () {
      this.$dispatch('success')
    },
    validateBill (val) {
      this.validateOk = !val.isOk
      this.billData.bill = val.bill
    },
    getcollection () {
      let money = 0
      let flag = true
      this.model.otherdetail.forEach((item) => {
        if (!item.f_number || item.f_number == '0') flag = false
        if (!item.f_unitprice || item.f_unitprice == '0') flag = false
        if (item.f_unitprice && item.f_number) {
          money += ((item.f_unitprice - 0) * (item.f_number - 0)) - 0
        } else {
          flag = false
          this.model.f_collection = 0
        }
      })
      if (money != 0) {
        this.model.f_collection = money.toFixed(2)
      }
      if (!flag) this.model.f_collection = ''
    },
    addadetail () {
      this.$set(`model.otherdetail[${this.model.otherdetail.length}]`, {f_brand_spec: [''], f_typenumber: '', typeNameList: [], typenumberList: [], f_unitprice: '', f_number: ''})
      console.log(JSON.stringify(this.model.otherdetail))
    },
    delthisdetail (index) {
      if (this.model.otherdetail.length > 1) {
        this.model.otherdetail.splice(index, 1)
        this.getcollection()
      }
    },
    async userfees (userinfoid, feetype) {
      this.model.t_userfees = await this.$resetpost('rs/sql/saleSingleTable', {
        data: {
          tablename: 't_userfees',
          condition: `f_userinfo_id=${userinfoid} and f_fee_type='${feetype}'`
        }
      }, {resolveMsg: null, rejectMsg: '查询客户其他费用失败!'})
    }
  },
  computed: {
    validflag () {
      console.log(this.isflag)
      console.log(this.$v.valid)
      if (this.isflag) {
        if (this.model.f_collection && this.model.f_collection != '') {
          let collection = (parseFloat(this.model.f_collection - 0)).toFixed(2)
          if (collection > 0) return !this.isflag
          else return !this.$v.valid
        } else {
          return !this.$v.valid
        }
      } else {
        return !this.$v.valid
      }
    },
    // 验证收费类型是否必填
    chargetypecheckflag () {
      let b = false
      if (this.config.checkFlag) {
        this.model.otherdetail.forEach((item) => {
          if (item.f_brand_spec && item.f_brand_spec.length === 0) {
            b = true
          }
        })
      }
      return b
    },
    feetime () {
      return [{label: '一个月', value: '1'}, {label: '三个月', value: '3'}, {label: '六个月', value: '6'}, {
        label: '一年',
        value: '12'
      }]
    },

    authArr () {
      console.log('this.$login.r:', this.$login.r)
      console.log('this.$login.r.includes:', this.$login.r.includes('收费综合导出权限'))
      return this.$login.r ? this.$login.r : []
    },
    gettypename () {
      return this.typeNameList
    },
    gettypenumber () {
      return this.typenumberList
    }
  }
}
</script>

<style>
</style>
