<template>
      <el-container id='issuse_page'>
        <el-header>
          <el-row>
            <el-col :span='5'>
              <el-input size='mini' clearable v-model="searchParam.quick_query" placeholder="任务号/描述" prefix-icon="el-icon-search">
            </el-input>
            </el-col>
            <el-col :span="4" class="search-button-area">
                      <el-button-group>
                          <el-button @click="query_bill_list" size="mini" icon="el-icon-search" type="primary"></el-button>
                          <el-popover placement="bottom"
                                  width="300"
                                  trigger="click"
                                  v-model="bill_search_popover_visible">
                              <el-row>
                                 <el-col :span="24">
                                        <el-form label-position="left"   ref="searchParam" label-width="80px">
                                            <el-form-item label="窗口名称" prop="sFormName">
                                                <el-input clearable  v-model="searchParam.sFormName" size="mini"  auto-complete="off"></el-input>
                                            </el-form-item>
                                           <el-form-item label="状态" prop="searchParam.iStatus">
                                             <el-select style="width:100%"
                                                v-model="searchParam.iStatus"
                                                multiple
                                                collapse-tags
                                                size="mini"
                                              >
                                              <el-option
                                                v-for="item in iStatus_options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                              </el-option>
                                            </el-select>
                                           </el-form-item>
                                        </el-form>
                                  </el-col>
                              </el-row>
                             <el-row>
                                  <el-col style="float: right; width: 140px">
                                      <el-button size="small" @click="bill_search_popover_visible=false">取消</el-button>
                                      <el-button size="small" @click="query_bill_list" type="primary">确定</el-button>
                                  </el-col>
                              </el-row>

                              <el-button size="mini" type="primary" slot="reference">
                                  更多搜索
                                  <i class="el-icon-arrow-down el-icon--right"></i>
                              </el-button>
                          </el-popover>
                      </el-button-group>
            </el-col>
            <el-col :span='10'>
              <el-button size='mini' @click="save_one(issue_data)">保存</el-button>
              <el-button size='mini' @click="handle('over')">完结</el-button>
              <el-button size='mini' @click="handle('repulse')">打回</el-button>
              <el-button size='mini' @click="handle('delete_bug')">删除</el-button>
              <el-button size='mini' @click="upload_list">上传</el-button>
            </el-col>
            <el-col :span="4">
              <el-switch
                @change='change_switch'
                v-model="is_curry_page"
                active-text="当前页面"
                inactive-text="全部">
              </el-switch>
            </el-col>
          </el-row>
        </el-header>
        <el-form class="header-form" ref="form_detail_add" :rules="rules_detail" :model="issue_data"  :inline="true" size='mini'>
          <el-form-item label='窗口URL' label-width="30" prop='sFormURL'>
            <el-input  v-model="issue_data.sFormURL" type="text"></el-input>
          </el-form-item>
           <el-form-item label='窗口名称' label-width="30" prop='sFormName'>
            <el-input  v-model="issue_data.sFormName" type="text"></el-input>
          </el-form-item>
          <el-form-item label='优先级' label-width="30" prop='iPriority'>
            <BaseSelectPlugn
                :Global_data_select="Global_data_select"
                v-model="issue_data.iPriority"
                :data_base=data_base_iPriority
                >
              </BaseSelectPlugn>
          </el-form-item>
           <el-form-item label='问题类型' label-width="30" prop='iTaskType'>
             <BaseSelectPlugn
                :Global_data_select="Global_data_select"
                v-model="issue_data.iTaskType"
                :data_base=data_base_iTaskType
                >
              </BaseSelectPlugn>
          </el-form-item>
          <el-form-item label='交期' label-width="30" prop='tDeliveryTime'>
            <el-date-picker
              v-model="issue_data.tDeliveryTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="问题描述" prop='sTaskName'>
            <el-input id="hoji"  style="width:400px"  :autosize="{ minRows: 3, maxRows: 100}" v-model="issue_data.sTaskName" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="图片" prop='img'>
            <div>
              <div style="float:left">
                  <img id="imgUrl" @click="show_img" >
                  <i id='deleteIcon' @click="deleteImg">x</i>
              </div>
                <div class="a-upload">
               <input type="file"  class="inputfile" ref="fileExcle"  v-on:change="changepic">选择图片
               </div>
            </div>

          </el-form-item>
        </el-form>
        <el-table
          :data="bill_list"
          :highlight-current-row=true
          @cell-click="cell_click"
          height='300'
          :border=true
          :fit=true
          ref="multipleTable"
          :row-style="set_row_style"
          :cell-class-name="tableRowClassName"
          style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column type="index" width="55"></el-table-column>
          <el-table-column prop="sFormName" :show-overflow-tooltip=true label="窗口名称"></el-table-column>
          <el-table-column prop="sFormURL" :show-overflow-tooltip=true label="窗口URL"></el-table-column>
          <el-table-column prop="sTaskNo" label="任务号"></el-table-column>
          <el-table-column prop="iStatus" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.iStatus|bug_status}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sDeveloper" label="开发人"></el-table-column>
          <el-table-column prop="iPriority" label="优先级">
            <template slot-scope="scope">
              <span>{{scope.row.iPriority|bug_iPriority}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="iTaskType" label="问题类型">
            <template slot-scope="scope">
              <span>{{scope.row.iTaskType|bug_iTaskType}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sTaskName" :show-overflow-tooltip=true label="问题描述"></el-table-column>
          <el-table-column prop="sRemark" :show-overflow-tooltip=true label="备注"></el-table-column>
          <el-table-column prop="tDeliveryTime" :show-overflow-tooltip=true  label="交期"></el-table-column>
          <el-table-column prop="tPlanDeliveryTime" :show-overflow-tooltip=true  label="计划完成日期"></el-table-column>
          <el-table-column prop="sCreator" :show-overflow-tooltip=true label="创建人"></el-table-column>
          <el-table-column prop="tCreateTime" :show-overflow-tooltip=true label="创建时间"></el-table-column>
          <el-table-column prop="sReDescription" :show-overflow-tooltip=true label="解决方法/关闭原因"></el-table-column>
          <el-table-column fixed="right"  label="操作">
              <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                      <el-button icon="el-icon-edit" @click="double_click_row_show_dialog(scope.row)" type="text" size="mini"></el-button>
                  </el-tooltip>
              </template>
          </el-table-column>
        </el-table>
        <div class="pageControl">
                  <el-pagination @size-change="handleSizeChange"
                                  @current-change="handleCurrentChange"
                                  :current-page.sync="page"
                                  :page-sizes="page_sizes"
                                  :page-size="per_page"
                                  layout="total, sizes, prev, pager, next, jumper"
                                  :total="total">
                  </el-pagination>
          </div>
              <el-dialog  append-to-body :close-on-click-modal=false :title="title_add_detial" :visible.sync="bill_detail_add_dialog" width="900px">
                  <el-form class="header-form" id="detail_dialog" :rules="rules_detail" ref="form_detail_edit" :model="bill_query_one_detail" label-width="90px" size="mini" :inline="true">
                            <el-form-item label='窗口URL' label-width="30" prop='sFormURL'>
                              <el-input  v-model="bill_query_one_detail.sFormURL" type="text"></el-input>
                            </el-form-item>
                            <el-form-item label='窗口名称' label-width="30" prop='sFormName'>
                              <el-input  v-model="bill_query_one_detail.sFormName" type="text"></el-input>
                            </el-form-item>
                            <el-form-item label='优先级' label-width="30" prop='iPriority'>
                              <BaseSelectPlugn
                                  :Global_data_select="Global_data_select"
                                  v-model="bill_query_one_detail.iPriority"
                                  :data_base=data_base_iPriority
                                  >
                                </BaseSelectPlugn>
                            </el-form-item>
                            <el-form-item label='问题类型' label-width="30" prop='iTaskType'>
                              <BaseSelectPlugn
                                  :Global_data_select="Global_data_select"
                                  v-model="bill_query_one_detail.iTaskType"
                                  :data_base=data_base_iTaskType
                                  >
                                </BaseSelectPlugn>
                            </el-form-item>
                            <el-form-item label='交期' label-width="30" prop='tDeliveryTime'>
                              <el-date-picker
                                v-model="bill_query_one_detail.tDeliveryTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                              </el-date-picker>
                            </el-form-item>
                            <el-form-item label="问题描述" prop='sTaskName'>
                              <el-input style="width:800px"  :autosize="{ minRows: 3, maxRows: 100}" v-model="bill_query_one_detail.sTaskName" type="textarea"></el-input>
                            </el-form-item>
                             <el-form-item label="图片描述" prop='sTaskName'>
                               <img @click="show_img" style="width:100px;height:70px;" :src='img_url+bill_query_one_detail.id+"/"'>
                            </el-form-item>

                  </el-form>
                  <div slot="footer" style="width: 100%">
                      <el-row>
                          <el-button-group style="float: right">
                                                  <el-button size="mini" @click="bill_cancel_dialog">取消</el-button>
                              <el-button size="mini" type="primary" @click="save_one(bill_query_one_detail,false)">保存</el-button>
                          </el-button-group>
                      </el-row>
                  </div>
               </el-dialog>
               <el-dialog append-to-body :visible.sync="img_diolag" style="text-align:center;">
                 <img :src='show_img_url' ref="see_img" style="width:400px;height:400px;" >
                 <div slot="footer" style="width: 100%">
                      <el-row>
                          <el-button-group style="float: right">
                            <el-button size="mini" @click="set_min_bix_img('min')">缩小</el-button>
                              <el-button size="mini" type="primary" @click="set_min_bix_img('big')">放大</el-button>

                          </el-button-group>
                      </el-row>
                 </div>
               </el-dialog>
      </el-container>
</template>
<script>
import utilSingeUc from '@basicClass/util_singe_uc.js'
export default {
  mixins: [utilSingeUc],
  data() {
    return {
      show_img_url: '',
      img_diolag: false,
      img_url: '/mesAPI/pb_bug/image/',
      is_restful: true,
      is_curry_page: true,
      module_name: '/mesAPI/pb_bug',
      Global_data_select: [],
      tableData: [],
      issue_data: {
        iPriority: '0',
        iTaskType: '9'
      },
      searchParam: {},
      title_add_detial: '详情',
      bill_not_check: {
        id: ''
      },
      data_base_iPriority: {
        '无': '0',
        '低': '1',
        '中': '2',
        '高': '3',
        '加急': '4',
        '特急': '5'
      },
      data_base_iTaskType: {
        '错误': '8',
        '功能缺陷': '9',
        '其他': '10',
        '新需求': '2'
      },
      rules_detail: {
        sFormURL: [
            { required: true, message: '请完善窗口URL', trigger: 'change' }
        ],
        sFormName: [
            { required: true, message: '请完善窗口名称', trigger: 'change' }
        ],
        iPriority: [
            { required: true, message: '请完善优先级', trigger: 'change' }
        ],
        iTaskType: [
            { required: true, message: '请完善问题类型', trigger: 'change' }
        ],
        sTaskName: [
            { required: true, message: '请完善问题描述', trigger: 'change' }
        ]
      },
      file_img: null,
      iStatus_options: [
        {
          value: '0',
          label: '无状态'
        },
        {
          value: '1',
          label: '打回'
        },
        {
          value: '2',
          label: '已关闭'
        },
        {
          value: '3',
          label: '新建'
        },
        {
          value: '4',
          label: '已分派'
        },
        {
          value: '5',
          label: '已处理'
        },
        {
          value: '6',
          label: '已测试'
        }
      ]
    }
  },
  mounted() {
    const { name, path } = this.get_page_info()
    this.$set(this.issue_data, 'sFormURL', path)
    this.$set(this.issue_data, 'sFormName', name)
    this.query_bill_list()
    const that = this
    document.onkeydown = (e) => {
      if (e.ctrlKey && e.keyCode === 13) {
        this.save_one(that.issue_data)
      }
    }
    const textarea = document.getElementById('issuse_page').querySelector('textarea')
    textarea.setAttribute('placeholder', '按下Control+Enter进行保存')
    this.pase()
  },
  methods: {
    deleteImg() {
      this.file_img = null
      document.getElementById('imgUrl').removeAttribute('src')
    },
    getComputStyle(dom) {
      const style = document.defaultView.getComputedStyle(dom, null)
      return {
        width: parseInt(style.width.slice(0, -2)),
        height: parseInt(style.height.slice(0, -2))
      }
    },
    set_min_bix_img(flage) {
      const see_img = this.$refs.see_img
      const obj = this.getComputStyle(see_img)
      if (flage === 'big') {
        if (obj.width < 800 && obj.height < 800) {
          see_img.style.width = obj.width + 50 + 'px'
          see_img.style.height = obj.height + 50 + 'px'
        }
      } else {
        if (obj.width > 200 && obj.height > 200) {
          see_img.style.width = obj.width - 50 + 'px'
          see_img.style.height = obj.height - 50 + 'px'
        }
      }
    },
    show_img(event) {
      const src = event.target.src
      if (src.startsWith('http')) {
        window.open(src)
      } else {
        this.imageOpen(this.file_img)
      }
    },
    changepic() {
      if (!this.$refs.fileExcle.files[0]) return
      this.file_img = this.$refs.fileExcle.files[0]
      this.readFile(this.file_img, document.getElementById('imgUrl'))
    },
    // 建立一個可存取到該file的url
    getObjectURL(file) {
      var url = null
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    pase() {
      const that = this
      document.addEventListener('paste', function(event) {
        var items = event.clipboardData && event.clipboardData.items
        var file = null
        if (items && items.length) {
        // 检索剪切板items
          for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
              file = items[i].getAsFile()
              break
            }
          }
        }
        if (file) {
          that.readFile(file, document.getElementById('imgUrl'))
        }
        that.file_img = file
      })
    },
    readFile(file, targe) {
      const reader = new FileReader()
      reader.onload = function(event) {
        targe.src = event.target.result
      }
      reader.readAsDataURL(file)
    },
    imageOpen(file) {
      if (!file) return
      const s = this.getObjectURL(file)
      var newwin = window.open()
      var myimg = newwin.document.createElement('img')
      myimg.src = s
      newwin.document.body.appendChild(myimg)
    },
    change_switch() {
      this.query_bill_list()
    },
    double_click_row_show_dialog(row) {
      this.show_item_detail(row, false)
    },
    tableRowClassName(row) {
      const columnIndex = row.columnIndex
      const { iStatus } = row.row
      if (columnIndex === 5) {
        if (iStatus === '0') {
          return ''
        } else if (iStatus === '1') { // 打回
          return 'b_r_c_w'
        } else if (iStatus === '2') { // 已关闭
          return 'b_ygb'
        } else if (iStatus === '3') { // 新建
          return 'b_b_c_w'
        } else if (iStatus === '4') { // 已分派
          return 'b_yfp'
        } else if (iStatus === '5') { // 已处理
          return 'b_ycl'
        } else if (iStatus === '6') { // 已测试
          return 'b_ycs'
        }
        return 'b_r_c_w'
      }
    },
    query_bill_list_before() {
      const { path } = this.get_page_info()
      if (this.is_curry_page) {
        this.searchParam.sFormURL = path
      } else {
        delete this.searchParam.sFormURL
      }
    },
    // 获得当前页面的路由信息
    get_page_info() {
      const index = this.$store.getters.activeTabIndex
      const { name, path } = this.$store.state.globalStore.headerTabs[index]
      return {
        name, path
      }
    },
    close() {
      this.$emit('close_dialog', true)
    },
    getLoginDate() {
      const login_data = sessionStorage['login_data']
      return login_data ? JSON.parse(sessionStorage['login_data']).name : ''
    },
    // 保存
    save_one(data, flage = true) {
      let ref = ''
      if (data.id) {
        ref = 'form_detail_edit'
      } else {
        ref = 'form_detail_add'
      }
      let data_result = {}
      if (flage) {
        data_result = data
      } else {
        data_result = this.$pub_fun.filter_change_data(
          this.bill_query_one_copy,
          this.bill_query_one_detail,
          this.bill_not_check
        )
      }
      data_result.sCreator = this.getLoginDate()
      this.$refs[ref].validate(valid => {
        if (valid) {
          var formData = new FormData()
          for (const key in data_result) {
            formData.append(key, data_result[key])
          }
          if (this.file_img) {
            formData.append('gPicture', this.file_img)
          }
          this.$API.post('mesAPI/pb_bug/', {}, {}, formData).then((res) => {
            this.$message.success('保存成功')
            this.query_bill_list()
            this.issue_data.sTaskName = ''
            this.bill_detail_add_dialog = false
            this.file_img = null
            document.getElementById('imgUrl').removeAttribute('src')
          })
        }
      })
    },
    // 上传
    upload_list() {
      const { path } = this.get_page_info()
      const parm = {
        sFormURL: path,
        sCreator: this.getLoginDate()
      }
      this.$API.post(`${this.module_name}/upload_list/`, {}, {}, parm).then(() => {
        this.$message.success('上传成功')
        this.query_bill_list()
      })
    },
    // 完结
    handle(flage) {
      const list = this.$refs.multipleTable.selection
      if (!list.length) {
        this.$message.error('请选择数据')
        return
      }
      const id_list = list.reduce((prove, next) => {
        prove.push(next.id)
        return prove
      }, [])
      // const sUpdateMan = this.getLoginDate()
      const parm = {
        id_list,
        sCreator: this.getLoginDate()
      }
      this.$API.post(`${this.module_name}/${flage}/`, {}, {}, parm).then(() => {
        let str = ''
        if (flage === 'over') {
          str = '完结'
        } else if (flage === 'repulse') {
          str = '打回'
        } else if (flage === 'delete_bug') {
          str = '删除'
        }
        this.$message.success(str + '成功')
        this.query_bill_list()
      })
    }

  }
}
</script>
<style scoped>
.header-form >>> .el-form-item__content .el-form-item__error {
  top: 100%;
}
/* 已分派 */
.el-table >>> .b_yfp {
  background: #ffec8b;
  color: black;
}
/* 打回 */
.el-table >>> .b_r_c_w {
  background: #cd0000;
  color: black;
}
/* 新建 */
.el-table >>> .b_b_c_w {
  background: #eeee00;
  color: black;
}
.el-table >>> .b_ycl {
  background: #8bc34a;
  color: black;
}
.el-table >>> .b_ycs {
  background: #eed2ee;
  color: black;
}
.el-table >>> .b_ygb {
  background: #dcd6cd;
  color: black;
}
#imgUrl{
  width: 100px;
  height: 70px;
}
.a-upload {
      margin-top: 40px;
			padding: 4px 10px;
			height: 20px;
			line-height: 20px;
			position: relative;
			cursor: pointer;
			color: #888;
			background: #fafafa;
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			display: inline-block;
			*display: inline;
			*zoom: 1
		}

		.a-upload  input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
      cursor: pointer;

		}

		.a-upload:hover {
			color: #444;
			background: #eee;
			border-color: #ccc;
			text-decoration: none
    }
    #deleteIcon{
      position: relative;
      top: -64px;
      right:8px;
      color: red;
      font-size: 24px;

    }

</style>

