<template>
  <div>
    <div class="layout-content-padding">
      <div class="layout-content-main">
        <Row style="margin-top: 10px;">
          <!--查询条件-->
          <Col span="24">
          <div class="fl">
            <Form id="search-form" :label-width="70" inline onsubmit="return false">
              <label class="label-sign"></label>
              <Form-item label="委托日期:">
                <el-date-picker
                  v-model="queryDate"
                  @change="_dateChange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  size="small"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </Form-item>
              <Form-item label="工程名称:">
                <Input v-model="formObj.projectName" @on-enter="_search" clearable placeholder="请输入钻孔位置" style="width:100%"/>
              </Form-item>
              <Form-item label="工程类型:">
                <Select v-model="formObj.projectType" clearable name="projectType" placeholder="请选择工程类型">
                  <Option v-for="(item,index) in projectArray" :key="index" :value="item.name">{{item.name}}</Option>
                </Select>
              </Form-item>
              <Form-item class="search-btn">
                <Button @click="_getData" type="primary" class="width-80">
                  搜索
                </Button>
              </Form-item>
            </Form>
          </div>
          <div class="clear"></div>
          </Col>
          <!--内容-->
          <Col span="24">
            <PTVXETable ref="pageTable" :table-height="tableHeight" :form-id="formId" :loading="true"
                        :get-page="getPage" @on-result-change="_tableResultChange">
              <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" sortable>
                <template slot-scope="scope">
                  <span v-if="item.date">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}</span>
                  <div v-else-if="item.status">
                    <span v-if="scope.row[item.key].display === '委托单评审驳回'" style="color: red;">{{ scope.row[item.key] === undefined ? '': scope.row[item.key].display }}</span>
                    <span v-else>{{ scope.row[item.key] === undefined ? '': scope.row[item.key].display }}</span>
                  </div>
                  <span v-else-if="item.key==='backReasons'" style="color: red">{{scope.row[item.key]}}</span>
                  <span v-else-if="item.key==='projectType'">{{scope.row[item.key]}}</span>
                  <span v-else-if="item.key==='projectName'">{{scope.row[item.key]}}</span>
                  <span v-else>{{scope.row[item.key]?scope.row[item.key]:0}}</span>
                </template>
              </vxe-table-column>
            </PTVXETable>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/named
import { soilAptitude, soilStatistics } from '../../../api'

export default {
  components: {},
  data() {
    const date = this.$dateformat(new Date(), 'yyyy-mm-dd')
    const nextMonth = this.$dateformat(
      new Date().setMonth(new Date().getMonth() + 1),
      'yyyy-mm-dd'
    )
    return {
      formId: 'ProjectItem',
      beginDate: new Date(),
      endDate: new Date(),
      groupId: '',
      groupName: '',
      tester: '',
      testerId: '',
      pageColumns: [
        { title: '工程类型', key: 'projectType', detail: true, width: 150 },
        { title: '工程名称', key: 'projectName', width: 150 },
        { title: '比重', key: '比重', width: 110 },
        { title: '导热系数', key: '导热系数', width: 110 },
        { title: '电导率', key: '电导率', width: 110 },
        { title: '界限含水率', key: '界限含水率', width: 110 },
        { title: '颗粒分析-Hyd', key: '颗粒分析-Hyd', width: 150 },
        { title: '颗粒分析-Sieve', key: '颗粒分析-Sieve', width: 150 },
        { title: '密度', key: '密度', width: 110 },
        { title: '渗透', key: '渗透', width: 110 },
        { title: '碳酸盐含量', key: '碳酸盐含量', width: 110 },
        { title: '相对密度', key: '相对密度', width: 110 },
        { title: '点荷载强度', key: '点荷载强度', width: 110 },
        { title: '固结', key: '固结', width: 110 },
        { title: '落锥', key: '落锥', width: 110 },
        { title: '落锥-重塑', key: '落锥-重塑', width: 110 },
        { title: '三轴压缩-CD', key: '三轴压缩-CD', width: 150 },
        { title: '三轴压缩-CU', key: '三轴压缩-CU', width: 150 },
        { title: '三轴压缩-UU', key: '三轴压缩-UU', width: 150 },
        { title: '三轴压缩-UU-重塑', key: '三轴压缩-UU-重塑', width: 150 },
        { title: '手动十字板剪切', key: '手动十字板剪切', width: 150 },
        { title: '无侧限抗压强度', key: '无侧限抗压强度', width: 150 },
        { title: '休止角', key: '休止角', width: 110 },
        { title: '袖珍贯入仪', key: '袖珍贯入仪', width: 110 },
        { title: '直接剪切', key: '直接剪切', width: 110 },
        { title: '波速模量', key: '波速模量', width: 110 },
        { title: '液化', key: '液化', width: 110 },
        { title: '触变', key: '触变', width: 110 },
        { title: '动单剪', key: '动单剪', width: 110 },
        { title: '共振柱', key: '共振柱', width: 110 },
        { title: '静单剪', key: '静单剪', width: 110 },
        {
          title: '实验室微型十字板剪切-重塑',
          key: '实验室微型十字板剪切-重塑',
          width: 200
        },
        { title: '蠕变', key: '蠕变', width: 110 },
        { title: '应变控制加荷固结', key: '应变控制加荷固结', width: 180 },
        {
          title: '实验室微型十字板剪切',
          key: '实验室微型十字板剪切',
          width: 180
        },
        { title: '含水率', key: '含水率', width: 110 },
        { title: '颗粒分析-200', key: '颗粒分析-200', width: 150 },
        { title: '无侧限抗压强度-重塑', key: '无侧限抗压强度-重塑', width: 180 }
      ],
      groupData: [],
      getPage: {},
      tempData: {
        groupId: '',
        groupName: '',
        beginDate: date,
        endDate: nextMonth
      },
      formObj: {
        entrustDateBeg: undefined,
        entrustDateEnd: undefined,
        projectType: undefined
      },
      testerData: [],
      queryDate: [date, nextMonth],
      serviceType: '',
      serviceTypeList: [],
      projectArray: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('search')
    }
  },
  mounted() {
    this.$refs.pageTable._hideLoading()
    const str = this.tempData.endDate
    const arr = str.split('-')
    const lastday = this.mGetDate(arr[0], arr[1], arr[2]).getTime() - 1
    this.formObj.entrustDateBeg = this.tempData.beginDate
    this.formObj.entrustDateEnd = this.$dateformat(
      lastday,
      'yyyy-mm-dd HH:MM:ss'
    )
    this._getData()
    this._getProjectArray()
  },
  methods: {
    _getProjectArray: async function() {
      const result = await soilAptitude.getDictInfo({
        type: '工程类型',
        page: 1,
        rows: 50
      })
      if (result) {
        this.projectArray = result.records
      }
    },
    _dateChange(data) {
      if (data) {
        this.tempData.beginDate = data[0]
        this.tempData.endDate = data[1]
        this.formObj.entrustDateBeg = data[0]
        const str = data[1]
        const arr = str.split('-')
        const lastday = this.mGetDate(arr[0], arr[1], arr[2]).getTime() - 1
        this.formObj.entrustDateEnd = this.$dateformat(
          lastday,
          'yyyy-mm-dd HH:MM:ss'
        )
      } else {
        this.tempData.beginDate = ''
        this.tempData.endDate = ''
        this.formObj.entrustDateBeg = undefined
        this.formObj.entrustDateEnd = undefined
      }
    },
    mGetDate(year, month, day) {
      const d = new Date(year, month - 1, day, 24)
      return d
    },
    // 服务类型
    _getData: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await soilStatistics.pageProjectStatistics(
        this.$serializeFormSearch(this.formObj)
      )
      if (result) {
        for (let i = 0; i < result.records.length; i++) {
          for (let j = 0; j < result.records[i].experimentVOList.length; j++) {
            const listName = result.records[i].experimentVOList[j].name
            const listNum = result.records[i].experimentVOList[j].itemCount
            result.records[i][listName] = listNum
          }
        }
        console.log('result', result)
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
    },
    // 检测项目详情
    _contHide() {
      this.tempData.beginDate = this.$dateformat(new Date(), 'yyyy-mm')
      this.tempData.endDate = this.$dateformat(new Date(), 'yyyy-mm')
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _search() {
      this._formSearch()
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'changeSize':
          this._getData()
          break
      }
    }
    // 参数
  }
}
</script>
