<template>
  <div class="app-container">
    <!-- 基本信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #027db4;">飞行器基本信息</span>
      </div>
      <el-form :model="form" label-width="100px" class="detail-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input v-model="form.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号">
              <el-input v-model="form.model" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型">
              <el-input v-model="form.type" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="区域">
              <el-input v-model="form.region" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="景区">
              <el-input v-model="form.scenicArea" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人">
              <el-input v-model="form.manager" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remarks" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="无人机图片">
              <div class="image-preview">
                <div v-for="(url, index) in form.imageUrls" :key="index" class="image-item" @click="handlePreview(url)">
                  <img :src="url" class="preview-image">
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 维护记录表 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span style="color: #027db4;">飞行器维护记录</span>
      </div>
      <el-table :data="maintenanceData" style="width: 100%">
        <el-table-column prop="manager" label="负责人" />
        <el-table-column prop="type" label="维护类型" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="time" label="维护时间" width="180" />
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="maintenancePage.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="maintenancePage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="maintenancePage.total"
          @size-change="handleMaintenanceSizeChange"
          @current-change="handleMaintenanceCurrentChange"
        />
      </div>
    </el-card>

    <!-- 保险记录表 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header">
        <span style="color: #027db4;">飞行器保险记录</span>
        <el-button
          style="float: right; padding: 5px; background-color: #02a7f0; color: white;"
          type="text"
          icon="el-icon-plus"
          @click="handleAddInsurance"
        >新增保险</el-button>
      </div>
      <el-table :data="insuranceData" style="width: 100%">
        <el-table-column prop="name" label="保险名称" />
        <el-table-column prop="type" label="保险类型" />
        <el-table-column prop="expireTime" label="截至时间" width="180" />
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleInsuranceView(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" @click="handleInsuranceEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleInsuranceDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="insurancePage.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="insurancePage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="insurancePage.total"
          @size-change="handleInsuranceSizeChange"
          @current-change="handleInsuranceCurrentChange"
        />
      </div>
    </el-card>

    <!-- API模块入口 -->
    <div class="api-links">
      <a href="javascript:void(0)" class="api-link" @click="handleApiClick('data')">飞行器数据记录</a>
      <a href="javascript:void(0)" class="api-link" @click="handleApiClick('fault')">飞行器故障记录</a>
      <a href="javascript:void(0)" class="api-link" @click="handleApiClick('video')">飞行器视频记录</a>
    </div>

    <!-- 图片预览 -->
    <el-dialog :visible.sync="previewVisible" append-to-body>
      <img :src="previewUrl" alt="Preview" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'aircraftDetail',
  data() {
    return {
      form: {
        name: '大疆',
        model: 'T100',
        type: '载人飞行',
        region: '北京',
        scenicArea: '白云山',
        manager: '小明',
        remarks: '设备状态良好',
        imageUrls: Array(6).fill('https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png'),
      },
      maintenanceData: Array(10).fill({
        manager: '小明',
        type: '维修',
        remarks: '电池损坏',
        time: '2016-09-21 08:50:08'
      }),
      insuranceData: Array(2).fill({
        name: '安全保险',
        type: '三方险',
        expireTime: '2016-09-21 08:50:08'
      }),
      maintenancePage: {
        page: 1,
        size: 10,
        total: 20
      },
      insurancePage: {
        page: 1,
        size: 10,
        total: 2
      },
      previewVisible: false,
      previewUrl: ''
    }
  },
  created() {
    // 获取详情数据
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
  },
  methods: {
    getDetail(id) {
      // 调用接口获取详情
      console.log('获取详情:', id)
    },
    handlePreview(url) {
      this.previewUrl = url
      this.previewVisible = true
    },
    handleMaintenanceSizeChange(val) {
      this.maintenancePage.size = val
      // 重新获取维护记录数据
    },
    handleMaintenanceCurrentChange(val) {
      this.maintenancePage.page = val
      // 重新获取维护记录数据
    },
    handleInsuranceSizeChange(val) {
      this.insurancePage.size = val
      // 重新获取保险记录数据
    },
    handleInsuranceCurrentChange(val) {
      this.insurancePage.page = val
      // 重新获取保险记录数据
    },
    handleAddInsurance() {
      // 跳转到新增保险页面
    },
    handleInsuranceView(row) {
      // 查看保险详情
      console.log('查看保险详情:', row)
    },
    handleInsuranceEdit(row) {
      // 编辑保险信息
      console.log('编辑保险信息:', row)
    },
    handleInsuranceDelete(row) {
      // 删除保险记录
      console.log('删除保险记录:', row)
    },
    handleApiClick(type) {
      // 跳转到对应的API模块
      console.log('跳转到API模块:', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  margin-bottom: 33px;
}
.detail-form {
  .el-form-item {
    margin-bottom: 20px;
  }
::v-deep .el-input.is-disabled .el-input__inner {
    background-color: white;
    color: #686868;
  }
::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: white;
    color: #686868;
  }
}
.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  .image-item {
    width: 120px;
    height: 120px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    &:hover {
      border-color: #409EFF;
    }
    .preview-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.box-card {
  margin-bottom: 20px;
  box-shadow: none;
  border: none;
  background: none;
  .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.pagination-container {
  text-align: right;
  margin-top: 20px;
}
.api-links {
  margin-top: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  .api-link {
    color: #027db4;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
