<template>
  <el-dialog
    class="trans-report-wrap"
    v-if="transReportShow"  
    :visible.sync="transReportShow" 
    :close-on-click-modal="false" 
    :modal-append-to-body="false"
    @close="cancelHandle" width="689px" v-dialogDrag center>
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px">PPT转报告</span>
    </div>
    <div class="dialog-container" v-loading="getListLoading" element-loading-text="获取报告列表中...">
      <div class="input-item">
        报告类型：<!-- <el-select  placeholder="请选择报告类型" v-model="reportItem.type" required >
                    <el-option
                      v-for="item in typeArr"
                      :key="item.Id"
                      :label="item.ClassifyName"
                      :value="item.Id"
                    ></el-option>
                  </el-select> -->
                  <el-cascader placeholder="请选择报告类型" v-model="choosedReport" required
                               :options="reportList"
                               :props="{children:'Child',value:'Id',label:'ClassifyName'}"
                  />
      </div>
      <div class="input-item">
        报告标题：<el-input  placeholder="请输入报告标题" v-model="reportItem.title" required ></el-input>
      </div>
      <div class="input-item" v-if="$parent.currentLang==='en'">
        报告摘要：<el-input type="textarea" placeholder="请输入摘要" v-model="reportItem.abstract" resize="none" :rows="5"/>
      </div>
    </div>
    <div slot="footer" class="foot-container">
      <el-button type="primary" @click="saveChange">确 定</el-button>
      <el-button @click="cancelHandle">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {classifyTelList} from 'api/api.js';
import * as reportEnInterface from '@/api/modules/reportEnApi';
export default {
  props:{
    transReportShow:{
      type:Boolean,
      default:false
    },
    pptTitle:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      reportItem:{
        type:'',
        title:'',
        abstract:''
      },
      typeArr:[],
      getListLoading:false,
      reportList:[],
      choosedReport:[]
    };
  },
  watch:{
     transReportShow(newVal){
      if(newVal){
        this.getListLoading = true
        this.reportItem.title = this.pptTitle
        this.reportList=[]
        this.choosedReport=[]
        this.getClassifylist()
        this.reportItem.type = ''
        this.reportItem.abstract=''
      }
    }
  },
  mounted(){
    this.reportItem.title = this.pptTitle
    this.getClassifylist()
  },
  methods: {
    async getClassifylist(){
      const res = this.$parent.currentLang!=='en'
                  ?await classifyTelList()
                  :await reportEnInterface.classifyList({CurrentIndex:0,PageSize:1000,KeyWord:''})
      if(res.Ret===200){
        this.reportList = this.$parent.currentLang!=='en'
                          ?res.Data
                          :res.Data.List
      }
      this.getListLoading = false
    },
    saveChange(){
      this.reportItem.type=this.getReportType()
      if(!this.reportItem.type||this.reportItem.type.length===0){
        this.$message.warning('请选择报告类型')
        return
      }
      if(!this.reportItem.title){
        this.$message.warning('请输入报告标题')
        return
      }
      if(this.$parent.currentLang==='en'&&!this.reportItem.abstract){
        this.$message.warning('请输入报告摘要')
        return
      }
      this.$emit('transSet',this.reportItem)
    },
    cancelHandle(){
      this.$emit('cancel')
    },
    getReportType(){
      if(this.$parent.currentLang==='en'){
        return this.choosedReport
      }else{
        return this.choosedReport.length?this.choosedReport[this.choosedReport.length-1]:''
      }
    }
  },
};
</script>
<style lang="scss">
.trans-report-wrap{
  .input-item{
    .el-cascader{
      .el-input{
        width: 100%;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.dialog-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .input-item{
    width: 320px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .el-input,.el-cascader,.el-textarea{
      flex: 1;
    }
  }
}
</style>
