<template>
  <div>
    <Modal v-model="showListModal" width="1200px">
      <Row>
        <Col span="24" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="500"
          :get-page="getPage"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            sortable
            :prop="item.key"
            :label="item.title"
            :align="item.align"
            :width="item.width"
            :min-width="200"
          >
            <template slot-scope="scope">
              <span v-if="item.datetime">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):'' }}
              </span>
              <span v-else-if="item.status">
                {{ scope.row[item.key].display }}
              </span>
              <span v-else-if="item.key==='flowQuantity'">
                <InputNumber v-model="scope.row.flowQuantity" name="flowQuantity" placeholder="请输入数量" style="width: 100px;" />
              </span>
              <span v-else-if="item.key==='unit'">
                <Input v-model="scope.row.unit" name="unit" placeholder="请输入单位" style="width: 100px;" />
              </span>
              <span v-else-if="item.key==='person'">
                <Input v-model="scope.row.person" name="person" placeholder="请输入流转人" style="width: 100px;" />
              </span>
              <span v-else-if="item.key==='flowTime'">
                <el-date-picker
                  v-model="scope.row.flowTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                />
              </span>
              <span v-else>
                {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
      </div>
    </Modal>
  </div>
</template>

<script>
import { drugSample } from '../../api'

export default {
  name: 'TransferListModal',
  data() {
    return {
      showListModal: false,
      getPage: {
        records: []
      },
      footerList: [
        { id: '', name: '确定流转', type: 'primary' },
        { id: '', name: '取消', type: '' }
      ],
      num: 0,
      unit: '',
      person: '',
      time: '',
      pageColumns: [
        {
          title: '样本编号',
          key: 'sampleCode',
          width: 140,
          fixed: 'left',
          align: 'center'
        },
        { title: '牌号', key: 'name', width: 130, align: 'center' },
        {
          title: '检测实验室',
          key: 'groupName',
          width: 140,
          fixed: 'left',
          align: 'center'
        },
        { title: '流转数量', key: 'flowQuantity', width: 130, align: 'center' },
        {
          title: '流转单位',
          key: 'unit',
          width: 180,
          align: 'center'
        },
        { title: '流转人', key: 'flower', width: 120, align: 'center' },
        { title: '流转时间', key: 'flowTime', width: 300, align: 'center' }
      ]
    }
  },
  methods: {
    _open(data) {
      this.showListModal = true
      this.getPage.records = []
      const length = data.length
      for (let i = 0; i < length; i++) {
        const object = data[i]
        const obj = {}
        obj.sampleId = object.id
        obj.sampleCode = object.sampleCode
        obj.name = object.name
        obj.groupName = object.groupName
        obj.groupId = object.groupId
        this.getPage.records.push(obj)
      }

      this.$refs.pageTable._initTable()
    },
    _footerResult(msg) {
      switch (msg) {
        case '确定流转':
          this._ok()
          break
        case '取消':
          this._cancel()
          break
      }
    },
    _cancel() {
      this.showListModal = false
    },
    _ok() {
      const data = this.getPage.records
      this._flow(data)
      console.log(data)
    },
    _flow: async function(data) {
      const result = await drugSample.submitFlow({ sampleFlows: data })
      if (result) {
        this.showListModal = false
        this.$message.success('流转成功')
        this.$emit('on-result-change')
      }
    }
  }
}
</script>

<style scoped>
</style>
<style>
.el-date-editor .el-range-separator {
  padding: 0px;
}
</style>
