<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.entrustCode" name="entrustCode" placeholder="请输入委托编号" clearable/>
              </Form-item>
              <Form-item class="search-item" label="样品编号:">
                <Input @on-enter="_formSearch" v-model="formObj.sampleCode" name="sampleCode" 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-item" label="货架号:">
                <Input @on-enter="_formSearch" v-model="formObj.receiveLocation" name="receiveLocation" placeholder="请输入货架号" clearable/>
              </Form-item>
              <Form-item class="search-item" label="项目名称:">
                <Input @on-enter="_formSearch" v-model="formObj.projectName" name="projectName" placeholder="请输入项目名称" clearable/>
              </Form-item>
              <Form-item class="search-item" label="钻孔名称:">
                <Input @on-enter="_formSearch" v-model="formObj.boreholeName" name="boreholeName" 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 id="sampleTable" ref="pageTable"
                        :tableHeight="tableHeight" @on-result-change="_tableResultChange" :getPage="getPage" select-data>
              <vxe-table-column
                :field="item.key"
                :title="item.title"
                :min-width="item.width?item.width:150"
                :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==='progress'">
                    {{scope.row[item.key].display}}
                  </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>
    <SampleFileManage ref="SampleFileManage" @on-result-change="_page"></SampleFileManage>
    <SamplePhotoManage ref="SamplePhotoManage" @on-result-change="_page"></SamplePhotoManage>
  </div>
</template>

<script>
import { soilEntrust, soilSample } from '../../../api'
import ViewDetail from '../../soil-alone-sample/ViewDetail'
import Outstock from '../soil-alone-sample-outstock/Outstock'
import SampleFileManage from '../../../components/file/sample-file-manage/FileManage'
import SamplePhotoManage from '../../../components/file/instock-file-manage/FileManage'
import ViewSample from './ViewLocationEntrust'
import stockSampleEdit from './stockSampleEdit'
import BatchModal from './BatchModal'
export default {
  components: {
    stockSampleEdit,
    ViewSample,
    ViewDetail,
    BatchModal,
    Outstock,
    SampleFileManage,
    SamplePhotoManage
  },
  data() {
    return {
      currentComponent: '',
      formObj: {
        entrustCode: undefined,
        sampleCode: undefined
      },
      btn: [
        {
          type: 'success',
          id: 'storehouse-sample-export',
          name: '导出'
        }
      ],
      // 表格
      pageColumns: [
        { title: '委托商', key: 'client', width: 170 },
        { title: '委托编号', key: 'entrustCode' },
        { title: '钻孔名称', key: 'boreholeName' },
        { title: '委托日期', key: 'entrustDate', date: true },
        { title: '样品编号', key: 'sampleCode' },
        { title: '现场编号', key: 'siteNo' },
        { title: '项目名称', key: 'projectName' },
        { title: '库房号', key: 'warehouse' },
        { title: '货架号', key: 'receiveLocation' },
        { title: '进度', key: 'progress', status: true }
      ],
      // 操作
      iconMsg: [
        {
          type: 'md-create',
          id: '',
          name: '编辑',
          componentName: 'StandardsManageEdit'
        },
        {
          type: 'ios-list',
          id: '',
          name: '查看'
        },
        {
          type: 'ios-camera',
          id: '',
          name: '照片'
        },
        {
          type: 'md-cloud',
          id: '',
          name: '附件'
        },
        { type: 'md-remove-circle', id: '', name: '删除' }
      ],
      searchOpen: false,
      getPage: {},
      // 选中的内容
      selectIds: [],
      selectData: []
    }
  },
  computed: {
    // 表格的高度
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  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
      }
    },
    _export() {
      let result = []
      if (this.selectData.length === 0) {
        this.$Message.warning('至少选择一条数据')
      } else {
        // 只导出选中的数据
        result = this.selectData
        this.$Modal.confirm({
          title: '提示',
          content: '确定导出这' + result.length + ' 条数据？',
          onOk: () => {
            this.$exportExcelNew(
              'sampleTable',
              '样品信息',
              this.pageColumns,
              result
            )
          }
        })
      }
    },
    _outstock() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '确定提交？',
          onOk: () => {
            this._submitToOutStock()
          }
        })
      }
    },
    _submitToOutStock: async function() {
      const result = await soilSample.storageSampleSubmit({
        ids: this.selectIds.join(',')
      })
      if (result) {
        this._page()
        this.$Message.success('提交成功')
        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._uploadPhoto(data.id)
            break
          case '查看':
            this._viewModal(true, data.id)
            break
          case '附件':
            this._upload(data.id)
            break
          case '删除':
            this._deleteById(data.id)
            break
        }
      })
    },
    _uploadPhoto(data) {
      // 上传照片文件
      this.$refs.SamplePhotoManage._open(data, 'aloneSampleId', '照片管理')
      // this.$refs.PhotoManage._open(id, 'entrustId')
    },
    _upload(id) {
      // 上传文件
      this.$refs.SampleFileManage._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.getAloneVOById(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.getAloneVOById(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.pageWarehouseLocationSample(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.$refs.pageTable._hideLoading()
        this.getPage = result
        if (this.getPage.records.length > 0) {
          this.getPage.records = result.records.reverse()
        }
      }
    },
    // 查询
    _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 'selectData':
          this.selectData = data
          this.selectIds = []
          for (let i = 0; i < this.selectData.length; i++) {
            this.selectIds.push(this.selectData[i].id)
          }
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData, data.componentName)
          break
        case 'changeSize':
          this._page()
          break
      }
    }
  }
}
</script>
