<template>
  <div>
    <!--内容-->
    <div class="layout-content-padding">
      <div class="layout-content-main">
        <Row>
          <Col span="24" class="margin-top-10">
            <!--搜索表单-->
            <Form id="search-form" :label-width="90" v-show="searchOpen" inline onsubmit="return false">
              <label class="label-sign"></label>
              <Form-item class="search-item" label="钻孔名称:">
                <Input @on-enter="_formSearch" v-model="formObj.boreholeName" name="boreholeName" placeholder="请输入钻孔名称" clearable/>
              </Form-item>
              <Form-item class="search-item" label="库房号:">
                <Input @on-enter="_formSearch" v-model="formObj.warehouse" name="warehouse" placeholder="请输入库房号" clearable/>
              </Form-item>
              <Form-item class="search-btn">
                <Button @click="_formSearch" type="primary">搜索</Button>
              </Form-item>
            </Form>
          </Col>
          <!--操作-->
          <Col span="24">
            <btn-list :msg="btn" :open="searchOpen" :showSearchBtn="true" @on-result-change="_btnClick"
                     class="contHide"></btn-list>
          </Col>
          <!--表格 -->
          <Col span="24">
            <PTVXETable ref="pageTable" :tableHeight="tableHeight"
                        @on-result-change="_tableResultChange" :getPage="getPage" :iconMsg="iconMsg">
              <vxe-table-column
                :field="item.key"
                :title="item.title"
                :min-width="item.width?item.width:200"
                :fixed="item.fixed?item.fixed:undefined"
                v-for="item in pageColumns"
                :key="item.key" sortable>
                <template slot-scope="scope">
                  <div v-if="item.key==='status'">{{scope.row[item.key]===0?'现行':scope.row[item.key]===1?'即将实施':
                    scope.row[item.key]===2?'部分被代替':scope.row[item.key]===3?'被代替':scope.row[item.key]===4?'作废':''}}
                  </div>

                  <div v-else-if="item.key==='classify'">
                    {{scope.row[item.key]===0?'判定依据':scope.row[item.key]===1?'检测依据':scope.row[item.key]===2?'其他':''}}
                  </div>
                  <div v-else-if="item.key==='type'">
                    {{scope.row[item.key]===0?'待检':scope.row[item.key]===1?'备样':scope.row[item.key]===2?'备用': ''}}
                  </div>

                  <div v-else-if="item.date">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}
                  </div>
                  <div v-else-if="item.key==='fileUrl'">
                    <span v-if="scope.row['fileUrl']" class="green-color">是</span>
                    <span v-else class="red-color">否</span>
                  </div>
                  <div v-else>{{scope.row[item.key]}}</div>
                </template>
              </vxe-table-column>
            </PTVXETable>
          </Col>
        </Row>
      </div>
    </div>
    <!--组件加载-->
    <ViewSample ref="viewSample"></ViewSample>
    <ViewDetail ref="viewDetail"></ViewDetail>
    <Outstock ref="outStockModal" @on-result-change="_page"></Outstock>
    <FileManage ref="FileManage" @on-result-change="_page"></FileManage>
    <BatchModal ref="batchModal" @on-result-change="_page"></BatchModal>
    <stockSampleEdit ref="editModal" @on-result-change="_page"></stockSampleEdit>
  </div>
</template>

<script>
import { soilEntrust, soilSample } from '../../../api'
import ViewDetail from '../../soil-alone-sample/ViewDetail'
import Outstock from '../soil-alone-sample-outstock/Outstock'
import ViewSample from './ViewLocationEntrust'
import stockSampleEdit from './stockSampleEdit'
import BatchModal from './BatchModal'
export default {
  components: {
    stockSampleEdit,
    ViewSample,
    ViewDetail,
    BatchModal,
    Outstock
  },
  data() {
    return {
      currentComponent: '',
      formObj: {
        code: undefined,
        name: undefined
      },
      btn: [
        {
          type: 'success',
          id: '',
          name: '出库'
        },
        { type: 'success', id: '', name: '批量填写' }
      ],
      // 表格
      pageColumns: [
        { title: '钻孔名称', key: 'boreholeName' },
        { title: '项目负责人', key: 'projectLeader' },
        { title: '入库日期', key: 'instockTime', date: true },
        { title: '留存有效期', key: 'keepLimitTime', date: true },
        { title: '库房号', key: 'storehouse' },
        { title: '架位号', key: 'shelfCode' }
      ],
      // 操作
      iconMsg: [
        {
          type: 'md-create',
          id: '',
          name: '编辑',
          componentName: 'StandardsManageEdit'
        },
        {
          type: 'ios-list',
          id: '',
          name: '查看'
        },
        {
          type: 'md-cloud',
          id: '',
          name: '附件'
        },
        { type: 'md-remove-circle', id: '', name: '删除' }
      ],
      searchOpen: false,
      getPage: {},
      // 选中的内容
      selectIds: []
    }
  },
  computed: {
    // 表格的高度
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  mounted() {
    this._page()
  },
  methods: {
    // 操作按钮
    _btnClick(msg, currentComponent) {
      this.currentComponent = currentComponent
      switch (msg) {
        case '添加':
          this.$nextTick(() => {
            this._editModal(false)
          })
          break
        case '出库':
          this._outstock()
          break
        case '批量填写':
          this._bathChange()
          break
        case '删除':
          this._deleteSelected()
          break
        case '导入':
          this.$nextTick(() => {
            this._import()
          })
          break
        case '导出':
          // this._export()
          break
        //  收起搜索
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    _outstock() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$refs.outStockModal._open(this.selectIds)
      }
    },
    _bathChange() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$refs.batchModal._open(this.selectIds.join(','))
      }
    },
    // 表格中操作
    _iconClick(res, data, currentComponent) {
      this.currentComponent = currentComponent
      this.$nextTick(() => {
        switch (res) {
          case '编辑':
            this._editModal(true, data.id)
            break
          case '查看试样':
            this._viewSample(data.name)
            break
          case '查看':
            this._viewModal(true, data.id)
            break
          case '附件':
            this._upload(data.id)
            break
          case '删除':
            this._deleteById(data.id)
            break
        }
      })
    },
    _upload(id) {
      // 上传文件
      this.$refs.FileManage._open(id, 'aloneSampleId')
    },
    _viewModal(edit, id) {
      if (edit) {
        this.$refs.pageTable._showLoading()
        // 编辑
        this._getDetailById(id)
      } else {
        // 添加
        this.$nextTick(() => {
          this.$refs.refModal._open()
        })
      }
    },
    _getDetailById: async function(id) {
      const result = await soilEntrust.aloneSampleGetById(id)
      if (result) {
        this.$refs.viewDetail._open(result)
        this.$refs.pageTable._hideLoading()
      } else {
        this.$refs.pageTable._hideLoading()
      }
    },
    _viewSample(data) {
      this.$refs.viewSample._open(data)
    },
    _editModal(edit, id) {
      if (edit) {
        this.$refs.pageTable._showLoading()
        // 编辑
        this._getById(id)
      } else {
        // 添加
        this.$nextTick(() => {
          this.$refs.refModal._open()
        })
      }
    },
    _getById: async function(id) {
      const result = await soilEntrust.aloneSampleGetById(id)
      if (result) {
        this.$refs.editModal._openEdit(result)
        this.$refs.pageTable._hideLoading()
      } else {
        this.$refs.pageTable._hideLoading()
      }
    },
    // 获取数据
    _page: async function() {
      this.selectIds = []
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilSample.pageStorehouseSample(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.$refs.pageTable._hideLoading()
        this.getPage = result
      }
    },
    // 查询
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    // 删除一条记录
    _deleteById(id) {
      this._deleteByIds([id])
    },
    // 批量删除
    _deleteSelected() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请选择一条或多条数据！')
      } else {
        this._deleteByIds(
          this.selectIds,
          '确定删除这 ' + this.selectIds.length + ' 条记录？'
        )
      }
    },
    _deleteByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        loading: true,
        content: content || '确定删除该记录？',
        onOk: () => {
          this._delOk(ids)
        }
      })
    },
    _delOk: async function(ids) {
      const result = await soilSample.aloneSampleDelete(ids)
      if (result) {
        this._page()
        this.$Modal.remove()
        this.$Message.success('删除成功')
      }
    },
    // 表格内容
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData, data.componentName)
          break
        case 'changeSize':
          this._page()
          break
      }
    }
  }
}
</script>
