<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-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>
    <!--组件加载-->
    <ViewSample ref="viewSample"></ViewSample>
    <StandardsManageEdit ref="editModal" @on-result-change="_page"></StandardsManageEdit>
  </div>
</template>

<script>
import { soilSample } from '../../../api'
import StandardsManageEdit from './AddressManageEdit' // 添加、编辑
import ViewSample from './ViewLocationEntrust'
export default {
  components: {
    StandardsManageEdit,
    ViewSample
  },
  data() {
    return {
      currentComponent: '',
      formObj: {
        code: undefined,
        name: undefined
      },
      btn: [
        {
          type: 'success',
          id: '',
          name: '添加',
          componentName: 'StandardsManageEdit'
        },
        { type: 'error', id: '', name: '删除' }
      ],
      // 表格
      pageColumns: [
        { title: '位置编号', key: 'code' },
        { title: '位置管理人', key: 'manager' },
        { title: '收样存储位置', key: 'name' },
        { title: '备注说明', key: 'remark' }
      ],
      // 操作
      iconMsg: [
        {
          type: 'md-create',
          id: '',
          name: '编辑',
          componentName: 'StandardsManageEdit'
        },
        {
          type: 'md-apps',
          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._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._viewSample(data.name)
            break
          case '删除':
            this._deleteById(data.id)
            break
        }
      })
    },
    _viewSample(data) {
      this.$refs.viewSample._open(data)
    },
    _editModal: async function(edit, id) {
      if (edit) {
        const result = await soilSample.locationGetById(id)
        if (result) {
          this.$refs.editModal._open(result)
        }
      } else {
        // 添加
        this.$refs.editModal._open()
      }
    },
    // 获取数据
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilSample.locationPage(
        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.locationDeleteById(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>
