<template>
  <div>
    <!--左侧树-->
    <div>
      <div
        v-show="isTree"
        class="position-left card-tree"
        style="margin-top: 0;"
        :style="treeStyleObj"
      >
        <Card dis-hover class="card_tree">
          <p slot="title" style="width: 60%">
            检测类型列表
          </p>
          <p slot="title" style="width: 40%;text-align: right">
            <a @click="_refresh">
              <Icon type="md-sync" size="20" />
            </a>
          </p>
          <div>
            <typeTree ref="typeModal" @on-result-change="_typeData" />
          </div>
        </Card>
      </div>
      <div
        v-if="isTree"
        style="position: absolute;left: 196px;top: 50%;cursor:pointer"
        @click="_treeHide"
      >
        <div class="navbarImgShow" />
      </div>
      <div
        v-else
        style="position: absolute;left:0;top: 50%;cursor:pointer"
        @click="_treeShow"
      >
        <div class="navbarImgHide" />
      </div>
    </div>
    <!--右侧列表-->
    <div class="position-right" :style="tableStyleObj">
      <Row>
        <!--查询-->
        <Col span="24">
        <Form
          v-show="searchOpen"
          id="sample-library-form"
          onsubmit="return false"
          :label-width="70"
          inline
          class="search-form"
        >
          <label class="label-sign" />
          <Form-item class="search-item" label="物品目录:">
            <Input name="name" placeholder="请输入物品目录" clearable @on-enter="_formSearch" />
            <input name="typeId" type="hidden">
            <input name="type" type="hidden">
          </Form-item>
          <Form-item class="search-item" label="物品编号:">
            <Input name="code" placeholder="请输入物品编号" clearable @on-enter="_formSearch" />
          </Form-item>
          <Form-item class="search-btn">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!--按钮-->
        <Col span="24">
        <btn-list :msg="btn" :open="searchOpen" show-search-btn="true" @on-result-change="_btnClick" />
        </Col>
        <!--table-->
        <Col span="24">
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          :opt-col-width="140"
          :icon-msg="iconMsg"
          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"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <template v-if="item.dateTime">
                {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):'' }}
              </template>
              <template v-else-if="item.key === 'haveItem'">
                {{ scope.row[item.key] === "0"? '否':'是' }}
              </template>
              <template v-else>
                {{ scope.row[item.key] }}
              </template>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </div>
    <!--添加编辑-->
    <sampleLibraryEdit ref="editModal" @on-result-change="_page" />
    <!--检测项目-->
    <sampleItemList ref="testItemModal" @on-result-change="_formSearch" />
  </div>
</template>
<script>
import { drugCatalogue } from '../../api'
import sampleItemList from '../sample-item/SampleItemList'
import sampleLibraryEdit from './sampleLibraryEdit'
import typeTree from './typeTree.vue'

export default {
  components: {
    sampleLibraryEdit,
    typeTree,
    sampleItemList
  },
  data() {
    return {
      searchOpen: true,
      btn: [
        { type: 'success', id: '', name: '添加' },
        { type: 'error', id: '', name: '删除' }
      ],
      pageColumns: [
        { title: '物品类型', key: 'type', width: 140 },
        { title: '物品目录', key: 'name', width: 160, fixed: 'left' },
        { title: '物品编码', key: 'code', width: 140 },
        { title: '物品规格', key: 'spec', width: 140 },
        { title: '物品描述', key: 'remark' }
      ],
      getPage: {},
      iconMsg: [
        { type: 'pt-a-edit', id: '', name: '编辑' },
        { type: 'pt-a-trash', id: '', name: '删除' },
        { type: 'pt-a-chemistry', id: '', name: '管理检测项目' }
      ],
      treeStyleObj: {
        width: '210px',
        height: ''
      },
      tableStyleObj: {
        'margin-left': '215px'
      },
      isTree: true,
      selectIds: []
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  mounted() {
    this._search()
  },
  methods: {
    // 发布日期
    _signDateChange(data) {
      $('input[name="beginTime"]').val(data[0])
      $('input[name="endTime"]').val(data[1])
    },
    // 刷新
    _refresh() {
      this._clearPage()
      this._formSearch()
    },
    _clearPage() {
      $('#sample-library-form')
        .find('input')
        .each(function() {
          $(this).val('')
        })
      $('input[name="category"]').val('A类')
    },
    _search() {
      this._formSearch()
      this.$refs.typeModal._open()
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      const data = this.$serialize('sample-library-form')
      Object.assign(data, this.$refs.pageTable._searchParams())
      const result = await drugCatalogue.page(data)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _openModal() {
      const id = $('input[name="typeId"]').val()
      const name = $('input[name="type"]').val()
      if (id) {
        this.$refs.editModal._open('', {
          typeId: id,
          type: name
        })
      } else {
        this.$Message.warning('请先选择检测类型！')
      }
    },
    _btnClick(msg, data) {
      switch (msg) {
        case '添加':
          this._openModal()
          break
        case '删除':
          this._deleteByIds()
          break
        case '导入':
          this.$refs.importModal._open()
          break
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        case 'selectIds':
          this.selectIds = data
          break
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '编辑':
          this._editModal(data)
          break
        case '删除':
          this._deleteById(data.id)
          break
        case '管理检测项目':
          this._testItem(data.id)
          break
        case '操作日志':
          this._record(data.id)
          break
      }
    },
    // 删除
    _deleteById(id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除该信息？',
        onOk: () => {
          this._delOk(id)
        }
      })
    },
    _deleteByIds() {
      // 批量提交
      const ids = this.selectIds
      if (ids.length === 0) {
        this.$Message.warning('请选择一条或多条数据！')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '确定删除 ' + ids.length + ' 条记录？',
          onOk: () => {
            this._delOk(ids)
          }
        })
      }
    },
    _delOk: async function(id) {
      const result = await drugCatalogue.deleteById(id)
      if (result) {
        this.$Message.success('删除成功')
        this._page()
      }
    },
    _editModal: async function(data) {
      const result = await drugCatalogue.getById(data.id)
      this.$refs.editModal._open(result, {}, data.category)
    },
    // 详情
    _detailModal: async function(id) {
      const result = await drugCatalogue.getById(id)
      if (result) {
        this.$refs.detailModal._open(result)
      }
    },
    // 检测项目
    _testItem(id) {
      this.$refs.testItemModal._open(id)
    },
    // 操作日志
    _record(id) {
      this.$refs.recordModal._open(id)
    },
    // tree
    _treeHide() {
      this.isTree = false
      this.tableStyleObj.marginLeft = '15px'
    },
    _treeShow() {
      this.isTree = true
      this.tableStyleObj.marginLeft = '215px'
    },
    _typeData(data) {
      $('input[name="typeId"]').val(data.id)
      $('input[name="type"]').val(data.name)
      this._formSearch()
    }
  }
}
</script>
<style>
.card-tree .ivu-card {
  background: transparent;
}
</style>
