<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" width="1200">
      <p slot="header">{{modalTitle}}</p>
      <Row>
        <Col span="24">
        <div style="overflow-y: auto">
          <table class="tableClass">
            <tbody>
            <tr>
              <th colspan="6" class="tableClass_back">GDS信息</th>
            </tr>
            <tr>
              <th>初始高度</th>
              <td>{{gdsData.initialHeight}}</td>
              <th>初始直径</th>
              <td>{{gdsData.initialDiameter}}</td>
              <th>比重(kN/m3)</th>
              <td>{{gdsData.specificGravityKn}}</td>
            </tr>
            <tr>

              <th>工作参考</th>
              <td>{{gdsData.jobReference}}</td>
              <th>钻孔名称</th>
              <td>{{gdsData.borehole}}</td>
              <th>样品名称</th>
              <td>{{gdsData.sampleName}}</td>
            </tr>
            <tr>
              <th>深度</th>
              <td>{{gdsData.depth}}</td>
              <th>样品日期</th>
              <td>{{gdsData.sampleDate}}</td>
              <th>样品描述</th>
              <td>{{gdsData.descriptionOfSample}}</td>
            </tr>
            <tr>
              <th>初始质量</th>
              <td>{{gdsData.initialMass}}</td>
              <th>初始干质量</th>
              <td>{{gdsData.initialDryMass}}</td>
              <th>比重(ass/meas)</th>
              <td>{{gdsData.specificGravityAss}}</td>
            </tr>
            <tr>
              <th>试验条款</th>
              <td>{{gdsData.testClause}}</td>
              <th>测试开始日期</th>
              <td>{{gdsData.dateTestStarted}}</td>
              <th>测试结束日期</th>
              <td>{{gdsData.dateTestFinished}}</td>
            </tr>
            <tr>
              <th>试样类型</th>
              <td>{{gdsData.specimenType}}</td>
              <th>最终质量</th>
              <td>{{gdsData.finalMass}}</td>
              <th>最终干质量</th>
              <td>{{gdsData.finalDryMass}}</td>
            </tr>
            <tr>
              <th>设备编号</th>
              <td>{{gdsData.machineNo}}</td>
              <th>Cell No</th>
              <td>{{gdsData.cellNo}}</td>
              <th>工作地点</th>
              <td>{{gdsData.jobLocation}}</td>
            </tr>
            <tr>
              <th>重复数据开始</th>
              <td>{{gdsData.startOfRepeatedData}}</td>
            </tr>
            </tbody>
          </table>
        </div>
        </Col>
        <Col span="24">
          <Form id="task-assign-item-left" :label-width="70" inline onsubmit="return false">
            <label class="label-sign"></label>
            <Form-item class="search-item" label="阶段编号:">
              <Input v-model="formObj.stageNumber" @on-enter="_formSearch" placeholder="请输入阶段编号" clearable></Input>
            </Form-item>
            <Form-item class="search-btn">
              <Button @click="_formSearch" type="primary">搜索</Button>
            </Form-item>
          </Form>
        </Col>
        <Col span="24">
      <div>
        <PTVXETable
          ref="pageTable"
          :form-id="formId"
          :table-height="500"
          :get-page="getPage"
          @on-result-change="_tableResultChange">
          <vxe-table-column
            v-for="item in pageColumns"
            :key="item.key"
            :field="item.key"
            :title="item.title"
            :width="item.width"
            :min-width="150"
            :fixed="item.fixed?item.fixed:undefined"
            sortable
          >
            <template slot-scope="scope">
              <div v-if="item.key==='siteNo'" @click.stop="_handleRow(scope)">
                <el-input v-model="scope.row.siteNo" blur placeholder="请输入现场编号"
                ></el-input>
              </div>
              <div v-else-if="item.key==='experiments'" @click.stop="_handleRow(scope)">
                <span @click="_removeItem(scope.row)">{{scope.row[item.key]}}</span>
              </div>
              <span v-else> {{ scope.row[item.key] }}</span>
            </template>
          </vxe-table-column>
        </PTVXETable>
      </div>
        </Col>
    </Row>
      <div slot="footer">
        <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult"></modal-footer>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 添加编辑分包商
 */
import { soilTest } from '../../../api'
export default {
  components: {},
  data() {
    return {
      formId: 'viewGdsDataId',
      getPage: {},
      height: 300,
      gdsData: {},
      edit: false,
      selectData: [],
      searchOpen: true,
      iconMsg: [
        {
          type: 'md-trash',
          id: '',
          name: '删除'
        }
      ],
      pageColumns: [
        { title: 'Stage Number', key: 'stageNumber' },
        { title: 'Time since start of test (s)', key: 'timeSinceStartOfTest' },
        {
          title: 'Time since start of stage (s)',
          key: 'timeSinceStartOfStage'
        },
        { title: 'Axial Displacement (mm)', key: 'axialDisplacement' },
        { title: 'Axial Load (kN)', key: 'axialLoad' },
        {
          title: 'Horizontal Displacement (mm)',
          key: 'horizontalDisplacement'
        },
        { title: 'Horizontal Load (kN)', key: 'horizontalLoad' },
        { title: 'Pore Water Pressure (kPa)', key: 'poreWaterPressure' },
        { title: 'Back Pressure (kPa)', key: 'backPressure' },
        { title: 'Back Volume (mm3)', key: 'backVolume' },
        { title: 'Undefined Transducer 1', key: 'undefinedTransducerOne' },
        { title: 'Undefined Transducer 2', key: 'undefinedTransducerTwo' },
        { title: 'Ring Shear Torque (Nm)', key: 'ringShearTorqueNm' },
        { title: 'Ring Shear Angle (degs)', key: 'ringShearTorqueDegs' },
        { title: 'Lower Chamber Pr (kPa)', key: 'lowerChamberPr' },
        { title: 'Lower Chamber Vol (mm3)', key: 'lowerChamberVol' },
        { title: 'Axial Displacement 2 (mm)', key: 'axialDisplacementTwo' },
        {
          title: 'Horizontal Displacement 2 (mm)',
          key: 'horizontalDisplacementTwo'
        },
        { title: 'Ring Shear Load 1 (kN)', key: 'ringShearLoadOne' },
        { title: 'Ring Shear Load 2 (kN)', key: 'ringShearLoadTwo' },
        { title: 'Axial Load 2 (kN)', key: 'axialLoadTwo' },
        { title: 'Horizontal Load 2 (kN)', key: 'horizontalLoadTwo' },
        { title: 'Horizontal Load 3 (kN)', key: 'horizontalLoadThree' },
        { title: 'Axial Stroke (mm)', key: 'axialStroke' },
        { title: 'Horizontal Stroke (mm)', key: 'horizontalStroke' },
        { title: 'Pore Air Pressure (kPa)', key: 'poreAirPressure' },
        { title: 'Pore Air Pressure 2 (kPa)', key: 'poreAirPressureTwo' },
        { title: 'Atmospheric Pressure (kPa)', key: 'atmosphericPressure' },
        {
          title: 'Back to Air differential (kPa)',
          key: 'backToAirDifferential'
        },
        { title: 'Cell Pressure (kPa)', key: 'cellPressure' },
        { title: 'Cell Volume (mm3)', key: 'cellVolume' },
        { title: 'Pore Air Volume (mm3)', key: 'poreAirVolume' },
        { title: 'Axial Strain (%)', key: 'axialStrain' },
        { title: 'Normal Stress (kPa)', key: 'normalStress' },
        {
          title:
            'Horizontal Strain (%) or Horizontal Ring Displacement for Ring Shear Machine (mm)',
          key: 'hsohrdfrsm'
        },
        {
          title:
            'Horizontal Stress (kPa) or Shear Stress for Ring Shear Machine (kPa)',
          key: 'hsossfrsm'
        },
        { title: 'Horizontal Eff Stress (kPa)', key: 'horizontalEffStress' },
        { title: 'Effective Area (mm2)', key: 'effectiveArea' },
        {
          title: 'Normal Effective Stress (kPa)',
          key: 'normalEffectiveStress'
        },
        { title: 'Average Ring Shear Load (kN)', key: 'averageRingShearLoad' }
      ],
      currentIndex: -1,
      id: '',
      modalTitle: '',
      formObj: {},
      selectIds: [],
      showModal: false,
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '关闭', type: 'primary' }
      ],
      aptitudeData: []
    }
  },
  methods: {
    /** *modal-footer */
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '关闭':
          this._cancel()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _cancel() {
      this.showModal = false
      this.$refs.footerModal._hideLoading()
    },
    _openEdit(id) {
      this.edit = true
      this.showBtn = false
      this.showModal = true
      this.getPage.records = []
      this.id = ''
      this.gdsData = []
      this._getGdsMainInfo(id)
      this.modalTitle = '查看GDS数据'
    },
    _getGdsInfo: async function() {
      if (this.formObj.gdsId) {
        Object.assign(this.formObj, this.$refs.pageTable._searchParams())
        const result = await soilTest.dataGdsDetail(
          this.$serializeForm(this.formObj)
        )
        if (result) {
          this.getPage = result
          this.$refs.pageTable._hideLoading()
        }
      } else {
        this.$refs.pageTable._hideLoading()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'changeSize':
          this._getGdsInfo()
          break
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _getGdsMainInfo: async function(id) {
      const result = await soilTest.gdsGetMainInfo(id)
      if (result) {
        this.gdsData = result
        this.formObj.gdsId = this.gdsData.id
        this._getGdsInfo()
      }
    },
    _showTime(formObj) {
      if (this.formObj.entrustDate === undefined) {
        this.formObj.entrustDate = ''
      } else {
        this.formObj.entrustDate = new Date(formObj.entrustDate)
      }
      if (this.formObj.tabulateDate === undefined) {
        this.formObj.tabulateDate = ''
      } else {
        this.formObj.tabulateDate = new Date(formObj.tabulateDate)
      }
    },
    _visibleChange(data) {
      this.$forceUpdate()
      console.log('清空')
      this.formObj.client = ''
      this.formObj = {}
    }
  }
}
</script>
