<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.code" name="code" placeholder="请输入检测依据" clearable/>
              </Form-item>
              <Form-item class="search-item" label="检测依据名称:">
                <Input @on-enter="_formSearch" v-model="formObj.name" name="name" 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?'行业标准':scope.row[item.key]===3?'企业标准': ''}}
                  </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>
    <!--组件加载-->
    <StandardsManageEdit ref="editModal" @on-result-change="_page"></StandardsManageEdit>
    <DownloadTemplateImport ref="importModal" @on-result-change="_page"></DownloadTemplateImport>
    <SubstitutionalRelation ref="relationModal" @on-result-change="_page"></SubstitutionalRelation>
    <UploadModal ref="uploadModal" @on-result-change="_page"></UploadModal>
    <StanardFileManage ref="stanardFileManage"></StanardFileManage>
<!--    <component ref="refModal" :is="currentComponent" @on-result-change="_page"></component>-->
  </div>
</template>
<script>
import http from '../../../api/http'
import { soilAptitude } from '../../../api'
import global from '../../../api/config'
import DownloadTemplateImport from '../../../components/import/DownloadTemplateImport' // 导入
import StandardsManageEdit from './StandardsManageEdit' // 添加、编辑
import SubstitutionalRelation from './SubstitutionalRelation' // 查看替代关系
import UploadModal from './UploadFileModal' // 上传文件
import StanardFileManage from './StanardFileManage'
export default {
  components: {
    StandardsManageEdit,
    DownloadTemplateImport,
    SubstitutionalRelation,
    UploadModal,
    StanardFileManage
  },
  data() {
    return {
      currentComponent: '',
      formObj: {
        code: undefined,
        name: undefined
      },
      btn: [
        {
          type: 'success',
          id: '',
          name: '添加',
          componentName: 'StandardsManageEdit'
        },
        { type: 'error', id: '', name: '删除' }
        // { id: '', name: '导入', componentName: 'DownloadTemplateImport' },
        // { id: '', name: '导出' }
      ],
      // 表格
      pageColumns: [
        { title: '检测依据', key: 'code' },
        { title: '检测依据名称', key: 'name' },
        { title: '附件是否已上传', key: 'uploaded' }
        // { title: '标准状态', key: 'status', width: 120 },
        // { title: '标准分类', key: 'classify' },
        // { title: '标准类型', key: 'type' },
        // { title: '发布单位', key: 'publishUnit' },
        // { title: '发布日期', key: 'publishDate', date: true, width: 140 },
        // { title: '文件是否上传', key: 'fileUrl', width: 120 }
      ],
      // 操作
      iconMsg: [
        {
          type: 'ios-photos',
          id: '',
          name: '查看替代关系',
          componentName: 'SubstitutionalRelation'
        },
        {
          type: 'md-create',
          id: '',
          name: '编辑',
          componentName: 'StandardsManageEdit'
        },
        {
          type: 'md-add',
          id: '',
          name: '上传'
        },
        {
          type: 'ios-cloud',
          id: '',
          name: '查看附件'
        },
        { type: 'md-remove-circle', id: '', name: '删除' }
      ],
      searchOpen: false,
      getPage: {},
      // 选中的内容
      selectIds: [],
      statusList: [
        { value: 0, name: '现行' },
        { value: 1, name: '即将实施' },
        { value: 2, name: '部分被代替' },
        { value: 3, name: '被代替' },
        { value: 4, name: '作废' }
      ],
      classifyList: [
        { value: 0, name: '判定标准' },
        { value: 1, name: '检测依据' },
        { value: 2, name: '其他' }
      ],
      typeList: [
        { value: 0, name: '国家标准' },
        { value: 1, name: '地方标准' },
        { value: 2, name: '行业标准' },
        { value: 3, name: '企业标准' }
      ]
    }
  },
  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 '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._upload(data.id)
            break
          case '查看附件':
            this._fileManage(data.id)
            break
          case '查看替代关系':
            this.$refs.relationModal._open(data.id)
            break
          case '删除':
            this._deleteById(data.id)
            break
        }
      })
    },
    _fileManage(id) {
      this.$refs.stanardFileManage._open(id)
    },
    _upload(id) {
      const obj = {
        importUrl: '/soil/v1/standard_annex/upload/' + id
      }
      this.$refs.uploadModal._open(obj)
    },

    _editModal: async function(edit, id) {
      if (edit) {
        const result = await soilAptitude.standardGetById(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 soilAptitude.standardPage(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 soilAptitude.standardDeleteById(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.uploaded !== '是') {
            this.$Message.error('附件未上传，请上传附件！')
            return
          }
          window.open(
            global.baseURL + '/soil/v1/standard_annex/download/' + data.id,
            '_blank'
          )
        }
      })
    }
  }
}
</script>
