<template>
  <div class="app-container">
    <!-- Page Title / 页面标题 -->
    <h2 class="page-title">Drive Parameter Sending</h2>

    <!-- Toolbar / 工具栏 -->
    <div class="toolbar">
      <el-button @click="reload" icon="el-icon-refresh" size="small" :loading="loading">
        Refresh
      </el-button>
      <el-button
        v-if="lastSuccess && lastSuccess.lastSendTime"
        type="primary"
        plain
        icon="el-icon-magic-stick"
        size="small"
        @click="applyLastSuccessValues"
      >
        Apply Last Success Values
      </el-button>
    </div>

    <!-- Cards / 卡片 -->
    <div v-loading="loading" class="card-grid-container">
      <el-row :gutter="20">
        <el-col
          v-for="plan in plans"
          :key="plan.id"
          :xs="24"
          :sm="12"
          :md="8"
          class="card-col"
        >
          <el-card class="parameter-card" shadow="hover">
            <div slot="header" class="card-header">
              <!-- Steel Grade only / 只展示钢种，不展示计划 -->
              <span class="card-title">Steel Grade: {{ plan.steelGrade || '-' }}</span>

              <div class="header-right">
                <!-- Last send time / 上次发送时间 -->
                <span v-if="lastSuccess && lastSuccess.lastSendTime" class="last-send-time">
                  <i class="el-icon-time"></i>
                  Last Sent: {{ formatTime(lastSuccess.lastSendTime) }}
                </span>

                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-s-promotion"
                  @click="handleSend(plan)"
                  :loading="plan.sending"
                >
                  Send
                </el-button>
              </div>
            </div>

            <div class="card-body">
              <!-- Template-driven form / 按模板渲染可编辑表单 -->
              <el-form :model="plan.params" label-position="top" size="mini">
                <el-row :gutter="10">
                  <el-col
                    v-for="item in templateItems"
                    :key="item.templateItemId || item.paramCode"
                    :span="12"
                  >
                    <el-form-item :label="item.labelEn">
                      <el-input
                        v-model="plan.params[item.paramCode]"
                        :placeholder="getPlaceholder(item)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div v-if="plans.length === 0 && !loading" class="empty-data">
        <el-empty description="No Data"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
// Import APIs / 引入接口
import { listPlan } from '@/api/l2/plan'
import { listSetup } from '@/api/business/setup'
import { createSendJob, executeSendJob } from '@/api/l2/sendJob'
import { getSendTemplate, getLastSuccess } from '@/api/l2/sendTemplate'

export default {
  name: 'DriveSend',
  data() {
    return {
      loading: false, // Loading state / 加载状态
      template: null, // Template data / 模板数据
      lastSuccess: null, // Last success data / 上次成功记录
      plans: [] // Plans with editable params / 带可编辑参数的钢种卡片
    }
  },
  computed: {
    // Template items sorted by itemNo / 模板明细按序号排序
    templateItems() {
      if (!this.template || !Array.isArray(this.template.items)) return []
      return [...this.template.items]
        .filter(i => i.enabled === undefined || i.enabled === 1)
        .sort((a, b) => (a.itemNo || 0) - (b.itemNo || 0))
    }
  },
  created() {
    this.reload()
  },
  methods: {
    // Reload all / 重新加载：模板 + 上次成功记录 + 计划卡片
    async reload() {
      this.loading = true
      try {
        // 1) Load template + last success in parallel / 并行加载模板与上次成功记录
        const [tplRes, lastRes] = await Promise.all([
          getSendTemplate('DRIVE_DEFAULT'),
          getLastSuccess('DRIVE')
        ])

        // 后端返回 AjaxResult：{code,msg,data}
        this.template = tplRes ? tplRes.data : null
        this.lastSuccess = lastRes ? lastRes.data : null

        if (!this.template || !this.templateItems.length) {
          this.$message.error('DRIVE_DEFAULT template is empty')
          this.plans = []
          return
        }

        // 2) Load plans / 再加载计划（卡片只展示钢种）
        const planRes = await listPlan({ status: 'NEW,READY' })
        const planList = planRes.rows || []

        // 3) For each plan fetch setup, and map to template paramCode
        // 每条计划拉取setup并映射到模板paramCode；优先级：setup值 > 上次成功值 > 模板默认值
        const tasks = planList.map(async (p) => {
          let setup = {}
          try {
            const setupRes = await listSetup({ coilid: p.coilid, planid: p.planid })
            setup = (setupRes.rows && setupRes.rows.length > 0) ? setupRes.rows[0] : {}
          } catch (e) {
            setup = {}
          }

          const params = {}
          this.templateItems.forEach(item => {
            const fromSetup = setup[item.paramCode]
            const fromLast = this.lastSuccess && this.lastSuccess.values ? this.lastSuccess.values[item.paramCode] : undefined

            if (fromSetup !== undefined && fromSetup !== null && String(fromSetup) !== '') {
              params[item.paramCode] = String(fromSetup)
            } else if (fromLast !== undefined && fromLast !== null) {
              params[item.paramCode] = String(fromLast)
            } else {
              params[item.paramCode] = item.defaultValueRaw || ''
            }
          })

          return {
            ...p,
            setup,
            params,
            sending: false
          }
        })

        this.plans = await Promise.all(tasks)
      } catch (e) {
        console.error(e)
        this.$message.error('Load failed')
      } finally {
        this.loading = false
      }
    },

    // Apply last success values to all cards / 将上次成功值应用到所有卡片（覆盖当前输入）
    applyLastSuccessValues() {
      if (!this.lastSuccess || !this.lastSuccess.values) {
        this.$message.info('No last success data')
        return
      }

      this.plans.forEach(plan => {
        this.templateItems.forEach(item => {
          const v = this.lastSuccess.values[item.paramCode]
          if (v !== undefined) {
            this.$set(plan.params, item.paramCode, String(v))
          }
        })
      })

      this.$message.success('Last success values applied')
    },

    // Placeholder shows last/default / 占位符显示上次值或默认值
    getPlaceholder(item) {
      const fromLast = this.lastSuccess && this.lastSuccess.values ? this.lastSuccess.values[item.paramCode] : undefined
      if (fromLast !== undefined) {
        return `Last: ${fromLast}`
      }
      if (item.defaultValueRaw) {
        return `Default: ${item.defaultValueRaw}`
      }
      return 'Please enter'
    },

    // Format time / 格式化时间
    formatTime(t) {
      if (!t) return ''
      const d = new Date(t)
      return d.toLocaleString()
    },

    // Send / 发送
    handleSend(plan) {
      this.$confirm(
        `Confirm to send parameters for Steel Grade [${plan.steelGrade || '-'}]?`,
        'Warning',
        {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }
      ).then(() => this.doSend(plan)).catch(() => {})
    },

    async doSend(plan) {
      if (!this.template) {
        this.$message.error('Template not loaded')
        return
      }

      plan.sending = true
      try {
        // Build items from template / 按模板组装发送明细
        const items = this.templateItems.map(item => ({
          paramCode: item.paramCode,
          address: item.address,
          valueRaw: String(plan.params[item.paramCode] || ''),
          setTime: new Date()
        })).filter(it => !!it.address)

        if (!items.length) {
          this.$message.error('No valid OPC address')
          return
        }

        const dto = {
          deviceName: this.template.deviceName,
          groups: [
            {
              groupNo: 1,
              groupType: 'DRIVE',
              groupName: `Drive Params for ${plan.steelGrade || ''}`,
              items
            }
          ]
        }

        const createRes = await createSendJob(dto)
        const jobId = createRes.data
        if (!jobId) throw new Error('Create send job failed')

        await executeSendJob(jobId)
        this.$message.success('Send success')

        // Refresh last success time / 发送成功后刷新上次成功记录与时间
        await this.reload()
      } catch (e) {
        console.error(e)
        this.$message.error(e.message || 'Send failed')
      } finally {
        plan.sending = false
      }
    }
  }
}
</script>

<style scoped>
.page-title {
  margin-bottom: 20px;
}
.toolbar {
  margin-bottom: 20px;
}
.card-grid-container {
  min-height: 300px;
}
.card-col {
  margin-bottom: 20px;
}
.parameter-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-weight: 600;
}
.header-right {
  display: flex;
  align-items: center;
}
.last-send-time {
  font-size: 12px;
  color: #909399;
  margin-right: 16px;
}
.empty-data {
  margin-top: 20px;
}
</style>
