<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,index) in pageColumns"
            :key="index"
            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;" />-->
                <Select v-model="scope.row.unit">
                  <Option v-for="item in options" :key="item.name" :value="item.name" name="unit">
                    {{ item.name }}
                  </Option>
                </Select>
              </span>
              <span v-else-if="item.key==='flower'">
                <!--                <Input v-model="scope.row.person" name="person" placeholder="请输入流转人" style="width: 100px;" />-->
                <Input
                  v-model="scope.row.flower"
                  readonly="readonly"
                  placeholder="请选择人员"
                  @click.native="_selectStaff(scope.$index)"
                />
              </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>
    <UserInfo ref="userModal" is-change @on-result-change="_userData" />
  </div>
</template>

<script>
import UserInfo from '../../components/user-info-single/assignPerson'
import { drugSample } from '../../api'
import Global from '../../api/config'

export default {
  name: 'TransferListModal',
  components: {
    UserInfo
  },
  data() {
    return {
      showListModal: false,
      getPage: {
        records: []
      },
      footerList: [
        { id: '', name: '确定流转', type: 'primary' },
        { id: '', name: '取消', type: '' }
      ],
      num: 0,
      dataIndex: undefined,
      unit: '',
      person: '',
      salesmanId: '',
      salesmanPhone: '',
      time: '',
      options: [
        {
          name: '支'
        },
        {
          name: '盒'
        },
        {
          name: '条'
        }
      ],
      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: {
    _selectStaff(index) {
      this.dataIndex = index
      console.log(index)
      this.$refs.userModal._open('salesman')
    },
    _userData(data, msg, index, contractTempData) {
      console.log(data)
      // 选择人员返回数据
      // 选择业务员
      this.person = data.realname
      this.getPage.records[this.dataIndex].flower = data.realname
      // alert(this.dataIndex)
      this.getPage.records[this.dataIndex].flowerId = data.userId
      // console.log(this.person)
      // this.getPage = data
      console.log(this.getPage.records)
    },
    _open(data) {
      this.showListModal = true
      this.getPage.records = []
      const length = data.length
      const user = Global.getUserInfo()
      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
        obj.flower = user.realname
        obj.flowerId = user.userId
        obj.flowQuantity = 1
        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>
