<template>
  <div>
    <Modal v-model="showModal" v-drag width="100" class="modal-footer-none full-screen">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <!--内容-->
        <Row>
          <!--查询-->
          <Col span="24">
            <Form v-show="searchOpen" :label-width="110" inline onsubmit="return false">
              <label class="label-sign"></label>
              <Form-item label="试验名称:" class="search-item">
                <Input v-model="formObj.name" @on-enter="_formSearch" 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" :show-search-btn="true" @on-result-change="_btnClick" class="contHide">
            </btn-list>
          </Col>
          <!-- 表格 -->
          <Col span="24">
            <PTVXETable
              ref="pageTable" :table-height="tableHeight" :get-page="getPage"
              @on-result-change="_tableResultChange"
              is-group
              select-data>
              <vxe-table-column
                v-for="item in pageColumns"
                :key="item.key"
                :field="item.key"
                :title="item.title"
                :min-width="item.width?item.width:200"
                :fixed="item.fixed?item.fixed:undefined"
                :edit-render="item.editCell?{autofocus: 'input'}:null"
                sortable
              >
                <!--可编辑模板-->
                <template v-slot:edit="scope">
                  <div v-if="item.detail"><a @click.stop="_detailModal(scope.row.sampleId)">{{scope.row[item.key]}}</a>
                  </div>
                  <div v-else-if="item.status">{{scope.row[item.key] === undefined ?'':scope.row[item.key].display}}
                  </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==='epibolyItem'">{{scope.row.epibolyItem?'是':'否'}}</div>
                  <div v-else-if="item.key==='qualified'">{{scope.row.qualified?scope.row.qualified.display:''}}</div>
                  <!--科室 start-->
                  <div v-else-if="item.key==='groupName'">
                    <el-select v-model="scope.row.groupName" @change="_groupChange" @click.native.stop="_handleRow(scope)"
                               transfer
                               size="small">
                      <el-option v-for="item in groupData" :key="item.name" :label="item.name"
                                 :value="item.name"></el-option>
                    </el-select>
                  </div>
                  <!--科室 end-->
                  <!--检测依据简称 start-->
                  <div v-else-if="item.key==='testBasisSm'">
                    <el-select v-model="scope.row.testBasisSm"
                               @change="_saveTestBasisSm(scope)"
                               placeholder="请选择检测依据简称"
                               size="small"
                               style="width:100%">
                      <el-option
                        v-for="item in testBasisSmList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-else>{{scope.row[item.key]}}</div>
                </template>
                <template slot-scope="scope">
                  <div v-if="item.detail"><a @click.stop="_detailModal(scope.row.sampleId)">{{scope.row[item.key]}}</a>
                  </div>
                  <div v-else-if="item.status">{{scope.row[item.key] === undefined ?'':scope.row[item.key].display}}
                  </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==='epibolyItem'">{{scope.row.epibolyItem?'是':'否'}}</div>
                  <div v-else-if="item.key==='qualified'">{{scope.row.qualified?scope.row.qualified.display:''}}</div>
                  <div v-else>{{scope.row[item.key]}}</div>
                </template>
              </vxe-table-column>
            </PTVXETable>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
/* 查看样品（企业和政府） */
import { soilEntrust } from '../../../api'

export default {
  components: {},
  data() {
    return {
      showModal: false,
      selectData: [],
      selectIds: [],
      modalTitle: '检测项目',
      type: '', // 判断是企业或政府委托
      getPage: {},
      pageColumns: [
        { title: '试验名称', key: 'name', width: 160 },
        { title: '试验项目英文简写', key: 'shortName', width: 140 },
        { title: '大类', key: 'mainType', width: 140 },
        { title: '小类', key: 'smallType' },
        { title: '检测依据', key: 'testBasis', width: 180 },
        { title: '试验方法', key: 'testMethod', width: 180 },
        { title: '状态', key: 'status', width: 180, status: true }
      ],
      btn: [
        // {type: 'primary', id: 'food-sampling-list-item-match', name: '匹配省抽项目'},
        {
          type: 'error',
          id: 'ZBC',
          name: '删除'
        }
        // {type: '', id: 'food-sampling-list-reset-sc-id', name: '重置省局ID',},
      ],
      sampleId: '',
      formObj: {
        groupId: undefined,
        sampleId: undefined
      },
      receiveDateList: [],
      ctimeList: [],
      samplingDateList: [],
      searchOpen: false,
      groupData: [],
      testBasisSmList: [],
      testBasisData: [],
      testMethodData: [],
      currentRow: {},
      judgeList: [{ name: '是', value: 1 }, { name: '否', value: 0 }],
      // 检测科室
      selectGroupData: []
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('', 320)
      } else {
        return this.$tableHeight('', 175)
      }
    }
  },
  mounted() {
    // this._getGroup()
  },
  methods: {
    // 搜索项检测科室变化
    _groupDataChange(data) {
      this.formObj.groupIds = data.join(',')
    },
    _handleRow(data) {
      this.currentRow = data.row
    },
    // 科室
    _getGroup() {
      this.$store.dispatch('LmsUserGroup/list').then(() => {
        this.groupData = this.$store.state.LmsUserGroup.list
      })
    },
    // 选择科室
    _groupChange(e) {
      const obj = this.groupData.find(item => item.name === e)
      if (obj) {
        this.$set(this.currentRow, 'groupId', obj.id)
        this.$set(this.currentRow, 'groupName', obj.name)
      }
      this._save()
    },
    // 获取方法简称
    _getTestBasisSm(data) {
      this.$store
        .dispatch('FoodItem/listAbbreviationByItem', { ids: data.row.id })
        .then(() => {
          const result = this.$store.state.FoodItem.list
          if (result) {
            this.testBasisSmList = result
          } else {
            this.testBasisSmList = []
          }
        })
    },

    // 抽样日期
    _samplingDateChange(data) {
      this.formObj.samplingDateBegin = data[0]
      this.formObj.samplingDateEnd = data[1]
    },
    // 接收日期
    _receiveChange(data) {
      this.formObj.receiveDateBegin = data[0]
      this.formObj.receiveDateEnd = data[1]
    },
    // 下单日期
    _ctimeChange(data) {
      this.formObj.ctimeBegin = data[0]
      this.formObj.ctimeEnd = data[1]
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'selectData':
          const selectIds = []
          for (let i = 0; i < data.length; i++) {
            selectIds.push(data[i].id)
          }
          this.selectIds = selectIds
          this.selectData = data
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _btnClick(msg) {
      switch (msg) {
        case 'search':
          this.searchOpen = !this.searchOpen
          break
      }
    },
    _matchChange(msg) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      this.formObj = this.$serializeForm(this.formObj)
      this.formObj.sampleId = this.sampleId
      const result = await soilEntrust.experimentPage(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.$refs.pageTable._hideLoading()
        this.getPage = result
        console.log(result)
      }
    },
    _open(id, groupId) {
      this.sampleId = id
      this.formObj = this.$resetFields(this.formObj)
      this.formObj.sampleId = id
      this.formObj.groupId = groupId
      this.showModal = true
      this.currentRow = {}
      this.selectGroupData = []
      this._page()
    }
  }
}
</script>
