、<template>
  <div>
    <el-card>
      <div class="search-container">
        <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="contractNo" placeholder="请输入销售订单" clearable style="width: 150px;margin-right: 10px" />
        <span class="show-text">产品编码:</span>
        <el-input v-model="productCode" 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="ShipmentStatus" clearable placeholder="请选择发货状态" style="width: 150px;margin-right: 10px">
          <el-option label="全部" value="全部" />
          <el-option label="已下达发货通知" value="已发货" />
          <el-option label="未下达发货通知" value="未发货" />
        </el-select>
        <!-- <span class="show-text">自制件属性:</span>
        <el-select v-model="selfStatus" clearable placeholder="请选择自制件属性" style="width: 150px;margin-right: 10px">
          <el-option label="全部" value="全部" />
          <el-option label="机加" value="机加" />
          <el-option label="装配" value="装配" />
        </el-select>
        

        <span class="show-text">外协状态:</span>
        <el-select v-model="outsourceStatus" clearable placeholder="请选择外协状态" style="width: 150px;margin-right: 10px">
          <el-option label="全部" value="全部" />
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>

        <span class="show-text">加急状态:</span>
        <el-select v-model="urgentStatus" clearable placeholder="请选择加急状态" style="width: 150px;margin-right: 10px">
          <el-option label="全部" value="全部" />
          <el-option label="加急" value="加急" />
          <el-option label="正常" value="正常" />
        </el-select> -->
        <span class="show-text">入库状态:</span>
        <el-select v-model="stockStatus" clearable placeholder="请选择状态" style="width: 150px;margin-right: 10px">
          <el-option label="全部" value="全部" />
          <el-option label="未完成" value="未完成" />
          <el-option label="已完成" value="已完成" />
        </el-select>
        
        <!-- 其他搜索条件保持不变 -->
        <el-button :disabled="loading" icon="el-icon-search" plain type="primary" @click="searchTable()">查询</el-button>
      </div>

      <el-table v-loading="loading" :data="tableData" :height="'80vh'" border
        element-loading-background="rgba(0, 0, 0, 0.2)" element-loading-spinner="el-icon-loading" highlight-current-row
        size="mini" style="width: 100%;margin-top: 20px;" tooltip-effect="dark" @row-click="handleRowClick" >
        
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" class="demo-table-expand">
              <el-table :data="scope.row.子数据" :row-class-name="getHeaderClass" border >
                
                <el-table-column align="center" label="序号" type="index" width="50" />
                <el-table-column align="center" label="工序名称" prop="工序名称" width="100" />
                <el-table-column align="center" label="计划数量" prop="计划数量" width="100" />
                <el-table-column align="center" label="指派对象" prop="指派对象" width="100" />

                <el-table-column align="center" label="开始时间" prop="计划开始时间" width="100">
                  <template slot-scope="scope">{{ formatDate(scope.row.计划开始时间) }}</template>
                </el-table-column>
                <el-table-column align="center" label="结束时间" prop="计划完成时间" width="100">
                  <template slot-scope="scope">{{ formatDate(scope.row.计划完成时间) }}</template>
                </el-table-column>
                <el-table-column align="center" label="完成进度" prop="进度" width="100">
                  <template slot-scope="scope">{{ scope.row.进度}}%</template>
                </el-table-column>
                <el-table-column align="center" label="完成数量" prop="完成数量" width="100" />
                <el-table-column align="center" label="合格数" prop="收检合格数" width="100" />
                <el-table-column align="center" label="不良数" prop="收检不合格数" width="100" />
                <el-table-column align="center" label="任务状态" prop="任务状态" width="100" />
                <el-table-column align="center" label="加工状态" prop="加工状态" width="100" />
                <el-table-column
                  align="center"
                  label="操作"
                  width=" 120"
                  v-bind:class="colorstatus"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="miss(scope.row)">缺料</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </template>
        </el-table-column>
        
        <!-- 主表列定义 -->
        <el-table-column align="center" label="发货通知" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="Number(scope.row.发货状态)=== 1 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50" />
        <el-table-column align="center" prop="合同号" label="销售订单" width="100" />
        <el-table-column align="center" prop="计划号" label="计划号" width="80" />
        <el-table-column align="center" prop="订单号" label="生产订单" width="80" />
        <el-table-column align="center" prop="产品名称" label="产品名称" width="190" />
        <el-table-column align="center" prop="产品编码" label="产品编码" width="220" />
        
        <el-table-column align="center" prop="计划数量订单" label="计划数量" width="80" />
        <el-table-column align="center" prop="入库数量" label="入库数量" width="80" />
        <el-table-column align="center" label="要求完工日" width="120">
          <template slot-scope="scope">{{ formatDate(scope.row.要求完工日期) }}</template>
        </el-table-column>
        <el-table-column align="center" label="要求发货日" width="120">
          <template slot-scope="scope">{{ formatDate(scope.row.要求发货日期) }}</template>
        </el-table-column>
        <el-table-column align="center" label="预计齐套时间" width="120">
          <template slot-scope="scope">{{ formatDate(scope.row.计划开始时间) }}</template>
        </el-table-column>

        
        <!-- 主表显示外协状态 -->
        <!-- <el-table-column align="center" label="外协" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.是否外协 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column> -->
        
        <!-- 其他状态列保持不变 -->
        <el-table-column
            align="center"
            label="齐套"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.齐套)"
                class="score-cell"
              >
                {{ scope.row.齐套 }}
              </div>
            </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="拣配状态"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.拣配状态)"
                class="score-cell"
              >
                {{ Number(scope.row.拣配状态 == 1) ? '已拣配':'未拣配'}}
              </div>
            </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="发料状态"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.发料状态)"
                class="score-cell"
              >
                {{ scope.row.发料状态 }}
              </div>
            </template>
          </el-table-column>
        <el-table-column align="center" label="装配开工" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="['已开工', '已完成'].includes(scope.row.任务状态) ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="完成数量" label="送检数量" width="80" />
        <el-table-column align="center" label="终检" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.终检 === '是' ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.生产工艺 === 1 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="排产" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.排产状态 === 1 ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="优先级" width="80">
          <template slot-scope="scope">
            <div class="status-light" :class="scope.row.优先级 === '是' ? 'status-light-green' : 'status-light-gray'" />
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <el-dialog
        :visible.sync="misspop"
        title="缺料单"
        width="900px"
        center
        :close-on-click-modal="false"
      >
        <el-form ref="missForm" :model="missForm" size="mini">
          <el-form-item  v-for="item in missdata" :key="item.ItemCode" >
            <div class="info-container" >
              <div class="info-item">
                <span class="info-label">物料名称</span>
                <span class="info-value">
                  <el-input
                    v-model="item.U_Name"
                    size="mini"
                    readonly
                    style="width: 300px"
                  />
                </span>
              </div>
              <div class="info-item">
                <span class="info-label">数量</span>
                <span class="info-value">
                  <el-input
                    v-model="item.缺货数量"
                    size="mini"
                    style="width: 200px"
                  />
                </span>
              </div>
              
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="misspop = false">关闭</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      missForm:{
        ItemCode: "",
        U_Name: "",
        缺货数量: 0
      },
      missdata:[],
      misspop:false,
      colorstatus: "",
      orderNo: '',
      contractNo: '',
      productCode: '',
      plannum: '',
      productName: '',
      processName: '',
      nature: '',
      productionStatus: '全部',
      selfStatus: '全部',
      // 新增过滤字段
      outsourceStatus: '全部', // 外协状态
      ShipmentStatus:"全部",
      urgentStatus: '全部',    // 加急状态
      stockStatus:'未完成',
      completionTime: [],
      loading: false,
      tableData: [],
      selectedRow: null,
      editDialogVisible: false,
      editSubmitLoading: false,
      currentRow: {},
      editForm: {
        优先级: '',
        未完成说明: '',
        派工特殊说明: ''
      },
      splitTaskDialogVisible: false,
      splitTaskSubmitLoading: false,
      stationOptions: [],
      splitTaskForm: {
        分配数量: 0,
        指派对象: '',
        指派对象编号: '',
        派工特殊备注: '',
        计划开始时间: '',
        计划结束时间: '',
        最晚开始时间: '',
        任务概述: ''
      },
      planStartTime: [],
      planendTime: [],
    }
  },
  created() {
    var now = new Date()
    var start = new Date(Date.UTC(now.getFullYear() - 2, now.getMonth(), now.getDate(), 0, 0, 0)).toISOString().replace('T', ' ').replace('.000Z', '')
    var end = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)).toISOString().replace('T', ' ').replace('.000Z', '')
    this.searchTable()
  },
  methods: {
    miss(row){
      console.log(row)
      // var row = this.selectedRow;
      // if (!row) {
      //   this.$message.warning("请先选择一行数据");
      //   return;
      // }
      const params = [];
      params.push(["ItemCode", row.产品编码]);
      params.push(["订单号", row.订单号]);
      const Data = this.CreateData("11", "生产管理_装配中心_缺料查询", params);
      this.ExecDatabase(Data).then((response) => {
        this.misspop = true
        this.missdata = response.data 
      })

    },
    getHeaderClass({ row, rowIndex }) {
      if (row.绿 == 1) {
        return 'warning-row'
      } else if (row.蓝 === 1) {
        return 'error-row'
      } else if (row.橙 === 1) {
        return 'success-row'
      } else {
        return ''
      }
    },
    formatDate(date) {
      if (!date) return ''
      return date.split(' ').length > 1 ? date.split(' ')[0] : date
    },
    mergeOrderData(dataList) {
      // 第一步：先按照订单行号对原始数据进行排序
      const sortedDataList = [...dataList].sort((a, b) => {
        const rowA = parseInt(a.订单行号 || 0)
        const rowB = parseInt(b.订单行号 || 0)
        return rowA - rowB
      })

      const orderMap = new Map()
      
      sortedDataList.forEach((item, index) => {
        const orderNumber = item.订单号
        if (!orderMap.has(orderNumber)) {
          // 判断该工序是否外协
          const isOutsource = item.指派对象 && item.指派对象.includes('外协')
          
          orderMap.set(orderNumber, {
            ...item,
            当前序: '',
            开工时间: 0,
            序检: item.序检,
            是否外协: isOutsource, // 新增：记录订单是否包含外协
            子数据: [{
              工序名称: item.工序名称,
              指派对象: item.指派对象,
              计划完成时间: item.计划完成时间,
              计划开始时间: item.计划开始时间,
              进度: item.进度,
              拆分内码: item.拆分内码,
              计划数量: item.计划数量,
              开工时间: item.开工时间,
              完成数量: item.完成数量,
              收料数量: item.收料数量,
              收检合格数: item.收检合格数,
              收检不合格数: item.收检不合格数,
              任务状态: item.任务状态,
              加工状态: item.加工状态,
              终检: item.终检,
              是否外协: isOutsource, // 新增：记录该工序是否外协
              绿: 0,
              橙: 0,
              蓝: 0,
              订单行号: item.订单行号,
              订单号: item.订单号,
              合同号: item.合同号,
              产品编码: item.产品编码,
            }]
          })
        } else {
          const existingItem = orderMap.get(orderNumber)
          
          // 判断该工序是否外协
          const isOutsource = item.指派对象 && item.指派对象.includes('外协')
          
          // 如果发现外协工序，更新订单的外协状态
          if (isOutsource) {
            existingItem.是否外协 = true
          }
          
          // 插入子数据时保持排序
          existingItem.子数据.push({
            工序名称: item.工序名称,
            指派对象: item.指派对象,
            计划完成时间: item.计划完成时间,
            计划开始时间: item.计划开始时间,
            进度: item.进度,
            拆分内码: item.拆分内码,
            计划数量: item.计划数量,
            开工时间: item.开工时间,
            完成数量: item.完成数量,
            收料数量: item.收料数量,
            收检合格数: item.收检合格数,
            收检不合格数: item.收检不合格数,
            任务状态: item.任务状态,
            加工状态: item.加工状态,
            终检: item.终检,
            是否外协: isOutsource, // 新增：记录该工序是否外协
            绿: 0,
            橙: 0,
            蓝: 0,
            订单行号: item.订单行号,
            订单号: item.订单号,
            合同号: item.合同号,
            产品编码: item.产品编码,
          })
          
          // 对子数据按照订单行号排序
          existingItem.子数据.sort((a, b) => {
            const rowA = parseInt(a.订单行号 || 0)
            const rowB = parseInt(b.订单行号 || 0)
            return rowA - rowB
          })
          
          existingItem.子数据.forEach((element, index) => {
            if (new Date(element.开工时间) > new Date('1900-01-01 00:00:00')) {
              element.绿 = 1
            } else {
              element.绿 = 0
            }
            if (element.进度 == 100) {
              element.蓝 = 1
              element.绿 = 0
            } else {
              element.蓝 = 0
            }
            if (index > 0) {
              if (new Date(element.开工时间) == new Date('1900-01-01 00:00:00') && existingItem.子数据[index - 1].进度 == 100) {
                element.橙 = 1
                element.绿 = 0
              } else {
                element.橙 = 0
              }
            }
          })
          console.log(item.收检合格数)
          if (item.收检合格数 > 0) {
            
            existingItem.当前序 = item.工序名称
          }
          
          if (item.优先级 == '是') {
            existingItem.优先级 = item.优先级
          }
          if (item.终检 == '是') {
            existingItem.终检 = item.终检
          }
          if (new Date(item.开工时间) > new Date('1900-01-01 00:00:00')) {
            existingItem.开工时间 = 1
          }
          
          // 确保加急状态正确传递
          if (item.加急状态 === '加急') {
            existingItem.加急状态 = '加急'
          }
        }
      })

      // 应用过滤条件
      let filteredData = Array.from(orderMap.values()).map(item => ({
        订单号: item.订单号,
        合同号: item.合同号,
        产品编码: item.产品编码,
        产品名称: item.产品名称,
        计划数量订单: item.计划数量订单,
        要求完工日期: item.要求完工日期,
        排产状态: item.排产状态,
        优先级: item.优先级,
        当前序: item.当前序,
        计划数量: item.计划数量,
        开工时间: item.开工时间,
        序检: item.序检,
        子数据: item.子数据,
        加急状态: item.加急状态,
        终检: item.终检,
        计划号: item.计划号,
        拣配状态: item.拣配状态,
        是否外协: item.是否外协, // 新增：是否外协订单
        加急数量: item.加急数量,
        生产工艺: item.生产工艺,
        任务状态: item.任务状态,
        发料状态: item.发料状态,
        齐套: item.齐套,
        发货状态: item.发货状态,
        计划开始时间: item.计划开始时间,
        要求发货日期: item.要求发货日期,
        完成数量: item.完成数量,
        入库数量: item.入库数量
      }))

      // 应用外协过滤
      if (this.outsourceStatus !== '全部') {
        const isOutsource = this.outsourceStatus === '是'
        filteredData = filteredData.filter(item => item.是否外协 === isOutsource)
      }

      // 应用加急过滤
      if (this.urgentStatus !== '全部') {
        const isUrgent = this.urgentStatus === '加急'
        filteredData = filteredData.filter(item => 
          isUrgent ? item.加急状态 === '加急' : (!item.加急状态 || item.加急状态 !== '加急')
        )
      }

      this.tableData = filteredData
    },
    getScoreStyle(bgcolor) {
      if (bgcolor == "可执行" || bgcolor == "是" || bgcolor == "发料齐套" || bgcolor == "已拣配" || bgcolor == 1 ) {
        return {
          backgroundColor: "#f0f9eb",
          color: "#67c23a",
        };
      } else if (bgcolor == "已完成") {
        return {
          backgroundColor: "#ecf5ff",
          color: "#409eff",
        };
      } else if (bgcolor == "已开工" || bgcolor == "否" || bgcolor == "发料缺件" || bgcolor == "未拣配" || bgcolor == 0 || bgcolor == null ) {
        return {
          backgroundColor: "#fdf6ec",
          color: "#e6a23c",
        };
      } else if (bgcolor == "开始加工"  ||  bgcolor == "辅助开始") {
        return {
          backgroundColor: "#f0f9eb",
          color: "#67c23a",
        };
      } else if (bgcolor == "暂停") {
        return {
          backgroundColor: "#fdf6ec",
          color: "#e6a23c",
        };
      } else if (bgcolor == "报工" ||  bgcolor == "辅助结束") {
        return {
          backgroundColor: "#ecf5ff",
          color: "#409eff",
        };
      }
      
    },
    searchTable() {
      this.loading = true
      this.tableData = []
      var param = []
      param.push(['订单号', this.orderNo || 0])
      param.push(['物料类型', '自制件'])
      param.push(['合同号', this.contractNo])
      param.push(['产品编码', this.productCode])
      param.push(['产品名称', this.productName])
      param.push(['工序名称', this.processName])
      param.push(['计划开始1', this.planStartTime[0]])
      param.push(['计划开始2', this.planStartTime[1]])
      param.push(['计划完成1', this.planendTime[0]])
      param.push(['计划完成2', this.planendTime[1]])
      param.push(['要求完工日期1', this.completionTime ? this.completionTime[0] : ''])
      param.push(['要求完工日期2', this.completionTime ? this.completionTime[1] : ''])
      param.push(['排产状态', this.productionStatus])
      param.push(['指派对象', '全部'])
      param.push(['计划号', this.plannum])
      param.push(['发货状态', this.ShipmentStatus])
      param.push(['入库状态', this.stockStatus])
      // // 添加外协状态过滤条件
      // if (this.outsourceStatus !== '全部') {
      //   param.push(['是否外协', this.outsourceStatus === '是' ? 1 : 0])
      // }
      

      
      var Data = this.CreateData('11', '销售管理_销售订单状态', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        if (response.data.length !== 0) {
          this.mergeOrderData(response.data)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 其他方法保持不变...
    handleRowClick(row) {
      this.selectedRow = row
    },
    editTask(row) {
      this.currentRow = row
      this.editForm = {
        优先级: row.优先级 || '',
        未完成说明: row.未完成说明 || '',
        派工特殊说明: row.派工特殊说明 || ''
      }
      this.editDialogVisible = true
    },
    submitEditForm() {
      this.editSubmitLoading = true
      const params = []
      params.push(['订单号', this.currentRow.订单号])
      params.push(['订单行号', this.currentRow.订单行号])
      params.push(['订单拆分内码', this.currentRow.拆分内码])
      params.push(['优先级', this.editForm.优先级])
      params.push(['未完成说明', this.editForm.未完成说明])
      params.push(['派工特殊说明', this.editForm.派工特殊说明])
      params.push(['最后编辑人', this.$store.state.user.name])

      const Data = this.CreateData('12', 'MES_OrderPlanned_DescriptionEdit', params)
      this.ExecDatabase(Data).then(() => {
        this.$message.success('保存成功')
        this.editDialogVisible = false
        this.searchTable()
      }).catch(() => {
        this.$message.error('保存失败')
      }).finally(() => {
        this.editSubmitLoading = false
      })
    },
    handleOutsourceNotify(row) {
      this.$confirm('确认同计划发起外协通知吗?', '确认', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message.success('外协通知已发送')
      }).catch(() => {
      })
    },
    openSplitTask() {
      if (!this.selectedRow) {
        this.$message.warning('请先选择需要操作的行')
        return
      }
      this.getStationList()
      this.splitTaskForm = {
        分配数量: this.selectedRow.计划数量 || 0,
        指派对象: this.selectedRow.指派对象 || '',
        指派对象编号: this.selectedRow.指派对象编号 || '',
        派工特殊备注: this.selectedRow.派工特殊说明 || '',
        计划开始时间: this.selectedRow.计划开始时间 || '',
        计划结束时间: this.selectedRow.计划完成时间 || '',
        最晚开始时间: this.selectedRow.最晚开始时间 || '',
        任务概述: this.selectedRow.计划数量 || ''
      }
      this.splitTaskDialogVisible = true
    },
    submitSplitTaskForm() {
      this.splitTaskSubmitLoading = true
      this.$confirm('确认要拆分子任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 空逻辑
        this.splitTaskSubmitLoading = false
        this.splitTaskDialogVisible = false
        this.$message.success('操作成功')
        this.searchTable()
      }).catch(() => {
        this.splitTaskSubmitLoading = false
        this.$message.info('已取消操作')
      })
    },
    getStationList() {
      const params = []
      const Data = this.CreateData('11', 'Prog_MES_LoadStations', params)
      this.ExecDatabase(Data).then(response => {
        if (response.data && response.data.length > 0) {
          this.stationOptions = response.data.map(item => ({
            label: item.OPName,
            value: item.OPName,
            code: item.VisCode
          }))
        }
      })
    },
    handleStationChange(value) {
      const selected = this.stationOptions.find(item => item.value === value)
      if (selected) {
        this.splitTaskForm.指派对象编号 = selected.code
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-table th.el-table__cell>.cell{
  white-space: pre-wrap;
}
.process{
  width: 120px;
  display: inline-flex;
}
.search-container {
  margin-bottom: 20px;
}

.show-text {
  margin-right: 5px;
  line-height: 32px;
}

.status-light {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-light-green {
  background-color: #67C23A;
}

.status-light-gray {
  background-color: #909399;
}

.dialog-footer {
  text-align: right;
}
::v-deep .warning-row {
  background-color: #67c23a !important;
}

::v-deep .error-row {
  background-color: #409eff !important;
}

::v-deep .success-row {
  background-color: #f2a201 !important;
}
::v-deep .el-table td.el-table__cell{
  border: 0;
}
.info-container {
  border: 1px solid #ccc;
  display: flex;
}

.info-item {
  display: flex;
  flex: 1;
  border-right: 1px solid #ccc;
}

.info-item:last-child {
  border-right: none;
}

.info-label {
  width: 30%;
  padding: 8px;
  background-color: #f5f7fa;
  border-right: 1px solid #ccc;
}

.info-value {
  flex: 1;
  padding: 5px;
}

.info-label,
.info-value {
  display: flex;
  align-items: center;
}
.inspection-info {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}

.inspection-info .el-row {
  margin-bottom: 5px;
}

.inspection-info strong {
  color: #606266;
  margin-right: 5px;
}

::v-deep .el-checkbox__label {
    display: inline-block;
    padding-left: 10px;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}
</style>