<!--检测项目编辑列表（添加、导入检测项目）-->
<template>
  <div>
    <Row>
      <Col span="24" />
      <Form v-model="formObj" inline onsubmit="return false" :label-width="70">
        <input v-model="formObj.catalogueId" type="hidden">
      </Form>
      </Col>
      <!--正常界面-->
      <Col span="24" style="margin-top: 5px" />
      <!--      <btn-list :msg="btn" :open="searchOpen" @on-result-change="_btnClick" />-->

      <Button type="primary" style="margin-bottom: 10px" @click="_importItem">
        导入检测项目
      </Button>
      <Button type="primary" style="margin-bottom: 10px" @click="_addItem">
        添加
      </Button>
      </Col>
      <!-- 表格 -->
      <Col span="24" />
      <element-table
        ref="pageTable"
        :page-columns="pageColumns"
        :table-height="330"
        :get-page="getPage"
        :opt-col-width="80"
        show-check-box
        @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"
        >
          <template slot-scope="scope">
            <span v-if="item.key==='judged'">
              {{ scope.row[item.key]===1?'是':'否' }}
            </span>

            <span
              v-else-if="item.key==='name'"
              @click.stop="_handleRow(scope)"
            >
              <el-input
                v-model="scope.row.name"
                size="medium"
                placeholder="请输检测项目"
                @blur="_testItemEdit(scope.row.id,scope.row.name,'name')"
              />
            </span>

            <span
              v-else-if="item.key==='code'"
              @click.stop="_handleRow(scope)"
            >
              <el-input
                v-model="scope.row.code"
                size="medium"
                placeholder="请输入检测依据"
                @blur="_testItemEdit(scope.row.id,scope.row.code,'code')"
              />
            </span>

            <span
              v-else-if="item.key==='standardName'"
              @click.stop="_handleRow(scope)"
            >
              <el-input
                v-model="scope.row.standardName"
                size="medium"
                placeholder="请输入检测依据名称"
                @blur="_testItemEdit(scope.row.id,scope.row.standardName,'standardName')"
              />
            </span>

            <span
              v-else-if="item.key==='compareSymbol'"
              @click.stop="_handleRow(scope)"
            >
              <el-input
                v-model="scope.row.compareSymbol"
                size="medium"
                placeholder="请输入比较符"
                @blur="_testItemEdit(scope.row.id,scope.row.compareSymbol,'compareSymbol')"
              />
            </span>

            <span
              v-else-if="item.key==='limitValue'"
              @click.stop="_handleRow(scope)"
            >
              <el-input
                v-model="scope.row.limitValue"
                size="medium"
                placeholder="请输入限量值"
                @blur="_testItemEdit(scope.row.id,scope.row.limitValue,'limitValue')"
              />
            </span>

            <span
              v-else-if="item.key==='unit'"
              @click.stop="_handleRow(scope)"
            >
              <el-input
                v-model="scope.row.unit"
                size="medium"
                placeholder="请输入单位"
                @blur="_testItemEdit(scope.row.id,scope.row.unit,'unit')"
              />
            </span>

            <span v-else>
              {{ scope.row[item.key] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          slot="col"
          label="操作"
          align="center"
          :width="100"
          fixed="right"
        >
          <template slot-scope="scope">
            <icon-list
              :msg="scope.row['status'] === 'PRIMITIVE' || scope.row.type === 0 ? iconMsgDis : iconMsg "
              :row-data="scope.row"
              @on-result-change="_iconClick"
            />
          </template>
        </el-table-column>
      </element-table>
      </Col>
    </Row>
    <!--导入项目  左右关联的modal   单个导入项目-->
    <RelItem ref="relItemModal" @on-result-change="_relItemResult" />
    <!--导入检测项目包-->
    <RelItemPackage ref="packageModal" @on-result-change="_relPackResult" />
    <!--导入项目  左右关联的modal   单个导入项目-->
    <SampleItemSelect ref="relItemModal" @on-result-change="_relItemResult" />
  </div>
</template>
<script>
import { drugSample, aptitudeItem } from '../../../../api'
import SampleItemSelect from '../../SampleItemSelect'
import RelItem from './rel-item/ImportItemIndex'
import RelItemPackage from './rel-package/RelItemPackage'
export default {
  components: {
    RelItem,
    RelItemPackage,
    SampleItemSelect
  },
  data() {
    return {
      formObj: {
        catalogueId: ''
      },
      showModal: false,
      searchOpen: false,
      btn: [
        { type: 'primary', id: '', name: '导入检测项目' },
        { type: 'primary', id: '', name: '导入检测项目包' }
      ],
      iconMsg: [{ type: 'pt-a-trash', id: '', name: '删除' }],
      iconMsgDis: [
        { type: 'pt-a-trash', id: '', name: '删除', disabled: true }
      ],
      pageColumns: [
        { title: '检测项目', key: 'name', width: 140 },
        { title: '检测类型', key: 'type', width: 140 },
        { title: '检测依据', key: 'code', width: 180 },
        { title: '检测依据名称', key: 'standardName', width: 300 },
        { title: '检测科室', key: 'groupName', width: 110 },
        { title: '比较符', key: 'compareSymbol', width: 100 },
        { title: '限值', key: 'limitValue', width: 200 },
        { title: '单位', key: 'unit', width: 180 },
        { title: '是否系统判定', key: 'judged', width: 120, judged: true },
        { title: '备注', key: 'remark', width: 240 }
      ],
      catalogueId: '',
      testType: '',
      currentRow: {},
      currentIndex: 0,
      getPage: {},
      testItemData: [],
      testBasisData: [],
      selectData: []
    }
  },
  methods: {
    _open(catalogueId, label) {
      this.catalogueId = ''
      this.showModal = true
      this.catalogueId = catalogueId
      $('input[name=catalogueId]').val(catalogueId)
      this.getPage.records = []
      this.currentRow = 0
      this.formObj.catalogueId = catalogueId
      this.$refs.pageTable._hideLoading()
      if (catalogueId) {
        this._page()
      } else {
        this.$Message.warning('请先选择一条物料信息！')
      }
    },

    // 操作的序号
    _handleRow(data) {
      this.currentRow = data.row
    },

    _testItemEdit(id, name) {
      console.log(id)
      console.log(name)
    },
    _getItem: async function(id) {
      this.catalogueId = '1111'
      const result = await drugSample.getSampleVO(id)
      if (result.itemList) {
        const itemList = result.itemList
        this.getPage = {
          total: result.itemList.length,
          size: 50,
          records: itemList
        }
        this.$refs.pageTable._initTable()
        this.$emit('on-result-change', this.getPage.records)
      } else {
        this.getPage = {
          total: 0,
          size: 50,
          records: []
        }
        this.$emit('on-result-change', this.getPage.records)
      }
    },
    _cancel() {
      this.showModal = false
      this.catalogueId = ''
      this.getPage.records = []
    },
    _page: async function() {
      this.getPage.records = []
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await aptitudeItem.pageCatalogueItem(
        this.$serializeForm(this.formObj)
      )
      console.log('----result', result)
      if (result) {
        const len = result
        for (let i = 0; i < len.records.length; i++) {
          len.records[i].aptitudeId = len.records[i].id
        }
        this.getPage = len
        this.$emit('on-result-change', len.records)
        this.$refs.pageTable._initTable()
      }
    },
    _init() {
      this.getPage = {
        total: 0,
        size: 50,
        records: []
      }
      this.getPage.records = []
      this.getPage.total = 0
      this.$refs.pageTable._initTable()
      // this.getPage.records = []
      // this.getPage.total = 0
      // this.$refs.pageTable._initTable()
    },
    _importItem() {
      this.$refs.relItemModal._open(this.catalogueId)
    },

    _addItem() {
      this.getPage.records.push({ deleted: 0 })
      this.getPage.total++
      this.$emit('on-result-change', this.getPage.records)
    },
    _btnClick(msg) {
      switch (msg) {
        case '删除':
          this._deleteByIds()
          break
        case '导入检测项目':
          if (this.catalogueId) {
            this.$refs.relItemModal._open()
          } else {
            this.$Message.warning('请先选择一条物料信息！')
          }
          break
        case '导入检测项目包':
          if (this.catalogueId) {
            this.$refs.packageModal._open()
          } else {
            this.$Message.warning('请先选择一条物料信息！')
          }
          break
      }
    },
    // 导入检测项目返回的结果（根据名称判定是否重复）
    _relItemResult(relList) {
      let flag = true // 都重复提示重复
      for (let i = 0; i < relList.length; i++) {
        if (
          !this.getPage.records.find(item => item.aptitudeId === relList[i].id)
        ) {
          flag = false
          const data = {
            aptitudeId: relList[i].id,
            name: relList[i].name,
            code: relList[i].code,
            standardName: relList[i].standardName,
            groupName: relList[i].groupName,
            groupId: relList[i].groupId,
            compareSymbol: relList[i].compareSymbol,
            limitValue: relList[i].limitValue,
            unit: relList[i].unit,
            judged: relList[i].judged,
            remark: relList[i].remark,
            status: 'true'
          }
          this.getPage.records.push(data)
          this.getPage.total++
          this.$emit('on-result-change', this.getPage.records)
        }
      }
      if (flag) {
        this.$Message.warning('您所选项目与已添加检测项目重复！')
      }
    },
    // 导入检测项目包返回的结果（根据名称判定是否重复）
    _relPackResult(relList) {
      let flag = true // 都重复才提示重复
      for (let i = 0; i < relList.length; i++) {
        if (
          !this.getPage.records.find(
            item => item.aptitudeItemId === relList[i].id
          )
        ) {
          flag = false
          const data = {
            aptitudeItemId: relList[i].id,
            name: relList[i].name,
            standardCode: relList[i].standardCode,
            standardName: relList[i].standardName,
            groupName: relList[i].groupName,
            groupId: relList[i].groupId,
            compareSymbol: relList[i].compareSymbol,
            limitValue: relList[i].limitValue,
            unit: relList[i].unit,
            judged: relList[i].judged,
            remark: relList[i].remark,
            status: 'true'
          }
          this.getPage.records.push(data)
          this.getPage.total++
          this.$emit('on-result-change', this.getPage.records)
        }
      }
      if (flag) {
        this.$Message.warning('您所选项目包与已添加检测项目重复！')
      }
    },
    _itemSelectBack(ids) {
      alert(ids)
    },

    // 删除
    _deleteByIds(rows, content) {
      for (let i = 0; i < rows.length; i++) {
        const index = this.getPage.records.indexOf(rows[i])
        this.getPage.records.splice(index, 1)
      }
      this.$Message.success('操作成功')
      this.$emit('on-result-change', this.getPage.records)
    },
    // 操作列操作
    _iconClick(res, data) {
      switch (res) {
        case '删除':
          this._deleteByIds([data])
          break
      }
    },
    // table结果  返回整行
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectData':
          this.selectData = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    }
  }
}
</script>
