<template>
  <view class="admin-page">
    <view class="admin-card header-card">
      <view class="title-row">
        <text class="title">小程序下载</text>
      </view>
    </view>
    
    <view class="admin-card content-card routine-download-container">
      <view class="box-title">
        <view class="line"></view>
        <text class="text">小程序设置</text>
      </view>
      
      <view class="download-form">
        <view class="form-item">
          <text class="label">小程序名称：</text>
          <text class="value">CRMEB标准版</text>
        </view>
        
        <view class="form-item">
          <text class="label">小程序码：</text>
          <button class="btn primary mid">下载小程序码</button>
        </view>
        
        <view class="form-item">
          <text class="label">小程序包：</text>
          <view class="radio-wrap">
            <radio-group class="radio-group">
              <label class="radio-label"><radio value="0" />未开通</label>
              <label class="radio-label"><radio value="1" checked />已开通</label>
            </radio-group>
            <text class="desc">是否已开通小程序直播</text>
            <text class="warning">请谨慎选择是否有开通小程序直播功能，否则将影响小程序的发布 可前往 <text class="link">帮助文档</text> 查看如何开通直播功能</text>
          </view>
        </view>
        
        <view class="form-item no-label">
          <button class="btn primary mid">下载小程序包</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
// 小程序下载逻辑
</script>

<style scoped>
.routine-download-container {
  padding: 40px;
}

.box-title {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.box-title .line {
  width: 3px;
  height: 16px;
  background-color: #2d8cf0;
  margin-right: 10px;
}

.box-title .text {
  font-size: 16px;
  font-weight: bold;
}

.download-form {
  padding-left: 100px;
}

.form-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  align-items: center;
}

.form-item.no-label {
  padding-left: 100px;
}

.form-item .label {
  width: 100px;
  color: #606266;
  text-align: right;
  margin-right: 20px;
}

.form-item .value {
  color: #303133;
}

.radio-wrap {
  display: flex;
  flex-direction: column;
}

.radio-group {
  margin-bottom: 5px;
}

.radio-label {
  margin-right: 20px;
}

.desc {
  font-size: 14px;
  color: #c0c4cc;
}

.warning {
  margin-top: 10px;
  font-size: 13px;
  color: #909399;
  max-width: 400px;
  line-height: 1.6;
}

.link {
  color: #2d8cf0;
  margin: 0 5px;
}

.btn.mid {
  width: auto;
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}
</style>
