<script setup>
import moment from 'moment'
import {ref, watch} from 'vue'
import apiReportMaterial from '@/api/reportMaterial'
import { showToast } from 'vant'
import Classify from '@/views/report/components/reportInsert/reportMaterial/Classify.vue'

const show=defineModel('show',{type:Boolean,default:false})

const props=defineProps({
  source:{
    type:String,//来源chart图相关的,excel表格,sandbox逻辑图 , sa_doc文档对比
    default:''
  },
  sourceId:{
    type:Number,
    default:0
  },
  defaultName:{
    type:String,//默认的名称
    default:''
  }
})

const name=ref('')
const classifyId=ref(0)
const classifyName=ref('')
const showSelectClassify=ref(false)
function handleSelectClassify(e){
  classifyId.value=e.classifyId
  classifyName.value=e.names.join('/')
}

async function handleSave(){
  if(!name.value){
    showToast('请填写图片名称')
    return
  }
  if(!classifyId.value){
    showToast('请选择分类')
    return
  }
  const res=await apiReportMaterial.materialOtherSave({
    ClassifyId:classifyId.value,
    MaterialName:name.value,
    ObjectId:props.sourceId,
    ObjectType:props.source
  })
  if(res.Ret!==200) return
  showToast('保存成功')
  show.value=false
}


watch(
  ()=>show.value,
  (n)=>{
    if(n){
      name.value=`${props.defaultName}${moment().format('YYYYMMDD')}`
    }else{
      name.value=''
      classifyId.value=0
      classifyName.value=''
    }
  }
)

</script>

<template>
  <van-popup 
    v-model:show="show" 
    position="bottom" 
    round 
    class="global-pop-wrap_mobile save-to-material-wrap"
  >
    <div class="head-box">
      <span class="cancel-btn" @click="show=false">取消</span>
      <span class="title">上传素材库</span>
      <span class="save-btn"  @click="handleSave">保存</span>
    </div>
    <div class="content-box">
      <van-cell title="分类" is-link :value="classifyName||'请选择分类'" @click="showSelectClassify=true" />
      <van-field v-model="name" label="名称" placeholder="请输入图片名称" />
    </div>
  </van-popup>
  <!-- 选择分类 -->
  <Classify v-model:show="showSelectClassify" @change="handleSelectClassify"/>
</template>

<style lang="scss" scoped>
.save-to-material-wrap{
  .head-box{
    display: flex;
    align-items: center;
    padding: 32px;
    .cancel-btn{
      color: $font-grey;
    }
    .save-btn{
      color: $theme-color;
    }
    .title{
      flex: 1;
      font-size: 32px;
      text-align: center;
    }
  }
  .content-box{
    min-height: 400px;
    padding: 32px 0;
    :deep(.van-cell__title){
      flex: none;
      box-sizing: border-box;
      width: var(--van-field-label-width);
      margin-right: var(--van-field-label-margin-right);
      color: var(--van-field-label-color);
      text-align: left;
    }
    :deep(.van-field__control){
      text-align: right;
    }
  }
  

}
</style>