<template>
  <div class="chooseCatalog-dialog-wrap">
    <el-dialog
    v-if="chooseCatalogShow"  
    :visible.sync="chooseCatalogShow" 
    :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">选择目录</span>
      </div>
      <div class="dialog-container">
        <div class="classify-cont">
          <el-tag
            v-for="item in catalogArr"
            :class="['classify-tag',{'act': selectedCatalog===item.GroupId}]"
            :key="item.GroupId"
            type="info"
            effect="plain"
            @click="addChoosedCatalog(item.GroupId)"
          >
            {{ item.GroupName }}
          </el-tag>
        </div>
        <span class="add-cont" @click="handleAddCatalog">
          <i class="el-icon-circle-plus-outline" />
          新增
        </span>
      </div>
      <div slot="footer" class="foot-container">
        <el-button type="primary" @click="saveChange">保 存</el-button>
        <el-button @click="cancelHandle">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增目录弹窗 -->
    <pub-dialog
      :isShow="catalogShow"
      :title="dia_title"
      :keysArr="dialogKeyArrs"
			:formData="formData"
			:formRules="addRules"
      @cancel="catalogShow = false"
      @ensureCallBack="addCatalog"
    />
  </div>
</template>

<script>
import pubDialog from '@/components/pubDialog.vue';
import {pptInterface} from '@/api/api.js';
import {pptEnInterface} from '@/api/modules/pptEnApi.js';
export default {
  components: { pubDialog },
  props:{
    chooseCatalogShow:{
      type:Boolean,
      default:false
    },
    priviteList:{//我的目录列表
      type:Array,
      default:()=>{
        return []
      }
    },
    chooseCatalogType:{//当前打开选择目录弹窗的模式:add:添加PPT,copy:复制ppt,transform:转英文ppt
      type:String,
      default:'add'
    }
  },
  data() {
    return {
      catalogArr:[],
      selectedCatalog:null,
      catalogShow:false,
      dia_title:'新增目录',
      dialogKeyArrs:[
        {
          label: '目录名称',
          prop: 'name',
          type: 'input',
          maxlen: 10,
          placeholder: '请输入目录名称',
        }
      ],
      formData:{
        name:'',
      },
      addRules:{
				name:[
					{ required: true, message: '目录名称不能为空', trigger: 'blur' },
				],
			}
    };
  },
  watch:{
    chooseCatalogShow(newValue){
      if(newValue){
        this.getMyCatalogList()
        this.init()
      }
    }
  },
  methods: {
    addChoosedCatalog(id){
      if(this.selectedCatalog===id) {
        this.selectedCatalog = null
      }else {
        this.selectedCatalog = id;
      }
    },
    handleAddCatalog(){
      this.catalogShow = true
    },

    async addCatalog({name}){
      //this.catalogArr.push({GroupId:this.catalogArr.length+1,GroupName:name})
      //新增目录
      const res = (this.$parent.currentLang!=='en'&&this.chooseCatalogType!=='transform')?await pptInterface.addCatalog({
        GroupName:name
      }):await pptEnInterface.addCatalog({
        GroupName:name
      })
      if(res.Ret===200){
        this.getMyCatalogList()
        this.catalogShow = false
      }
    },
    saveChange(){
      if(!this.selectedCatalog){
        this.$message.warning('请选择目录')
        return
      }
      this.$emit('selectCatalog',this.selectedCatalog)
      this.selectedCatalog = null
    },
    cancelHandle(){
      this.$emit('cancel')
    },
    //获取我的PPT目录
    async getMyCatalogList(){
      const res  = (this.$parent.currentLang!=='en'&&this.chooseCatalogType!=='transform')
        ?await pptInterface.getPrivateCatalogList()
        :await pptEnInterface.getPrivateCatalogList()
      if(res.Ret===200){
        this.catalogArr = res.Data.List||[]
      }
    },
    init(){
      this.selectedCatalog = null
    }
  },
  mounted(){}
};
</script>

<style scoped lang="scss">
.chooseCatalog-dialog-wrap{
  .dialog-container {
    .classify-cont {
      padding: 30px 10px;
      border: 1px dashed #999;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .classify-tag {
        margin: 5px;
        padding: 0 20px;
        cursor: pointer;
        &.act {
          background: #409eff;
          color: #fff;
        }
      }
    }
    .add-cont {
      color: #409eff;
      cursor: pointer;
    }
  }
}
</style>
