<script lang="ts" setup>
const textarea = ref('')
const textarea2 = ref('')
const radio1 = ref('1')
const value = ref(1)
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)

const options = reactive([
  {value:1,lable:'中文（简体）'},
  {value:2,lable:'中文（繁体）'},
  {value:3,lable:'英文'},
])
const value2 = ref(1)
const options2 = reactive([
  {value:1,lable:'中文（简体）'},
  {value:2,lable:'中文（繁体）'},
  {value:3,lable:'英文'},
])
const searchData = reactive({
  selecttime:'',
  name:''
})

definePageMeta({
  name: '翻译',
  hidden:true,
  // headerHost: false,
  // homeBanner:true,
  // order: 1,
})
//   const props = defineProps(['title']);
  const {prefixCls} = useDesign('mai-wrap');

</script>
<template>
  <div class="wrap">
    <el-radio-group fill="#022950" v-model="radio1">
      <el-radio-button label="1" size="large" border>翻译文本</el-radio-button>
      <el-radio-button label="2" size="large" border>翻译文件</el-radio-button>
      <el-radio-button label="3" size="large" border>优先翻译</el-radio-button>
      <el-radio-button label="4" size="large" border>OCR识别</el-radio-button>
    </el-radio-group>
    <div class="change-wrap" v-if="radio1==1||radio1==4">
      <el-select v-model="value" class="m-2" placeholder="Select" size="large">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <img src="../assets/images/zhuanhuan.png" alt="">
      <el-select v-model="value2" class="m-2" placeholder="Select" size="large">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button v-if="radio1==1" >翻译</el-button>
      <el-button v-if="radio1==4" >识别</el-button>
    </div>
    <div class="import-wrap">
      <div class="importBox1">
        <span class="importTitle" v-if="radio1==1||radio1==3">检测源语言</span>
        <span class="importTitle" v-if="radio1==2||radio1==4">见识别文件</span>
        <el-input
        v-if="radio1==1||radio1==3"
          v-model="textarea"
          :rows="2"
          type="textarea"
          placeholder="输入翻译"/>
          <el-upload
          v-if="radio1==2||radio1==4"
            class="upload-demo"
            drag
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              点击文件上传
            </div>
            <div class="el-upload__text2">
              支持扩展名：XML、TXT、DOC、DOCX、PDF或JPG格式
            </div>
            <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
          </el-upload>
      </div>
      <div class="importBox3" v-if="radio1==2||radio1==3">
        <el-button class="button1">英语</el-button>
        <el-button class="button2">翻译</el-button>
      </div>
      <div class="importBox2">
        <span class="importTitle">英语（美式）</span>
        <el-input
          v-model="textarea2"
          :rows="2"
          type="textarea"/>
      </div>
    </div>
    <div class="jilu-wrap">
      <div class="jilu"><img src="../assets/images/jilu.png" alt="">翻译记录</div>
      <div class="first">优先翻译</div>
    </div>
    <div :class="`${prefixCls}-content dynamicInfo flex flex-col `">
      <el-form size="large" inline>
        <el-row>
          <el-col :span="9">
            <el-form-item label="选择日期">
              <el-date-picker type="daterange" v-model="searchData.selecttime" placeholder="请选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="名称">
              <el-input v-model="searchData.name" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0" class="flex justify-end">
            <el-form-item style="margin-right: 0;">
              <el-button type="primary" @click="getList(currentTab)">查询</el-button>
              <el-button @click="resetData">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
      <el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
                :header-cell-style="{background: '#f5f5f5', color:'#333333'}">
        <el-table-column show-overflow-tooltip align="center" label="时间"
                         prop="notification_number"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="名称"
                         prop="notification_title">
          <template #header>
            <span>名称</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="附件"
                         prop="notifying_members"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="操作"
                         prop="notification_time_text"></el-table-column>
      </el-table>
      <div class="mt-32">
        <Pagination
          :current="current"
          :limit="limit"
          :pages="pagesRef"
          :total="total"
          @change="onChangePage"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrap{
  padding: 0 244px;
  background-color: #EEF1F9;
  padding-bottom: 50px;
}
.el-radio-group{
  margin-top: 42px;
  margin-bottom: 76px;
}
.el-radio-button{
  border-radius: 16px;
  margin-right:12px ;
  border: 0px;
  outline: none;
  width: 218px;
  height: 61px;
}
::v-deep .el-radio-button__inner{
    width: 218px;
    height: 61px;
    border: 0px;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 16px !important;

  }
::v-deep .el-input__wrapper{
    width: 218px;
    height: 61px;
    background: #FFFFFF;
    border-radius: 16px;
    border-color:#ffffff ;
}
::v-deep .el-input__inner{
  text-align: center;
}
.change-wrap{
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  .el-button{
    width: 218px;
    height: 61px;
    background: #022950;
    border-radius: 16px;
    color: #FFFFFF;
    font-size: 20px;
    margin-left: 24px;
  }
  img{
    width: 55px;
    height: 44px;
    margin: 0 28px 0 34px;
  }
}
::v-deep .el-textarea__inner{
  width: 100%;
  height: 239px;
  border-radius: 16px;
  border: 0px;
  padding-top: 17px;
  padding-left: 37px;
}
.el-textarea{
  border-radius: 16px;
  margin-top: 17px;
  font-size: 36px;
}
.import-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  .importBox1{
    flex: 1;
    margin-right: 32px;
  }
  .importBox3{
    flex: 0.25;
    margin-right: 22px;
    .el-button{
      width: 150px;
      height: 55px;
      margin: 0;
      border-radius: 8px;
      font-size: 20px;
    }
    .button1{
      margin-bottom: 24px;
      color: #BABABA;
      background-color: #fff;

    }
    .button2{
      color: #fff;
      background-color: #022950;
    }
  }
  .importBox2{
    flex: 1;
  }
}
.importTitle{
  width: 120px;
height: 28px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 28px;
margin-left: 10px;
}
.el-select{
  margin: 0;
}
.jilu-wrap{
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-top: 30px;
  .jilu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 158px;
    height: 49px;
    background: #E8EBF5;
    border-radius: 16px;
    color: #333333;
    img{
      width: 20px;
      height: 20px;
      margin-right: 12px;
    }
  }
  .first{
    color: #E60B0B;
  }
}
.yangliu-mai-wrap-content{
  margin: 30px 0 0 0;
  width: 100%;
}
// .dynamicInfo {
//   margin-top: 0;
//   padding-bottom: 100px;
// }
::v-deep .el-table__inner-wrapper{
  font-size: 20px;

  }
::v-deep .el-table__header-wrapper{
  height: 80px;
}
::v-deep .el-table__header{
  height: 80px;
}
::v-deep .el-table__empty-block{
  height: 300px !important;
}
:deep(.el-form) {
  margin-bottom: 43px;
  .el-form-item__label {
    height: 60px;
    line-height: 60px !important;
    padding-right: 16px;
    @apply text-xl;
  }
  
  .el-input__wrapper {
    border-radius: 10px;
    height: 60px;
    width: 448px;
    box-shadow: unset;
    background-color: #ffffff;
    @apply text-xl;
  }
  .el-icon {
    font-size: 20px;
  }
  .el-range-input {
    font-size: 20px;
  }
  .el-button {
    width: 150px;
    height: 60px;
    box-shadow: unset;
    @apply text-xl rounded-xl;
    &--primary{

      background-color: #022950;
    }
  }
}
::v-deep .el-upload{
  margin-top: 17px;
border-radius: 16px;
}
::v-deep .el-upload-dragger{
  height: 239px;
border-radius: 16px;
}
::v-deep .el-upload{
  height: 239px;
border-radius: 16px;
}
.el-upload__text{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 22px;
margin-bottom: 49px;
display: flex;
justify-content: center;
align-items: center;
}
.el-upload__text2{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>