<template>
  <div class="auto select-overspread" style="overflow-y: scroll;overflow-x: hidden">
    <ul class="nav nav-tabs" style="position: relative">
      <p class="bg-info text-center" style="padding: 8px;">{{ title }}</p>
      <h3 class="txtline" v-if="model.parent_name">上一级【{{ model.parent_name }}】</h3>
      <v-select :value.sync="type"
                :options='types'
                :value-single="true"
                placeholder='展示模式'
                :search="false"
                v-if="!look"
                width="15rem"
                style="position: absolute ;top: 0; right: 0; "
                close-on-select></v-select>
    </ul>
    <div class="row" style="margin-top:1rem;">
      <div class="col-sm-6">
        <label class="font_normal_body">功能名称</label>
        <input type="text"
               :disabled="look"
               v-model="model.menu_name" style="width:60%"
               class="input_search full-with" id="name" placeholder="功能名称">
      </div>
      <button class="button_export button_spacing" v-if="!look" @click="importFile">添加附件
      </button>
    </div>
    <!--  md模式  -->
    <md-to-html v-if="type!=='普通模式'" :text.sync="model.depict" :look="look"></md-to-html>
    <!--   普通模式编辑 -->
    <div class="form-horizontal" style="margin-top:1rem;flex: 1;" v-if="type==='普通模式'">
      <div class="row">
        <div class="col-sm-12">
          <label class="font_normal_body">&nbsp;&nbsp;&nbsp;描述&nbsp;&nbsp;&nbsp;</label>
          <textarea class="ver-textarea input_search full-with" style="width:80%;height: 48rem !important;" rows="4"
                    :disabled="look" v-model="model.depict"></textarea>
        </div>
        <!--          <div class="col-sm-12" id="content">-->
        <!--          </div>-->
      </div>
      <div class="col-sm-6" style="margin-top: 1rem;height:12rem;text-align: center" v-for="row in file"
           @contextmenu.prevent="delFile(row)" v-if="row.type ==='图片'">
        <a :href="row.file_src" target="_blank" style="width:100%;height: 100%;display: inline-block">
          <img style="width: auto;height: auto;max-width: 100%;max-height: 100%;"
               :title="look?'':'右键删除'" :src="row.file_src" alt="..."/>
        </a>
      </div>
      <div class="row" style="margin-top: 1rem;text-align: center" v-for="row in file"
           @contextmenu.prevent="delFile(row)" v-if="row.type !=='图片'">
        <a class="form-control" :href="row.file_src" target="_blank" :title="look?'':'右键删除'"
           style="width:100%;height: 100%;display: inline-block;cursor:pointer;">{{ row.file_name }}
        </a>
      </div>
    </div>
    <!--  按钮  -->
    <div class="row col-sm-12" style="margin-top: 1rem">
      <button @click="confirm()" v-show="!look" class="btn button_search col-sm-1 col-sm-offset-5"
              style="width: 70px">
        <span class="glyphicon glyphicon-floppy-disk"></span>保存
      </button>
      <button @click='cancel()' class="btn button_clear col-sm-1 col-sm-offset-1" style="width: 70px">
        <span class=" glyphicon glyphicon-log-out"></span>返回
      </button>
    </div>
    <modal :show.sync="showFile" width="480px" v-ref:modal backdrop="true">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeFile"><span>&times;</span></button>
        <h4 class="modal-title">选择文件</h4>
      </header>
      <article slot="modal-body" class="modal-body" style="text-align: center">
        <div class="form-group">
          <file-upload class="my-file-uploader" name="ldapDisplayUploadFile"
                       action="rs/file/uploadFile" tagname="确定" :headers="{username:'上传于'}"
                       v-ref:file></file-upload>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer" style="display: none"></footer>
    </modal>
    <work-busy :is-busy="isbusy"></work-busy>
  </div>
</template>

<script>

export default {
  title: '功能',
  props: ['parent', 'data', 'look', 'title'],
  data() {
    return {
      model: {
        menu_id: null,
        menu_name: "",
        parent_id: "0",
        component: null,
        create_by: "",
        depict: "",
        type: ""
      },
      type: '',
      isbusy: false,
      types: [{label: '普通模式', value: '普通模式'}, {label: 'markDown模式', value: 'markDown模式'}],
      showFile: 'false',
      file: []
    }
  },
  watch: {
    data: {
      handler(n, o) {
        // if (!n.menu_id&&n.menu_id !== o.menu_id)
        this.initdata()
      },
      deep: true //对象内部属性的监听，关键。
    },
  },
  ready() {
    this.initdata()
  },
  methods: {
    //初始化数据
    initdata() {
      this.model = {
        menu_id: null,
        menu_name: "",
        parent_id: "0",
        component: null,
        create_by: "",
        depict: "",
        type: "普通模式"
      }
      this.file = []
      this.model = Object.assign({}, this.model, this.data)
      this.type = this.model.type
      if (this.model.menu_id) {
        this.$resetpost('rs/sql/ldap_Single', {
          data: {
            table: 't_display_file',
            condition: ` 1 = 1 and menu_id = ${this.model.menu_id}`,
            order :'id desc'
          }
        }, {rejectMsg: null, resolveMsg: null}).then(res => {
          this.file = res.data
        })
      }
    },
    // 关闭文件上传对话框
    closeFile() {
      this.showFile = 'false'
      // 将选的文件清空
      this.$refs.file.$el.querySelector('input').value = ''
    },
    cancel() {
      this.$dispatch('cancel')
    },
    async confirm() {
      this.model.type = this.type
      await this.$resetpost('/rs/entity/t_display', this.model).then(res =>
        this.$parent.$refs.funlist.searchData()
      )
    },
    importFile() {
      this.showFile = 'true'
    },
    delFile(row) {
      if (!this.look)
        this.$resetdelete(`/rs/entity/t_display_file`, {id: row.id}).then(res =>
          this.initdata()
        )
    }
  },
  events: {
    beforeFileUpload: async function (file,) {
      this.isbusy = true
    },
    onFileUpload: async function (file, res) {
      console.log("上传完毕" + JSON.stringify(res))
      let img = ["bmp", "jpg", "png", "gif", "svg", "webp", "jpeg"]
      //没有menu id  没有的话先触发保存方法  获取id
      if (!this.model.menu_id) {
        let menu_id = await this.$resetpost('/rs/entity/t_display', this.model)
        console.log("上传完毕看看id", menu_id)
        this.model.menu_id = menu_id.data.menu_id
      }
      let data = {
        file_path: res.f_downloadpath,
        file_name: res.f_filename,
        file_src: res.f_downloadpath.split('E:')[1].replace(/\\/ig, '/'),
        type: img.includes(res.f_filename.substr(res.f_filename.lastIndexOf('.') + 1)) ? '图片' : '文件',
        upload_by: this.$login.f.name,
        menu_id: this.model.menu_id
      }
      await this.$resetpost(`rs/entity/t_display_file`, data, {
        resolveMsg: null,
        rejectMsg: null
      }).then((res) => {
        this.showFile = 'false'
        this.isbusy = false
        if (this.type === '普通模式') {
          this.file.push(data)
        } else {
          if (data.type === '图片') {
            this.model.depict += `\n![${data.file_name}](${data.file_src})\n`
          } else {
            this.model.depict += `[${data.file_name}](${data.file_src})`
          }
        }
      }).catch(error => {
        this.isbusy = false
      })
    },
    'onFileError'(error) {
      this.$showAlert(error, 'warning', 2000)
      this.isbusy = false
    }
  },
}
</script>

<style>
.full-with {
  width: 100%;
}

#ldapDisplayUploadFile {
  height: auto !important;
}
</style>
