<script setup lang="ts">
import {useRouter} from 'vue-router';
import {ref} from 'vue'
const router = useRouter();

const templateType = ref("用户提示词")
const status = ref<boolean>()
const activeName = ref()

const returnList = () => {
  router.push('/promptWordList')
}
</script>

<template>
  <div class="wrapper">
    <div class="title-row">
      <h3>编辑提示词</h3>
      <el-button @click="returnList" style="align-self: center">返回列表</el-button>
    </div>
    <h5>基本信息</h5>
    <div class="msg">
      <div class="col">
        <div class="label">模板名称</div>
        <el-input />
      </div>
      <div class="col">
        <div class="label">模板类型</div>
        <el-radio-group v-model="templateType">
          <el-radio value="用户提示词">用户提示词</el-radio>
          <el-radio value="系统提示词">系统提示词</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="msg">
      <div class="col">
        <div class="label">分类</div>
        <el-select >
          <el-option/>
        </el-select>
      </div>
      <div class="col">
        <div class="label">状态</div>
        <el-switch v-model="status"/>
      </div>
    </div>
    <el-row>
      <div class="label">描述</div>
      <el-input type="textarea"></el-input>
    </el-row>
    <h5>内容编辑</h5>
    <el-tabs v-model="activeName">
      <el-tab-pane label="默认(中文)">
        <div class="box-content">
          <div class="header">
            <div class="title">提示词内容</div>
            <div>
              <span>格式化</span>
              <span>全屏编辑</span>
            </div>
          </div>
          <div class="main">
            <el-input type="textarea"/>
          </div>
          <div class="footer">
            <div class="title">可用变量:</div>
            <span>{创作类型}</span>
            <span>{用户输入}</span>
            <span>{主题}</span>
            <span>{风格}</span>
            <span>{字数}</span>
            <span>{情感}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="英文"></el-tab-pane>
      <el-tab-pane label="日文"></el-tab-pane>
      <el-tab-pane label="+添加语言"></el-tab-pane>
    </el-tabs>
    <div class="title-row">
      <h5>模型选项</h5>
      <div style="align-self: center">
        <el-button>更换选项</el-button>
        <el-button>解绑</el-button>
      </div>
    </div>
    <div class="option-content">
      <div>创意写作选项</div>
      <div class="title-row" style="padding: 5px 0">
        <div style="display:flex;gap: 10px;font-size: 12px">
          <div>
            <span>模型名称:  </span>
            <span>gpt-4</span>
          </div>
          <div>
            <span>温度参数:  </span>
            <span>0.8</span>
          </div>
          <div>
            <span>最大token数:  </span>
            <span>2000</span>
          </div>
          <div>
            <span>系统提示词:  </span>
            <span>creative-writing-system</span>
          </div>
        </div>
        <div style="color:#619dff; font-size: 12px;">creative-writing</div>
      </div>
    </div>
    <div class="title-row">
      <h5>权限设置</h5>
      <el-button>添加权限</el-button>
    </div>
    <el-table
      empty-text="暂无数据"
      height="300px"
      style="width: 100%"
    >
      <el-table-column label="用户/角色"/>
      <el-table-column label="类型"/>
      <el-table-column label="权限"/>
      <el-table-column label="操作">
        <template #default="scope">
          <span style="color: #ff6cab;font-size: 12px">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="title-row">
      <h5>版本历史</h5>
      <el-button style="align-self: center">查看</el-button>
    </div>
    <div class="title-row" style="padding: 5px 0">
      <div class="history-msg">
        <div class="now">当前</div>
        <span>v1.5</span>
        <span>2025-7-15 14：30</span>
        <span>更新人：admin</span>
        <span>变更原因：优化创作指引,增加情感基调参数</span>
      </div>
      <div class="history-operate">
        <span>查看</span>
      </div>
    </div>
    <div class="title-row" style="padding: 5px 0">
      <div class="history-msg">
        <span>v1.4</span>
        <span>2025-7-15 14：30</span>
        <span>更新人：system</span>
        <span>变更原因：增加字数，限制参数</span>
      </div>
      <div class="history-operate">
        <span>查看</span>
        <span>对比</span>
        <span>回滚</span>
      </div>
    </div>
    <div class="title-row">
      <h5>预览/测试</h5>
      <el-button style="align-self: center" type="primary">发送测试请求</el-button>
    </div>
    <div class="label">变量设置</div>
    <div class="render-section">
      <div class="left">
        <el-input model-value="创作类型"/>
        <el-input/>
        <el-input model-value="用户输入"/>
        <el-input/>
        <el-input model-value="主题"/>
        <el-input/>
        <el-input model-value="风格"/>
        <el-input/>
        <el-input model-value="字数"/>
        <el-input/>
        <el-input model-value="情感"/>
        <el-input/>
      </div>
      <div class="right">
        <el-input type="textarea" style="height: 100%"></el-input>
      </div>
    </div>

    <div class="title-row">
      <div>
        <el-button type="danger">删除</el-button>
        <el-button >复制</el-button>
      </div>
      <div>
        <el-button>取消</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.render-section{
  display: flex;
  justify-content: space-between;
  .left{
    width: 48%;
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    :deep(.el-input){
      width: 47%;
    }
  }
  .right{
    width: 48%;
    height: 100%;
    :deep(.el-textarea__inner){
      height:300px;
    }
  }
}

.option-content{
  margin-left: 15px;
  font-size: 14px;
  span:nth-child(2n+1){
    color:#999999;
  }
}
.history-msg{
  font-size:12px;
  .now{
    padding: 0 10px;
    display:inline;
    color: #b7eb8f;
    background-color: #f6ffed;
  }
  span{
    padding-right: 7px;
  }
  span:nth-child(2){
    color:#999999;
  }
  span:nth-child(3){
    color:#999999;
  }
}
.history-operate{
  font-size:12px;
  display: flex;
  gap:5px;
  color: #619dff
}
.title-row{
  display:flex;
  justify-content: space-between;
  padding:15px 0;
}
.label{
  color:#999999;
  font-size:12px;
}
.box-content{
  border:1px solid #d9d9d9;
  .header{
    border:1px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    .title{
      font-size: 14px;
      padding: 2px 5px 5px;
    }
    span{
      color:#619dff;
      font-size: 12px;
      padding-right: 5px;
    }
  }
  .main{
    :deep(.el-textarea__inner){
      min-height: 100px !important;
    }
  }
  .footer{
    border:1px solid #d9d9d9;
    display: flex;
    font-size: 12px;
    gap:10px;
    .title{
      color:#999999;
    }
    span{
      color:#619dff;
    }
  }
}
.msg{
  display: flex;
  gap:10px;
  padding:15px 0;
  .col {
    display: flex;
    flex-direction: column;
    flex:1;
  }
}

.wrapper{
  margin:1px auto;
  width:90%;
}

</style>
