<template>
  <div class="p12">
    <a-row :gutter="24" class="topCard">
      <!-- DVP验证-检索条件 -->
      <a-card class="topCardMargin p12">
        <a-form layout="vertical">
          <!-- 零部件编号 -->
          <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
            <a-form-item :label="$t('verity.dvp.part.number')">
              <a-input
                v-model="queryParam.partCode"
                :placeholder="$t('global-btn.please-enter') + $t('verity.dvp.part.number')"
                allowClear
                :maxLength='500'
              />
            </a-form-item>
          </a-col>
          <!-- 零部件名称 -->
          <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
            <a-form-item :label="$t('verity.dvp.part.name')">
              <a-input
                v-model="queryParam.partName"
                :placeholder="$t('global-btn.please-enter') + $t('verity.dvp.part.name')"
                allowClear
                :maxLength='50'/>
            </a-form-item>
          </a-col>
          <!-- 试验项目 -->
          <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
            <a-form-item :label="$t('plan.dvp.test-project')">
              <a-input
                v-model="queryParam.testProject"
                :placeholder="$t('global-btn.please-enter') + $t('plan.dvp.test-project')"
                allowClear
                :maxLength='50'/>
            </a-form-item>
          </a-col>
          <!-- 试验来源 -->
          <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
            <a-form-item :label="$t('plan.dvp.test-source')">
              <a-select v-model="queryParam.testSource" :placeholder="$t('plan.dvp.please-enter-test-source')" allowClear>
                <a-select-option v-for="(item, index) in testSourceList" :value="item.value" :key="index">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <span v-show="advanceExpand">
            <!-- 试验开始时间 -->
            <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
              <a-form-item :label="$t('verity.dvp.test.start.date')">
                <a-range-picker v-model="queryParam.testStartTime" @change="changeStartTime" allowClear valueFormat="YYYY-MM-DD" style="width: 100%" />
              </a-form-item>
            </a-col>
            <!-- 试验结束时间 -->
            <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
              <a-form-item :label="$t('verity.dvp.test.end.date')">
                <a-range-picker v-model="queryParam.testEndTime" @change="changeEndTime" allowClear valueFormat="YYYY-MM-DD" style="width: 100%" />
              </a-form-item>
            </a-col>
            <!-- 是否通过 -->
            <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
              <a-form-item :label="$t('verity.dvp.is.pass')">
                <a-select v-model="queryParam.testResult" :placeholder="$t('global-btn.please-select') + $t('verity.dvp.is.pass')" allowClear>
                  <a-select-option :value="1">{{ $t('global-btn.pass') }}</a-select-option>
                  <a-select-option :value="0">{{ $t('global-btn.fail') }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- 试验报告编号 -->
            <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
              <a-form-item :label="$t('dvp.full.vehicle.dvp.test-report-code')">
                <a-input
                  v-model="queryParam.testReportCode"
                  :placeholder="$t('global-btn.please-enter') + $t('dvp.full.vehicle.dvp.test-report-code')"
                  allowClear
                  :maxLength='100'
                />
              </a-form-item>
            </a-col>
            <!-- 是否等效 -->
            <a-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
              <a-form-item :label="$t('plan.dvp.is-it-an-equivalent-test')">
                <a-select
                  v-model="queryParam.isEquivalent"
                  :placeholder="$t('global-btn.please-select') + $t('plan.dvp.is-it-an-equivalent-test')"
                  :defaultValue="'1'"
                  allowClear>
                  <a-select-option :value="'1'">{{ $t('plan.dvp.non-equivalent-experiment') }}</a-select-option>
                  <a-select-option :value="'0'">{{ $t('plan.dvp.equivalent-experiment') }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </span>
          <a-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <a-form-item class='tr' :label="'\xa0'">
              <!-- 展开/收起 -->
              <a @click="toggleAdvance" class="mr10">
                {{ advanceExpand ? $t('plan.dvp.collapse') : $t('plan.dvp.expand') }}
                <a-icon :type="advanceExpand ? 'up' : 'down'"/>
              </a>
              <!-- 重置 -->
              <a-button @click='reset' class="ml10">
                {{ $t('global-btn.reset') }}
              </a-button>
              <!-- 查询 -->
              <a-button @click='search' type="primary" class="ml10">
                {{ $t('global-btn.search') }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-form>
      </a-card>
    </a-row>
    <a-row class="mt10">
      <!-- 表格部分 -->
      <a-card class="p12" :style="{ height: tableHeight }">
        <template slot="extra">
          <!-- 上传材料报告 -->
          <a-button class="mr12" type="primary" :disabled="isLook" @click='uploadMaterial' style="right: 6px">
            {{ $t('global-btn.upload.material.report') }}
          </a-button>
          <!-- 上传试验报告 -->
<!--          <a-button class="mr12" type="primary" :disabled="isLook" @click='uploadTest' style="right: 6px">-->
<!--            {{ $t('global-btn.upload.test.report') }}-->
<!--          </a-button>-->
          <!-- 批量编辑 -->
          <a-button class="mr12" type="primary" :disabled="isLook || batchEditButtonDisabled" @click='batchEdit' style="right: 6px">
            {{ $t('global-btn.edit') }}
          </a-button>
          <!-- 导出 -->
          <a-button class="export-margin" @click='exportFile' style="right: 10px">
            {{ $t('global-btn.export') }}
          </a-button>
        </template>
        <a-table
          ref="tableRef"
          :columns="columns"
          :dataSource="tableData"
          :pagination="pagination"
          :rowKey="(record, index) => { return index; }"
          :loading="tableLoading"
          size="small"
          @change="handleOuterTableChange"
          :scroll="{ x: tableWidth, y: tableHeightValue}"
          bordered
          :components='components'>
          <!-- 序号列 -->
          <template slot='index' slot-scope='text, record, index'>
            <span>{{ (pagination.pageCurrent - 1) * pagination.pageSize + index + 1 }}</span>
          </template>
          <!--操作-->
          <template slot='operation' slot-scope='name, row'>
           <!-- 等效试验的试验在验证阶段，不用编辑   -->
            <a href='javascript: void(0);' @click='editInit(row)' :disabled="isLook || row.equivalentId">
              <!-- 编辑 -->
              <a-tooltip :title="$t('global-btn.edit')">
                <i class='iconfont iconicon-bianji'></i>
              </a-tooltip>
            </a>
          </template>
          <!-- 试验报告下载 -->
          <template slot="testReport" slot-scope="text, record">
            <span class="clickContent" @click="viewReport(record, 1)" :title="text">{{ text }}</span>
          </template>
          <!-- 材料报告下载 -->
          <template slot="materialsFileName" slot-scope="text, record">
            <span class="clickContent" @click="viewReport(record, 2)" :title="text">{{ record.materialReportCode }}</span>
          </template>
          <!-- 等效报告下载 -->
          <template slot="equivalentCode" slot-scope="text, record">
            <span :title="text" class="clickContent" @click="viewReport(record, 3)"> {{ record.equivalentCode }} </span>
          </template>
        </a-table>
      </a-card>
    </a-row>
    <!-- 编辑模态框 -->
    <a-modal v-model="isEdit" :title="$t('header.dvp-verify')" @ok="save" @cancel="closeModal" :width="1000" :maskClosable="false">
      <a-row :gutter="24">
        <a-form>
          <!-- 零部件编号 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.part.number')">
              <a-input
                v-model="editParam.partCode"
                :disabled="true"
              />
            </a-form-item>
          </a-col>
          <!-- 零部件名称 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.part.name')">
              <a-input
                v-model="editParam.partName"
                :disabled="true"
              />
            </a-form-item>
          </a-col>
          <!-- CPAC编号 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.cpac.number')">
              <a-input
                v-model="editParam.cpacCode"
                :disabled="true"
              />
            </a-form-item>
          </a-col>
          <!-- FND代码 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.fnd.code')">
              <a-input
                v-model="editParam.fndCode"
                :disabled="true"
              />
            </a-form-item>
          </a-col>
          <!-- 试验来源 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.test.source')">
              <a-select v-model="editParam.testSource" :disabled="true" :placeholder="$t('plan.dvp.please-enter-test-source')" allowClear>
                <a-select-option v-for="(item, index) in testSourceList" :value="item.value" :key="index">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 试验项目 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.test.project')">
              <a-input
                v-model="editParam.testProject"
                :disabled="true"
              />
            </a-form-item>
          </a-col>
          <!-- 测试开始日期 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.test.start.date')" required>
              <a-date-picker
                :placeholder="$t('global-btn.please-select') + $t('verity.dvp.test.start.date')"
                class="width100"
                valueFormat="YYYY-MM-DD"
                @change='changeStartTime'
                v-model="editParam.testStartTime"
              />
            </a-form-item>
          </a-col>
          <!-- 测试结束日期 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.test.end.date')" required>
              <a-date-picker
                :placeholder="$t('global-btn.please-select') + $t('verity.dvp.test.end.date')"
                class="width100"
                valueFormat="YYYY-MM-DD"
                @change='changeEndTime'
                v-model="editParam.testEndTime"
              />
            </a-form-item>
          </a-col>
          <!-- 是否通过 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.is.pass')" required>
              <a-select
                v-model="editParam.isPass"
                :placeholder="$t('global-btn.please-select') + $t('verity.dvp.is.pass')">
                <a-select-option value="1">{{ $t('global-btn.yes') }}</a-select-option>
                <a-select-option value="0">{{ $t('global-btn.no') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- 试验报告编号 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.test.report.number')" required>
              <a-input
                v-model.trim="editParam.testReportCode"
                :placeholder="$t('global-btn.please-enter') + $t('verity.dvp.test.report.number')"
                allowClear
                :maxLength='100'
              />
            </a-form-item>
          </a-col>
          <!-- 测试结果及分析 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.test.result.analysis')" required>
              <a-input
                v-model.trim="editParam.testResultAnalyse"
                :placeholder="$t('global-btn.please-enter') + $t('verity.dvp.test.result.analysis')"
                allowClear
                :maxLength='500'
              />
            </a-form-item>
          </a-col>
          <!-- 改进措施计划 -->
          <a-col v-if="editParam.isPass === '0'" :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('verity.dvp.improvement.measures')" required>
              <a-input
                v-model.trim="editParam.modifiedMeasure"
                :placeholder="$t('global-btn.please-enter') + $t('verity.dvp.improvement.measures')"
                allowClear
                :maxLength='500'
              />
            </a-form-item>
          </a-col>
          <!-- 上传试验报告 -->
          <a-col :lg="16" :md="24" :sm="24" :xl="12" :xs="24">
            <a-form-item :label="$t('global-btn.upload.test.report')" required>
              <a-upload-dragger
                name="file"
                :multiple="false"
                action=""
                :customRequest='editUploadFile'
                :remove='editRemoveFile'
                :file-list="fileList"
              >
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox"/>
                </p>
                <p class="ant-upload-text">
                  {{ $t('dvp.full.vehicle.dvp.click-drag-file-area') }}
                </p>
                <p class="ant-upload-hint">
                  {{ $t('dvp.full.vehicle.dvp.only-support-single-upload') }}
                </p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
        </a-form>
      </a-row>
    </a-modal>
    <!-- 上传材料报告 -->
    <upload-material-report
      ref="materialReport"
      @init="list()" />
    <!-- 上传试验报告 -->
    <upload-test-report
      ref="testReport"
      @init="list()" />
    <!-- 文件预览 -->
    <view-office ref="viewModal"/>
    <!-- 批量编辑模态框 -->
    <batch-edit ref="batchEdit" @initData="list"/>
  </div>
</template>
<script>

import uploadMaterialReport from './components/uploadMaterialReport';
import uploadTestReport from './components/uploadTestReport';
import VueDraggableResizable from 'vue-draggable-resizable';
import ViewOffice from "@/components/viewOffice/viewOffice";
import BatchEdit from './components/btachEdit';

export default {
  name: "dvpVerify",
  components: {
    uploadMaterialReport,
    uploadTestReport,
    VueDraggableResizable,
    ViewOffice,
    BatchEdit
  },
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.columns.find((col) => {
						const k = col.dataIndex || col.key;
						return k === key;
					});
					if (!col || !col.width) {
						return h('th', { ...restProps }, [...children]);
					}
					const dragProps = {
						key: col.dataIndex || col.key,
						class: 'table-draggable-handle',
						attrs: {
							w: 10,
							x: col.width,
							z: 1,
							axis: 'x',
							draggable: true,
							resizable: false
						},
						on: {
							dragging: (x, y) => {
								col.width = Math.max(x, 100);
							}
						}
					};
					const drag = h('vue-draggable-resizable', { ...dragProps });
					return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
				}
			}
		};
    return {
      // 表格总宽度
      tableWidth: 0,
      //表格各列宽度总和
      columnsWidth: 0,
      /** 权限 */
      isLook: false,
      /** 折叠 展开 */
      advanceExpand: false,
      /** 查询参数 */
      queryParam: {
        partCode: undefined,            // 零部件编号
        partName: undefined,            // 零部件名称
        testSource: undefined,          // 试验来源
        testProject: undefined,         // 试验项目
        testStartTime: undefined,       // 试验开始时间
        testEndTime: undefined,         // 试验结束时间
        testResult: undefined,          // 试验结果
        testReportCode: undefined,      // 试验报告编号
        isPass: undefined,               // 是否通过
        isEquivalent: '1'                // 是否等效实验 默认查非等效
      },
      /** 分页实体 */
      pagination: {
        pageCurrent: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: total => this.$t('global-constant.table.show-total', { total: `${total}` }), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100', '200'], // 每页数量选项
        onShowSizeChange: (pageCurrent, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        total: 0, //总条数,
        position: "bottom"
      },
      /** 表头信息 */
      columns: [
        {
          // 序号
          title: () => this.$t('dvp.full.vehicle.dvp.serial-number'),
          dataIndex: 'index',
          width: 100,
          fixed: 'left',
          align: 'center',
          scopedSlots: {
            customRender: 'index'
          },
          ellipsis: true,
        },
        {
          // 零部件编号
          title: () => this.$t('verity.dvp.part.number'),
          width: 150,
          fixed: 'left',
          align: 'center',
          dataIndex: 'partCode',
          ellipsis: true
        },
        {
          // 零部件名称
          title: () => this.$t('verity.dvp.part.name'),
          width: 150,
          fixed: 'left',
          align: 'center',
          dataIndex: 'partName',
          ellipsis: true
        },
        {
          // CPAC编号
          title: () => this.$t('verity.dvp.cpac.number'),
          width: 150,
          align: 'center',
          dataIndex: 'cpacCode',
          ellipsis: true
        },
        {
          // FND代码
          title: () => this.$t('verity.dvp.fnd.code'),
          width: 150,
          align: 'center',
          dataIndex: 'fndCode',
          ellipsis: true
        },
        {
          // 试验来源
          title: () => this.$t('verity.dvp.test.source'),
          width: 150,
          align: 'center',
          dataIndex: 'testSource',
          ellipsis: true,
          customRender: val => {
            return val !== null ? this.testSourceList.find( item => item.value === val ).label : '-';
          }
        },
        {
          // 试验项目
          title: () => this.$t('verity.dvp.test.project'),
          width: 150,
          align: 'center',
          dataIndex: 'testProject',
          ellipsis: true
        },
        {
          // 是否等效
          title: () => this.$t('plan.dvp.is-it-an-equivalent-test'),
          width: 150,
          align: 'center',
          dataIndex: 'isEquivalent',
          ellipsis: true,
          customRender: val => {
            return val === '1' ? this.$t('plan.dvp.non-equivalent-experiment') : this.$t('plan.dvp.equivalent-experiment');
          }
        },
        {
          // 等效实验报告编号
          title: () => this.$t('plan.dvp.equivalent-experiment-report-number'),
          width: 150,
          align: 'center',
          dataIndex: 'e',
          scopedSlots: {
            customRender: "equivalentCode"
          }
        },
        {
          // 测试开始日期
          title: () => this.$t('verity.dvp.test.start.date'),
          width: 150,
          align: 'center',
          dataIndex: 'testStartTime',
          ellipsis: true
        },
        {
          // 测试结束日期
          title: () => this.$t('verity.dvp.test.end.date'),
          width: 150,
          align: 'center',
          dataIndex: 'testEndTime',
          ellipsis: true
        },
        {
          // 是否通过
          title: () => this.$t('verity.dvp.is.pass'),
          width: 150,
          align: 'center',
          dataIndex: 'isPass',
          ellipsis: true,
          customRender: val => {
            if( val == 0 ) {
              return this.$t('global-btn.fail');
            } else if ( val == 1) {
              return this.$t('global-btn.pass');
            }
          }
        },
        {
          // 试验报告编号
          title: () => this.$t('verity.dvp.test.report.number'),
          width: 150,
          align: 'center',
          dataIndex: 'testReportCode',
          ellipsis: true
        },
        {
          // 试验报告
          title: () => this.$t('verity.dvp.test.report'),
          width: 150,
          align: 'center',
          dataIndex: 'testReportFileName',
          ellipsis: true,
          scopedSlots: {
            customRender: "testReport"
          },
        },
        {
          // 是否上传材料报告
          title: () => this.$t('verity.dvp.is.upload.material.report'),
          width: 150,
          align: 'center',
          dataIndex: 'materialsReportId',
          ellipsis: true,
          customRender: val => {
            return val === null ? this.$t('global-btn.no') : this.$t('global-btn.yes');
          }
        },
        {
          // 材料报告
          title: () => this.$t('verity.dvp.material.report'),
          width: 150,
          align: 'center',
          dataIndex: 'materialsFileName',
          ellipsis: true,
          scopedSlots: {
            customRender: "materialsFileName"
          },
        },
        {
          // 测试结果及分析
          title: () => this.$t('verity.dvp.test.result.analysis'),
          width: 150,
          align: 'center',
          dataIndex: 'testResultAnalyse',
          ellipsis: true
        },
        {
          // 改进措施及计划
          title: () => this.$t('verity.dvp.improvement.measures'),
          width: 150,
          align: 'center',
          dataIndex: 'modifiedMeasure',
          ellipsis: true
        },
        // 评审意见
        {
          title: this.$t('verity.dvp.review.comments'),
          width: 150,
          dataIndex: 'verifyReviewComment',
          align: 'center',
          ellipsis: true
        },
        {
          // 操作
          title: () => this.$t('global-constant.operation'),
          dataIndex: 'operation',
          key: 'operation',
          align: 'center',
          width: 100,
          scopedSlots: {
            customRender: 'operation'
          },
          fixed: 'right'
        }
      ],
      /** 表格数据 */
      tableData: [],
      /** 表格Loading */
      tableLoading: false,
      /** 编辑模态框显隐 */
      isEdit: false,
      /** 编辑模态框数据 */
      editParam: {
        testId: undefined,              // 试验ID
        partCode: undefined,            // 零部件编号
        partName: undefined,            // 零部件名称
        cpacCode: undefined,            // CPAC编号
        fndCode: undefined,             // FND代码
        testSource: undefined,          // 试验来源
        testProject: undefined,         // 试验项目
        testStartTime: undefined,       // 试验开始时间
        testEndTime: undefined,         // 试验结束时间
        testResultAnalyse: undefined,   // 试验结果
        testReportCode: undefined,      // 试验报告编号
        isPass: undefined,              // 是否通过
        modifiedMeasure: undefined      // 改进措施计划
      },
      /** 试验来源下拉选项  未确定具体字段-暂时写死*/
      testSourceList: [
        {
          value: '1',
          label: this.$t('dvp.drawing')
        },
        {
          value:  '2',
          label: this.$t('dvp.KPC')
        },
        {
          value: '3',
          label: this.$t('dvp.web-require')
        },
        {
          value: '4',
          label: this.$t('dvp.standard')
        },
        {
          value: '5',
          label: this.$t('dvp.laws-and-regulations')
        }
      ],
      /** 试验报告附件list */
      fileList: [],
      /**材料报告附件list */
      materialFileList: [],
      /** 高度计算 */
      tableHeight: window.innerHeight - 352 + 'px',
      tableHeightValue: window.innerHeight - 560,
      /** 批量编辑按钮是否disabled */
      batchEditButtonDisabled: false
    }
  },
  watch: {
    columns: {
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          this.changeFixed();
          // 修改table表格表头外边盒子的背景颜色以及外边距，以适应表格动态变化
          this.getTableDivCss();
        });
      },
      deep: true,
      immediate: true
    },
    tableWidth:{
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          this.changeFixed();
          // 修改table表格表头外边盒子的背景颜色以及外边距，以适应表格动态变化
          this.getTableDivCss();
        });

      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.isLook = this.$api.isLook === '1'
    this.list()
    window.onresize = () => {
      this.tableHeight = window.innerHeight - 352 + 'px';
      this.tableHeightValue = window.innerHeight - 560;
    };
    // 监听页面窗体大小变化
    window.addEventListener('resize', this.handleResize);
    // 修改table表格表头外边盒子的背景颜色以及外边距，以适应表格动态变化
    this.getTableDivCss();
  },
  //剔除页面窗体大小变化得监听事件
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 修改table表格表头外边盒子的背景颜色以及外边距，以适应表格动态变化
    getTableDivCss(){
      // 选中包裹表格的 div 元素
      let tableHeaderDiv = document.querySelector('.ant-table-header.ant-table-hide-scrollbar');
      let tableHeaderReal = document.querySelector('.resize-table-th');
      // 检查是否成功选中
      if (tableHeaderDiv) {
        // 设置背景颜色为灰色
        tableHeaderDiv.style.backgroundColor = 'rgb(250, 250, 250)';
        // 表头外层盒子的的实际样式
        let computedDivStyle = window.getComputedStyle(tableHeaderDiv);
        // 表头外层盒子的的实际高度
        let tableDivHeight = parseFloat(computedDivStyle.getPropertyValue('height'));
        // 表头的实际样式
        let computedTableStyle = window.getComputedStyle(tableHeaderReal);
        // 表头的实际高度
        let tableHeight = parseFloat(computedTableStyle.getPropertyValue('height'));
        // 设置底部外边距，一下会是负值，用于将表头下的数据单元格纵向对齐
        tableHeaderDiv.style.marginBottom = (tableHeight-tableDivHeight)+'px';
      }
    },
    // 获取表格的总宽度
    handleResize() {
      this.tableWidth = this.$refs.tableRef.$el.offsetWidth;
    },
    // 计算表格各列宽度总和
    getColumnWidthTotal(){
      this.columnsWidth = this.columns.reduce((sum, column) => sum + column.width, 0);
    },
    // 动态修改fixe的属性以便表格样式不出现空白列,并平和各列与表格的总宽度
    changeFixed(){
      if (this.columnsWidth <= this.tableWidth) {
        // 遍历 columns 数组，将有 fixed 属性的元素的 fixed 值设置为 false（当有固定列时，列宽总和小于表格总宽度时会串行）
        this.columns.forEach((column) => {
          if (column.fixed) {
            column.fixed = false;
          }
        });
        // 获取除最后一列以外其他列的宽度总和
        let otherColumnsWidth = this.columns.slice(0, -1).reduce((total, column) => {
          return total + column.width;
        }, 0);
        // 将最后一列的宽度设置为剩余宽度，避免页面表头与内容显示串行
        this.columns[this.columns.length - 1].width = this.tableWidth - otherColumnsWidth;
      }else {
        // 恢复固定列原始定位属性
        this.columns[0].fixed='left';
        this.columns[1].fixed='left';
        this.columns[2].fixed='left';
        this.columns[this.columns.length - 1].fixed='right';
        // 恢复最后一列原始宽度
        this.columns[this.columns.length - 1].width = 150;
      }
    },
    /**
     * 查看报告
     * @param record
     */
    viewReport(record, num) {

      let fileIdMapping = {
        1: 'testReportId',
        2: 'materialsReportId',
        3: 'equivalentId'
      };

      let fileNameMapping = {
        1: 'testReportFileName',
        2: 'materialsFileName',
        3: 'equivalentName'
      };

      let fileTypeMapping = {
        1: '17',
        2: '17',
        3: '8'
      };

      let fileId = record[fileIdMapping[num]] || null;
      let fileName = record[fileNameMapping[num]] || null;
      let fileType = fileTypeMapping[num];

      let url = this.$api.baseUrl + '/DFMEA/file/downloadFile.do?id=' + parseInt(fileId) + '&fileType=' + fileType;
      fetch(url, {
        method: 'get'
      }).then(res => {
        //读取文件的arrayBuffer
        res.arrayBuffer().then(res => {
          this.$refs.viewModal.isShowModal = true;
          this.$refs.viewModal.fileUrl = res;
          this.$nextTick(() => {
            this.$refs.viewModal.getFileExtension(fileName);
          });
        });
      });
      this.download('/DFMEA/file/downloadFile', {
        id: fileId,
        fileType: fileType
      });
    },
    /** 获取列表数据 */
    list() {
      let _that = this;
      _that.tableLoading = true;
      let data = {
        dvpId: _that.$store.getters.dvpId,
        partCode: _that.queryParam.partCode,
        partName: _that.queryParam.partName,
        testSource: _that.queryParam.testSource,
        testProject: _that.queryParam.testProject,
        testStartStartTime: _that.queryParam.testStartStartTime,
        testStartEndTime: _that.queryParam.testStartEndTime,
        testEndStartTime: _that.queryParam.testEndStartTime,
        testEndEndTime: _that.queryParam.testEndEndTime,
        testReportCode: _that.queryParam.testReportCode,
        testResult: _that.queryParam.testResult,
        isEquivalent: _that.queryParam.isEquivalent,
        pagination: {
          pageSize: _that.pagination.pageSize,
          pageCurrent: _that.pagination.pageCurrent
        }
      };
      this.$api.initPartDvpVerifyList(data).then(res => {
        if (!res.flag) {
          this.$notification.error({message: res.message});
        }
        // 若查询条件为：非等效试验 查询结果为：0
        // 批量编辑按钮置灰
        if (data.isEquivalent === '1' && res.data.total === 0) {
          this.batchEditButtonDisabled = true;
        }
        _that.tableData = res.data.data || [];
        _that.pagination.total = res.data.total || 0;
      }).finally(() => {
        _that.tableLoading = false;
      });
    },
    /** 导出 */
    exportFile() {
      this.download('/DFMEA/partDvp/dvpVerifyExcelExport', {
        dvpId: this.$store.getters.dvpId || '',
        partCode: this.queryParam.partCode || '',
        partName: this.queryParam.partName || '',
        testSource: this.queryParam.testSource || '',
        testProject: this.queryParam.testProject || '',
        testStartTime: this.queryParam.testStartTime || '',
        testEndTime: this.queryParam.testEndTime || '',
        testReportCode: this.queryParam.testReportCode || '',
        isEquivalent: this.queryParam.isEquivalent || '',
        testResult: this.testResult || '',
      });
    },
    /** 查询 */
    search() {
      this.pagination.pageCurrent = 1;
      this.list()
    },
    /** 重置 */
    reset() {
      this.queryParam.partCode = undefined;
      this.queryParam.partName = undefined;
      this.queryParam.testSource = undefined;
      this.queryParam.testProject = undefined;
      this.queryParam.testStartTime = undefined;
      this.queryParam.testEndTime = undefined;
      this.queryParam.testStartStartTime = undefined;
      this.queryParam.testStartEndTime = undefined;
      this.queryParam.testEndStartTime = undefined;
      this.queryParam.testEndEndTime = undefined;
      this.queryParam.testResult = undefined;
      this.queryParam.testReportCode = undefined;
      this.queryParam.isEquivalent = '1';
      this.list();
    },
    /**
     * 编辑模态框
     */
    editInit(data) {
      this.isEdit = true;
      this.editParam = { ...data };
      this.editParam.isPass = this.editParam.isPass ? this.editParam.isPass : '0';
      if ((data.testReportId)) {
        this.fileList = [
          {
            uid: data.testReportId,
            name: data.testReportFileName,
            testReportFileGenerateName: data.testReportFileGenerateName,
            testReportFileName: data.testReportFileName,
            testReportFilePath: data.testReportFilePath,
            testReportFileSize: data.testReportFileSize
          }
        ];
      }
      if (data.materialsReportId) {
        this.materialFileList = [
          {
            uid: data.materialsReportId,
            name: data.materialsFileName,
            materialsFileGenerateName: data.materialsFileGenerateName,
            materialsFileName: data.materialsFileName,
            materialsFilePath: data.materialsFilePath,
            materialsFileSize: data.materialsFileSize
          }
        ];
      }
    },
    /** 编辑 保存 */
    save() {
      let _that = this;
      // 试验报告文件
      let testReportFileModel = undefined;
      if (_that.fileList.length > 0) {
        if (_that.fileList[0].newFileName) {
          testReportFileModel = {
            newFileName: _that.fileList[0].newFileName,
            fileName: _that.fileList[0].fileName,
            filePath: _that.fileList[0].filePath,
            fileSize: _that.fileList[0].fileSize
          };
        } else {
          testReportFileModel = {
            newFileName: _that.fileList[0].testReportFileGenerateName,
            fileName: _that.fileList[0].testReportFileName,
            filePath: _that.fileList[0].testReportFilePath,
            fileSize: _that.fileList[0].testReportFileSize
          };
        }
      }

      let data = {
        dvpId: _that.$store.getters.dvpId,
        testId: _that.editParam.testId,
        testStartTime: _that.editParam.testStartTime,
        testEndTime: _that.editParam.testEndTime,
        isPass: _that.editParam.isPass,
        testReportCode: _that.editParam.testReportCode,
        testResultAnalyse: _that.editParam.testResultAnalyse,
        modifiedMeasure: _that.editParam.modifiedMeasure,
        testReportFileModel: testReportFileModel
      };
      _that.$api.partVerifyTestSave(data).then(res => {
        if (res.flag) {
          _that.$notification.success({message: res.message});
        } else {
          _that.$notification.error({message: res.message});
        }
        _that.closeModal();
        _that.list();
      });
    },
    /** 编辑模态框关闭 */
    closeModal() {
      this.editParam = [];
      this.fileList = [];
      this.materialFileList = [];
      this.isEdit = false;
    },
    /**
     * 试验报告文件上传
     * @param obj 回调对象
     */
    editUploadFile(obj) {
      let _that = this;
      _that.fileList = [];
      if (obj.file.size > 104857600) {
        _that.$message.warning(_that.$t('global-message.warn.uploaded-files-cannot-exceed'));
        return;
      }
      let fd = new FormData();
      fd.append('file', obj.file);
      fd.append('fileType', '17');
      _that.$api.uploadFile(fd).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
          _that.fileList.push({
            name: res.data.fileName,
            fileName: res.data.fileName,
            filePath: res.data.filePath,
            fileSize: res.data.fileSize,
            newFileName: res.data.newFileName,
            uid: obj.file.uid
          });
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 材料报告文件上传
     * @param obj 回调对象
     */
    materialUploadFile(obj) {
      let _that = this;
      _that.materialFileList = [];
      if (obj.file.size > 104857600) {
        _that.$message.warning(_that.$t('global-message.warn.uploaded-files-cannot-exceed'));
        return;
      }
      let fd = new FormData();
      fd.append('file', obj.file);
      fd.append('fileType', '19');
      _that.$api.uploadFile(fd).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
          _that.materialFileList.push({
            name: res.data.fileName,
            fileName: res.data.fileName,
            filePath: res.data.filePath,
            fileSize: res.data.fileSize,
            newFileName: res.data.newFileName,
            uid: obj.file.uid
          });
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 试验报告文件删除
     */
    editRemoveFile() {
      this.fileList = [];
    },
    /**
     * 材料报告文件删除
     */
    materialRemoveFile() {
      this.materialFileList = [];
    },
    /** 样车实际提供时间-选择变化 */
    changeDeliveryTime(data, dateString) {
      if (this.isEdit) {
        this.editParam.actualDeliveryTime = dateString;
      } else {
        this.queryParam.actualDeliveryTime = dateString;
      }
    },
    /** 实际开始时间-选择变化 */
    changeStartTime(data, dateString) {
      if (this.isEdit){
        this.editParam.testStartTime = dateString;
        // 当选择的开始时间大于结束时间时，清空结束时间，让用户重新选择结束时间
        if (Date.parse(this.editParam.testStartTime) >= Date.parse(this.editParam.testEndTime)) {
          this.editParam.testEndTime = undefined;
        }
      } else {
        this.queryParam.testStartStartTime = dateString[0];
        this.queryParam.testStartEndTime = dateString[1];
      }
    },
    /** 实际结束时间-选择变化 */
    changeEndTime(data, dateString) {
      if (this.isEdit) {
        this.editParam.testEndTime = dateString;

      } else {
        this.queryParam.testEndStartTime = dateString[0];
        this.queryParam.testEndEndTime = dateString[1];
      }
    },
    /** 点击分页中数字触发的方法 */
    handleOuterTableChange(pagination) {
      this.pagination.pageCurrent = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.list();
    },
    /**
     * 收起/展开
     */
    toggleAdvance() {
      this.advanceExpand = !this.advanceExpand;
      if(this.advanceExpand) {
        this.tableHeightValue -= 100
      } else {
        this.tableHeightValue = window.innerHeight - 560;
      }
    },
    // 上传材料报告
    uploadMaterial() {
      this.$refs.materialReport.visible = true;
    },
    // 上传试验报告
    uploadTest() {
      this.$refs.testReport.visible = true;
    },

    /**
     * 批量编辑
     */
    batchEdit() {
      this.$refs.batchEdit.initSelectData();
      this.$refs.batchEdit.isBatchEdit = true;
    }
  }
}
</script>

<style lang="less" scoped>
.topCardMargin {
  margin-top: -12px;
}
.topCard {
  padding: 0 12px;
}
.cardOverFlow {
  overflow-x: hidden;
  overflow-y: auto;
}
.export-margin {
  margin-right: -24px;
}

/deep/ .clickContent {
  color: #1890FF;
  cursor: pointer;
}
</style>
