<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.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 ref="pageTable" :tableHeight="tableHeight"
                        @on-result-change="_tableResultChange" :getPage="getPage">
              <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>
                  <span v-else-if="item.status">{{scope.row[item.key].display}}</span>
                  <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?'行业标准':scope.row[item.key]===3?'企业标准': ''}}
                  </div>
                  <div v-else-if="item.key==='keepLimitTime'" :class="[ scope.row.keepReminder ===1 ? 'redColor' : '' ]">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}</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>
    <StandardsManageEdit ref="editModal" @on-result-change="_page"></StandardsManageEdit>
    <DownloadTemplateImport ref="importModal" @on-result-change="_page"></DownloadTemplateImport>
<!--    <component ref="refModal" :is="currentComponent" @on-result-change="_page"></component>-->
  </div>
</template>

<script>
import http from '../../../api/http'
import { soilSample } from '../../../api'
import global from '../../../api/config'
import DownloadTemplateImport from '../../../components/import/DownloadTemplateImport' // 导入
import StandardsManageEdit from './AddressManageEdit' // 添加、编辑
import ViewSample from './ViewSample'
export default {
  components: {
    StandardsManageEdit,
    DownloadTemplateImport,
    ViewSample
  },
  data() {
    return {
      currentComponent: '',
      formObj: {
        entrustCode: undefined,
        sampleCode: undefined,
        name: undefined,
        boreholeName: undefined
      },
      btn: [
        {
          type: 'success',
          id: '',
          name: '调出'
        }
        // {
        //   type: 'success',
        //   id: '',
        //   name: '添加',
        //   componentName: 'StandardsManageEdit'
        // },
        // { type: 'error', id: '', name: '删除' }
        // { id: '', name: '导入', componentName: 'DownloadTemplateImport' },
        // { id: '', name: '导出' }
      ],
      // 表格
      pageColumns: [
        { title: '委托商', key: 'client', width: 200 },
        { title: '委托编号', key: 'entrustCode', width: 120 },
        { title: '试样编号', key: 'sampleCode', width: 100 },
        { title: '钻孔名称', key: 'boreholeName', width: 100 },
        { title: '试样深度', key: 'sampleDepth', width: 95 },
        { title: '现场编号', key: 'siteNo', width: 100 },
        { title: '接收人', key: 'receiver', width: 120 },
        { title: '接收时间', key: 'receiveTime', width: 140, date: true },
        { title: '留存有效期', key: 'keepLimitTime', width: 140 },
        { title: '收样存储位置', key: 'receiveLocation', width: 140 },
        { title: '土质描述', key: 'sampleDescribe', width: 185 },
        { title: '样品包装类型', key: 'samplePack', width: 120 }
      ],
      // 操作
      iconMsg: [
        {
          type: 'md-create',
          id: '',
          name: '编辑',
          componentName: 'StandardsManageEdit'
        },
        {
          type: 'md-apps',
          id: '',
          name: '查看试样'
        },
        { type: 'md-remove-circle', id: '', name: '删除' }
      ],
      searchOpen: true,
      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._deleteSelected()
          break
        case '导入':
          this.$nextTick(() => {
            this._import()
          })
          break
        case '导出':
          // this._export()
          break
        case '调出':
          this._callout()
          break
        //  收起搜索
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    // 表格中操作
    _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._upload(data.id)
            break
          case '下载':
            this._download(data)
            break
          case '预览':
            this._viewReport(data)
            break
          case '查看替代关系':
            this.$refs.relationModal._open(data.id)
            break
          case '删除':
            this._deleteById(data.id)
            break
        }
      })
    },
    _callout() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请至少选择一条数据')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '确定调出这' + this.selectIds.length + '条记录？',
          onOk: () => {
            this._calloutOk()
          }
        })
      }
    },
    _calloutOk() {
      console.log(this.selectIds)
      const result = soilSample.sampleBringOut({
        ids: this.selectIds.join(',')
      })
      if (result) {
        this.$Message.success('调出成功')
        this._page()
      }
    },
    _upload(id) {
      const obj = {
        importUrl: '/soil/v1/standard_annex/upload/' + id
      }
      this.$refs.uploadModal._open(obj)
    },
    _viewSample(data) {
      console.log(data)
      this.$refs.viewSample._openHis(data)
    },
    _editModal: async function(edit, id) {
      if (edit) {
        // 编辑
        // this.$store.dispatch('StandardInfo/getById', id).then(() => {
        //   this.$refs.refModal._open(this.$store.state.StandardInfo.model)
        // })
        const result = await soilSample.locationGetById(id)
        if (result) {
          this.$refs.editModal._open(result)
        }
      } else {
        // 添加
        this.$refs.editModal._open()
      }
    },
    // 获取数据
    _page: async function() {
      // this.$refs.pageTable._page('search-form', 'StandardInfo/page')
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilSample.pageRetain(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        console.log(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.locationDeleteById(ids)
      if (result) {
        this._page()
        this.$Modal.remove()
        this.$Message.success('删除成功')
      }
    },
    // 表格内容
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          // this.getPage = this.$store.state.StandardInfo.page
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData, data.componentName)
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    // 导入
    _import() {
      const data = {
        importUrl: '/food/v1/food_standard_info/import_standard',
        downloadUrl: '/food/v1/excel/template/FoodStandardInfo',
        title: '导入食品标准管理'
      }
      this.$refs.importModal._open(data)
    },
    // 导出
    _export() {
      const ids = this.selectIds
      this._exportByIds(
        ids,
        ids.length === 0
          ? '确定导出全部记录?'
          : '确定导出 ' + ids.length + ' 条记录？'
      )
    },
    _exportByIds(ids, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          if (ids.length === 0) {
            http.open('/food/v1/food_standard_info/export_standard')
          } else {
            http.open('/food/v1/food_standard_info/export_standard?ids=' + ids)
          }
        }
      })
    },
    // 预览
    _viewReport(data) {
      const fileUrl = encodeURIComponent(
        global.baseURL + '/soil/v1/standard_annex/preview/' + data.id
      )
      console.log(fileUrl)
      window.open(
        global.staticURL + '/pdf/PDFJS/pdfjs/web/viewer.html?file=' + fileUrl
      )
    },
    // 下载
    _download(data) {
      console.log(data)
      this.$Modal.confirm({
        title: '提示',
        content: '确定要下载文件？',
        onOk: () => {
          if (!data.fileUrl) {
            this.$Message.error('附件未上传，请上传附件！')
            return
          }
          window.open(
            global.baseURL + '/soil/v1/standard_annex/download/' + data.id,
            '_blank'
          )
        }
      })
    }
  }
}
</script>
<style scoped>
.redColor {
  color: red;
}
</style>
