<template>
  <div>
     <el-dialog
        :before-close="close_error_dialog"
        :visible.sync="change_error_dialog_visible"
        width="600px"
        height='600px'
        style="word-wrap: break-word"
        >
        <div slot="title" id="dialog-title_error">
          错误信息
        </div>
        <div id="title_error">{{error_info.error_title}}</div>
        <div id="error_botton">
          <el-button  size='mini' @click.native="show_detail">详情</el-button>
          <!-- <el-button  size='mini' @click.native="show_dengji_dialog" >登记</el-button> -->
          <el-button  size='mini' @click.native="close_error_dialog" >关闭</el-button>
        </div>
        <div id="detail_error" v-show="detail_visible">{{error_info.error_detail}}</div>
            <el-dialog
                :visible.sync="dialogVisible_inner"
                width="500px"
                append-to-body
                height='500px'>
                <div slot="title" id="dialog-title_error">
                  操作步骤(可为空)
                </div>
                <div>
                  <el-input id="_buzou" :autosize="{ minRows: 10, maxRows: 100}" type="textarea" v-model="sTaskName"></el-input>
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button size='mini' @click="dialogVisible_inner = false">取 消</el-button>
                  <el-button  size='mini' type="primary" @click="dengjiBug">确 定</el-button>
                </div>
            </el-dialog>
    </el-dialog>

  </div>
</template>

<script>
export default {
  computed: {
    change_error_dialog_visible() {
      return this.$store.state.sysStore.error_dialog_visible
    },
    error_info() {
      this.count++
      if (this.count > 0) {
        this.dialogVisible_inner = false
      }
      return this.$store.state.sysStore.error_info
    }
  },
  data() {
    return {
      count: 0,
      detail_visible: false,
      dialogVisible_inner: false,
      sTaskName: ''
    }
  },
  methods: {
    close_error_dialog() {
      this.$store.commit('change_error_dialog_visible', false)
    },
    show_dengji_dialog() {
      this.dialogVisible_inner = true
    },
     // 获得当前页面的路由信息
    get_page_info() {
      const index = this.$store.getters.activeTabIndex
      const { name, path } = this.$store.state.globalStore.headerTabs[index]
      return {
        name, path
      }
    },
    upload_list() { // bug上传
      const { path } = this.get_page_info()
      const parm = {
        sFormURL: path
      }
      this.$API.post(`mesAPI/pb_bug/upload_list/`, {}, {}, parm)
    },
    dengjiBug() { // 登记bug新建
      const { name, path } = this.get_page_info()
      const sessionLogindata = sessionStorage['login_data']
      const login_data = sessionLogindata ? JSON.parse(sessionLogindata) : ''
      const { error_detail, error_title } = this.error_info
      let sCreator = ''
      if (login_data) {
        sCreator = login_data.name
      }
      const length = error_title.length
      let error_title_str = error_title
      if (length > 80) {
        error_title_str = error_title.substring(0, 80)
      }
      const str1 = `操作步骤：${this.sTaskName}
错误简介：${error_title_str}`
      const parm = {
        sFormURL: path,
        sFormName: name,
        iPriority: '0',
        iTaskType: '9',
        sTaskName: str1,
        sCreator,
        sRemark: error_detail || error_title
      }
      // 这里是FromData形式传递，因为意见反馈页面是表单传递（有图片）。
      const formData = new FormData()
      for (const key in parm) {
        formData.append(key, parm[key])
      }
      this.$API.post('mesAPI/pb_bug/', {}, {}, formData).then((res) => {
        this.$message.success('登记成功')
        this.upload_list()
        this.dialogVisible_inner = false
        this.close_error_dialog()
      })
    },
    show_detail() {
      this.detail_visible = !this.detail_visible
    }
  }
}
</script>

<style scoped>
#title_error {
  margin-bottom: 80px;
  text-align: left;
  color: red;
  font-size: 24px;
  max-height: 150px;
  display: block;
  width: 560px;
  height: 208px;
  overflow: auto;
}
#detail_error {
  width: 560px;
  height: 200px;
  overflow: auto;
  background: #f3f3f3;
  box-shadow: 1px 1px 1px 1px #e6e6e6;
  border-radius: 5px;
}
#error_botton {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
#dialog-title_error {
  text-align: left;
  font-size: 20px;
}
</style>
