<template>
  <div>
    <a-row class="content-box">
      <a-card class="layout-card">
        <a-form layout='vertical'>
          <a-row :gutter="24">
            <!--零部件编号-->
            <a-col :xl='6' :lg='8' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('workbench.compoment-number')">
                <a-input allowClear :maxLength='50' v-model.trim="formData.partCode" :placeholder="$t('global-btn.please-enter') + $t('workbench.compoment-number')"/>
              </a-form-item>
            </a-col>
            <!--零部件名称-->
            <a-col :xl='6' :lg='8' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('workbench.compoment-name')">
                <a-input allowClear :maxLength='50' v-model.trim="formData.partName" :placeholder="$t('global-btn.please-enter') + $t('workbench.compoment-name')"/>
              </a-form-item>
            </a-col>
            <!--FND代码-->
            <a-col :xl='6' :lg='8' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.fnd-code')">
                <a-select
                  allowClear
                  show-search
                  v-model='formData.fndCode'
                  :placeholder="$t('global-btn.please-enter') + $t('plan.dvp.fnd-code')"
                  @change="fndChange"
                  @search="getFndCodeList">
                  <a-icon slot="suffixIcon" type="search"/>
                  <a-select-option v-for='(item, index) in fndCodeList' :key="item.id" :label="item.fndCn"
                                   :value="item.fndValue">
                    {{ item.fndCode + " " + (item.fndCn || "") }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--DVP计划状态-->
            <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.DVP.plan.status')">
                <a-select v-model="formData.dvpPlanStatus" allowClear :placeholder="$t('global-btn.please-select') + $t('plan.dvp.DVP.plan.status')">
                  <a-select-option :value="0">{{ $t('dvp.full.vehicle.dvp.not-start') }}</a-select-option>
                  <a-select-option :value="2">{{ $t('dvp.full.vehicle.dvp.underway') }}</a-select-option>
                  <a-select-option :value="1">{{ $t('dvp.full.vehicle.dvp.done') }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <span v-show="advanceExpand">
            <!--材料确认清单状态-->
            <a-col :xl='6' :lg='8' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.Material.confirmation.list.status')">
                <a-select v-model="formData.materialsListStatus" allowClear :placeholder="$t('global-btn.please-select') + $t('plan.dvp.Material.confirmation.list.status')">
                  <a-select-option :value="0">{{ $t('dvp.full.vehicle.dvp.not-start') }}</a-select-option>
                  <a-select-option :value="1">{{ $t('dvp.full.vehicle.dvp.done') }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--计划结束时间-->
            <a-col :lg='6' :md='24' :sm='24' :xl='6' :xs='24'>
              <a-form-item :label="$t('plan.dvp.scheduled-end-time')">
                <a-range-picker v-model="endTime" @change="handleQueryEndTime" allowClear valueFormat="YYYY-MM-DD" style="width: 100%" />
              </a-form-item>
            </a-col>
            </span>
          </a-row>
          <a-row :gutter="24">
            <a-form-item class='tr' :label="'\xa0'">
              <a-col :xl='24' :lg='24' :md='24' :sm='24' :xs='24'>
                <!-- 展开/收起 -->
                <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' type="primary" class="mr10">
                  {{ $t('global-btn.reset') }}
                </a-button>
                <!-- 查询 -->
                <a-button @click='search' type="primary" class="mr10">
                  {{ $t('global-btn.search') }}
                </a-button>
              </a-col>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
      <a-card class="layout-card" :style="{ height: tableHeight }">
        <a-form-item class='tr' >
          <!-- 上传材料清单 -->
          <a-button @click='uploadMaterialList' :disabled="isLook" type="primary" class="mr10">
            {{ $t('plan.dvp.upload-material-list') }}
          </a-button>
          <!-- 导出 -->
          <a-button @click='exportFile'>
            {{ $t('global-btn.export') }}
          </a-button>
        </a-form-item>
        <a-table
          ref="tableRef"
          size="small"
          class="table-mr"
          :columns='tableColumns'
          :dataSource='tableData'
          :rowKey='(record, index) => { return index; }'
          :scroll='{ x: tableWidth, y: tableHeightValue }'
          :pagination='pagination'
          :loading='tableLoading'
          @change='handlePageChange'
          bordered
          :components='components'
        >
          <!-- 序号列 -->
          <template slot='index' slot-scope='text, record, index'>
            <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
          </template>
          <!-- 材料确认清单是否上传 -->
          <template slot='isUpload' slot-scope='text, record, index'>
            <span>{{ isOrNotMap[record.isUpload] || '-' }}</span>
          </template>
          <!-- 材料清单编号 -->
          <template slot='materialsListCode' slot-scope='text, record'>
            <span class="clickContent" @click="viewReport(record)" :title="text">{{ text }}</span>
          </template>
          <!-- 操作 -->
          <template slot="action" slot-scope="text, record">
            <span>
              <!-- 编辑 -->
             <a class='operation-btn ml16' @click='editInit(record)'>
               <a-tooltip :title="$t('global-btn.edit')">
                 <i class="iconfont iconicon-bainji"></i>
               </a-tooltip>
             </a>
            </span>
          </template>
        </a-table>
      </a-card>
    </a-row>

    <!--上传材料清单弹框-->
    <upload-material ref="uploadMaterial" @closeUploadModal="closeUploadModal" @initData="initData" :isUpload="isUpload" ></upload-material>

    <!-- 文件预览 -->
    <view-office ref="viewModal"/>
  </div>
</template>

<script>

import EditDvp from "./editModal/editDvp";
import HistoryDvpEdit from "./editModal/historyDvpEdit";
import ProjectFmeaEdit from "./editModal/projectFmeaEdit";
import TemplateEdit from "./editModal/templateEdit";
import EditTableRow from "./editModal/editTableRow";
import UploadMaterial from "./editModal/uploadMaterialList";
import ApplyChange from "./editModal/applyForChange";
import utils from '@/utils/urlParamUtil';
import VueDraggableResizable from 'vue-draggable-resizable';
import ViewOffice from "@/components/viewOffice/viewOffice";


export default {
  components: {
    EditDvp,
    HistoryDvpEdit,
    ProjectFmeaEdit,
    TemplateEdit,
    EditTableRow,
    UploadMaterial,
    ApplyChange,
    VueDraggableResizable,
    ViewOffice
  },
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.tableColumns.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, 90);
							}
						}
					};
					const drag = h('vue-draggable-resizable', { ...dragProps });
					return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
				}
			}
		};
    return{
      /** 查询数据 */
      formData:{},
      /** 清除时间选框用的 */
      endTime: undefined,
      startTime: undefined,
      /** 折叠 展开 */
      advanceExpand: false,
      /** 材料确认清单状态 */
      materialsListStatus: undefined,
      /** DVP计划状态 */
      dvpPlanStatus: undefined,
      /** 分页 */
      pagination: {
        size: 'small',
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: total => this.$t('global-constant.table.show-total', {total: `${total}`}), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100', '200'], // 每页数量选项
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        total: 0, //总条数
        showQuickJumper: true,
      },
      // 表格总宽度
      tableWidth: 0,
      //表格各列宽度总和
      columnsWidth: 0,
      /** 表格高度 */
      tableHeight: window.innerHeight - 352 + 'px',
      tableHeightValue: window.innerHeight - 542,
      /** 表格加载状态 */
      tableLoading: false,
      /** 表格数据 */
      tableData: [],
      /** 表格列 */
      tableColumns: [
        //序号
        {
          title: this.$t('plan.dvp.serial-number'),
          key: 'index',
          width: 230,
          fixed: 'left',
          align: 'center',
          scopedSlots: {
            customRender: 'index'
          },
          ellipsis: true
        },
        // 零部件编号
        {
          title: this.$t('workbench.compoment-number'),
          width: 250,
          dataIndex: 'partNo',
          align: 'center',
          ellipsis: true
        },
        // 零部件名称
        {
          title: this.$t('workbench.compoment-name'),
          width: 250,
          dataIndex: 'partName',
          align: 'center',
          ellipsis: true
        },
        // CPAC编码
        {
          title: this.$t('base.info.CPAC-code'),
          width: 250,
          dataIndex: 'cpacCode',
          align: 'center',
          ellipsis: true
        },
        // FND代码
        {
          title: this.$t('plan.dvp.fnd-code'),
          width: 250,
          dataIndex: 'fndCode',
          align: 'center',
          ellipsis: true
        },
        // 归属部门
        {
          title: this.$t('workbench.belonging-department'),
          width: 250,
          dataIndex: 'ownerDepartmentName',
          align: 'center',
          ellipsis: true
        },
        // 材料清单 编号
        {
          title: this.$t('plan.dvp.material-number'),
          width: 250,
          dataIndex: 'materialsListCode',
          align: 'center',
          scopedSlots: {
            customRender: "materialsListCode"
          }
        },
        // DVP计划状态
        {
          title: this.$t('plan.dvp.DVP.plan.status'),
          width: 200,
          dataIndex: 'dvpPlanStatus',
          align: 'center',
          ellipsis: true,
          customRender: val => {
            return val === 0 ? this.$t('dvp.full.vehicle.dvp.not-start') :
                val === 1 ? this.$t('dvp.full.vehicle.dvp.done') :
                    this.$t('dvp.full.vehicle.dvp.underway');
          }
        },
        // 材料确认清单状态
        {
          title: this.$t('plan.dvp.Material.confirmation.list.status'),
          width: 200,
          dataIndex: 'materialsListStatus',
          align: 'center',
          ellipsis: true,
          customRender: val => {
            return val === 0 ? this.$t('dvp.full.vehicle.dvp.not-start') : this.$t('dvp.full.vehicle.dvp.done');
          }
        },
        // 计划结束时间
        {
          title: this.$t('plan.dvp.scheduled-end-time'),
          width: 250,
          dataIndex: 'planEndTime',
          align: 'center',
          ellipsis: true
        },
        //操作
        {
          title: this.$t('global-constant.operation'),
          key: 'action',
          align: 'center',
          width: 100,
          fixed: 'right',
          scopedSlots: {customRender: 'action'},
          ellipsis: true
        }
      ],
      /** 是/否Map 用于表格插槽显示 */
      isOrNotMap: {
        0: this.$t("global-btn.no"),
        1: this.$t("global-btn.yes")
      },
      testSourceMap: {
        '1': this.$t('dvp.drawing'),
        '2': this.$t('dvp.KPC'),
        '3': this.$t('dvp.web-require'),
        '4': this.$t('dvp.standard'),
        '5': this.$t('dvp.laws-and-regulations')
      },
      /** 权限 */
      isLook: false,
      /** 编辑零部件DVP弹框 tab 默认tab的key */
      tabKey: '1',
      /** 编辑零部件DVP弹框 是否显示、关闭 */
      isEdit: false,
      /** 编辑零部件DVP弹框标题 */
      editDvpTittle: this.$t('plan.dvp.edit-dvp'),
      /** 测试负责人下拉选项 */
      testOwnerList: [],
      /** CPAC List */
      cpacList: [],
      /** FND Code List */
      fndCodeList: [],
      cpacId: null,
      /** 部门下拉选项 List */
      departmentList: [],
      /** 编辑表格行数据弹框 是否显示、关闭 */
      isEditRow: false,
      /** 上传材料清单弹窗 是否显示、关闭 */
      isUpload: false,
      /** 申请变更弹窗 是否显示、关闭 */
      applyFlag: false,
      /** 申请变更弹窗表格数据 */
      applyTableData: [],
      /** dvpType system:系统DVP，components:零部件DVP */
      dvpType: "components",
   }
  },
  watch: {
    tableColumns: {
      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.initData();
    this.getCpacInitData();
    this.getComponentsDVPList();
    this.getDvpTestOwnerList();
    window.onresize = () => {
      this.tableHeight = window.innerHeight - 352 + 'px';
      this.tableHeightValue = window.innerHeight - 542;
    };
    // 监听页面窗体大小变化
    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.tableColumns.reduce((sum, column) => sum + column.width, 0);
    },
    // 动态修改fixe的属性以便表格样式不出现空白列,并平和各列与表格的总宽度
    changeFixed(){
      if (this.columnsWidth <= this.tableWidth) {
        // 遍历 tableColumns 数组，将有 fixed 属性的元素的 fixed 值设置为 false（当有固定列时，列宽总和小于表格总宽度时会串行）
        this.tableColumns.forEach((column) => {
          if (column.fixed) {
            column.fixed = false;
          }
        });
        // 获取除最后一列以外其他列的宽度总和
        let otherColumnsWidth = this.tableColumns.slice(0, -1).reduce((total, column) => {
          return total + column.width;
        }, 0);
        // 将最后一列的宽度设置为剩余宽度，避免页面表头与内容显示串行
        this.tableColumns[this.tableColumns.length - 1].width = this.tableWidth - otherColumnsWidth;
      }else {
        // 恢复固定列原始定位属性
        this.tableColumns[0].fixed='left';
        this.tableColumns[this.tableColumns.length - 1].fixed='right';
        // 恢复最后一列原始宽度
        this.tableColumns[this.tableColumns.length - 1].width = 100;
      }
    },
    /**
     * 初始化表格数据
     */
    initData() {
      let _that = this;
      _that.tableLoading = true;
      _that.formData.dvpId = _that.$store.getters.dvpId;
      _that.formData.pagination = {
        pageSize: _that.pagination.pageSize,
        pageCurrent: _that.pagination.current
      }
      _that.formData.systemTestSource = _that.formData.dataSource;
      _that.$api.initPartDvpPlanList(_that.formData).then(res => {
        if (res.flag) {
          _that.tableData = res.data.data || [];
          _that.pagination.total = res.data.total;
          // _that.getFndCodeList();
          _that.getCpacInitData();
        } else {
          _that.$message.error(res.message,1);
          _that.tableData = [];
          _that.pagination.total = 0;
        }
      }).finally(() => {
        _that.tableLoading = false;
      });

      // 变更申请按钮显示隐藏，如果DVP编制进行到DVP验证阶段，则显示
      // let data = {
      //   dvpId: _that.$store.getters.dvpId,
      //   dvpType: _that.$store.getters.dvpType
      // }
      // _that.$api.getDvpCurrentStep(data).then(res => {
      //   if (res.flag) {
      //     _that.applyButtonFlag = res.data === 2 ;
      //   }
      // });

    },

    /**
     * 获取cpacId
     */
    getComponentsDVPList() {
      let _that = this;
      let data = {
        dvpId: _that.$store.getters.dvpId
      }
      _that.$api.getComponentsDVPList(data).then(res => {
        if (res.flag) {
          let tempData = res.data.data;
          if (tempData) {
            _that.cpacId = tempData[0].cpacId;
          }
          this.getFndCodeList();
        }
      });
    },
    /**
     * 获取FND代码下拉选数据
     */
    getFndCodeList(fndCode,cpacId) {
      let _that = this;
      _that.$api.getFndInfoList({
        fndCode: fndCode ? fndCode.toString() : '',
        fndCn: fndCode ? fndCode.toString() : '',
        cpacId: _that.cpacId
      }).then(res => {
        if (res.flag) {
          _that.fndCodeList = res.data || [];
          _that.fndCodeList.forEach(item => {
            item.fndValue = item.id + '-' + item.fndCode + item.fndCn;
          });
        } else {
          _that.$notification.error({message: res.message});
        }
      });
    },

    /**
     *  获取团队成员 用于测试负责人下拉选
     */
    getDvpTestOwnerList() {
      let data = {
        dvpId: this.$store.getters.dvpId,
        dvpType: this.$store.getters.dvpType
      };
      this.$api.getDvpTeamMember(data).then(res => {
        if (res.flag) {
          let userList = res.data.teamMemberModels;
          let engineerList = res.data.engineerModels;
          userList.forEach(item => {
            if (item.permission === 1) {
              let options = {
                label: item.name,
                value: item.userId
              };
              this.testOwnerList.push(options);
            }
          });
          // 工程师数据处理
          engineerList.forEach(data => {
            let index = this.testOwnerList.findIndex(item => item.value === data.userId);
            if (index === -1) {
              let tempData = {
                label: data.name,
                value: data.userId
              };
              this.testOwnerList.push(tempData);
            }
          });
          // 是否包含Owner
          let ownerFlag = this.testOwnerList.find(item => item.value === this.$store.getters.dvpOwnerId);
          if (!ownerFlag) {
            // 测试负责人要包括DVP的Owner
            let owner = {
              label: this.$store.getters.dvpOwnerName,
              value: this.$store.getters.dvpOwnerId
            }
            this.testOwnerList.push(owner);
          }
        }
      });
    },

    /**
     * 初始化CPAC下拉列表
     */
    getCpacInitData(cpacCoding) {
      let _that = this;
      _that.$api.getCpacInfoList({
        cpacCoding: cpacCoding,
        cpacCn: cpacCoding
      }).then(res => {
        if (res.flag) {
          let cpacData = res.data || [];
          _that.cpacList = [];
          if (cpacData.length > 0) {
            cpacData.forEach(item => {
              let temp = {
                key: item.cpacId,
                value: item.cpacCoding + '-' + item.cpacCn,
                label: item.cpacCoding + ' ' + item.cpacCn
              }
              _that.cpacList.push(temp);
            })
          }
        } else {
          _that.$notification.error({message: res.message});
        }
      });
    },

    /**
     * FND选择事件
     * @param value
     * @param options
     * @constructor
     */
    fndChange(value,options) {
      this.formData.fndId = options ? options.data.key : null;
      this.$forceUpdate();
    },

    /**
     * 搜索模块按钮-查询
     */
    search() {
      this.initData();
    },

    /**
     * 搜索模块按钮-重置
     */
    reset() {
      this.endTime = undefined;
      this.startTime = undefined;
      this.formData = {};
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.advanceExpand = false;
      this.initData();
    },

    /**
     * 搜索模块按钮-收起/展开
     */
    toggleAdvance() {
      this.advanceExpand = !this.advanceExpand;
      if(this.advanceExpand){
        this.tableHeightValue -= 57
      } else {
        this.tableHeightValue = window.innerHeight - 542;
      }
    },

    /**
     * 编辑
     */
    editInit(record) {
      let backUrl = utils.getUrlKey('back');
      this.$router.push({
        path: '/componentsDVP/dvpPlan/edit',
        query: {
          dvpId: record.dvpId,
          partId: record.partId,
          partName: record.partName,
          partNo: record.partNo,
          cpacCode: record.cpacCode,
          fndCode: record.fndCode,
          back: backUrl,
          ntimet: new Date().getTime()
        }
      });
      this.$emit('footerButtonChange', true);
    },
    /**
     * 编辑表格行数据弹框-关闭
     */
    closeEditRowModal() {
      this.isEditRow = false;
    },

    /**
     * 上传材料清单弹框-关闭
     */
    closeUploadModal() {
      this.isUpload = false;
    },

    /**
     * 表格上方按钮-上传材料清单
     */
    uploadMaterialList() {
      this.isUpload = true;
      this.$refs.uploadMaterial.initSelectData();
    },

    /**
     * 申请变更 关闭弹窗
     */
    closeModal() {
      this.applyFlag = false;
      this.applyTableData = [];
    },

    /**
     * 查看报告
     * @param val
     */
    viewReport(val) {
      let url = this.$api.baseUrl + '/DFMEA/file/downloadFile.do?id=' + val.fileId + '&fileType=18';
      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(val.fileName);
          });
        });
      });
      this.download('/DFMEA/file/downloadFile', {
        id: val.fileId,
        fileType: 18
      });
    },

    /**
     * 申请变更
     * @param record
     */
    applyChange(record) {
      // 行数据 赋值
      let rowData = [
        // 试验类型
        {
          changeContent: this.$t("plan.dvp.test-type"),
          currentDesc: this.testTypeMap[record.testType] || '-' ,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验来源
        {
          changeContent: this.$t("plan.dvp.test-source"),
          currentDesc: this.testSourceMap[record.testSource] || '-',
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验项目
        {
          changeContent: this.$t("plan.dvp.test-project"),
          currentDesc: record.testProject,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 目标要求
        {
          changeContent: this.$t("base.info.development-objective-requirements"),
          currentDesc: record.targetRequire,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验标准
        {
          changeContent: this.$t("base.info.Test-standards"),
          currentDesc: record.testStandard,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 等效报告编号
        {
          changeContent: this.$t("plan.dvp.equivalent-experiment-report-number"),
          currentDesc: record.equivalentTestCode,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验地点
        {
          changeContent: this.$t("plan.dvp.test-location"),
          currentDesc: record.testSite,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 测试负责人
        {
          changeContent: this.$t("plan.dvp.test-user"),
          currentDesc: record.testOwner,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 计划开始时间
        {
          changeContent: this.$t("plan.dvp.scheduled-start-time"),
          currentDesc: record.planStartTime,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 计划结束时间
        {
          changeContent: this.$t("plan.dvp.scheduled-end-time"),
          currentDesc: record.planEndTime,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 测试阶段
        {
          changeContent: this.$t("plan.dvp.test-step"),
          currentDesc: record.testSite,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 测试次数
        {
          changeContent: this.$t("plan.dvp.test-count"),
          currentDesc: record.testFrequency,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 样件类型
        {
          changeContent: this.$t("plan.dvp.sample-type"),
          currentDesc: record.sampleType,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 样本数量
        {
          changeContent: this.$t("plan.dvp.number-of-samples"),
          currentDesc: record.sampleNumber,
          changeDesc: undefined,
          changeReason: undefined
        }

      ];
      // 赋值给申请变更弹窗的表格
      this.applyTableData = rowData;
      // 调用申请变更弹窗的初始化表格数据方法
      this.$refs.applyChange.initTableData(this.applyTableData);
      this.$refs.applyChange.testId = record.testId;
      this.$refs.applyChange.dvpType = this.dvpType;
      // 开启弹窗
      this.applyFlag = true;
    },

    /**
     * 表格上方按钮-导出
     */
    exportFile() {
      this.download('/DFMEA/partDvp/dvpPlanExcelExport', {
        dvpId: this.$store.getters.dvpId || '',
        partCode: this.formData.partCode || '',
        cpacId: this.formData.cpacCode || '',
        partName: this.formData.partName || '',
        fndId: this.formData.fndCode || '',
        dvpPlanStatus: this.formData.dvpPlanStatus || '',
        materialsListStatus: this.formData.materialsListStatus || '',
        planEndTime: this.formData.planEndTime || '',
      });
    },

    /**
     * 搜索框-结束时间
     * @param date
     * @param dateString
     */
    handleQueryEndTime(date, dateString) {
      this.formData.planEndStartTime = dateString[0];
      this.formData.planEndEndTime = dateString[1];
    },


    /**
     * 表格 - 点击分页中数字触发的方法
     * @param pagination
     */
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.pageNo = pagination.current;
      this.initData();
    },

    /**
     * 下拉选模糊查询
     * @param input
     * @param option
     * @returns {boolean}
     */
    handleFilterDataList(input,option) {
      return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
    }
  }
}

</script>
<style lang="less" scoped>
.content-box {
  padding: 0 12px;
}

.layout-card {
  padding: 12px;
}

.table-mr {
  margin-top: 12px;
}

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