<template>
  <div>
    <!--1.技术主管审批-->
    <div>
      <!-- 执行顺序 -->
      <Alert class="equip_alert">
        <div>
          <table class="tableClass table1Class">
            <tbody>
              <tr>
                <th colspan="4" style="text-align: center;font-size: 15px">
                  仪器报废申请单
                </th>
              </tr>
              <tr>
                <th>申请编号</th>
                <td>{{ getObj.num }}</td>
                <th>申请人</th>
                <td>{{ getObj.applyName }}</td>
              </tr>
              <tr>
                <th>申请时间</th>
                <td>{{ this.$dateformat(getObj.applyTime, 'yyyy-mm-dd HH:MM') }}</td>
                <th>申请原因</th>
                <td>{{ getObj.applyReason }}</td>
              </tr>
              <tr>
                <th>备注</th>
                <td colspan="3">
                  {{ getObj.remark }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <Form inline :label-width="100">
          <Form-item label="技术主管意见" prop="firstStepAdvice" style="width:70%;margin-top: 20px">
            <Input name="firstStepAdvice" value="同意" placeholder="请输入审批意见" />
          </Form-item>
          <div align="left" style="display: inline-block;margin-top: 23px;">
            <Button type="success" style="margin-left: 15px;" @click="_approve(2,'确定通过？')">
              同意
            </Button>
            <Button type="error" style="margin-left: 15px;" @click="_approve(3,'确定驳回？')">
              驳回
            </Button>
            <Button type="error" style="margin-left: 15px;" @click="_approve(7,'确定终止？')">
              终止
            </Button>
          </div>
        </Form>
      </Alert>
      <!--操作-->
      <div>
        <Button type="success" @click="_addScrap">
          添加
        </Button>
      </div>
    </div>
    <!--内容-->

    <div style="margin-top: 10px">
      <element-table
        ref="pageTable"
        :page-columns="pageColumns"
        :get-page="getPage"
        :table-height="360"
        hide-page
        :icon-msg="iconMsg"
        :opt-col-width="80"
        @on-result-change="_tableResultChange"
      >
        <el-table-column
          v-for="item in pageColumns"
          :key="item.key"
          show-overflow-tooltip
          :prop="item.key"
          :label="item.title"
          :min-width="item.width"
          :fixed="item.fixed?item.fixed:undefined"
        >
          <template slot-scope="scope">
            <div v-if="item.key === 'reason'">
              <Select
                v-model="scope.row.reason"
                filterable
                transfer
                @on-change="_reasonChange('reason',scope)"
              >
                <Option v-for="item in reasonList" :key="item.id" :value="item.reason">
                  {{ item.reason }}
                </Option>
              </Select>
            </div>
            <div v-else-if="item.key === 'money'">
              <el-input
                v-model="scope.row.money"
                type="number"
                @focus="_handleRow(scope)"
                @blur="_save('money')"
              />
            </div>
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </element-table>
    </div>
    <Form id="scrap-file-form" :label-width="90" inline style="margin-top: 10px;">
      <Form-item label="附件上传">
        <div v-for="item in lmsEquipFiles" :key="item" class="file-upload-list">
          <div>
            <!--<img :src="item.url">-->
            <div class="file-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="_handleView(item)" />
              <Icon type="ios-cloud-download-outline" @click.native="_downloadFile(item)" />
              <Icon type="ios-trash-outline" @click.native="_handleRemove(item)" />
            </div>
          </div>
          {{ item.orginName }}
        </div>
        <Upload
          :show-upload-list="false"
          :with-credentials="true"
          :on-success="_handleSuccess"
          :before-upload="_handleBeforeUpload"
          type="drag"
          :action="fileAction"
          :data="fileObj"
          style="display: inline-block;width:100px;"
        >
          <div style="width: 100px;height:100px;line-height: 100px;">
            <Icon type="ios-cloud-upload" size="20" />
          </div>
        </Upload>
      </Form-item>
    </Form>
    <!--添加-->
    <equipScrapAdd ref="addModal" @on-result-change="_page" />
  </div>
</template>
<script>
import global from '../../../../api/config'
import { equipScrapDetail, equipScrap } from '../../../../api'
import equipScrapAdd from './equipScrapAdd'

export default {
  components: {
    equipScrapAdd
  },
  data() {
    return {
      selectIds: [],
      id: {},
      currentRow: {},
      pageColumns: [
        { title: '仪器编号', key: 'labNum', width: 160, fixed: true },
        { title: '仪器名称', key: 'name', width: 160 },
        { title: '报废原因', key: 'reason', width: 160 },
        { title: '金额', key: 'money', width: 160 },
        { title: '备注', key: 'remark', width: 160 },
        { title: '规格型号', key: 'spec', width: 160 },
        { title: '制造厂商', key: 'productPlace', width: 160 }
      ],
      getPageList: [],
      iconMsg: [{ type: 'pt-trash', id: '', name: '删除' }],
      getPage: {
        records: []
      },
      reasonList: [],
      getObj: {},
      dataObj: {
        scrapId: ''
      },
      fileObj: {
        id: '',
        type: 1
      },
      filePath: '',
      lmsEquipFiles: [],
      fileAction: global.baseURL + '/res/v1/equip_scrap/uploadFile'
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this._page()
    this._getReasonList()
  },
  methods: {
    _page: async function() {
      const obj = Object.assign(
        { repairId: this.id },
        this.$refs.pageTable._searchParams()
      )
      const result = await equipScrapDetail.getById(obj)
      if (result) {
        this.getObj = result
        this.dataObj.scrapId = this.getObj.id
        this.fileObj.id = this.getObj.id
        this.lmsEquipFiles = this.getObj.lmsEquipFiles
        this.getPage = {
          records: result.lmsEquipScrapDetailVOList
        }
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    },
    _handleRow(data) {
      this.currentRow = data.row
    },
    // 报废原因 reason
    _getReasonList: async function(reason = '') {
      const data = {
        name: '报废原因',
        value: reason
      }
      this.reasonList = await equipScrapDetail.equipScrapSearch(data)
    },
    _reasonChange(key, handleObj) {
      this._handleRow(handleObj)
      this._save(key)
    },
    _save: async function(key) {
      const data = {
        id: this.currentRow.id,
        obj: {
          [key]: this.currentRow[key]
        }
      }
      const result = await equipScrapDetail.equipRepairBreakDownSave(data)
      if (result) {
        // this._page()
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '删除':
          this._delScrap(data)
          break
      }
    },
    _approve(allow, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          const data = {}
          data.id = $('#flowFrame', parent.document).attr('data-tid')
          data.status = allow
          data.reason = $('input[name="firstStepAdvice"]').val()
          this._approveOk(data)
        }
      })
    },
    _approveOk: async function(data) {
      const result = await equipScrap.approve(data)
      if (result) {
        this.$Message.success('审批成功！')
        setTimeout(() => {
          parent.location.replace(global.webURL + '/sys/workflow/flow_task')
        }, 200)
      }
    },
    _addScrap() {
      this.$refs.addModal._open(this.id) // 打开添加操作
    },
    _delScrap(data) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除？',
        onOk: () => {
          this._delOk(data.id)
        }
      })
    },
    _delOk: async function(id) {
      const result = await equipScrapDetail.deleteByIds(id)
      if (result) {
        this._page()
        this.$Message.success('删除成功！')
      }
    },
    _handleView(data) {
      this.filePath = data.filePath
      const index1 = this.filePath.lastIndexOf('.')
      const index2 = this.filePath.length
      const suffix = this.filePath.substring(index1 + 1, index2) // 后缀名
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        this.visible = true
      } else {
        this.$Message.warning({
          content: '非图片文件无法查看，请下载查看',
          duration: 3
        })
        this.visible = false
      }
    },
    _downloadFile(file) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要下载？',
        onOk: () => {
          const url =
            global.baseURL + '/res/v1/equip_scrap/downLoadFile?id=' + file.id
          window.open(url)
        }
      })
    },
    _handleRemove(file) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除文件？',
        onOk: async () => {
          const fileList = this.lmsEquipFiles
          const data = {
            id: file.id,
            scrapId: this.dataObj.scrapId,
            type: 1
          }
          const result = await equipScrap.deleteFile(data)
          if (result) {
            this.lmsEquipFiles.splice(fileList.indexOf(file), 1)
            this.$Message.success('删除成功！')
          }
        }
      })
    },
    _handleBeforeUpload() {},
    _handleSuccess(response, file, fileList) {
      if (response.success) {
        this.$Message.success('上传成功！')
        this.lmsEquipFiles.push(response.data)
      } else {
        this.$Message.error('上传失败！')
      }
    }
  }
}
</script>
