<template>
  <view class="container">
    <view class="section">
      <view class="section-title">参数信息</view>
      <view class="section-content">
        <view class="info-row">
          <view class="info-label">参数主键</view>
          <view class="info-value">{{ detail.configId }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">参数名称</view>
          <view class="info-value">{{ detail.configName }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">参数键名</view>
          <view class="info-value">{{ detail.configKey }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">参数键值</view>
          <view class="info-value">{{ detail.configValue }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">系统内置</view>
          <view class="info-value">
            <view class="status-tag" :class="detail.configType === 'Y' ? 'status-yes' : 'status-no'">
              {{ dictStr(detail.configType, typeList) }}
            </view>
          </view>
        </view>
        <view class="info-row" v-if="detail.remark">
          <view class="info-label">备注</view>
          <view class="info-value">{{ detail.remark }}</view>
        </view>
        <view class="info-row" v-if="detail.createBy">
          <view class="info-label">创建者</view>
          <view class="info-value">{{ detail.createBy }}</view>
        </view>
        <view class="info-row" v-if="detail.createTime">
          <view class="info-label">创建时间</view>
          <view class="info-value">{{ detail.createTime }}</view>
        </view>
        <view class="info-row" v-if="detail.updateBy">
          <view class="info-label">更新者</view>
          <view class="info-value">{{ detail.updateBy }}</view>
        </view>
        <view class="info-row" v-if="detail.updateTime">
          <view class="info-label">更新时间</view>
          <view class="info-value">{{ detail.updateTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getConfig } from '@/api/system/config'
import { getDicts } from "@/api/system/dict/data"
import { onLoad } from "@dcloudio/uni-app"

const detail = reactive({
  configId: '',
  configName: '',
  configKey: '',
  configValue: '',
  configType: '',
  remark: '',
  createBy: '',
  createTime: '',
  updateBy: '',
  updateTime: ''
})

const typeList = ref([])

onLoad((option) => {
  getDicts('sys_yes_no').then(res => {
    typeList.value = res.data
  })
  
  if (option.id) {
    getDetail(option.id)
  }
})

// 获取详情
function getDetail(id) {
  getConfig(id).then(res => {
    Object.assign(detail, res.data)
  })
}

// 字典翻译
function dictStr(value, list) {
  const item = list.find(v => v.dictValue === value)
  return item ? item.dictLabel : value
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.section {
  margin: 24rpx;
  padding: 0;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .section-title {
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    line-height: 1.2;
    font-size: 28rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      width: 6rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 3rpx;
      margin-right: 12rpx;
    }
  }

  .section-content {
    padding: 24rpx;

    .info-row {
      display: flex;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 160rpx;
        font-size: 28rpx;
        color: #667eea;
        font-weight: 500;
        flex-shrink: 0;
      }

      .info-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        word-break: break-all;
        text-align: right;

        .status-tag {
          display: inline-block;
          padding: 8rpx 20rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          font-weight: 500;

          &.status-yes {
            background-color: rgba(82, 196, 26, 0.1);
            color: #52c41a;
          }

          &.status-no {
            background-color: rgba(255, 77, 79, 0.1);
            color: #ff4d4f;
          }
        }
      }
    }
  }
}
</style>
