<template>
  <div class="app-container inspection-plan-page">
    <!-- 搜索栏 -->
    <el-card class="filter-card" shadow="never">
      <el-form :inline="true" :model="filters" size="small">
        <el-form-item label="点检编号">
          <el-input v-model="filters.planCode" clearable placeholder="输入点检编号/名称" style="width: 220px"
            @keyup.enter.native="fetchPlanList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="fetchPlanList">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 待点检（未到截止时间） -->
    <el-card shadow="never" class="table-card">
      <div class="section-header">
        <div class="section-title">
          <span class="status-dot status-dot--active"></span>
          <span>待点检计划</span>
          <el-tag size="mini" type="success" effect="plain" style="margin-left: 8px">{{ pendingData.length }}</el-tag>
        </div>
        <small class="section-desc">当前时间未到截止时间，可执行点检</small>
      </div>
      <el-table :data="pendingData" v-loading="tableLoading" border size="small" height="460"
        :row-class-name="tableRowClassName" :default-sort="{ prop: '截止时间', order: 'ascending' }">
        <el-table-column type="index" width="50" label="#" align="center" />
        <el-table-column prop="点检编号" label="点检编号" min-width="160" show-overflow-tooltip />
        <el-table-column prop="点检名称" label="点检名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="资产信息" label="资产信息" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row['资产信息'] || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="点检项数量" label="点检项" width="90" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" effect="plain">{{ scope.row['点检项数量'] || 0 }} 项</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="点检周期" label="周期" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row['点检周期'] || '-' }} {{ formatCycleUnit(scope.row['周期单位']) }}
          </template>
        </el-table-column>
        <el-table-column prop="截止时间" label="截止时间" min-width="160" sortable>
          <template slot-scope="scope">
            {{ formatDate(scope.row['截止时间']) }}
          </template>
        </el-table-column>
        <el-table-column label="最近点检" min-width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row['最新点检时间']) }}
          </template>
        </el-table-column>
        <el-table-column label="距上次点检" min-width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row['最新点检时间']" :class="getTimeDiffClass(scope.row)">{{ calcTimeDiff(scope.row['最新点检时间'])
              }}</span>
            <span v-else class="text-muted">-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="190" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-document" @click="openHistory(scope.row)">历史</el-button>
            <el-button type="primary" size="mini" icon="el-icon-check" @click="openExecute(scope.row)">执行点检</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 已超期（已到达或超过截止时间） -->
    <el-card shadow="never" class="table-card" v-if="overdueData.length > 0">
      <div class="section-header">
        <div class="section-title">
          <span class="status-dot status-dot--overdue"></span>
          <span>已超期计划</span>
          <el-tag size="mini" type="danger" effect="plain" style="margin-left: 8px">{{ overdueData.length }}</el-tag>
        </div>
        <small class="section-desc">已到达或超过截止时间</small>
      </div>
      <el-table :data="overdueData" v-loading="tableLoading" border size="small" height="180"
        :row-class-name="() => 'overdue-row'" :default-sort="{ prop: '截止时间', order: 'ascending' }">
        <el-table-column type="index" width="50" label="#" align="center" />
        <el-table-column prop="点检编号" label="点检编号" min-width="160" show-overflow-tooltip />
        <el-table-column prop="点检名称" label="点检名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="资产信息" label="资产信息" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row['资产信息'] || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="点检项数量" label="点检项" width="90" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" effect="plain">{{ scope.row['点检项数量'] || 0 }} 项</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="点检周期" label="周期" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row['点检周期'] || '-' }} {{ formatCycleUnit(scope.row['周期单位']) }}
          </template>
        </el-table-column>
        <el-table-column prop="截止时间" label="截止时间" min-width="160" sortable>
          <template slot-scope="scope">
            <span class="text-danger">{{ formatDate(scope.row['截止时间']) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最近点检" min-width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row['最新点检时间']) }}
          </template>
        </el-table-column>
        <el-table-column label="距上次点检" min-width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row['最新点检时间']" :class="getTimeDiffClass(scope.row)">{{ calcTimeDiff(scope.row['最新点检时间'])
              }}</span>
            <span v-else class="text-muted">-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-document" @click="openHistory(scope.row)">历史</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 历史记录抽屉 -->
    <el-drawer :visible.sync="historyVisible" size="75%" direction="rtl" :with-header="true" title="点检历史记录">
      <div class="history-header">
        <div>{{ historyTitle }}</div>
        <div class="history-sub">最近 20 条点检执行记录</div>
      </div>
      <el-table :data="historyData" v-loading="historyLoading" height="100%" size="small" border>
        <el-table-column type="index" width="50" label="#" align="center" />
        <el-table-column prop="点检项目" label="点检项目" min-width="120" show-overflow-tooltip />
        <el-table-column prop="点检内容" label="点检内容" min-width="150" show-overflow-tooltip />
        <el-table-column prop="标准要求" label="标准要求" min-width="120" show-overflow-tooltip />
        <el-table-column prop="点检值" label="点检值" width="100" />
        <el-table-column prop="点检结果" label="结果" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row['点检结果'] === '正常' ? 'success' : scope.row['点检结果'] === '异常' ? 'danger' : 'warning'"
              size="small">
              {{ scope.row['点检结果'] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="点检人名称" label="点检人" width="100" />
        <el-table-column prop="点检时间" label="点检时间" min-width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row['点检时间']) }}
          </template>
        </el-table-column>
        <el-table-column prop="异常描述" label="异常描述" min-width="180" show-overflow-tooltip />
      </el-table>
    </el-drawer>

    <!-- 执行点检抽屉 -->
    <el-drawer :visible.sync="executeVisible" size="60%" direction="rtl" :with-header="true"
      :before-close="handleCloseExecute" title="执行点检">
      <div class="execute-container">
        <el-form :model="executeForm" label-width="120px" size="small">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="点检计划ID">
                <el-input v-model="executeForm.checkplanid" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点检计划名称">
                <el-input v-model="executeForm.checkplanname" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="点检人">
                <el-input v-model="executeForm.createusername" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本次点检时间">
                <el-input v-model="executeForm.createtime" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上次点检时间">
                <el-input v-model="executeForm.lastchecktime" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="距上次点检">
                <el-input v-model="executeForm.timegap" disabled>
                  <template slot="append">{{ executeForm.timegapunit }}</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">点检明细</el-divider>
          <el-table :data="executeForm.resultData" border v-loading="executeLoading" max-height="400"
            style="width: 100%" size="small">
            <el-table-column prop="点检项目" label="点检项目" min-width="120" />
            <el-table-column prop="点检内容" label="点检内容" min-width="150" />
            <el-table-column prop="标准要求" label="标准要求" min-width="120" />
            <el-table-column label="点检值" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.checkvalue" placeholder="输入点检值" size="small" />
              </template>
            </el-table-column>
            <el-table-column label="点检结果" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.checkresult" placeholder="选择结果" size="small">
                  <el-option label="正常" value="8ad0c970-ac18-46b4-bda6-643bb26d776e" />
                  <el-option label="异常" value="7f4e18d0-ca26-e64e-ef87-29d5917166c2" />
                  <el-option label="待确定" value="938e0b05-febc-5abc-5d44-d8e3977a12bf" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="异常描述" min-width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.exdescribe" type="textarea" :rows="1" placeholder="异常时必填" size="small" />
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div class="drawer-footer">
          <el-button @click="executeVisible = false">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="submitInspection">提交点检</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      filters: {
        planCode: '',
        status: ''
      },
      allTableData: [],
      tableLoading: false,
      historyVisible: false,
      historyData: [],
      historyLoading: false,
      historyTitle: '',
      executeVisible: false,
      executeLoading: false,
      submitLoading: false,
      executeForm: {
        id: '',
        code: '',
        checkplanid: '',
        checkplanname: '',
        createusercode: '',
        createusername: '',
        createtime: '',
        lastchecktime: '',
        timegap: '',
        timegapunit: '',
        resultData: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'id'
    ]),
    /** 未到截止时间 — 待点检 */
    pendingData() {
      const now = new Date()
      return this.allTableData.filter(row => {
        const deadline = row['截止时间']
        if (!deadline) return true
        return new Date(deadline) > now
      })
    },
    /** 已到达或超过截止时间 — 已超期 */
    overdueData() {
      const now = new Date()
      return this.allTableData.filter(row => {
        const deadline = row['截止时间']
        if (!deadline) return false
        return new Date(deadline) <= now
      })
    },

  },
  created() {
    this.fetchPlanList()
  },
  methods: {
    fetchPlanList() {
      this.tableLoading = true
      const param = []
      param[0] = ['工位号', '']
      param[1] = ['点检编号', this.filters.planCode || '']
      param[2] = ['状态', '']
      param[3] = ['周期类型', '']
      const Data = this.CreateData('11', 'MES_点检计划_工位查询', param)
      this.ExecDatabase(Data).then(res => {
        // 存储过程已通过 GROUP BY 返回汇总数据，直接使用即可
        this.allTableData = res.data || []
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleFilterChange() {
      this.fetchPlanList()
    },
    resetFilter() {
      this.filters.planCode = ''
      this.filters.status = ''
      this.fetchPlanList()
    },
    /** 周期单位映射："是"显示为"天" */
    formatCycleUnit(unit) {
      if (!unit) return ''
      const map = { '是': '天', '日': '天', '时': '小时', '周': '周', '月': '月' }
      return map[unit] || unit
    },
    /** 表格行样式 */
    tableRowClassName({ row }) {
      if (!row['截止时间']) return ''
      const now = new Date()
      const deadline = new Date(row['截止时间'])
      const diffHours = (deadline - now) / (1000 * 60 * 60)
      if (diffHours < 0) return 'overdue-row'
      if (diffHours < 24) return 'warning-row'
      return ''
    },
    openHistory(row) {
      this.historyVisible = true
      this.historyLoading = true
      this.historyTitle = `${row['点检编号']} - ${row['点检名称'] || ''}`

      // 使用点检计划ID查询整个计划的历史记录
      const param = []
      param[0] = ['点检计划ID', row['点检计划ID'] || '']
      param[1] = ['TopN', 20]
      const Data = this.CreateData('11', 'MES_点检结果_按计划查询历史', param)
      this.ExecDatabase(Data).then(res => {
        this.historyData = res.data || []
      }).finally(() => {
        this.historyLoading = false
      })
    },
    async openExecute(row) {
      this.executeVisible = true
      this.executeLoading = true
      this.executeForm.checkplanid = row['点检计划ID']
      this.executeForm.checkplanname = row['点检名称']
      const stationState = (this.$store && this.$store.state && this.$store.state.station) ? this.$store.state.station : {}
      const safeUserCode = (stationState && stationState.stationNumber) ? stationState.stationNumber : (this.id || '未知用户ID')
      const safeUserName = (stationState && stationState.stationUserCount) ? stationState.stationUserCount : (this.name || '未知用户名')
      this.executeForm.createusercode = safeUserCode
      this.executeForm.createusername = safeUserName

      const nowTime = new Date()
      this.executeForm.createtime = this.formatDateTime(nowTime)
      this.executeForm.id = this.generateUUID()
      this.executeForm.code = this.generateSpotCheckCode()

      // 计算上次点检时间和时间差
      const lastCheckTime = row['最新点检时间']
      if (lastCheckTime) {
        this.executeForm.lastchecktime = this.formatDate(lastCheckTime)
        // 计算时间差
        const lastTime = new Date(lastCheckTime)
        const diffMs = nowTime - lastTime
        const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
        const diffDays = Math.floor(diffHours / 24)

        if (diffDays > 0) {
          this.executeForm.timegap = diffDays.toFixed(1)
          this.executeForm.timegapunit = '天'
        } else {
          this.executeForm.timegap = diffHours.toFixed(1)
          this.executeForm.timegapunit = '小时'
        }
      } else {
        this.executeForm.lastchecktime = '无历史记录'
        this.executeForm.timegap = '-'
        this.executeForm.timegapunit = ''
      }

      const param = [['点检计划ID', row['点检计划ID']]]
      const Data = this.CreateData('11', 'MES_点检计划_明细查询', param)
      try {
        const res = await this.ExecDatabase(Data)
        this.executeForm.resultData = (res.data || []).map(item => ({
          resultid: this.generateUUID(),
          checkplandetailid: item['详细信息ID'],
          checkvalue: '',
          checkresult: '8ad0c970-ac18-46b4-bda6-643bb26d776e',
          checkercode: safeUserCode,
          checkername: safeUserName,
          checktime: this.formatDateTime(new Date()),
          processresult: '',
          processmethod: '',
          filebefore: '',
          fileafter: '',
          exdescribe: '',
          nohandlereason: '',
          点检项目: item['点检项目'],
          点检内容: item['点检内容'],
          标准要求: item['标准要求']
        }))
      } catch (error) {
        this.$message.error('获取点检明细失败：' + error.message)
      } finally {
        this.executeLoading = false
      }
    },
    handleCloseExecute() {
      this.$confirm('确认关闭?未提交的数据将丢失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.executeVisible = false
        this.executeForm = {
          id: '', code: '', checkplanid: '', checkplanname: '',
          createusercode: '', createusername: '', createtime: '',
          lastchecktime: '', timegap: '', timegapunit: '', resultData: []
        }
      }).catch(() => { })
    },
    async submitInspection() {
      // 1. 校验必填项
      for (const detail of this.executeForm.resultData) {
        if (detail.checkresult === '7f4e18d0-ca26-e64e-ef87-29d5917166c2' && !detail.exdescribe) {
          this.$message.warning('异常结果必须填写异常描述')
          return
        }
      }

      this.submitLoading = true
      let isSuccess = false
      try {
        // 2. 先组装上传数据
        const payload = {
          id: this.executeForm.id,
          code: this.executeForm.code,
          checkplanid: this.executeForm.checkplanid,
          createusercode: this.executeForm.createusercode,
          createusername: this.executeForm.createusername,
          createtime: this.executeForm.createtime,
          resultData: this.executeForm.resultData.map(item => ({
            resultid: item.resultid,
            checkplandetailid: item.checkplandetailid,
            abnormal: item.checkresult === '7f4e18d0-ca26-e64e-ef87-29d5917166c2' ? '1' : '0',
            checkvalue: item.checkvalue,
            checkresult: item.checkresult,
            checkercode: item.checkercode,
            checkername: item.checkername,
            checktime: item.checktime,
            processresult: item.processresult,
            processmethod: item.processmethod,
            filebefore: item.filebefore,
            fileafter: item.fileafter,
            exdescribe: item.exdescribe,
            nohandlereason: item.nohandlereason
          }))
        }

        // 3. 先调用工厂MES接口上传
        const uploadRes = await this.$axios.post(window.g.webAPIURL + '/web/WEB_SpotCheckResultUpload', payload)

        // 检查返回状态码，支持 Code 和 code 两种格式
        const resultCode = uploadRes.data.Code || uploadRes.data.code
        if (resultCode !== 200) {
          const errorMsg = uploadRes.data.Message || uploadRes.data.message || '未知错误'
          this.$message.error(`上传至工厂MES失败: ${errorMsg}`)
          return // 上传失败就不保存到本地数据库，也不关闭侧边栏
        }

        this.$message.success('点检结果已成功上传至工厂MES！')

        // 4. 上传成功后再保存到本地数据库
        let localFailCount = 0
        const localFailItems = []
        for (const detail of this.executeForm.resultData) {
          const saveParam = [
            ['点检结果ID', detail.resultid],
            ['点检计划ID', this.executeForm.checkplanid],
            ['点检计划明细ID', detail.checkplandetailid],
            ['工位号', ''],
            ['工位名称', ''],
            ['点检值', detail.checkvalue],
            ['点检结果', detail.checkresult],
            ['是否异常', detail.checkresult === '7f4e18d0-ca26-e64e-ef87-29d5917166c2' ? '1' : '0'],
            ['点检人编号', detail.checkercode],
            ['点检人名称', detail.checkername],
            ['点检时间', detail.checktime],
            ['异常描述', detail.exdescribe],
            ['处理结果', detail.processresult],
            ['处理方式', detail.processmethod],
            ['不处理原因', detail.nohandlereason]
          ]
          const saveData = this.CreateData('11', 'MES_点检结果_保存', saveParam)
          const saveRes = await this.ExecDatabase(saveData)
          const saveOk = saveRes && saveRes.data && saveRes.data[0] && saveRes.data[0].result === '1'
          if (!saveOk) {
            localFailCount++
            localFailItems.push(detail.点检项目 || detail.checkplandetailid)
            this.$message.warning(`点检项目 ${detail.点检项目} 本地保存失败: ${saveRes.data[0].msg}，但工厂MES已上传成功`)
          }
        }

        if (localFailCount > 0) {
          this.$message.error(`本地保存失败 ${localFailCount} 项（${localFailItems.join('、')}），请处理后重试；工厂MES已上传成功`)
          return
        }

        this.$message.success('点检结果本地保存成功！')
        isSuccess = true
      } catch (error) {
        this.$message.error(`操作异常: ${error.message}`)
      } finally {
        this.submitLoading = false
        // 只有成功时才关闭侧边栏并刷新列表
        if (isSuccess) {
          this.executeVisible = false
          this.fetchPlanList()
        }
      }
    },
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0
        const v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    generateSpotCheckCode() {
      const date = new Date()
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const randomNum = Math.floor(10000 + Math.random() * 90000)
      return `${year}${month}${day}${randomNum}`
    },
    formatDate(value) {
      if (!value) return '-'
      const str = value.toString().replace('T', ' ')
      return str.length > 19 ? str.substr(0, 19) : str
    },
    formatDateTime(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      const seconds = date.getSeconds().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    calcTimeDiff(lastCheckTime) {
      if (!lastCheckTime) return '-'
      const now = new Date()
      const lastTime = new Date(lastCheckTime)
      const diffMs = now - lastTime
      if (diffMs < 0) return '尚未到期'
      const totalHours = Math.floor(diffMs / (1000 * 60 * 60))
      const days = Math.floor(totalHours / 24)
      const hours = totalHours % 24
      if (days > 0) {
        return `${days}天${hours}小时`
      }
      return `${hours}小时`
    },
    getTimeDiffClass(row) {
      if (!row['最新点检时间']) return ''
      const now = new Date()
      const lastTime = new Date(row['最新点检时间'])
      const diffMs = now - lastTime
      const diffHours = diffMs / (1000 * 60 * 60)
      // 根据周期单位和周期值判断是否超期
      const cycle = parseFloat(row['点检周期']) || 1
      const unit = row['周期单位']
      let cycleHours = cycle
      if (unit === '是' || unit === '日' || unit === '天') {
        cycleHours = cycle * 24
      } else if (unit === '周') {
        cycleHours = cycle * 24 * 7
      } else if (unit === '月') {
        cycleHours = cycle * 24 * 30
      } else if (unit === '时') {
        cycleHours = cycle
      }
      if (diffHours > cycleHours) return 'time-diff-overdue'
      if (diffHours > cycleHours * 0.8) return 'time-diff-warning'
      return 'time-diff-normal'
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-plan-page {
  .filter-card {
    margin-bottom: 12px;

    ::v-deep .el-card__body {
      padding: 12px 20px;
    }

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .table-card {
    margin-bottom: 12px;

    ::v-deep .el-card__body {
      padding: 16px 20px;
    }
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .section-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
  }

  .section-desc {
    font-size: 12px;
    color: #909399;
  }

  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;

    &--active {
      background-color: #67C23A;
      box-shadow: 0 0 6px rgba(103, 194, 58, 0.5);
    }

    &--overdue {
      background-color: #F56C6C;
      box-shadow: 0 0 6px rgba(245, 108, 108, 0.5);
    }
  }

  .text-muted {
    color: #C0C4CC;
  }

  .text-danger {
    color: #F56C6C;
    font-weight: 600;
  }

  // 表格行高亮
  ::v-deep .el-table {
    .warning-row {
      background-color: #FDF6EC;
    }

    .overdue-row {
      background-color: #FEF0F0;
    }

    // 表头统一样式
    th {
      background-color: #F5F7FA !important;
      color: #606266;
      font-weight: 600;
      font-size: 13px;
    }

    // 单元格对齐
    td {
      font-size: 13px;
    }
  }

  .time-diff-overdue {
    color: #F56C6C;
    font-weight: 600;
  }

  .time-diff-warning {
    color: #E6A23C;
    font-weight: 600;
  }

  .time-diff-normal {
    color: #67C23A;
  }

  .history-header {
    padding: 0 20px 10px;
    font-size: 16px;
    font-weight: 600;

    .history-sub {
      margin-top: 4px;
      font-size: 12px;
      color: #909399;
      font-weight: 400;
    }
  }

  .execute-container {
    padding: 0 20px 20px;

    .drawer-footer {
      margin-top: 20px;
      text-align: right;
      border-top: 1px solid #EBEEF5;
      padding-top: 20px;
    }
  }
}
</style>
