<!--Collapse关联框  单个导入项目-->
<template>
  <div>
    <Modal v-model="showModal" v-drag :mask-closable="false" width="100" class="zIndex-1200 full-screen modal-header-none">
      <p slot="header">
        导入检测项目
      </p>
      <div>
      <Collapse :right-title="'已选的检测项目 (共'+getPage.records.length+'条)'" @on-result-change="_optionResult"
                :left-width="18"
                left-title="资质项目">
        <template #left>
          <AptitudeItem ref="leftModal" @on-result-change="_leftResult"></AptitudeItem>
        </template>
        <template #right>
          <PTVXETable ref="pageTable" :tableHeight="tableHeight" :getPage="getPage"
                      @on-result-change="_rightResult" select-data hide-page>
            <vxe-table-column
              :field="item.key"
              :title="item.title"
              :min-width="item.width?item.width:200"
              v-for="item in pageColumns" :key="item.key">
              <template slot-scope="scope">
                <div v-if="item.key==='scened'">{{scope.row[item.key]?'':scope.row[item.key]===0?'否':'是'}}</div>
                <div v-else-if="item.key==='testBasis'">
            {{(scope.row.testBasis?scope.row.testBasis:' ')+
                  (scope.row.testBasisName?scope.row.testBasisName:'')}}
                </div>
                <div v-else>{{scope.row[item.key]}}</div>
              </template>
            </vxe-table-column>
          </PTVXETable>
        </template>
      </Collapse>
    </div>
      <div slot="footer">
        <modal-footer ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></modal-footer>
      </div>
    </Modal>
  </div>
</template>

<script>
import Collapse from '../../../components/base/Collapse'
import { soilSample } from '../../../api'
import AptitudeItem from './AptitudeItem'
/* 普通样品导入检测项目（一种是直接走接口保存，另一种是返回已选中的数据），专用于除了【质控】之外的导入检测项目 */
export default {
  components: {
    Collapse,
    // AddItem,
    AptitudeItem
  },
  props: {
    isRepeat: null // 只有模拟样品才能导入重复的检测项目
  },
  data() {
    return {
      pageColumns: [
        { title: '检测项目', key: 'name', width: 100 },
        { title: '检测依据', key: 'testBasis', width: 260 },
        // {title: '检测依据名称', key: 'testBasisName', width: 180,},
        { title: '检测方法', key: 'testMethod', width: 130 },
        { title: '检测科室', key: 'groupName', width: 140 }
      ],
      footerList: [
        { name: '取消', type: '' },
        { name: '确定', type: 'primary' }
      ],
      selectData: [],
      showModal: false,
      addIds: [],
      sampleId: '',
      delData: [],
      getPage: {
        records: []
      },

      isEditModal: false,
      isReceive: false, // 用于区别是样品接收中导入检测项目还是普通样品中导入检测项目
      tableHeight: document.documentElement.clientHeight - 240
    }
  },
  methods: {
    _open(sampleId) {
      this.showModal = true
      this.isReceive = false
      this.sampleId = sampleId
      this.selectData = []
      this.addIds = []
      this.delData = []
      this.getPage.records = []
      this.$refs.leftModal._open()
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _ok: async function() {
      console.log('导入检测项目')
      const result = await soilSample.importExperiments({
        aptitudeIds: this.addIds.join(','),
        ids: this.sampleId
      })
      if (result) {
        this.showModal = false
        this.$Message.success('导入成功')
        this.$emit('on-result-change')
      }
    },
    _cancel() {
      this.showModal = false
      this.$refs.footerModal._hideLoading()
    },
    // 样品接收中用的导入检测项目(给一个样品导入检测项目)
    _openReceive() {
      this.isReceive = true
      this.selectData = []
      this.addIds = []
      this.delData = []
      // this.getPage = [];
      this.getPage.records = []
      this.$refs.leftModal._open()
    },
    _optionResult(name) {
      switch (name) {
        case '添加':
          this._add()
          break
        case '删除':
          this._deleteSelected()
          break
      }
    },
    // 未关联方法返回的数据
    _leftResult(msg, data, checked) {
      switch (msg) {
        case 'selectAll':
          this.selectData = data
          break
        case 'selectData':
          this.selectData = data
          // if (data.checked) {
          //   this.selectData.push(data)
          //   const set = new Set([...this.selectData])
          //   this.selectData = [...set]
          //   console.log('选择的数据', this.selectData)
          // } else {
          //   const index = this.selectData.indexOf(data)
          //   this.selectData.splice(index, 1)
          // }
          break
        case 'dbClick':
          this.selectData = [data]
          this._add()
          break
        case 'search':
          this.selectData = []
          break
      }
    },
    // 已关联方法返回的数据
    _rightResult(msg, data) {
      switch (msg) {
        case 'selectData':
          this.delData = data
          break
      }
    },
    // 添加关联方法
    _add() {
      if (this.selectData.length === 0) {
        this.$Message.warning('请至少选择一条数据！')
      } else {
        for (let i = 0; i < this.selectData.length; i++) {
          if (this.isRepeat) {
            // 表示模拟样品，可导入重复的项目
            this.getPage.records.push(this.selectData[i])
            this.addIds.push(this.selectData[i].id)
          } else {
            // 普通样品，不能导入重复的项目
            // eslint-disable-next-line no-lonely-if
            if (
              !this.getPage.records.find(
                item => item.name === this.selectData[i].name
              )
            ) {
              this.getPage.records.push(this.selectData[i])
              this.addIds.push(this.selectData[i].id)
            }
          }
        }
        // 勾选之后两侧都需要手动清空，否则会出现另一侧也勾选的问题
        this.$refs.leftModal._clearSelection()
        this.$refs.pageTable._clearSelection()
        this.selectData = []
      }
    },
    _deleteSelected() {
      if (this.delData.length === 0) {
        this.$Message.warning('请选择一条或多条数据！')
      } else {
        this._deleteByIds(
          this.delData,
          '确定删除 ' + this.delData.length + ' 条记录？'
        )
      }
    },
    _deleteByIds(row, content) {
      for (let i = 0; i < row.length; i++) {
        const dataIndex = this.getPage.records.indexOf(row[i])
        this.getPage.records.splice(dataIndex, 1)
        const idIndex = this.addIds.indexOf(row[i].id)
        this.addIds.splice(idIndex, 1)
      }
      // 勾选之后两侧都需要手动清空，否则会出现另一侧也勾选的问题
      this.$refs.leftModal._clearSelection()
      this.$refs.pageTable._clearSelection()
      // 手动清空删除的数据
      this.delData = []
    }
  }
}
</script>
