<template>
  <div class="club-edit page-form-container">
    <el-form ref="submitForm" label-width="140px" :model="formData" :rules="rules">
      <el-form-item label="机构名称:" prop="authParty">
        <el-input v-model="formData.authParty" placeholder="请输入机构名称" clearable />
      </el-form-item>
      <el-form-item label="所在地区:" prop="address">
        <el-cascader
          ref="cascader"
          v-model="formData.address"
          :class="{ display: cascaderDisplay }"
          clearable
          :props="cascaderProps"
          style="width: 100%"
          :placeholder="cascaderPlaceholder"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="详细地址:" prop="fullAddress">
        <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" clearable />
      </el-form-item>
      <el-form-item label="经纬度:" prop="point">
        <el-input
          v-model="formData.point"
          placeholder="请输入经纬度 （格式：纬度,经度，可通过右侧地图小按钮获取）"
          clearable
        >
          <el-button slot="append" icon="el-icon-map-location" @click="initMap" />
        </el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input v-model="formData.mobile" placeholder="请输入联系方式" clearable />
      </el-form-item>

      <el-form-item label="运营联系人:">
        <el-input v-model="formData.linkMan" placeholder="请输入运营联系人" clearable />
      </el-form-item>

      <el-form-item label="运营联系人手机号:">
        <el-input
          v-model="formData.linkMobile"
          placeholder="请输入运营联系人手机号"
          clearable
          maxlength="11"
          show-word-limit
          @input="onMobileInput"
        />
      </el-form-item>

      <el-form-item label="认证编号:" prop="authCode">
        <el-input v-model="formData.authCode" placeholder="请输认证编号" clearable />
      </el-form-item>

      <el-form-item label="认证日期:" prop="authDate">
        <el-date-picker v-model="formData.authDate" type="date" placeholder="选择日期" style="width: 100%" />
      </el-form-item>
      <!-- <el-form-item label="手机号:" prop="userMobile">
        <el-input v-model="formData.userMobile" placeholder="请输入手机号" clearable maxlength="11" show-word-limit />
      </el-form-item> -->
      <el-form-item label="机构logo:" prop="logo">
        <el-input v-show="false" v-model="formData.logo" />
        <upload-image
          tip="建议尺寸：242px * 242px"
          :image-list="logoList"
          :before-upload="beforeLogoUpload"
          @success="uploadLogoSuccess"
          @remove="handleLogoRemove"
        />
      </el-form-item>
      <el-form-item label="门头照:" prop="banner">
        <div class="form-label-tip">至少上传一张机构门店图，最多上传6张）</div>
        <el-input v-show="false" v-model="formData.banner" />
        <upload-image
          tip="至少上传一张，最多6张；建议尺寸：542px * 542px"
          :image-list="bannerList"
          :before-upload="beforeBannerUpload"
          :limit="6"
          @success="uploadBannerSuccess"
          @remove="handleBannerRemove"
        />
      </el-form-item>

      <!-- **************** 新方法配置授权牌 START ******************* -->
      <el-form-item label="授权牌:">
        <el-radio-group v-model="formData.authImageType" size="mini">
          <el-radio :label="1" border>模板库生成</el-radio>
          <el-radio :label="2" border>自定义上传</el-radio>
        </el-radio-group>
        <div style="margin-top: 12px">
          <template v-if="formData.authImageType === 2">
            <upload-image
              tip="建议尺寸：542px * 546px"
              :image-list="authImageList"
              :before-upload="beforeAuthImageUpload"
              @success="uploadAuthImageSuccess"
              @remove="handleAuthImageRemove"
            />
            <el-input v-show="false" v-model="formData.authImage" />
          </template>
          <template v-else>
            <preview-image v-if="formData.authImage" width="148px" height="148px" :src="formData.authImage" />
          </template>
        </div>
      </el-form-item>

      <el-form-item v-if="formData.authImageType === 1" label="授权牌logo:">
        <div class="form-label-tip">授权牌logo（提示：授权牌logo与机构名称组合）</div>
        <div style="margin-top: 8px">
          <upload-image
            :tip="authImageLogoUploadTip"
            :image-list="authImageLogoList"
            :before-upload="beforeAuthImageLogoUpload"
            @success="uploadAuthImageLogoSuccess"
            @remove="handleAuthImageLogoRemove"
          />
          <el-input v-show="false" v-model="formData.authImageLogo" />
        </div>
      </el-form-item>

      <!-- **************** 新方法配置授权牌 End ******************* -->

      <el-form-item label="机构类型:">
        <el-radio-group v-model="formData.firstClubType">
          <el-radio :label="1">医美</el-radio>
          <el-radio :label="2">生美</el-radio>
          <el-radio :label="3">项目公司</el-radio>
          <el-radio :label="4">个人</el-radio>
          <el-radio :label="5">其他</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formData.firstClubType === 1" label="医美类型:">
        <el-radio-group v-model="formData.secondClubType">
          <el-radio :label="1">诊所</el-radio>
          <el-radio :label="2">门诊</el-radio>
          <el-radio :label="3">医院</el-radio>
          <el-radio :label="4">其他</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formData.firstClubType === 2" label="生美类型:">
        <el-radio-group v-model="formData.secondClubType">
          <el-radio :label="5">美容院</el-radio>
          <el-radio :label="6">养生馆</el-radio>
          <el-radio :label="7">其他</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formData.firstClubType === 1" label="医疗许可证:" prop="medicalLicenseImage">
        <el-input v-show="false" v-model="formData.medicalLicenseImage" />
        <upload-image
          tip="请上传医疗许可证；建议尺寸：542px * 542px"
          :limit="1"
          :image-list="licenseImageList"
          :before-upload="beforeLicenseImageUpload"
          @success="uploadLicenseImageSuccess"
          @remove="handleLicenseImageRemove"
        />
      </el-form-item>

      <el-form-item label="员工人数:" prop="empNum">
        <el-input v-model.number="formData.empNum" placeholder="请输入员工人数" clearable />
      </el-form-item>

      <el-form-item label="自定义属性:">
        <el-radio-group v-model="formData.customFlag" size="mini">
          <el-radio :label="0" border>否</el-radio>
          <el-radio :label="1" border>是</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="formData.customFlag === 1">
        <el-form-item label="店铺备注:" prop="remarks">
          <el-input v-model="formData.remarks" placeholder="店铺备注" clearable />
        </el-form-item>
      </template>

      <el-form-item label="已关联机构:">
        <el-button size="mini" type="primary" @click="onChooseAssClub">关联机构</el-button>
      </el-form-item>
      <el-form-item>
        <associated-club-list
          :selection="false"
          :control="true"
          :list="filterSelectAssClubList"
          @filter="onFilterSelectAssClubList"
        >
          <template #control="{ row }">
            <el-button size="mini" type="danger" @click="onAssClubListRemove(row)">删除</el-button>
          </template>
        </associated-club-list>
      </el-form-item>
    </el-form>

    <!-- 表单提交 返回 -->
    <div class="control-box">
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="warning" @click="navigateBack">返回</el-button>
    </div>

    <!-- 地图坐标拾取 -->
    <el-dialog
      class="map-dialog"
      title="坐标拾取（请拖动标记点选取准确位置）"
      :visible.sync="dialogMapVisible"
      width="80%"
    >
      <a-map ref="aMap" :lnglat="lnglat" :address="locationAddress" @position="onPosition" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="dialogMapVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 关联机构 -->
    <el-dialog title="添加关联机构" :visible.sync="assClubListVisible" width="30%" :show-close="false">
      <associated-club-list
        v-if="assClubListVisible"
        :selection="true"
        :control="false"
        height="280"
        :list="assClubList"
        @filter="onFilterAssClubList"
        @selected="onAssClubListChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="onAssClubListCancel">取 消</el-button>
        <el-button type="primary" size="mini" @click="onAssClubListConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SimpleAMap from '@/components/SimpleAMap'
import UploadImage from '@/components/UploadImage'
import { AssociatedClubList } from '@/views/components/index'
import { mapGetters } from 'vuex'
import { saveBrandAuth, getAuthFormData, fecthAuthList } from '@/api/auth'
import { getAddress } from '@/api/common'
import { isPoint, isMobile, isNumber } from '@/utils/validate'
import { formatDate } from '@/utils'
import { authTempUsed } from '@/api/system'

export default {
  components: {
    [SimpleAMap.name]: SimpleAMap,
    UploadImage,
    AssociatedClubList
  },
  data() {
    var validatePoint = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('经纬度坐标不能为空'))
      } else {
        if (isPoint(value)) {
          callback()
        } else {
          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
        }
      }
    }

    var validateMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('联系方式不能为空'))
      } else {
        if (isNumber(value)) {
          callback()
        } else {
          callback(new Error('联系方式格式不正确'))
        }
      }
    }

    var validatePhoneNumber = (rule, value, callback) => {
      if (!value || isMobile(value)) {
        callback()
      } else {
        callback(new Error('手机号格式不正确'))
      }
    }

    return {
      editType: 'add',
      dialogMapVisible: false,
      point: {},
      value: [],
      options: [],

      assClubListVisible: false,

      authId: '',
      disabled: false,
      area: '',
      formData: {
        authParty: '',
        address: [],
        fullAddress: '',
        point: '',
        mobile: '',
        userMobile: '',
        logo: '',
        banner: '',
        customFlag: 0,
        remarks: '',
        empNum: '',
        firstClubType: 1,
        secondClubType: 1,
        medicalLicenseImage: '',
        // 新增授权牌字段
        authCode: '',
        authDate: '',
        authImageType: 1,
        authImageLogo: '',
        authImage: '',
        // 新增运营人字段
        linkMan: '',
        linkMobile: '',
        // 机构关联
        relationId: '',
        relationName: ''
      },
      rules: {
        authParty: [{ required: true, message: '机构名称不能为空', trigger: ['blur', 'change'] }],
        address: [{ required: true, message: '地址不能为空', trigger: 'change', type: 'array' }],
        fullAddress: [{ required: true, message: '详细不能为空', trigger: ['blur', 'change'] }],
        point: [{ required: true, validator: validatePoint, trigger: ['blur', 'change'] }],
        mobile: [{ required: true, validator: validateMobile, trigger: ['blur', 'change'] }],
        logo: [{ required: true, message: '请上传机构logo', trigger: 'change' }],
        banner: [{ required: true, message: '请至少上传一张banner图片', trigger: 'change' }],
        remarks: [{ required: true, message: '店铺备注不能为空', trigger: 'blur' }],
        medicalLicenseImage: [{ required: true, message: '请上传医疗许可证', trigger: 'change' }],
        empNum: [{ required: true, message: '员工人数不能为空', trigger: 'change' }],
        userMobile: [{ validator: validatePhoneNumber, trigger: 'change' }],
        authImageLogo: [{ required: true, message: '请上传授权牌logo', trigger: 'change' }]
      },
      // logo图片列表
      logoList: [],
      // banner图片列表
      bannerList: [],
      // 级联选择的地址
      address: '',
      // 医疗许可证图片
      licenseImageList: [],
      // 授权牌照图片列表
      authImageList: [],
      // 授权牌logo列表
      authImageLogoList: [],
      // 验证
      validatorFields: {
        authImageLogoWidth: 100,
        authImageLogoHeight: 100
      },
      // 关联机构相关
      assClubQuery: {
        pageNum: 1,
        pageSize: 1000,
        authParty: ''
      },
      assClubList: [], // 关联机构列表
      selectAssClubList: [], // 当前选中关联机构列表
      selectAssClubListAll: [], // 全部选中关联机构列表
      filterSelectAssClubList: [] // 筛选后的关联机构列表
    }
  },
  computed: {
    ...mapGetters(['authUserId', 'proxyInfo']),
    // 级联选择器
    cascaderProps() {
      return {
        lazy: true,
        lazyLoad: async(node, resolve) => {
          const { level, value = 0 } = node
          const result = await getAddress({ parentId: value, type: level })
          const nodes = result.data.map((item) => ({ value: item.id, label: item.name, leaf: level >= 2 }))
          resolve(nodes)
        }
      }
    },
    cascaderDisplay() {
      return this.formData.address.length > 0
    },
    cascaderPlaceholder() {
      return this.cascaderDisplay ? this.area : '请选择所在区域'
    },
    // 定位使用的地址
    locationAddress() {
      // 广东省/深圳市/福田区景峰大厦
      return this.address + this.formData.fullAddress
    },
    // 位置坐标
    lnglat() {
      return this.formData.point ? this.formData.point.split(',') : null
    },
    // 授权牌logo上传提示
    authImageLogoUploadTip() {
      return `限制尺寸：${this.validatorFields.authImageLogoWidth}px *${this.validatorFields.authImageLogoHeight}px`
    }
  },
  created() {
    this.editType = this.$route.query.type || 'add'
    this.authId = this.$route.query.id
    this.initFormData()
  },
  methods: {
    // 关联机构选择
    onChooseAssClub() {
      this.fetchAssClubList()
      this.assClubListVisible = true
    },
    // 获取关联机构列表
    async fetchAssClubList() {
      try {
        const excludeId = this.selectAssClubListAll.map((item) => item.authId)
        if (this.authId) {
          excludeId.push(parseInt(this.authId))
        }
        const res = await fecthAuthList(this.assClubQuery)
        this.assClubList = res.data.list.filter((item) => !excludeId.includes(item.authId))
      } catch (error) {
        console.log(error)
      }
    },
    // 关联机构列表筛选
    onFilterAssClubList(query) {
      this.assClubQuery.authParty = query.authParty
      this.fetchAssClubList()
    },
    // 关联机构列表选中
    onAssClubListChange(value) {
      this.selectAssClubList = value
    },
    // 关联机构选中列表确认
    onAssClubListConfirm() {
      this.selectAssClubListAll = [...this.selectAssClubListAll, ...this.selectAssClubList]
      this.filterSelectAssClubList = this.selectAssClubListAll
      this.assClubQuery.authParty = ''
      this.assClubList = []
      this.assClubListVisible = false
    },
    // 关联机构选中列表取消
    onAssClubListCancel() {
      this.selectAssClubList = []
      this.filterSelectAssClubList = this.selectAssClubListAll
      this.assClubQuery.authParty = ''
      this.assClubList = []
      this.assClubListVisible = false
    },
    // 已关联机构列表筛选
    onFilterSelectAssClubList(query) {
      if (query.authParty) {
        this.filterSelectAssClubList = this.selectAssClubListAll.filter((item) =>
          new RegExp(query.authParty, 'ig').test(item.authParty)
        )
      } else {
        this.filterSelectAssClubList = this.selectAssClubListAll
      }
    },
    // 已关联机构列表删除
    onAssClubListRemove(row) {
      this.selectAssClubListAll = this.selectAssClubListAll.filter((item) => item.authId !== row.authId)
      this.filterSelectAssClubList = this.selectAssClubListAll
    },

    // 地图定位
    initMap() {
      this.dialogMapVisible = true
      this.$nextTick(() => {
        this.$refs.aMap.init()
      })
    },

    // 获取位置坐标
    onPosition(lnglat) {
      this.formData.point = `${lnglat.lng},${lnglat.lat}`
    },

    // 获取地址
    initAddress() {
      return getAddress({
        parentId: 19,
        type: 1
      })
    },

    // 地图标记变化
    markerChange(point) {
      this.formData.point = `${point.lng},${point.lat}`
    },

    // 数据回显
    initFormData() {
      if (!this.authId) return
      getAuthFormData({ authId: this.authId }).then((res) => {
        console.log(res)
        this.formData.authParty = res.data.authParty

        this.formData.fullAddress = res.data.address
        this.formData.point = res.data.lngAndLat
        this.formData.mobile = res.data.mobile
        this.formData.logo = res.data.logo || ''
        this.formData.banner = res.data.bannerList.length || ''
        this.formData.relationId = res.data.relationId
        this.formData.relationName = res.data.relationName

        this.formData.customFlag = res.data.customFlag
        this.formData.remarks = res.data.remarks

        if (res.data.logo) {
          this.logoList = [{ name: '机构logo', url: res.data.logo }]
        }

        if (res.data.bannerList.length > 0) {
          this.bannerList = res.data.bannerList.map((item, index) => ({ name: `门头照${index}`, url: item }))
        }

        this.formData.address = [res.data.provinceId, res.data.cityId, res.data.townId]
        // this.formData.address = '广东省/深圳市/福田区'
        this.area = res.data.area
        this.address = res.data.area

        this.formData.empNum = res.data.empNum
        this.formData.firstClubType = res.data.firstClubType
        this.formData.secondClubType = res.data.secondClubType

        this.formData.medicalLicenseImage = res.data.medicalLicenseImage
        if (res.data.medicalLicenseImage) {
          this.licenseImageList = [{ name: '医疗许可证', url: res.data.medicalLicenseImage }]
        }

        this.formData.userMobile = res.data.userMobile

        // 授权牌相关字段
        this.formData.authCode = res.data.authCode
        this.formData.authDate = res.data.authDate
        this.formData.authImageType = res.data.authImageType

        this.formData.authImageLogo = res.data.authImageLogo
        if (res.data.authImageLogo) {
          this.authImageLogoList = [{ name: '授权牌logo', url: res.data.authImageLogo }]
        }

        this.formData.authImage = res.data.authImage
        if (res.data.authImage) {
          this.authImageList = [{ name: '自定义授权牌', url: res.data.authImage }]
        }

        // 运营人相关
        this.formData.linkMan = res.data.linkMan
        this.formData.linkMobile = res.data.linkMobile

        // 关联机构列表
        if (res.data.releationClubList) {
          this.selectAssClubListAll = res.data.releationClubList
          this.filterSelectAssClubList = this.selectAssClubListAll
        }
      })
    },

    // 表单提交保存
    submit() {
      this.$refs.submitForm.validate((valide) => {
        if (!valide) return
        const {
          authParty,
          address: [provinceId, cityId, townId],
          mobile,
          logo,
          point: lngAndLat,
          customFlag,
          remarks,
          empNum,
          firstClubType,
          secondClubType,
          medicalLicenseImage,
          userMobile,
          authCode,
          authDate,
          authImageType,
          authImageLogo,
          authImage,
          linkMan,
          linkMobile
        } = this.formData

        const authUserId = this.proxyInfo?.authUserId || this.authUserId

        const data = {
          authId: parseInt(this.authId),
          authParty,
          authUserId,
          createBy: authUserId,
          provinceId,
          cityId,
          townId,
          address: this.formData.fullAddress,
          mobile,
          logo,
          lngAndLat,
          remarks,
          customFlag,
          empNum,
          firstClubType,
          secondClubType,
          medicalLicenseImage,
          userMobile,
          authCode,
          authDate: authDate ? formatDate(authDate, 'yyyy.MM.DD') : '',
          authImageType,
          authImageLogo,
          authImage,
          linkMan,
          linkMobile,
          relationId: this.selectAssClubListAll.map((item) => item.authId).join(','),
          relationName: this.selectAssClubListAll.map((item) => item.authParty).join(',')
        }

        data.bannerList = this.bannerList.map((item) => (item.response ? item.response.data : item.url))

        // const data = deepClone(this.formatDate)
        // const [provinceId, cityId, townId] = this.formData.address
        // const lngAndLat = this.formData.point

        console.log(data)
        // return
        saveBrandAuth(data)
          .then((res) => {
            const h = this.$createElement
            this.$notify.success({
              title: `修改授权机构`,
              message: h('i', { style: 'color: #333' }, `已修改授权机构："${this.formData.authParty}"`),
              duration: 3000
            })
            // this.$refs.submitForm.resetFields()
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push('/club/list')
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    handleChange(e) {
      const node = this.$refs.cascader.getCheckedNodes()
      if (node.length <= 0) return
      this.address = node[0].pathLabels.join()
    },

    // 获取当前机构可用授权牌模板
    async fetchAuthTempUsed() {
      try {
        const res = await authTempUsed({
          authUserId: this.authUserId,
          authFlag: 1,
          status: 1
        })
        if (res.data) {
          const [width, height] = res.data.logoSize.split(',')
          this.validatorFields.authImageLogoWidth = width
          this.validatorFields.authImageLogoHeight = height
        }
      } catch (error) {
        console.log(error)
      }
    },

    // logo上传
    uploadLogoSuccess({ response, file, fileList }) {
      this.logoList = fileList
      this.formData.logo = fileList[0].response.data
    },
    handleLogoRemove({ file, fileList }) {
      this.logoList = fileList
      this.formData.logo = ''
    },
    beforeLogoUpload(file) {
      const flag = file.size / 1024 < 500
      if (!flag) {
        this.$message.error('上传logo图片大小不能超过 500kb!')
      }
      return flag
    },

    // banner上传
    uploadBannerSuccess({ response, file, fileList }) {
      this.bannerList = fileList
      console.log(this.bannerList)
      this.formData.banner = fileList.length > 0 ? fileList.length : ''
    },
    handleBannerRemove({ file, fileList }) {
      this.bannerList = fileList
      this.formData.banner = fileList.length > 0 ? fileList.length : ''
    },
    beforeBannerUpload(file) {
      const flag = file.size / 1024 / 1024 < 1
      if (!flag) {
        this.$message.error('上传banner图片大小不能超过 1MB!')
      }
      return flag
    },

    // 医疗许可证图片上传
    uploadLicenseImageSuccess({ response, file, fileList }) {
      this.licenseImageList = fileList
      console.log(this.licenseImageList)
      this.formData.medicalLicenseImage = response.data
    },
    handleLicenseImageRemove({ file, fileList }) {
      this.licenseImageList = fileList
      this.formData.medicalLicenseImage = ''
    },
    beforeLicenseImageUpload(file) {
      const flag = file.size / 1024 / 1024 < 1
      if (!flag) {
        this.$message.error('医疗许可证图片大小不能超过 1MB!')
      }
      return flag
    },

    // 授权牌照上传
    beforeAuthImageUpload(file) {
      const flag = file.size / 1024 / 1024 < 5
      if (!flag) {
        this.$message.error('上传授权牌图片大小不能超过 5MB!')
      }
      return flag
    },
    uploadAuthImageSuccess({ response, file, fileList }) {
      this.authImageList = fileList
      this.formData.authImage = response.data
    },
    handleAuthImageRemove({ file, fileList }) {
      this.authImageList = fileList
      this.formData.authImage = ''
    },

    // 授权牌logo上传
    beforeAuthImageLogoUpload(file) {
      return new Promise((resolve, reject) => {
        if (file.size > 5 * 1024 * 1024) {
          this.$message.error('授权牌logo图片大小不能超过 5MB!')
          reject('图片大小超出最大限制')
        }
        const image = new Image()
        image.src = URL.createObjectURL(file)
        image.onload = (e) => {
          const { naturalWidth, naturalHeight } = e.path ? e.path[0] : e.target
          const { authImageLogoWidth: width, authImageLogoHeight: height } = this.validatorFields
          if (naturalWidth > width || naturalHeight > height) {
            this.$message.error('图片尺寸校验未通过')
            reject('图片尺寸校验未通过')
          } else {
            resolve('图片尺寸校验通过')
          }
        }
      })
    },
    uploadAuthImageLogoSuccess({ response, file, fileList }) {
      this.authImageLogoList = fileList
      this.formData.authImageLogo = response.data
    },
    handleAuthImageLogoRemove({ file, fileList }) {
      this.authImageLogoList = fileList
      this.formData.authImageLogo = ''
    },
    // 输入手机号时
    onMobileInput() {
      this.formData.mobile = this.formData.mobile.replace(/[^\w\.\/]/gi, '')
    }
  }
}
</script>

<style lang="scss" scoped>
#allmap {
  width: 100%;
  height: 600px;
}

.attributes {
  padding-top: 16px;
}
</style>
