<template>
  <el-dialog
    :title="`${showType ? '详情' : id ? '编辑' : '新增'} - 法规文件`"
    :visible.sync="dialogVisible"
    custom-class="new-edition-dialog"
    top="5vh"
    width="85%"
    @closed="closed"
    @open="open"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="top"
      label-width="auto"
    >
      <el-row :gutter="24" style="flex-wrap:wrap" type="flex">
        <el-col :span="6">
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="form.name"
              clearable
              :disabled="showType == '详情'"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布单位" prop="pushOrg">
            <el-input
              v-model="form.pushOrg"
              clearable
              :disabled="showType == '详情'"
              placeholder="请输入发布单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布时间" prop="pushTime">
            <el-date-picker
              v-model="form.pushTime"
              clearable
              :disabled="showType == '详情'"
              placeholder="请选择发布时间"
              style="width: 100%;"
              type="date"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布人" prop="pushUser">
            <el-input
              v-model="form.pushUser"
              clearable
              :disabled="showType == '详情'"
              placeholder="请输入发布人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内容类型" prop="contentType">
            <el-input
              v-model="form.contentType"
              clearable
              :disabled="showType == '详情'"
              placeholder="请输入内容类型"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="简介" prop="introduction">
            <el-input
              v-model="form.introduction"
              clearable
              :disabled="showType == '详情'"
              placeholder="请输入简介"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="memo">
            <el-input
              v-model="form.memo"
              :autosize="{minRows: 2, maxRows: 3}"
              clearable
              :disabled="showType == '详情'"
              placeholder="请输入备注"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="showType !== '详情'">
          <el-form-item
            :rules="[
              {
                required: true,
                message: '法规文件附件不能为空',
                trigger: 'change'
              }
            ]"
            label=""
            prop="fileList"
          >
            <el-button size="small" type="primary" @click="selectFile">
              附件 +
            </el-button>
            <el-button
              v-show="form.fileList.length"
              :disabled="!currentDataDel.length"
              size="small"
              type="danger"
              @click="deleteFile()"
            >
              附件 -
            </el-button>
            <div class="attachment-tips-text">
              只能上传
              <span>
                <template v-for="(item, index) in typeRegularArr"
                  >{{ item
                  }}{{
                    typeRegularArr.length - 1 === index ? '' : '/'
                  }}</template
                >
              </span>
              文件
            </div>
          </el-form-item>
          <uploader
            v-show="false"
            ref="uploader"
            :options="uploadOption"
            @file-added="onFileAdded"
            @file-error="uploadError"
            @file-progress="onFileProgress"
            @file-success="onFileSuccess"
          >
            <uploader-unsupport></uploader-unsupport>
            <uploader-btn ref="uploaderBtn"></uploader-btn>
            <uploader-list>
              <!--通过slot-scope绑定文件实例-->
              <!--              <div v-for="(file,i) in props.fileList" :key="i">-->
              <!--                <uploader-file :list="true" :file="file"></uploader-file>-->
              <!--              </div>-->
            </uploader-list>
          </uploader>
        </el-col>
        <el-col :span="24">
          <el-table
            v-show="form.fileList.length"
            ref="multipleSelection"
            :data="form.fileList"
            border
            class="table-list"
            row-key="id"
            stripe
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column
              :index="index => index + 1"
              align="center"
              label="序号"
              type="index"
              width="70"
            />
            <el-table-column
              align="center"
              label="附件名称"
              min-width="140"
              prop="fileName"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                <template v-if="row.status !== 'success'">
                  {{ row.fileName }}
                </template>
                <el-link v-else type="primary" @click="previewFile(row)">
                  {{ row.fileName }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              class-name="is-required"
              label="附件别名"
              min-width="170"
              prop="name"
              show-overflow-tooltip
            >
              <template v-slot="{row, $index}">
                <el-form-item
                  :prop="`fileList.${$index}.name`"
                  :rules="rules.fileList.name"
                  class="table-form-item"
                >
                  <el-input
                    :disabled="showType == '详情'"
                    v-model="row.name"
                    :autosize="{minRows: 1, maxRows: 4}"
                    placeholder="请输入附件名称"
                    size="small"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              :formatter="
                ({fileType}) => dictionaryEscape('wjlx', fileType) || '-'
              "
              align="center"
              label="资料类型"
              min-width="70"
              prop="name"
              show-overflow-tooltip
            />
            <el-table-column
              :formatter="({size}) => formatFileSize(size)"
              align="center"
              label="附件大小"
              min-width="70"
              prop="size"
            />
            <el-table-column
              align="center"
              label="上传进度"
              min-width="110"
              prop="progress"
            >
              <template v-slot="{row}">
                <template
                  v-if="row.status === 'error' || row.status === 'mergeError'"
                >
                  <el-progress :percentage="0" status="exception" />
                </template>
                <template v-else-if="row.status === 'success'">
                  <el-progress :percentage="100" status="success" />
                </template>
                <template v-else-if="row.status === 'pause'">
                  <el-progress
                    :percentage="+(row._prevProgress * 100).toFixed(2)"
                    status="warning"
                  />
                </template>
                <template
                  v-else-if="
                    row.status === 'upload' || row.status === 'initialization'
                  "
                >
                  <el-progress
                    :percentage="
                      +(row._prevProgress * 100).toFixed(2) >= 90
                        ? 90
                        : +(row._prevProgress * 100).toFixed(2)
                    "
                  />
                </template>
                <template v-else-if="row.status === 'merge'">
                  <el-progress :percentage="90" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="上传速度"
              min-width="80"
              prop="size"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                {{ `${formatFileSize(row.currentSpeed)} / S` }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="预计上传时长"
              min-width="100"
              prop="size"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                {{
                  !Number.isFinite(row.timeRemaining()) ||
                  row.timeRemaining() === 0
                    ? '-'
                    : formatTime(row.timeRemaining())
                }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="上传状态"
              min-width="90"
              prop="status"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                <template v-if="row.status === 'initialization'">
                  <el-tag size="medium" type="warning">文件初始化中..</el-tag>
                </template>
                <template v-else-if="row.status === 'error'">
                  <el-tag size="medium" type="danger">文件上传失败</el-tag>
                </template>
                <template v-else-if="row.status === 'mergeError'">
                  <el-tag size="medium" type="danger">文件合并失败</el-tag>
                </template>
                <template v-else-if="row.status === 'success'">
                  <el-tag size="medium" type="success">文件上传成功</el-tag>
                </template>
                <template v-else-if="row.status === 'pause'">
                  <el-tag size="medium" type="warning">文件上传暂停</el-tag>
                </template>
                <template v-else-if="row.status === 'upload'">
                  <el-tag size="medium" type="primary">文件上传中...</el-tag>
                </template>
                <template v-else-if="row.status === 'merge'">
                  <el-tag size="medium" type="primary">文件合并中...</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              v-if="showType !== '详情'"
              min-width="130"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                <template
                  v-if="
                    row.status !== 'initialization' &&
                      (!row.isComplete() || row.status === 'mergeError') &&
                      row.status !== 'success'
                  "
                >
                  <el-link
                    v-if="row.status === 'error' || row.status === 'mergeError'"
                    :underline="false"
                    style="margin-right: 10px"
                    type="primary"
                    @click="reUpload(row)"
                  >
                    重新上传
                  </el-link>
                  <el-link
                    v-else
                    :type="row.paused ? 'primary' : 'warning'"
                    :underline="false"
                    style="margin-right: 10px"
                    @click="filePauseUpload(row)"
                  >
                    {{ row.paused ? '继续' : '暂停' }}上传
                  </el-link>
                </template>
                <el-link
                  v-if="row.status === 'success'"
                  :underline="false"
                  style="margin-right: 10px"
                  type="primary"
                  @click="downloadFile(row)"
                >
                  文件下载
                </el-link>
                <el-link
                  :underline="false"
                  style="margin-right: 10px"
                  type="danger"
                  @click="deleteFile(row)"
                >
                  {{ row.status === 'success' ? '删除附件' : '取消上传' }}
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="showType !== '详情'"
        :loading="saveLoading"
        type="primary"
        @click="handleSave"
      >
        确 认
      </el-button>

      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>

    <!--  文件预览弹层  -->
    <PreviewFileDialog v-model="previewFileDialog" :file-info="fileInfo" />
  </el-dialog>
</template>

<script>
import * as api from '@/api/examDataMenu/examKnowledgeData/regulatoryFile'
import {completeUpload, initFile} from '@/api/systemInterface'
import SparkMD5 from 'spark-md5'
import moment from 'moment'
import 'moment-duration-format'
import {mapState} from 'vuex'
import {dictionaryEscape} from '@/utils/dictionary'
import PreviewFileDialog from '../PreviewFileDialog'

export default {
  name: 'AddEditDialog',
  components: {PreviewFileDialog},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    rowInfo: {
      type: Object,
      default: () => ({})
    },
    activeTreeItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      rules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        fileList: {
          name: [{required: true, message: '附件名称不能为空', trigger: 'blur'}]
        }
      },
      form: {
        fileList: []
      },
      currentDataDel: [],
      previewFileDialog: false,
      fileInfo: {},
      saveLoading: false,
      typeRegularArr: [
        // 视频格式
        ...[
          'mp4',
          'mov',
          'avi',
          'mkv',
          'wmv',
          'flv',
          'mpeg',
          'mpg',
          '3gp',
          'webm',
          'mts'
        ],
        // 文档格式
        ...['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf', 'pdf'],
        // 图像文件
        ...['jpg', 'png', 'bmp', 'gif']
      ]
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    id() {
      return this.rowInfo?.id || ''
    },
    knowledgeTypeId() {
      return this.activeTreeItem?.id || ''
    },
    showType() {
      return this.rowInfo?.showType || ''
    },
    actionUrl: _ => window.context.portal,
    previewUrl: _ =>
      window.context.portal + '/file/onlinePreviewController/v1/getFileById_',
    downloadUrl: _ => window.context.portal + '/file/v1/downloadFile?fileId=',
    ...mapState({
      headers: state => ({
        Authorization: `Bearer ${state.login.currentUser.token}`
      })
    }),
    uploadOption() {
      return {
        target: `${this.actionUrl}/file/v1/chunkUpload`,
        autoUpload: false, // 设置为手动上传，以便先检查类型和请求分片ID
        testChunks: true, // 关闭自动分片检查
        checkChunkUploadedByResponse: this.checkChunkUploadedByResponse,
        singleFile: false, // 确保每个组件只处理单文件上传
        forceChunkSize: true, // 是否强制所有的块都是小于等于 chunkSize 的值
        chunkSize: 10 * 1024 * 1024, // 设置分片大小为10MB
        simultaneousUploads: 10, // 并发数
        maxChunkRetries: 3, // 设置最大重试次数
        chunkRetryInterval: 2000, // 设置重试间隔时间，单位为毫秒
        headers: this.headers,
        onFileAdded: this.onFileAdded, // 文件添加时的钩子
        processParams: this.processParams // 加工分片上传请求体
      }
    }
  },
  created() {},
  methods: {
    dictionaryEscape,

    // 打开弹层
    open() {
      if (this.id) {
        this.saveLoading = true
        this.getDetail(this.id)
      }
    },

    // 关闭弹层后
    closed() {
      const {rules} = this
      this.$refs.uploader?.uploader?.cancel()
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {rules})

      this.$nextTick(_ => {
        this.$refs.form.$el.scrollTop = 0
        this.$refs.form.clearValidate()
      })
    },

    // 获取详情
    async getDetail(id) {
      try {
        let {regulatoryFile = '', ...form} = await api.tableDetail(id)

        this.form = {
          ...form,
          fileList: JSON.parse(regulatoryFile).map(i => ({
            ...i,
            timeRemaining: () => 0,
            isComplete: () => true,
            cancel: _ => _,
            status: 'success',
            size: i.fileSizes,
            currentSpeed: 0,
            id: i.fileId
          }))
        }
      } finally {
        this.saveLoading = false
      }
    },

    // 选择文件
    selectFile() {
      // 查找uploaderBtn组件内部的input元素，并模拟点击
      const inputElement = this.$refs.uploaderBtn.$el.querySelector(
        'input[type="file"]'
      )
      if (inputElement) {
        inputElement.click()
      }
    },

    //表格选中
    handleSelectionChange(val) {
      this.currentDataDel = val.map(item => item.id)
    },

    // 文件添加后（验证文件类型）
    onFileAdded(file) {
      this.saveLoading = true
      const {size, name} = file
      const maxSize = 500 * 1024 * 1024 // 20MB
      const typeRegular = new RegExp(
        `\\.(${this.typeRegularArr.join('|')})$`,
        'i'
      )
      const verification = [
        {
          condition: !typeRegular.test(name),
          result: () =>
            setTimeout(() =>
              this.$message.warning('只能上传视频 / 图片 / 文档格式文件')
            )
        }
        // {
        //   condition: size > maxSize,,
        //   result: () => this.$message.warning('附件大小不能超过500MB')
        // }
      ]
      const findItem = verification.find(i => i.condition)
      if (findItem) {
        findItem.result && findItem.result()
        this.saveLoading = this.form.fileList.some(i => i.status !== 'success')
        file.ignored = true //文件校验，不符规则的文件过滤掉
      } else {
        file.ignored = false //文件校验，不符规则的文件过滤掉
        const addProps = {
          status: 'initialization',
          uploadId: '',
          fileName: file.name
        }
        Object.keys(addProps).forEach(key => {
          this.$set(file, key, addProps[key])
        })

        this.form.fileList.push(file)
        this.initializeFile(file)
      }
    },

    // 整个文件预处理
    async initializeFile(file) {
      file.pause()
      file.status = 'initialization'
      const fileObject = file.file // 源文件对象
      try {
        const md5 = await this.generateMd5(fileObject)

        // 请求分片信息

        try {
          let {
            state = false,
            value: {uploadId = '', uploadResult = {}, successChunk = ''} = {}
          } = await initFile({
            md5,
            filename: file.name,
            size: file.size,
            partSize: this.uploadOption.chunkSize
          })

          if (state && uploadResult.mergeStatus === '1') {
            file.status = 'success'
            const addProps = {
              fileName: file.fileName,
              fileSizes: uploadResult.size,
              fileExt: uploadResult.fileExt,
              fileId: uploadResult.fileId,
              fileType: uploadResult.fileType,
              id: uploadResult.fileId,
              successChunk
            }
            Object.keys(addProps).forEach(key => {
              this.$set(file, key, addProps[key])
            })
            setTimeout(_ => {
              this.saveLoading = this.form.fileList.some(
                i => i.status !== 'success'
              )
            })
          } else if (state && uploadId) {
            file.status = 'upload'
            file.uploadId = uploadId
            if (typeof successChunk === 'string' && successChunk) {
              // 前缀并转换为数字数组
              successChunk = successChunk
                .split(',')
                .map(chunk => +chunk.replace('chunk_', ''))
                .sort((a, b) => a - b)
            } else {
              successChunk = []
            }
            const addProps = {
              fileName: file.fileName,
              fileSizes: uploadResult.size,
              fileExt: uploadResult.fileExt,
              fileId: uploadResult.fileId,
              fileType: uploadResult.fileType,
              id: uploadResult.fileId,
              successChunk
            }
            Object.keys(addProps).forEach(key => {
              this.$set(file, key, addProps[key])
            })
            file.resume()
          } else {
            file.status = 'error'
          }
        } catch (error) {
          file.status = 'error'
        }
      } catch {
        file.status = 'error'
        this.$message.error('文件初始化错误，请重新上传')
      }
    },

    //  可选的函数用于根据 XHR 响应内容检测每个块是否上传成功了
    checkChunkUploadedByResponse(chunk) {
      const successChunk = chunk.file.successChunk || []
      return successChunk.includes(chunk.offset)
    },

    /**
     * 生成文件的 MD5 哈希值
     * @param {File} file - 要加密的文件对象
     * @returns {Promise} - 返回包含MD5哈希值的Promise
     */
    generateMd5(file) {
      return new Promise((resolve, reject) => {
        const chunkSize = 2 * 1024 * 1024 // 2MB
        const chunks = Math.ceil(file.size / chunkSize)
        let currentChunk = 0
        const spark = new SparkMD5.ArrayBuffer()
        const fileReader = new FileReader()

        fileReader.onload = e => {
          spark.append(e.target.result)
          currentChunk += 1
          if (currentChunk < chunks) {
            loadNext()
          } else {
            // 在文件内容加密完成后，追加文件名进行加密
            const nameBuffer = new TextEncoder().encode(file.name) // 将文件名转换为 ArrayBuffer
            spark.append(nameBuffer)
            const hash = spark.end()
            resolve(hash)
          }
        }

        fileReader.onerror = () => {
          reject(new Error('Error reading file'))
        }

        function loadNext() {
          const start = currentChunk * chunkSize
          const end = Math.min(start + chunkSize, file.size)
          if (start < file.size) {
            const blob = file.slice(start, end)
            fileReader.readAsArrayBuffer(blob)
          }
        }

        loadNext()
      })
    },

    // 加工分片上传请求体
    processParams(params, file, check) {
      return {
        chunk: `chunk_${params.chunkNumber - 1}`,
        uploadId: file.uploadId
      }
    },

    // 文件上传中
    onFileProgress(rootFile, file, chunk) {
      rootFile.status = 'upload'
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      const k = 1024
      const sizes = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      if (bytes < k) return '0 KB' // 最小单位为 kb
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      const size = bytes / Math.pow(k, i)
      const formattedSize = parseFloat(size.toFixed(2))
      return `${formattedSize} ${sizes[i - 1]}` // i-1 因为 kb 是最小单位
    },

    // 格式化时间为时分秒（可大于24个小时）
    formatTime(time) {
      return moment
        .duration(time, 'seconds')
        .format('H小时m分ss秒', {trim: false})
    },

    // 文件上传成功
    async onFileSuccess(rootFile, file, response) {
      try {
        file.status = 'merge'
        // 合并文件
        const {value = {}} = await completeUpload(rootFile.uploadId)
        if (value.mergeStatus === '1') {
          file.status = 'success'
          const addProps = {
            fileSizes: file.size,
            fileExt: value.fileExt,
            fileId: value.fileId,
            fileType: value.fileType
          }

          Object.keys(addProps).forEach(key => {
            this.$set(file, key, addProps[key])
          })

          setTimeout(_ => {
            this.saveLoading = this.form.fileList.some(
              i => i.status !== 'success'
            )
          })
        } else {
          file.bootstrap()
          file.status = 'mergeError'
        }
      } catch {
        file.bootstrap()
        file.status = 'mergeError'
      }
    },

    // 文件上传失败
    uploadError(rootFile, file, message, chunk) {
      rootFile.status = 'error'
      this.$message.error(`"${file.name}"上传失败`)
    },

    // 文件删除
    deleteFile(file) {
      this.$confirm('确定删除选中附件吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (file) {
            const index = this.form.fileList.findIndex(i => i.id === file.id)
            file.cancel && file.cancel()
            if (index !== -1) {
              this.form.fileList.splice(index, 1)
            }
          } else {
            this.currentDataDel.forEach(id => {
              const index = this.form.fileList.findIndex(i => i.id === id)
              if (index !== -1) {
                this.form.fileList[index]?.cancel()
                this.form.fileList.splice(index, 1)
              }
            })
          }
          this.saveLoading = this.form.fileList.some(
            i => i.status !== 'success'
          )
        })
        .catch(_ => _)
    },

    // 文件重新上传
    reUpload(file) {
      file.retry()
      this.initializeFile(file)
    },

    // 文件继续/暂停上传
    filePauseUpload(file) {
      if (file.paused) {
        file.status = 'upload'
        file.resume()
      } else {
        file.status = 'pause'
        file.pause()
      }
    },

    // 已上传文件点击
    downloadFile(file) {
      const fileId = file.fileId || file.response.fileId || '' // 文件ID
      const fileName = file.name || file.fileName || '' // 文件名
      if (!(fileId && fileName))
        return this.$message.warning('文件错误，请删除后重新上传')
      const browserOperablePattern = /\.(jpg|jpeg|png|gif|bmp|webp|pdf)$/i
      if (browserOperablePattern.test(fileName)) {
        window.open(this.previewUrl + fileId, '_blank')
      } else {
        window.open(this.downloadUrl + fileId, '_blank')
      }
    },

    // 预览文件
    async previewFile(file) {
      this.previewFileDialog = true
      this.fileInfo = file
    },

    // 保存
    handleSave() {
      this.$refs.form.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          const myInterFace = this.id ? api.tableEdit : api.tableAdd

          let {fileList = '', knowledgeTypeId = '', ...form} = this.form

          try {
            let {state, message} = await myInterFace({
              ...form,
              knowledgeTypeId: knowledgeTypeId || this.knowledgeTypeId,
              /*
               * fileType:
               * 1 视频  2 文本  3 图像  4 音频  5 其他
               * */
              regulatoryFile: JSON.stringify(
                fileList.map(file => ({
                  fileSizes: file.fileSizes,
                  fileExt: file.fileExt,
                  fileId: file.fileId,
                  fileType: file.fileType,
                  fileName: file.fileName,
                  name: file.name,
                  id: file.fileId
                }))
              )
            })

            if (state) {
              this.$emit('submit', this.id ? 'edit' : 'add')
              message = this.id ? '编辑' : '新增'
              this.$message.success(`法规文件${message}成功`)
              this.dialogVisible = false
            }
          } finally {
            this.saveLoading = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .new-edition-dialog {
  .el-dialog__body {
    max-height: 800px;
  }
}
</style>
