<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" type="form" title="文件归档" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>标题：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width:400px" v-model="form.title" placeholder="请填写标题" autocomplete="off"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:menu_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>目录：
          </div>
          <div class="xy-table-item-content">
            <!-- <el-input style="width:400px" v-model="form.menu_id" placeholder="请填写目录" autocomplete="off"></el-input> -->
            <!-- <treeselect :multiple="false" :options="menus" :normalizer="normalizer" placeholder="请选择目录"
              v-model="form.menu_id" /> -->
              <!-- <el-tree
                :data="menus"
                :props="normalizer"
                accordion

                >
              </el-tree> -->
              <el-cascader-panel ref="menu" @change="getCheckedNodes" :props="normalizer" :options="menus" :show-all-levels="false"></el-cascader-panel>
              <!-- <el-cascader></el-cascader> -->
          </div>
        </div>
      </template>
      <template v-slot:file_list>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' :file-list="pictureList" ref="pictureUpload"
              style="width:400px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
              :on-remove="handleRemove">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>
     <!-- <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>内容：
          </div>
          <div class="xy-table-item-content" style="width: 99.9%;">
            <tinymce v-model="form.content" ref="tiny" :height="300" />
          </div>
        </div>
      </template> -->

    </xy-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'
  import {
    store
  } from "@/api/lawsfile/article.js";
  import {
    listregulation
  } from "@/api/lawsfile/regulation.js";
  import Treeselect from "@riophae/vue-treeselect";
  import Tinymce from '@/components/Tinymce'
  export default{
    components:{
      Tinymce,
      Treeselect
    },
    data(){
      return{
        isShow:false,
        pictureList:[],
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        upload_link:'',
        allMenus:[],
        normalizer: {
            label: "name",
            children: "children",
            checkStrictly: true,
            value:"id",
            expandTrigger:'hover'
        },
        menus:[
          {
            disabled: true,
            type:2,
            name:'安全生产制度',
            children:[]
          },
          {
            disabled: true,
            type:1,
            name:'法律法规',
            children:[]
          },
          {
            disabled: true,
            type:3,
            name:'红头文件',
            children:[]
          },
          {
            disabled: true,
            type:12,
            name:'制度化管理',
            children:[]
          }
        ],
        form:{
          title:"",
          menu_id:"",
          file_list:'',
          content:'',
          type:1
        },
        rules:{
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          menu_id: [{
            required: true,
            message: '请选择归属的目录',
            trigger: 'blur'
          }]
        },

      }
    },
    created(){
       this.uploadOther.token = getToken();
       this.getMenus()
    },
    methods:{
      getMenus(){
        var that = this;
        this.menus.map(item=>{
          listregulation(1, item.type).then(res => {
            let arr = this.getTreeData(res)
            item.children = arr;
          }).catch(error => {
            console.log(error)
          })
        })
      },
      getCheckedNodes(e){
        if(e){
          let nodes =  this.$refs.menu.getCheckedNodes()[0].data
          this.form.menu_id = nodes.id
          this.form.type = nodes.type
          this.$refs.menu.dropDownVisible = false
        }
      },
      getTreeData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
              data[i].children = undefined;
          } else {
              this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      handleRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlesuccess(response, file, fileList) {
        this.pictureList = fileList
      },
      submit(){
        let _files = []
        if (this.pictureList.length > 0) {
          for (var h of this.pictureList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.file_list = _files
        } else {
          this.form.file_list = []
        }
        store(this.form).then(response => {
          this.$Message.success('归档成功');
          this.isShow = false
          this.$emit("uploadOa")
        }).catch(error => {
          //reject(error)
        })
      },
    },
    watch:{
      upload_link(newval){
        if(newval){
          this.upload_link = newval
          this.form.title = newval.original_name.split(".")[0]
          this.pictureList.push({
            id:newval.id,
            name:newval.original_name,
            url:newval.url
          })
        }else{
          this.pictureList = []
          this.upload_link = ''
        }

      },
      isShow(newVal) {
        if (newVal) {

        } else {
          this.pictureList = []
          this.upload_link = ''
          this.$refs['dialog'].reset()
        }
      },
    },
  }
</script>

<style scoped>
  /deep/ .title,
  /deep/ .menu_id,
  /deep/ .file_list,
  /deep/ .content{
    flex-basis: 100%;
  }
</style>
