<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <!-- 搜索部分 -->
      <div style="margin-top: 7px; margin-bottom: 7px" @keyup.enter="searchTable3">
        <span class="show-text">物料编码:</span>
        <el-select v-if="processprodutc" v-model="partNameValue3" style="width:200px;margin-left: 10px" placeholder="生产工艺物料名称" size="small" filterable clearable remote :remote-method="searchTable" >
          <el-option v-for="item in tableData3" :key="item.物料编码" :label="item.物料编码" :value="item.物料编码" />
        </el-select>
        <el-select v-else v-model="partNameValue3" style="width:200px;margin-left: 10px" placeholder="物料名称" size="small" filterable clearable remote :remote-method="searchTable" >
          <el-option v-for="item in tableData3" :key="item.物料编码" :label="item.物料编码" :value="item.物料编码" />
        </el-select>
        <span class="show-text">生产订单:</span>
        <el-input v-model="orderNo" placeholder="请输入生产订单" clearable style="width: 150px;margin-right: 10px" />
        <span class="show-text">计划号:</span>
        <el-input v-model="plannum" placeholder="请输入计划号" clearable style="width: 150px;margin-right: 10px" />
        <span class="show-text">任务状态:</span>
        <el-select v-model="taskstatus" placeholder="请选择">
          <el-option key='0' label="全部" value="0" />
          <el-option key='1' label="已打印" value="1" />
          <el-option key='2' label="未打印" value="2" />
        </el-select>
        
        <span class="show-text">拣配状态:</span>
        <el-select v-model="pickingstatus" placeholder="请选择">
          <el-option key='0' label="全部" value="0" />
          <el-option key='1' label="已拣配" value="1" />
          <el-option key='2' label="未拣配" value="2" />
        </el-select>
        </br>
        </br>
        <span class="show-text">属性:</span>
        <el-select v-model="orderstatus" placeholder="请选择">
          <el-option
            key='0'
            label="全部"
            value="0">
          </el-option>
          <el-option
            key='1'
            label="机加件"
            value="1">
          </el-option>
          <el-option
            key='2'
            label="装配件"
            value="2">
          </el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 10px;padding: 8px 15px;" @click="searchTable3">查询</el-button>
        <el-button icon="el-icon-printer" type="primary" plain size="small" style="margin-left: 10px;padding: 8px 15px;" @click="handlePrint" :disabled="multipleSelection.length === 0">打印</el-button>
      </div>
      
      <!-- 数据表格 -->
      <el-table
        v-show="!checked"
        :data="tableData"
        highlight-current-row
        border
        size="small"
        style="margin-top: 10px"
        height="670px"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="生产订单" align="center" prop="订单编号" width="80" />
        <el-table-column label="计划号" align="center" prop="计划号" width="80" />
        <el-table-column label="物料名称" align="center" prop="零件名称" width="250" />
        <el-table-column label="物料编码" align="center" prop="零件图号" width="200" />
        <el-table-column label="加工数量" align="center" prop="计划数量" width="80" />
        <el-table-column label="打印次数" align="center" prop="周转单打印次数" width="80" />
      </el-table>
      
      <!-- 分页 -->
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[20, 50, 100]"
          :page-size="pageSize"
          :total="total1"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges" />
      </div>

      <!-- 打印内容区域 - 默认隐藏 -->
      <div id="print-content" style="display: block;">
        <div v-for="(printData, index) in printDataList" :key="index" class="print-page">
          <div style="margin-bottom: 10px;">
            <div style="display: flex;">
              <div style="width: 30%; height: 20px; background: url(/static/img/logo.6454a812.png); background-size: contain; background-repeat: no-repeat;"></div>
              <div style="width: 45%; text-align: center;font-size: 18px;">大连元利流体</div>
              <div style="width: 25%; text-align: right; ">
                <img 
                  v-if="printData.orderQRCode" 
                  :src="printData.orderQRCode" 
                  :alt="'QR Code for Order: ' + printData.orderInfo.订单编号"
                  style="width: 40px; height: 40px; margin-left: auto;" />
              </div>
            </div>
            <div style="text-align: center;">工序周转单</div>
          </div>
          <div style="display: flex;">
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">生产订单</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.订单编号 }}</span>
            </div>
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">合同编号</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.合同号 }}</span>
            </div>
          </div>
          <div style="display: flex;">
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">重要程度</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.加急状态 }}</span>
            </div>
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">物料名称</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.零件名称 }}</span>
            </div>
          </div>
          <div style="display: flex;">
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">加工数量</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.计划数量 }}</span>
            </div>
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">要求日期</span>
              <span style="font-size: 10px;">{{ formatDate(printData.orderInfo.计划完成) }}</span>
            </div>
          </div>
          <div style="display: flex;">
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">计划开始</span>
              <span style="font-size: 10px;">{{ formatDate(printData.orderInfo.计划开始)}}</span>
            </div>
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">计划号</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.计划号}}</span>
            </div>
          </div>
          <div style="display: flex;">
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">物料编码</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.零件图号 }}</span>
            </div>
            <div style="width: 50%;">
              <span style="width: 35%;font-size: 10px;">原料编码</span>
              <span style="font-size: 10px;">{{ printData.orderInfo.原料编码 }}</span>
            </div>
          </div>
          
          <!-- 显示页码 -->
          <div v-if="printData.totalPages > 1" style="font-size: 8px; text-align: right; margin-bottom: 5px;">
            第 {{ printData.pageNumber }} 页 / 共 {{ printData.totalPages }} 页
          </div>
          
          <div style="font-size: 10px ; text-align: center; line-height: 20px; border: 1px solid; border-bottom: 0; ">
            <div style="display: flex; ">
              <div style="width: 10%; border-right:1px solid; border-bottom: 1px solid;">序</div>
              <div style="width: 20%; border-right:1px solid; border-bottom: 1px solid;">工序名称</div>
              <div style="width: 15%; border-right:1px solid; border-bottom: 1px solid;">工时</div>
              <div style="width: 15%; border-right:1px solid; border-bottom: 1px solid;">工位</div>
              <div style="width: 25%; border-right:1px solid; border-bottom: 1px solid;">条码</div>
              <div style="width: 15%; border-bottom: 1px solid;">检验</div>
            </div>
            <div v-for="value in printData.processList" :key="value.id" style="display: flex; border-bottom: 1px solid;">
              <div style="width: 10%; border-right:1px solid">{{ value.工艺顺序 }}</div>
              <div style="width: 20%; border-right:1px solid">{{ value.工艺名称 }}</div>
              <div style="width: 15%; border-right:1px solid">{{ value.标准工时 }}</div>
              <div style="width: 15%; border-right:1px solid">{{ value.指派对象 }}</div>
              <div style="width: 25%; border-right:1px solid; text-align: center; padding: 2px 0;">
                <img 
                  v-if="value.qrCodeDataUrl" 
                  :src="value.qrCodeDataUrl" 
                  :alt="'QR Code for TaskAID: ' + value.TaskAID"
                  style="width: 40px; height: 40px; margin: 0 auto; display: block;" />
                <!-- <div v-else style="color: #999; font-size: 8px;">TaskAID: {{ value.TaskAID || '无' }}</div> -->
              </div>
              <div style="width: 15%;"></div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import QRCode from 'qrcode'

export default {
  data() {
    return {
      processprodutc: true,
      dialogVisible1: false,
      hadFile1: [],
      processValue: '',
      dialogName: true,
      orderNumberTypeValue: '',
      orderNumberType: [],
      productpartNameValue: '',
      productpartName: [],
      partNameValue: '',
      partName: '',
      hadFile: [],
      fileList: [],
      tableData1: [],
      dialogVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      checked: false,
      loading: false,
      total: 0,
      total1: 0,
      tableData: [],
      tableData2: [],
      pageCurrent: 1,
      pageSize: 20,
      orderName: '',
      order: '',
      partNameValue1: '',
      tableData3: '',
      materialarr: [],
      partNameValue3: '',
      selectedRow: '',
      tableData4: '',
      qrCodeUrl: '',
      multipleSelection: [],
      printDataList: [],
      isPrinting: false,
      taskstatus: '2',
      pickingstatus:'1',
      orderNo: '',
      plannum:'',
      qrCodeCache: new Map(),
      maxProcessesPerPage: 7, // 每页最多显示8个工序
      orderstatus:'1',
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchTable()
    this.searchTable3()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    
    // 二维码生成函数
    async generateQRCode(text) {
      if (!text) return ''
      
      const cacheKey = String(text)
      
      if (this.qrCodeCache.has(cacheKey)) {
        return this.qrCodeCache.get(cacheKey)
      }
      
      try {
        const qrCodeDataUrl = await QRCode.toDataURL(cacheKey, {
          width: 120,
          margin: 1,
          color: {
            dark: '#000000',
            light: '#FFFFFF'
          },
          errorCorrectionLevel: 'M'
        })
        
        this.qrCodeCache.set(cacheKey, qrCodeDataUrl)
        return qrCodeDataUrl
        
      } catch (err) {
        console.error('二维码生成失败:', err)
        return ''
      }
    },
    
    formatDate(date) {
      if (!date) return ''
      return date.split(' ').length > 1 ? date.split(' ')[0] : date
    },

    async getRawMaterialCodes(orderNo) {
      const param = []
      param.push(['订单编号', orderNo])
      const Data = this.CreateData('11', '工艺管理_获取物料原料信息', param)
      const response = await this.ExecDatabase(Data)
      const rawMaterialCodes = (response.data || [])
        .filter(element => element.U_MoType === '机加件' && element.子件编码)
        .map(element => String(element.子件编码))

      return Array.from(new Set(rawMaterialCodes)).join('、')
    },
    
    handleRowClick(row) {
      this.selectedRow = row
    },
    
    searchTable(query = '') {
      this.loading = true
      const param = [["过滤", query]]
      const Data = this.CreateData('11', 'MES_ProcessManagement_PartGet', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData3 = response.data
        this.loading = false
      })
    },
    
    // 将工序列表分割成多个页面
    splitProcessListToPages(processList, orderInfo) {
      const pages = []
      
      // 计算每页能显示的工序数量（根据实际测试调整）
      const maxProcessesPerPage = this.maxProcessesPerPage
      
      // 如果工序数量超过单页容量，进行分页
      if (processList.length <= maxProcessesPerPage) {
        // 单页
        pages.push({
          orderInfo: orderInfo,
          processList: processList,
          pageNumber: 1,
          totalPages: 1
        })
      } else {
        // 多页
        const totalPages = Math.ceil(processList.length / maxProcessesPerPage)
        
        for (let i = 0; i < processList.length; i += maxProcessesPerPage) {
          const pageNumber = Math.floor(i / maxProcessesPerPage) + 1
          const pageProcessList = processList.slice(i, i + maxProcessesPerPage)
          
          pages.push({
            orderInfo: orderInfo,
            processList: pageProcessList,
            pageNumber: pageNumber,
            totalPages: totalPages
          })
        }
      }
      
      return pages
    },
    
    // 准备打印数据 - 自动分页
    async preparePrintData() {
      this.printDataList = []
      
      for (const item of this.multipleSelection) {
        const param = [
          ['物料编号', [item.零件图号]],
          ['订单编号', [item.订单编号]]
        ]
        
        const Data = this.CreateData('11', '工艺管理_工艺查询_查询生产工艺', param)
        const response = await this.ExecDatabase(Data)
        
        if (response.data && response.data.length > 0) {
          const orderInfo = {
            ...response.data[0],
            原料编码: await this.getRawMaterialCodes(item.订单编号)
          }
          const processList = []
          
          // 为整个订单生成二维码
          const orderQRCode = await this.generateQRCode(`${item.订单编号}`)
          // 为每个工序生成二维码
          for (const process of response.data) {
            const processCopy = { ...process }
            if (process.TaskAID) {
              processCopy.qrCodeDataUrl = await this.generateQRCode(process.TaskAID)
            } else {
              processCopy.qrCodeDataUrl = ''
            }
            processList.push(processCopy)
          }
          
          // 按工艺顺序排序
          processList.sort((a, b) => (a.工艺顺序 || 0) - (b.工艺顺序 || 0))
          
          // 分割为多个页面
          const pages = this.splitProcessListToPages(processList, orderInfo)
          pages.forEach(page => {
            page.orderQRCode = orderQRCode
          })
          this.printDataList.push(...pages)

        }
      }
      
      if (this.printDataList.length === 0) {
        throw new Error('未找到对应的工艺数据')
      }
      
      // 等待DOM更新
      await this.$nextTick()
    },
    
    // 简化的打印函数
    async executePrint() {
      return new Promise((resolve, reject) => {
        try {
          // 创建打印窗口
          const printWindow = window.open('', '_blank')
          if (!printWindow) {
            reject(new Error('无法打开打印窗口，请检查浏览器设置'))
            return
          }
          
          // 生成打印内容
          const printContent = document.getElementById('print-content').innerHTML
          
          // 设置打印页面样式
          const printStyles = `
            <style>
              @page {
                size: 9cm 13cm !important;
                margin: 0 !important;
              }
              
              @media print {
                body { 
                  margin: 0 !important; 
                  padding: 0 !important; 
                  width: 9cm !important;
                  height: 13cm !important;
                  font-size: 10px !important;
                  background: white !important;
                  -webkit-print-color-adjust: exact !important;
                  print-color-adjust: exact !important;
                }
                
                .print-page {
                  width: 9cm !important;
                  height: 13cm !important;
                  margin: 0 !important;
                  padding: 5px !important;
                  box-sizing: border-box !important;
                  page-break-after: always !important;
                  break-after: page !important;
                  position: relative !important;
                  overflow: hidden !important;
                }
                
                /* 最后一个页面不需要强制分页 */
                .print-page:last-child {
                  page-break-after: auto !important;
                  break-after: auto !important;
                }
                
                /* 确保每个页面都从新页开始 */
                .print-page {
                  page-break-before: always !important;
                }
                
                /* 第一个页面不需要在前面分页 */
                .print-page:first-child {
                  page-break-before: auto !important;
                }
                
                img {
                  width: 40px !important;
                  height: 40px !important;
                  display: block !important;
                  margin: 0 auto !important;
                  max-width: 100% !important;
                }
                
                /* 表格样式 */
                .print-page > div:nth-last-child(2) {
                  max-height: calc(13cm - 160px) !important;
                  overflow: hidden !important;
                }
                
                /* 确保表格行不被分割 */
                .print-page > div:nth-last-child(2) > div {
                  page-break-inside: avoid !important;
                  break-inside: avoid !important;
                }
                
                /* 隐藏不必要的内容 */
                .no-print {
                  display: none !important;
                }
              }
              
              @media screen {
                body {
                  background: #f5f5f5;
                  padding: 20px;
                  font-family: Arial, sans-serif;
                }
                
                .print-page {
                  width: 9cm;
                  height: 13cm;
                  margin: 10px auto;
                  padding: 10px;
                  border: 1px solid #ccc;
                  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
                  box-sizing: border-box;
                  background: white;
                  position: relative;
                }
                
                /* 屏幕预览时分页线 */
                .print-page:not(:last-child)::after {
                  content: '';
                  position: absolute;
                  bottom: -10px;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 80%;
                  height: 1px;
                  background: linear-gradient(to right, transparent, #999, transparent);
                  font-size: 8px;
                }
                
                img {
                  width: 40px;
                  height: 40px;
                  display: block;
                  margin: 0 auto;
                }
                
                /* 屏幕预览时显示页码 */
                .print-page::before {
                  content: '页面 ' attr(data-page) ' / ' attr(data-total);
                  position: absolute;
                  bottom: 2px;
                  right: 5px;
                  font-size: 8px;
                  color: #999;
                }
              }
            </style>
          `
          
          // 为每个页面添加页码数据
          let enhancedContent = printContent
          const pageDivs = enhancedContent.match(/<div class="print-page"/g)
          if (pageDivs) {
            let pageIndex = 1
            enhancedContent = enhancedContent.replace(/<div class="print-page"/g, (match) => {
              return `<div class="print-page" data-page="${pageIndex}" data-total="${pageDivs.length}"`
            })
          }
          
          // 写入打印内容
          printWindow.document.write(`
            <!DOCTYPE html>
            <html>
              <head>
                <title>工序周转单打印</title>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                ${printStyles}
              </head>
              <body>
                ${enhancedContent}
                <script>
                  // 确保页面完全加载后再打印
                  window.onload = function() {
                    // 添加打印按钮（仅屏幕预览）
                    // if (!window.matchMedia || !window.matchMedia('print').matches) {
                    //   const printBtn = document.createElement('button');
                    //   printBtn.innerHTML = '打印';
                    //   printBtn.style.position = 'fixed';
                    //   printBtn.style.top = '10px';
                    //   printBtn.style.right = '10px';
                    //   printBtn.style.zIndex = '9999';
                    //   printBtn.style.padding = '10px 20px';
                    //   printBtn.style.background = '#409EFF';
                    //   printBtn.style.color = 'white';
                    //   printBtn.style.border = 'none';
                    //   printBtn.style.borderRadius = '4px';
                    //   printBtn.style.cursor = 'pointer';
                    //   printBtn.onclick = function() {
                    //     window.print();
                    //   };
                    //   document.body.appendChild(printBtn);
                    // }
                    
                    // 检查页面内容
                    const pages = document.querySelectorAll('.print-page');
                    console.log('总页数:', pages.length);
                    pages.forEach((page, index) => {
                      console.log(\`页面 \${index + 1} 高度: \${page.scrollHeight}px\`);
                    });
                    
                    // 自动打印
                    setTimeout(() => {
                      try {
                        window.print();
                      } catch (e) {
                        console.error('自动打印失败:', e);
                        alert('自动打印失败，请手动点击打印按钮');
                      }
                    }, 1000);
                  };
                  
                  // 打印后关闭窗口
                  window.onafterprint = function() {
                    setTimeout(() => {
                      window.close();
                    }, 100);
                  };
                  
                  // 备份：如果10秒后还没打印，允许手动打印
                  setTimeout(() => {
                    if (!window.matchMedia || !window.matchMedia('print').matches) {
                      console.log('可以手动点击打印按钮');
                    }
                  }, 10000);
                <\/script>
              </body>
            </html>
          `)
          
          printWindow.document.close()
          
          // 监听窗口关闭
          printWindow.onbeforeunload = () => {
            resolve()
          }
          
          // 备用超时
          setTimeout(() => {
            if (!printWindow.closed) {
              printWindow.close()
              resolve()
            }
          }, 30000)
          
        } catch (error) {
          reject(error)
        }
      })
    },
    
    // 记录打印次数
    async recordPrintCount() {
      try {
        const orderNumbers = this.multipleSelection.map(item => item.订单编号)
        
        if (orderNumbers.length === 0) {
          return
        }

        const param = [
          ['订单编号列表', orderNumbers.join(',')]
        ]
        
        const Data = this.CreateData('11', '工艺管理_工艺查询_更新打印次数', param)
        const response = await this.ExecDatabase(Data)
        this.searchTable3()
        
        if (response && response.success) {
          console.log(`成功更新${orderNumbers.length}个订单的打印次数`)
        }
      } catch (error) {
        console.error('记录打印次数失败:', error)
      }
    },
    
    // 整合打印流程
    async handlePrint() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要打印的数据')
        return
      }

      if (this.isPrinting) {
        this.$message.warning('正在打印中，请稍候...')
        return
      }

      this.isPrinting = true
      this.loading = true
      
      try {
        // 1. 获取打印数据并生成二维码
        this.$message.info('正在准备打印数据...')
        await this.preparePrintData()
        
        // 2. 检查总页数
        const totalPages = this.printDataList.length
        if (totalPages > 10) {
          const confirmPrint = await this.$confirm(`本次打印将生成 ${totalPages} 页，确认继续吗？`, '提示', {
            confirmButtonText: '继续打印',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => false)
          
          if (!confirmPrint) {
            this.isPrinting = false
            this.loading = false
            this.printDataList = []
            return
          }
        }
        
        // 3. 执行打印
        this.$message.info('正在打开打印预览...')
        await this.executePrint()
        
        // 4. 更新打印次数
        await this.recordPrintCount()
        
        this.$message.success('打印完成')
        
        // 5. 清理打印数据
        this.printDataList = []
        
      } catch (error) {
        console.error('打印流程失败:', error)
        this.$message.error('打印失败: ' + (error.message || '请检查打印机设置'))
      } finally {
        this.loading = false
        this.isPrinting = false
        // 确保清理打印数据
        setTimeout(() => {
          this.printDataList = []
        }, 1000)
      }
    },
    
    searchTable3() {
      this.loading = true
      const param = [
        ['物料编号', this.partNameValue3],
        ['PageCurrent', this.pageCurrent],
        ['PageSize', this.pageSize],
        ['PageCount', '1111', 'int', '1'],
        ['ItemCount', '1111', 'int', '1'],
        ['状态', this.taskstatus],
        ['拣配状态', this.pickingstatus],
        ['生产订单', this.orderNo],
        ['计划号', this.plannum],
        ['生产工艺', this.processprodutc ? 1 : 0],
        ['订单状态', this.orderstatus]
      ]
      
      const Data = this.CreateData('11', this.processprodutc ? '工艺管理_工艺查询_生产工艺查询' : '工艺管理_工艺查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data.result
        this.total1 = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable3()
    },
    
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable3()
    }
  }
}
</script>

<style scoped>
.el-form--label-left >>> .el-form-item__label {
  text-align: right;
}

.show-text {
  font-size: 14px;
  margin-left: 10px;
  margin-right: 5px;
}

/* 表格样式调整 */
.el-table {
  font-size: 12px;
}

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 打印相关样式 */
@media print {
  .no-print {
    display: none !important;
  }
  
  .app-container {
    visibility: hidden;
  }
  
  #print-content {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
}
</style>
