<template>
  <div>
    <Card :bordered="false" style="background-color: #E5F1FF;">
        <Row>
            <Col span="5">姓名：{{keyPersonUser.name}}</Col>
            <Col span="5">性别：{{ keyPersonUser.sex }}</Col>
            <Col span="5">身份证号：{{ keyPersonUser.card_no }}</Col>
            <Col span="4">民族：{{ keyPersonUser.folk }}</Col>
            <Col span="5">本人联系方式：{{ keyPersonUser.phone }}</Col>
        </Row>
    </Card>
    <div class="header-container" v-if="this.params.isHide">
        <div class="title-wrapper">
            <div class="title-bar"></div>
            <h3 class="title-text">本次评分</h3>
        </div>
    </div>
      <Table border :columns="columns" :data="dataList" v-if="this.params.isHide">
        <template slot-scope="{ row, index }" slot="select">
            <RadioGroup v-model="dataList[index].is_whether">
                <Radio label="1">有</Radio>
                <Radio label="2">无</Radio>
            </RadioGroup>
        </template>
        <template slot-scope="{ row, index }" slot="score">
            <InputNumber v-model="dataList[index].details" min="dataList[index].min_num" max="dataList[index].max_num" :placeholder="dataList[index].min_num + '至' + dataList[index].max_num" :disabled="dataList[index].is_whether === '2'"></InputNumber>
        </template>
        <template slot-scope="{ row, index }" slot="remarks">
            <Input v-model="dataList[index].remarks" placeholder="请填写备注" :disabled="dataList[index].is_whether === '2'"></Input>
        </template>
      </Table>
      <div class="disputetype" style="padding: 10px;" v-if="this.params.isHide">
        <div>
          <Row type="flex" class="">
              <Col span="6">
                <span>参会人员：</span>
                <Input v-model="ratingUsers" placeholder="请输入" style="width: 65%"/>
              </Col>
              <Col span="6">
                <span>评分时间：</span>
                <DatePicker type="datetime" v-model="ratingTime" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
              </Col>
              <Col span="6">
                <Upload
                  action="#"
                  :before-upload="beforeUpload"
                  :show-upload-list="false"
                >
                  <Button icon="ios-cloud-upload-outline">上传附件</Button>
                </Upload>
              </Col>
              <Col span="4" v-if="imgArr.length !== 0">
                <div v-if="imgArr.length" class="upload-preview">
                  <div
                    class="demo-upload-list"
                    style="display: inline-flex; justify-content: space-around;"
                    v-for="(item, index) in imgArr"
                    :key="index"
                  >
                    <span class="hover-effect" @click="checkFile(item,index)" title="查看附件">
                     附件{{index +1}}-{{item.originalFilename}}
                    </span>
                    <span style="margin-left: 3px;cursor: pointer;" title="删除附件" @click="delFile(item,index)">
                      <Icon type="md-close" />
                    </span>
                    <!-- <img :src="item.preview || item.url" />
                    <span class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleVisitImagePreview(item)" />
                      <Icon type="ios-trash-outline" @click.native="removeVisitImage(index)" />
                    </span> -->
                  </div>
                </div>
              </Col>
          </Row>
        </div>
      </div>
      <div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;" v-if="loding">
        <Poptip confirm title="确认提交？" placement="top" transfer @on-ok="saveRating">
          <Button type="primary" style="margin-top: 20px;" v-if="this.params.isHide">提交</Button>
        </Poptip>
        <Button style="margin-top: 20px;" @click="$router.go(-1)">返回</Button>
      </div>
      <div class="header-container">
        <div class="title-wrapper">
            <div class="title-bar"></div>
            <h3 class="title-text">本次历史评分</h3>
        </div>
    </div>
      <Table border :columns="summaryColumns" :data="SummaryRatingDetailsList" style="margin-top: 20px;">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="showSummaryRatingDetail(row)" >详情</Button>
        </template>
      </Table>
      <Page class="page_style" :total="params.totalRecord" :current="params.pageNo" :page-size="params.pageSize" @on-change="changePageNo" show-total show-sizer @on-page-size-change="size" />
      <Modal footer-hide v-model="indicatory" :title="modalName" width="900" >
        <Row :gutter="16" v-if="preview_imgs && preview_imgs.length > 0">
          <Col span="24">
            <p><strong>附件：</strong>
              <div
                class="demo-upload-list"
                v-for="(item, index) in preview_imgs"
                :key="index"
              >
                <span class="hover-effect" @click="checkFile(item,index)">
                 附件{{index +1}}-{{item.originalFilename}}
                </span>
              </div>
          </p>
          </Col>
        </Row>
        <Row :gutter="16">
         <Table border :columns="SummaryRatingDetailsListColumns" :data="SummaryDetailsList"></Table>
        </Row>
      </Modal>
    <Modal
      v-model="showErrorModal"
      title="校验错误"
      width="500px"
      :closable="false"
    >
      <div style="max-height: 300px; overflow-y: auto; padding: 10px;">
        <ul style="margin: 0; padding-left: 20px;">
          <!-- 循环展示所有错误信息 -->
          <li v-for="(error, index) in errorList" :key="index" style="color: #ff4d4f; margin: 8px 0;">
            {{ error }}
          </li>
        </ul>
      </div>
      <div slot="footer">
        <Button @click="showErrorModal = false">确认</Button>
      </div>
    </Modal>
    <Modal v-model="preview.visible" title="查看图片" width="600">
      <img v-if="preview.visible" :src="preview.url" alt="预览图片" style="width: 100%" />
    </Modal>
    <!-- 图片预览（全屏） -->
    <Modal v-model="imagePreview.visible" title="图片预览" :footer-hide="true" fullscreen :mask-closable="true">
      <div style="height: calc(100vh - 100px); display: flex; align-items: center; justify-content: center;">
        <img :src="imagePreview.src" style="max-width: 100%; max-height: 100%;" />
      </div>
    </Modal>
    <CImage ref="cImageRef" />
  </div>
</template>

<script>
import {
  selectRatingDictList, // 查询评分项
  getKeyPersonUser, // 查询重点人员信息
  saveRatingDetails, // 添加分数
  selectRatingSummaryByPersonIdList, // 评分详情
  selectSummaryRatingDetailsList // 历史详情
} from '@/api/key-person'
import { uploadFile } from '@/api/contradiction.js'
import axios from 'axios'
import xeUtil from 'xe-utils'
import CImage from '_c/c-image/index.vue'
export default {
  components: { CImage },
  data () {
    return {
      formItem: {}, // 存储每行的选择（键为行索引）
      keyPersonUser: {},
      loding: true,
      SummaryRatingDetailsList: [],
      SummaryDetailsList: [],
      modalName: '',
      params: this.$route.params,
      pageParams: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      columns: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '评估类别', key: 'evaluate_type', minWidth: 100, align: 'center' },
        { title: '评估选项', key: 'scoring_project', minWidth: 220, align: 'center' },
        { title: '选择', slot: 'select', align: 'center' },
        { title: '分值', slot: 'score', align: 'center' },
        { title: '备注', slot: 'remarks', align: 'left' }
      ],
      dataList: [],
      SummaryRatingDetailsListColumns: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '评估类别', key: 'evaluate_type', minWidth: 100, align: 'center' },
        { title: '评估选项', key: 'scoring_project', minWidth: 220, align: 'center' },
        { title: '选择', key: 'is_whether', align: 'center' },
        { title: '分值', key: 'details', align: 'center' },
        { title: '备注', key: 'rating_remarks', align: 'left' }
      ],
      indicatory: false,
      summaryColumns: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '评分人员', key: 'rating_personnel', minWidth: 100, align: 'center' },
        { title: '评分部门', key: 'rating_company', minWidth: 100, align: 'center' },
        { title: '参会人员', key: 'rating_users', minWidth: 100, align: 'center' },
        { title: '评分时间', key: 'rating_time', minWidth: 100, align: 'center' },
        { title: '评分风险等级', key: 'rating_type', minWidth: 100, align: 'center' },
        { title: '分数', key: 'rating', minWidth: 100, align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      showErrorModal: false, // 控制错误弹窗显示/隐藏
      errorList: [], // 存储所有错误信息
      ratingUsers: '', // 存储参会人员
      ratingTime: '', // 存储评分时间
      visit_img_list: [],
      preview: {
        visible: false,
        url: ''
      },
      imagePreview: { visible: false, src: '' },
      preview_imgs: [],
      suffixList: ['jpg', 'jpeg', 'png'],
      imgArr: [],
      urlList: []
    }
  },
  methods: {
    init () {
      this.ratingTime = xeUtil.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss')
      selectRatingDictList({ rating_dict_type: this.params.ratingDictType }).then((ret) => {
        if (ret.data.errcode === 0) {
          // this.dataList = ret.data.data
          ret.data.data.forEach(item => {
            this.dataList.push({
              ...item, // 继承原始数据中的字段（如 min_num、max_num）
              is_whether: '1', // 默认选中“有”
              details: null // 初始化详情为空
            })
          })
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
      getKeyPersonUser(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.keyPersonUser = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    summaryByPerson () {
      this.pageParams.id = this.params.id
      this.pageParams.rating_history_id = this.params.historyId
      // 评分完成重新查询一下历史id
      selectRatingSummaryByPersonIdList(this.pageParams).then((ret) => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.SummaryRatingDetailsList = ret.data.data.results
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    size (pageSize) {
      this.pageParams.pageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo (pageNo) {
      this.pageParams.pageNo = pageNo
      this.summaryByPerson(this.params)
    },
    showSummaryRatingDetail (row) {
      this.modalName = '历史评分（' + String(row.rating_custom_time == null ? row.rating_time : row.rating_custom_time) + '）' + (row.rating_users == null ? '' : '参会人员(' + row.rating_users + ')')
      this.preview_imgs = []
      let imgs = []
      try {
        imgs = (row.rating_img && row.rating_img.length > 2) ? JSON.parse(row.rating_img) : []
      } catch (e) {
        imgs = []
      }
      if (imgs.length > 0) {
        imgs.forEach(img => {
          this.getImgUrl(img.uuid, img.suffix, img.originalFilename, img.url)
        })
      }
      this.indicatory = true
      selectSummaryRatingDetailsList({ key_person_rating_summary_id: row.id }).then((ret) => {
        if (ret.data.errcode === 0) {
          this.SummaryDetailsList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    getImgUrl (uuid, suffix, originalFilename, imgurl) {
      let that = this
      axios({
        method: 'get',
        responseType: 'arraybuffer',
        url:
          '/api/ac/jilinsscgsdp/uploadService/getObsObject?uuid=' +
          uuid +
          '&&suffix=' +
          suffix
      }).then(function (res) {
        // 构建完整的附件对象，包含所有必要信息
        let fileObj = {
          uuid: uuid,
          suffix: suffix,
          originalFilename: originalFilename,
          url: imgurl
        }
        if (that.suffixList.includes(suffix)) {
          const base64String = btoa(
            new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          )
          fileObj.url = 'data:image/png;base64,' + base64String
        } else {
          fileObj.url = res.data
        }
        that.preview_imgs.push(fileObj)
        // 调用下载方法，把后端传过来的流传给fileDownload方法
        // this.fileDownload(res.data, fileName)
      })
    },
    // 1. 新增：表单校验方法
    // 1. 修改校验方法：收集所有错误信息
    validateForm () {
      this.errorList = [] // 清空历史错误
      this.dataList.forEach((item, index) => {
        if (item.is_whether === '1') {
          // 空值校验
          if (item.details === null || item.details === undefined) {
            this.errorList.push(
              `第${index + 1}项【${item.scoring_project}】选择“有”，请填写分值`
            )
          } else if (item.details < item.min_num || item.details > item.max_num) {
            // 范围校验（仅在有值时检查，避免空值重复提示）
            this.errorList.push(
              `第${index + 1}项【${item.scoring_project}】分值需在${item.min_num}-${item.max_num}之间`
            )
          } else if (item.remarks === null || item.remarks === undefined || item.remarks.trim() === '') {
            // 备注空值校验
            this.errorList.push(
              `第${index + 1}项【${item.scoring_project}】选择“有”，请填写备注`
            )
          }
        }
      })
      if (this.ratingUsers === null || this.ratingUsers === undefined || this.ratingUsers.trim() === '') {
        this.errorList.push(`请填写参会人员`)
      }
      if (this.ratingTime === null || this.ratingTime === undefined || this.ratingTime === '') {
        this.errorList.push(`请填写评分时间`)
      }
      // 若有错误，显示弹窗；否则返回校验通过
      if (this.errorList.length > 0) {
        this.showErrorModal = true
        return false
      }
      return true
    },
    // 2. 修改：提交方法（先校验，再提交）
    // 2. 提交方法（逻辑不变，依赖上述校验）
    saveRating () {
      if (!this.validateForm()) {
        return // 校验失败，终止提交
      }
      // 原有提交逻辑不变...
      this.loding = false
      const ratingDetailsList = this.dataList
      // 第二步：筛选数据——仅保留 is_whether = '1'（有）的项，其他不传给后台
      // const ratingDetailsList = this.dataList.filter(item => {
      //   return item.is_whether === '1' // 只保留“有”的记录
      // })
      this.params.ratingDetailsList = ratingDetailsList
      this.params.ratingUsers = this.ratingUsers
      const timeStr = this.normalizeVisitTimeValue(this.ratingTime)
      this.params.ratingTime = timeStr
      let imgs = this.imgArr.map(img => ({
        uuid: img.uuid,
        originalFilename: img.originalFilename,
        suffix: img.suffix
      }))
      const visitImg = JSON.stringify(imgs)
      this.params.ratingImg = visitImg
      saveRatingDetails(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '评分成功' })
          this.summaryByPerson()
        } else {
          this.$Notice.error({ title: '评分失败', desc: ret.data.errmsg })
        }
        this.loding = true
      }).catch(() => {
        this.loding = true
        this.$Notice.error({ title: '网络异常', desc: '请稍后重试' })
      })
    },
    normalizeVisitTimeValue (value) {
      if (!value && value !== 0) return ''
      if (value instanceof Date) {
        return Number.isNaN(value.getTime()) ? '' : this.formatDateSegments(value)
      }
      if (typeof value === 'number' && !Number.isNaN(value)) {
        const fromNumber = new Date(value)
        return Number.isNaN(fromNumber.getTime()) ? '' : this.formatDateSegments(fromNumber)
      }
      if (typeof value === 'string') {
        const trimmed = value.trim()
        if (!trimmed) return ''
        const direct = new Date(trimmed)
        if (!Number.isNaN(direct.getTime())) return this.formatDateSegments(direct)
        const withSlash = new Date(trimmed.replace(/-/g, '/'))
        if (!Number.isNaN(withSlash.getTime())) return this.formatDateSegments(withSlash)
        const match = trimmed.match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?$/)
        if (match) {
          const [, y, m, d, hh = '00', mm = '00', ss = '00'] = match
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
        return ''
      }
      if (value && typeof value === 'object' && typeof value.valueOf === 'function') {
        const timestamp = value.valueOf()
        if (!Number.isNaN(timestamp)) {
          const fromValue = new Date(timestamp)
          return Number.isNaN(fromValue.getTime()) ? '' : this.formatDateSegments(fromValue)
        }
      }
      return ''
    },
    formatDateSegments (d) {
      const y = d.getFullYear()
      const mm = String(d.getMonth() + 1).padStart(2, '0')
      const dd = String(d.getDate()).padStart(2, '0')
      const HH = String(d.getHours()).padStart(2, '0')
      const MM = String(d.getMinutes()).padStart(2, '0')
      const SS = String(d.getSeconds()).padStart(2, '0')
      return `${y}-${mm}-${dd} ${HH}:${MM}:${SS}`
    },
    // beforeUpload_old (file) {
    //   const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp', 'image/gif', 'image/webp']
    //   const isValidType = allowedTypes.includes(file.type) || file.type.startsWith('image/') || file.type.endsWith('docx') || file.type.endsWith('pdf')
    //   const isLt5M = file.size / 1024 / 1024 < 5
    //   if (!isValidType) {
    //     this.$Message.error('请上传图片或PDF格式文件')
    //     return false
    //   }
    //   if (!isLt5M) {
    //     this.$Message.error('文件大小不能超过5MB！')
    //     return false
    //   }
    //   const tempItem = {
    //     uid: `${Date.now()}_${Math.random().toString(16).slice(2)}`,
    //     name: file.name,
    //     status: 'uploading',
    //     preview: '',
    //     url: ''
    //   }
    //   this.visit_img_list.push(tempItem)
    //   const reader = new FileReader()
    //   reader.onload = (e) => {
    //     this.$set(tempItem, 'preview', e.target.result)
    //   }
    //   reader.readAsDataURL(file)
    //   this.uploadFile(file, tempItem)
    //   return false
    // },
    checkFile (item, index) {
      console.log('item, index>>', item, index)
      // window.open
      if (this.suffixList.includes(item.suffix)) {
        this.$refs.cImageRef.init({ src: item.url })
      } else if (item.suffix === 'pdf') {
        // 关键步骤：ArrayBuffer 转 Blob（指定 MIME 类型为 PDF）
        const pdfBlob = new Blob([item.url], { type: 'application/pdf' })
        // 生成 Blob URL（无长度限制，浏览器原生支持）
        const blobUrl = URL.createObjectURL(pdfBlob)
        // 打开预览（window.open 直接用 Blob URL，不会被截断）
        window.open(blobUrl, '_blank') // _blank 新建标签页

        // 可选：页面卸载时释放 Blob URL（避免内存泄漏）
        window.addEventListener('unload', () => {
          URL.revokeObjectURL(blobUrl)
        })
      } else {
        window.open(item.url, '_blank')
      }
      console.log(item, index)
    },
    delFile (item, index) {
      this.urlList.splice(index, 1)
      this.imgArr.splice(index, 1)
      console.log(item, index)
    },
    // 上传图片前转base64
    beforeUpload (file) {
      const fileType = file.name.split('.').pop()
      const fileTypes = [...this.suffixList, 'pdf']
      if (!fileTypes.includes(fileType)) {
        this.$Message.error({
          content: `请上传${fileTypes.join('、')}格式的文件`,
          duration: 5
        })
        return
      }
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        // 初始时先保存文件名，上传成功后再更新为服务器返回的文件名
        this.imgArr.push({
          url: e.target.result,
          originalFilename: file.name,
          suffix: file.name.split('.').pop()
        })
      }
      console.log(this.imgArr, 'loadfile')
      let formdata = new FormData()
      formdata.append('file', file)
      formdata.append('fileName', file.name)
      formdata.append('json', JSON.stringify({ business_type: 'jlEvent' }))
      console.log(formdata, 'formdata')
      uploadFile(formdata).then((res) => {
        let len = this.imgArr.length
        // 使用 $set 确保 Vue 响应式更新
        this.$set(this.imgArr[len - 1], 'uuid', res.data.data.uuid)
        this.$set(this.imgArr[len - 1], 'suffix', res.data.data.suffix)
        this.$set(this.imgArr[len - 1], 'originalFilename', res.data.data.originalFilename)
        this.urlList.push(res.data.data)
        // setTimeout(this.msg, 3000)
      })
      // let that = this
      // setTimeout(function(){
      //   let len = that.imgArr.length
      //   that.$set(that.imgArr[len - 1], 'uuid', '0'+this.imgArr.length)
      //   that.urlList.push(that.imgArr[len - 1].url)
      // }, 1000)
      console.log(this.imgArr, 'this.imgArr')
    }
    // async uploadFile (file, targetItem) {
    //   const formData = new FormData()
    //   formData.append('file', file)
    //   try {
    //     const res = await uploadFile(formData)
    //     if (res && res.data && res.data.errcode === 0) {
    //       const url = this.extractUploadUrl(res.data)
    //       if (url) {
    //         if (targetItem) {
    //           this.$set(targetItem, 'url', url)
    //           this.$set(targetItem, 'status', 'finished')
    //         } else {
    //           this.visit_img_list.push({
    //             name: file.name,
    //             url: url,
    //             status: 'finished'
    //           })
    //         }
    //         this.$Message.success('上传成功')
    //       }
    //     } else {
    //       this.$Message.error((res && res.data && res.data.errmsg) || '上传失败')
    //       this.removeVisitImageByItem(targetItem)
    //     }
    //   } catch (e) {
    //     console.error('上传失败', e)
    //     this.$Message.error('上传失败')
    //     this.removeVisitImageByItem(targetItem)
    //   }
    // },
    // removeVisitImage (index) {
    //   if (index < 0) return
    //   this.visit_img_list.splice(index, 1)
    // },
    // removeVisitImageByItem (item) {
    //   if (!item) return
    //   const idx = this.visit_img_list.indexOf(item)
    //   if (idx > -1) {
    //     this.visit_img_list.splice(idx, 1)
    //   }
    // },
    // handleVisitImagePreview (item) {
    //   if (!item) return
    //   const ss = item.url.split('.')
    //   const _suffix = ss.length > 1 ? ss[1] : ''
    //   const allowedTypes = ['jpeg', 'png', 'jpg', 'bmp', 'gif', 'webp']
    //   if (!allowedTypes.includes(_suffix)) return
    //   const url = item.url || item.preview
    //   if (!url) return
    //   this.preview.url = url
    //   this.preview.visible = true
    // },
    // checkFile (item, index) {
    //   window.open(item.url || item, '_blank')
    //   console.log(item, index)
    // },
    // delFile (item, index) {
    //   this.visit_img_list.splice(index, 1)
    //   console.log(item, index)
    // },
    // extractUploadUrl (responseData) {
    //   if (!responseData) return ''
    //   if (typeof responseData === 'string') return responseData
    //   const data = responseData.data || {}
    //   return data.url || data.fileUrl || data.file_url || responseData.url || ''
    // },
    // openImagePreview (src) {
    //   if (!src) return
    //   this.imagePreview.src = src
    //   this.imagePreview.visible = true
    // }
  },
  mounted () {
    // this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.summaryByPerson()
  }
}
</script>

<style scoped>
.header-container {
  margin-bottom: 16px; /* 可选：调整与下方内容的间距 */
  margin-top: 10px;
}

.title-wrapper {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.title-bar {
  width: 4px;
  height: 16px;
  background-color: #2d8cf0; /* iView 主色调蓝色 */
  margin-right: 8px; /* 调整与文字的间距 */
}

.title-text {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #17233d; /* iView 标题文字颜色 */
}

.page_style {
  margin-top: 10px;
  text-align: right;
}
.hover-effect {
  cursor: pointer; /* 小手效果 */
  transition: all 0.3s ease; /* 添加过渡效果使变化更平滑 */
}

.hover-effect:hover {
  color: #1890ff; /* 文字变蓝色 */
  background-color: #e6f7ff; /* 背景变浅蓝色 */
  border-color: #1890ff; /* 边框变蓝色 */
}
</style>
