<template>
  <div>
    <!--1.实验室主任审批-->
    <div>
      <Alert class="equip_alert">
        <div>
          <table class="tableClass table1Class">
            <tbody>
              <tr>
                <th colspan="6" style="text-align: center;font-size: 15px">
                  仪器采购申请单1
                </th>
              </tr>
              <tr>
                <th>申请编号</th>
                <td>{{ getOrder.num }}</td>
                <th>申请人</th>
                <td>{{ getOrder.applyName }}</td>
              </tr>
              <tr>
                <th>申请原因</th>
                <td>{{ getOrder.applyReason }}</td>
                <th>申请时间</th>
                <td>{{ getOrder.applyTime?$dateformat(getOrder.applyTime, "yyyy-mm-dd HH:MM"):'' }}</td>
              </tr>
              <tr>
                <th>备注</th>
                <td colspan="3">
                  {{ getOrder.remark }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <Form inline :label-width="80">
          <Form-item label="审批意见:" prop="firstStepAdvice" style="width:70%;margin-top: 10px">
            <el-input v-model="firstStepAdvice" placeholder="请输入审批意见..." type="textarea" :rows="2"/>
          </Form-item>
          <div align="left" style="display: inline-block;margin-top: 20px;" class="btn-width">
            <el-button type="success" @click="_approve(2,'确定通过？')">
              同意
            </el-button>
            <el-button type="danger" @click="_approve(6,'确定驳回？')">
              驳回
            </el-button>
            <el-button type="danger" @click="_approve(10,'确定终止？')">
              终止
            </el-button>
          </div>
        </Form>
      </Alert>
      <!--操作-->
      <div style="margin-bottom: 10px;" class="btn-width">
        <el-button type="success" @click="_addPurchase" size="small">
          添加
        </el-button>
      </div>
    </div>
    <!--内容-->
    <div>
      <element-table
        ref="pageTable"
        :table-height="450"
        :get-page="getPage"
        :icon-msg="iconMsg"
        @on-result-change="_tableResultChange"
      >
        <el-table-column
          v-for="item in pageColumns"
          :key="item.key"
          show-overflow-tooltip
          sortable
          :prop="item.key"
          :label="item.title"
          :width="item.width"
          :min-width="200"
          :fixed="item.fixed?item.fixed:undefined"
        >
          <template slot-scope="scope">
            <div v-if="item.key === 'name'">
              <autoCompletes
                :value="scope.row.name"
                :down-data="nameList"
                blur
                show-key="name"
                :handle-obj="scope"
                @on-result-change="_nameChange"
              />
            </div>
            <div v-else-if="item.key === 'spec'">
              <autoCompletes
                :value="scope.row.spec"
                :down-data="specList"
                blur
                show-key="spec"
                :handle-obj="scope"
                @on-result-change="_specChange"
              />
            </div>
            <div v-else-if="item.key === 'spec'">
              <autoCompletes
                :value="scope.row.spec"
                :down-data="specList"
                blur
                show-key="spec"
                :handle-obj="scope"
                @on-result-change="_specChange"
              />
            </div>
            <div v-else-if="item.key === 'counts'">
              <el-input
                v-model="scope.row.counts"
                @focus="_handleRow(scope)"
                @blur="_save('counts')"
              />
            </div>
            <div v-else-if="item.key === 'supplierName'">
              <autoCompletes
                :value="scope.row.supplierName"
                :down-data="supplierList"
                blur
                show-key="name"
                :handle-obj="scope"
                @on-result-change="_supplierChange"
              />
            </div>
            <div v-else-if="item.key === 'productPlace'">
              <autoCompletes
                :value="scope.row.productPlace"
                :down-data="productPlaceList"
                blur
                show-key="productPlace"
                :handle-obj="scope"
                @on-result-change="_productPlaceChange"
              />
            </div>
            <div v-else-if="item.key === 'uses'">
              <autoCompletes
                :value="scope.row.uses"
                :down-data="purposeList"
                blur
                show-key="purpose"
                :handle-obj="scope"
                @on-result-change="_purposeChange"
              />
            </div>
            <div v-else>
              {{ scope.row[item.key] }}
            </div>
          </template>
        </el-table-column>
      </element-table>
    </div>
    <equipPurchaseEdit ref="editModal" @on-result-change="_page" />
  </div>
</template>
<script>
import global from '../../../../api/config'
import {
  equipInfo,
  supplier,
  equipPurchaseDetail,
  equipPurchase
} from '../../../../api'
import autoCompletes from '../../../../components/base/autoCompletes'
import equipPurchaseEdit from './equipPurchaseEdit'
/**
 * 一级审批：实验室主任审批
 */
export default {
  components: {
    equipPurchaseEdit,
    autoCompletes
  },
  data() {
    return {
      id: '',
      currentRow: {},
      getPage: {},
      pageColumns: [
        { title: '仪器名称', key: 'name', width: 200 },
        { title: '规格型号', key: 'spec', width: 200 },
        { title: '数量', key: 'counts', width: 160 },
        { title: '供应商', key: 'supplierName', width: 200 },
        { title: '制造厂商', key: 'productPlace', width: 200 },
        { title: '用途', key: 'uses' },
        { title: '备注', key: 'remark' }
      ],
      nameList: [],
      specList: [],
      supplierList: [],
      productPlaceList: [],
      purposeList: [],
      getOrder: {},
      iconMsg: [
        { type: 'pt-copy', id: '', name: '复制' },
        { type: 'pt-trash', id: '', name: '删除' }
      ],
      firstStepAdvice: '同意'
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this._page()
    this._purchase(this.id)
    // this._getList()
  },
  methods: {
    _getList() {
      const list = [
        { key: 'name', listKey: 'nameList' },
        { key: 'spec', listKey: 'specList' },
        { key: 'purpose', listKey: 'purposeList' },
        { key: 'product_place', listKey: 'productPlaceList' }
      ]
      for (let i = 0; i < list.length; i++) {
        this._getParamList(list[i])
      }
      this._supplier()
    },
    _supplier: async function(name = '') {
      const result = await supplier.page({ name: name })
      this.supplierList = result.records
    },
    _page: async function() {
      const obj = Object.assign(
        { purchaseId: this.id },
        this.$refs.pageTable._searchParams()
      )
      const result = await equipPurchaseDetail.page(obj)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    },
    _handleRow(data) {
      this.currentRow = data.row
    },
    _purchase: async function(id) {
      this.getOrder = await equipPurchase.getById(id)
    },
    _approve(allow, content) {
      this.$confirm(content, '提示', { type: 'warning' }).then(() => {
        const data = {}
        data.taskId = $('#flowFrame', parent.document).attr('data-tid')
        data.allow = allow
        data.postil = this.firstStepAdvice
        data.id = this.id
        this._approveOk(data)
      })
    },
    _approveOk: async function(data) {
      const result = await equipPurchase.approve(data)
      if (result) {
        this.$message.success('审批成功！')
        setTimeout(() => {
          parent.location.replace(global.webURL + '/sys/workflow/flow_task')
        }, 200)
      }
    },
    _addPurchase() {
      this.$refs.editModal._open(this.id)
    },
    _deleteById(data) {
      this.$confirm('确定删除？', '提示', { type: 'warning' }).then(() => {
        this._delOk(data.id)
      })
    },
    _delOk: async function(id) {
      const result = await equipPurchaseDetail.deleteByIds(id)
      if (result) {
        this._page()
        this.$message.success('删除成功！')
      }
    },
    _save: async function(key) {
      const data = {
        id: this.currentRow.id,
        obj: {
          [key]: this.currentRow[key]
        }
      }
      const result = await equipPurchaseDetail.edit(data)
      if (result) {
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '删除':
          this._deleteById(data)
          break
        case '复制':
          this._copy(data)
          break
      }
    },
    _copy: async function(data) {
      const result = await equipPurchaseDetail.getById(data.id)
      this.$refs.editModal._open(this.id, result)
    },
    _getParamList: async function(obj, name = '') {
      const data = {
        item: obj.key,
        name: name
      }
      this[obj.listKey] = await equipInfo.getParamListByName(data)
    },
    _nameChange(msg, data, handleObj) {
      this._handleRow(handleObj)
      switch (msg) {
        case 'select':
          this.$set(this.currentRow, 'name', data.name)
          this._save('name')
          break
        case 'query':
          this.$set(this.currentRow, 'name', data.name)
          this._getParamList({ key: 'name', listKey: 'nameList' }, data.name)
          break
        case 'blur':
          this._save('name')
          break
      }
    },
    _specChange(msg, data, handleObj) {
      this._handleRow(handleObj)
      switch (msg) {
        case 'select':
          this.$set(this.currentRow, 'spec', data.spec)
          this._save('spec')
          break
        case 'query':
          this.$set(this.currentRow, 'spec', data.spec)
          this._getParamList({ key: 'spec', listKey: 'specList' }, data.spec)
          break
        case 'blur':
          this._save('spec')
          break
      }
    },
    _supplierChange(msg, data, handleObj) {
      this._handleRow(handleObj)
      switch (msg) {
        case 'select':
          this.$set(this.currentRow, 'supplierName', data.name)
          this._save('supplierName')
          break
        case 'query':
          this.$set(this.currentRow, 'supplierName', data.name)
          this._supplier(data.name)
          break
        case 'blur':
          this._save('supplierName')
          break
      }
    },
    _productPlaceChange(msg, data, handleObj) {
      this._handleRow(handleObj)
      switch (msg) {
        case 'select':
          this.$set(this.currentRow, 'productPlace', data.productPlace)
          this._save('productPlace')
          break
        case 'query':
          this.$set(this.currentRow, 'productPlace', data.productPlace)
          this._getParamList(
            { key: 'productPlace', listKey: 'productPlaceList' },
            data.productPlace
          )
          break
        case 'blur':
          this._save('productPlace')
          break
      }
    },
    _purposeChange(msg, data, handleObj) {
      this._handleRow(handleObj)
      switch (msg) {
        case 'select':
          this.$set(this.currentRow, 'uses', data.purpose)
          this._save('uses')
          break
        case 'query':
          this.$set(this.currentRow, 'uses', data.purpose)
          this._getParamList(
            { key: 'purpose', listKey: 'purposeList' },
            data.purpose
          )
          break
        case 'blur':
          this._save('uses')
          break
      }
    }
  }
}
</script>
