<template>
  <div>
    <Row>
    <Col span="24">
      <Form id="formId" :label-width="80" inline onsubmit="return false">
        <label class="label-sign"></label>
        <Form-item label="模板名称:" class="search-item">
          <Input v-model="formObj.alias" @on-enter="_formSearch" placeholder="请输入模板名称" clearable/>
        </Form-item>
        <Form-item class="search-btn" style="margin-left: -10px">
          <Button @click="_formSearch" type="primary">搜索</Button>
        </Form-item>
      </Form>
    </Col>
      <Col span="24">
        <PTVXETableHeight
      ref="pageTable"
      :table-height="300"
      :get-page="getPage"
      :is-radio="true"
      @on-result-change="_tableResultChange"
      select-data="true"
      hide-checkbox>
      <vxe-table-column
        v-for="item in pageColumns"
        :key="item.key"
        :field="item.key"
        :title="item.title"
        :width="item.width"
        :min-width="200"
        :fixed="item.fixed?item.fixed:undefined"
        sortable
      >
        <template slot-scope="scope">
          <span v-if="item.dateTime">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):''}}</span>
          <span v-else-if="item.judged">{{scope.row[item.key]===1?'是':'否'}}</span>
          <span v-else>{{scope.row[item.key]}}</span>
        </template>
      </vxe-table-column>
    </PTVXETableHeight>
      </Col>
    </Row>
  </div>
</template>
<script>
import { soilAptitude } from '../../../../api'
export default {
  components: {},
  data() {
    return {
      tableHeight: '400',
      pageColumns: [
        { title: '模板名称', key: 'alias', width: 220 },
        { title: '类别', key: 'classType', width: 140 },
        { title: '备注', key: 'remark' }
      ],
      getPage: {},
      modalTitle: '报告模板',
      sampleId: '',
      formObj: {
        name: undefined
      },
      selectData: []
    }
  },
  methods: {
    _tableResultChange(msg, data) {
      console.log(msg)
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'changeSize':
          this._page()
          break
        case 'selectData':
          this.selectData = data
          break
        case 'singleSelect':
          this.selectData = [data]
          this.$emit('on-result-change', this.selectData)
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
      }
    },
    _open(sampleId) {
      this.sampleId = sampleId || ''
      this._page()
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilAptitude.expReportTemplatePage(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
    }
  }
}
</script>
