<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='6' :md='12' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.description-of-the-purpose-of-the-test-vehicle')">
                <a-input
                  allowClear
                  :maxLength='500'
                  v-model.trim="formData.vehicleUse"
                  :placeholder="$t('plan.dvp.please-enter-description-of-the-purpose-of-the-test-vehicle')"/>
              </a-form-item>
            </a-col>
            <!--车辆状态描述-->
            <a-col :xl='6' :lg='6' :md='12' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.description-of-the-vehicle-status')">
                <a-input
                  allowClear
                  :maxLength='500'
                  v-model.trim="formData.vehicleState"
                  :placeholder="$t('plan.dvp.please-enter-description-of-the-vehicle-status')"/>
              </a-form-item>
            </a-col>
            <!--试验地点-->
            <a-col :xl='6' :lg='6' :md='12' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.test-location')">
                <a-input
                  allowClear
                  :maxLength='50'
                  v-model.trim="formData.testSite"
                  :placeholder="$t('plan.dvp.please-enter-test-location')"/>
              </a-form-item>
            </a-col>
            <!--试验负责人-->
            <a-col :xl='6' :lg='6' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.study-director')">
                <a-input
                  allowClear
                  :maxLength='50'
                  v-model.trim="formData.testOwner"
                  :placeholder="$t('plan.dvp.please-enter-study-director')"/>
              </a-form-item>
            </a-col>
            <span v-show="advanceExpand">
            <!--节点-->
            <a-col :xl='6' :lg='6' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.panel-point')">
                <a-select allowClear v-model="formData.projectNode" :options="projectNodeList" :placeholder="$t('plan.dvp.please_select-project-node')"></a-select>
              </a-form-item>
            </a-col>
            <!--样车计划提供时间-->
            <a-col :xl='6' :lg='6' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.sample-vehicle-plan-delivery-time')">
                <a-range-picker v-model="planTime" @change="handlePlanTime" allowClear valueFormat="YYYY-MM-DD" style="width: 100%" />
              </a-form-item>
            </a-col>
            <!--计划开始时间-->
            <a-col :xl='6' :lg='6' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.scheduled-start-time')">
                <a-range-picker v-model="startTime" @change="handleStartTime" allowClear valueFormat="YYYY-MM-DD" style="width: 100%" />
              </a-form-item>
            </a-col>
            <!--计划结束时间-->
            <a-col :xl='6' :lg='6' :md='24' :sm='24' :xs='24'>
              <a-form-item :label="$t('plan.dvp.scheduled-end-time')">
                <a-range-picker v-model="endTime" @change="handleEndTime" allowClear valueFormat="YYYY-MM-DD" style="width: 100%" />
              </a-form-item>
            </a-col>
            <!--动态下拉选框-->
          <a-col :xl='6' :lg='6' :md='12' :sm='24' :xs='24' v-for="(item,index) in selectDataList" :key="index" >
            <a-form-item :label="item.name">
              <a-select allowClear v-model="searchSelectData[item.id]"  :options="item.configData" :key="index"></a-select>
            </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">
                  {{ advanceExpand ? $t('plan.dvp.collapse') : $t('plan.dvp.expand') }}
                  <a-icon :type="advanceExpand ? 'up' : 'down'"/>
                </a>
                <!-- 重置 -->
                <a-button @click='reset' type="primary"  class="mr10 ml10">
                  {{ $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='saveDvpPlan' type="primary" class="mr10" :disabled="isLook || applyButtonFlag">
            {{ $t('global-btn.new') }}
          </a-button>
          <!-- todo 导入-->
          <!--          <a-button :disabled="isLook || applyButtonFlag" @click='importFile' type="primary" class="mr10">-->
          <!--            {{ $t('global-btn.import') }}-->
          <!--          </a-button>-->
          <!-- 导出 -->
          <a-button @click='exportFile'>
            {{ $t('global-btn.export') }}
          </a-button>
        </a-form-item>
        <a-table
          ref="tableRef"
          size="small"
          class="mt-12"
          :columns='tableColumns'
          :dataSource='tableData'
          :rowKey='(record, index) => { return index; }'
          :scroll='{ x: tableWidth, y: tableHeightValue }'
          :pagination='pagination'
          :loading='tableLoading'
          @change='handlePageChange'
          :components='components'
          bordered>
          <!-- 序号列 -->
          <template slot='index' slot-scope='text, record, index'>
            <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
          </template>
          <template slot="action" slot-scope="text, record">
            <span>
              <!-- 编辑 -->
              <a class='operation-btn ml16' @click='editDvpTest(record)'  :disabled="isLook || applyButtonFlag">
                <a-tooltip :title="$t('global-btn.edit')">
                  <i class="iconfont iconicon-bainji"></i>
                </a-tooltip>
              </a>
              <a class='operation-btn' @click="deleteDvpData(record)"  :disabled="isLook || applyButtonFlag">
                <!-- 删除 -->
                <a-tooltip :title="$t('global-btn.delete')">
                  <i class="iconfont iconshanchu"></i>
                </a-tooltip>
              </a>
              <!-- 申请变更 -->
               <a class='operation-btn' @click="applyChange(record)" v-if="applyButtonFlag"  :disabled="isLook">
                <a-tooltip :title="$t('global-btn.apply-for-changes')">
                  <i class="iconfont  iconprocess_branch"></i>
                </a-tooltip>
              </a>
            </span>
          </template>
        </a-table>
      </a-card>
    </a-row>
    <AddDvpTest
      :addFlag="addFlag"
      :permissionFlag="permissionFlag"
      :addFormData="addFormData"
      :performanceModule="performanceModule"
      @closeModal="closeModal"
      @initData="initData"
      ref="addDvpTest">
    </AddDvpTest>
    <ApplyForChange
      :applyFlag="applyFlag"
      :applyTableData="applyTableData"
      @closeModal="closeModal"
      @initData="initData"
      ref="applyChange">
    </ApplyForChange>
  </div>
</template>

<script>


import AddDvpTest from "./addDvpTest";
import ApplyForChange from "./applyForChange";
import VueDraggableResizable from 'vue-draggable-resizable';

export default {
  components: {
    AddDvpTest,
    ApplyForChange,
    VueDraggableResizable
  },
  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, 50);
              }
            }
          };
          const drag = h('vue-draggable-resizable', { ...dragProps });
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
        }
      }
    };
    return{
      /** 下拉选数据集合 根据后端返回数据生成对应的下拉选 */
      selectDataList: [],
      /** 查询数据 */
      formData:{
        vehicleUse: undefined,      // 试验车用途描述
        vehicleState: undefined,    // 车辆状态描述
        testSite: undefined,       // 试验地点
        testOwner: undefined,      // 试验负责人
        projectNode: undefined,        // 节点
        prototypePlanTime: undefined, // 样车计划提供时间
        planStartTime: undefined,   // 计划开始时间
        planEndTime: undefined,     // 计划结束时间
        dynamicConfig: undefined,   // 动态配置列
        dvpId: undefined           // DVP ID
      },
      /**项目节点*/
      projectNodeList: [],
      /** 清除时间选框用的 */
      planTime: undefined,
      startTime: undefined,
      endTime: undefined,
      /** 试验类型字典 */
      testTypeDict: [
        {
          type: this.$t("plan.dvp.test-type-mule-car"),
          value: "0"
        },
        {
          type: this.$t("plan.dvp.test-type-know-the-real-situation"),
          value: "1"
        },
        {
          type: this.$t("plan.dvp.test-type-alignment"),
          value: "2"
        },
        {
          type: this.$t("plan.dvp.test-type-check-and-accept"),
          value: "3"
        },
        {
          type: this.$t("plan.dvp.test-type-consistence"),
          value: "4"
        }
      ],
      /** 动态下拉选框 选中数据存储 */
      searchSelectData: {},
      /** 折叠 展开 */
      advanceExpand: false,
      /** 分页 */
      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
      },
      /** 表格高度 */
      tableHeight: window.innerHeight - 421 + 'px',
      tableHeightValue: window.innerHeight - 621,
      // 表格总宽度
      tableWidth: 0,
      //表格各列宽度总和
      columnsWidth: 0,
      /** 表格加载状态 */
      tableLoading: false,
      /** 表格数据 */
      tableData: [],
      /** 表格列 */
      tableColumns: [
        //序号
        {
          title: this.$t('plan.dvp.serial-number'),
          dataIndex: 'index',
          width: 150,
          fixed: 'left',
          align: 'center',
          scopedSlots: {
            customRender: 'index'
          },
          ellipsis: true
        },
        //性能模块
        {
          title: this.$t('plan.dvp.vehicle-performance-module'),
          dataIndex: 'performanceModule',
          width: 200,
          align: 'center',
          ellipsis: true
        },
        //试验车用途描述
        {
          title: this.$t('plan.dvp.description-of-the-purpose-of-the-test-vehicle'),
          dataIndex: 'vehicleUse',
          width: 200,
          align: 'center',
          ellipsis: true
        },
        //试验类型
        {
          title: this.$t('plan.dvp.test-type'),
          dataIndex: 'testType',
          width: 200,
          align: 'center',
          ellipsis: true
        },
        //车辆状态描述
        {
          title: this.$t('plan.dvp.description-of-the-vehicle-status'),
          dataIndex: 'vehicleState',
          width: 200,
          align: 'center',
          ellipsis: true
        },
        //数量
        {
          title: this.$t('plan.dvp.quantity'),
          dataIndex: 'count',
          width: 150,
          align: 'center',
          ellipsis: true
        }
      ],
      /** 表格固定部分数据 */
      tableRightColumns: [
        //试验地点
        {
          title: this.$t('plan.dvp.test-location'),
          dataIndex: 'testSite',
          width: 200,
          align: 'center',
          ellipsis: true
        },
        //试验负责人
        {
          title: this.$t('plan.dvp.study-director'),
          dataIndex: 'testOwner',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        //节点
        {
          title: this.$t('plan.dvp.panel-point'),
          dataIndex: 'node',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        //样车计划提供时间
        {
          title: this.$t('plan.dvp.sample-vehicle-plan-delivery-time'),
          dataIndex: 'prototypePlanTime',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        //计划开始时间
        {
          title: this.$t('plan.dvp.scheduled-start-time'),
          dataIndex: 'planStartTime',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        //计划结束时间
        {
          title: this.$t('plan.dvp.scheduled-end-time'),
          dataIndex: 'planEndTime',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        //操作
        {
          title: this.$t('global-constant.operation'),
          dataIndex: 'action',
          align: 'center',
          width: 100,
          fixed: 'right',
          scopedSlots: {customRender: 'action'},
          ellipsis: true
        }
      ],
      /** 新建弹窗标识 */
      addFlag: false,
      /** 申请变更弹窗标识 */
      applyFlag: false,
      /** 申请变更弹窗表格数据 */
      applyTableData: [],
      /** 变更申请按钮显隐 */
      applyButtonFlag: false,
      dvpId: 0,
      performanceModule: undefined,
      permissionFlag: 0,
      addFormData: {},
      engineerUserId: undefined,
      vehicleCount: undefined,
      // 权限
      isLook: false
    }
  },
  watch: {
    tableColumns: {
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          this.changeFixed();
          // 修改table表格表头外边盒子的背景颜色以及外边距，以适应表格动态变化
          this.getTableDivCss();
        });
      },
      deep: true,
      immediate: true
    },
    tableRightColumns: {
      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.initSelectList();
    window.onresize = () => {
      this.tableHeight = window.innerHeight - 421 + 'px';
      this.tableHeightValue = window.innerHeight - 621;
    };
    this.getProjectNodeList();
    // 监听页面窗体大小变化
    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.tableRightColumns[this.tableRightColumns.length - 1].width = this.tableWidth - otherColumnsWidth;
      }else {
        // 恢复固定列原始定位属性
        this.tableColumns[0].fixed='left';
        // this.tableColumns[1].fixed='left';
        this.tableRightColumns[this.tableRightColumns.length - 1].fixed='right';
        // 恢复最后一列原始宽度
        this.tableRightColumns[this.tableRightColumns.length - 1].width = 150;
      }
    },
    /**
     * 获取项目节点下拉选项
     */
    getProjectNodeList() {
      let data = {
        dvpId: this.$store.getters.dvpId
      };
      this.$api.getProjectNodeList(data).then(res => {
        if (res.flag){
          let nodeList = res.data.dynamicConfig;
          nodeList.forEach(item => {
            let options = {
              label: item.name,
              value: item.id
            }
            this.projectNodeList.push(options);
          });
        }
      });
    },
    /**
     * 查询
     */
    search() {
      // 判断动态下拉选是否有选中数据
      if (this.searchSelectData) {
        let searchData = [];
        for(let [key, value] of Object.entries(this.searchSelectData)) {
          let selectedDate = {};
          // 如果value没有值，就跳过这次循环，不将这个属性传给后端
          if (value === undefined) {
            continue;
          } else {
            // keys 是下拉选框的id，区分是哪个下拉选框； value 是下拉选框选中项的id；
            selectedDate.configId = parseInt(key);
            selectedDate.id = value;
            searchData.push(selectedDate);
          }
        }
        //动态下拉选框选中数据，存进查询数据中
        this.formData.dynamicConfig = searchData;
      }
      this.initData();
    },
    /**
     * 样车提供时间 时间选择器Change方法
     */
    handlePlanTime(date, dateString) {
      this.formData.prototypePlanStartTime = dateString[0];
      this.formData.prototypePlanEndTime = dateString[1];
    },
    /**
     * 计划开始时间 时间选择器Change方法
     */
    handleStartTime(date, dateString) {
      this.formData.planStartStartTime = dateString[0];
      this.formData.planStartEndTime = dateString[1];
    },
    /**
     * 计划结束时间 时间选择器Change方法
     */
    handleEndTime(date, dateString) {
      this.formData.planEndStartTime = dateString[0];
      this.formData.planEndEndTime = dateString[1];
    },
    /**
     * 重置
     */
    reset() {
      this.searchSelectData = {};
      this.planTime = undefined;
      this.startTime = undefined;
      this.endTime = undefined;
      this.formData.planStartStartTime = undefined;
      this.formData.planStartEndTime = undefined;
      this.formData.planEndStartTime = undefined;
      this.formData.planEndEndTime = undefined;
      this.formData.projectNode = undefined;
      this.formData.testOwner = undefined;
      this.formData.testSite = undefined;
      this.formData.prototypePlanStartTime = undefined;
      this.formData.prototypePlanEndTime = undefined;
      this.formData.dynamicConfig = undefined;
      this.formData.vehicleState = undefined;
      this.formData.vehicleUse = undefined;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.advanceExpand = false;
      this.initData();
    },
    /**
     * 收起/展开
     */
    toggleAdvance() {
      this.advanceExpand = !this.advanceExpand;
      if(this.advanceExpand) {
        this.tableHeightValue -= 100
      } else {
        this.tableHeightValue = window.innerHeight - 621;
      }
    },
    /**
     * 新建DVP计划试验数据
     */
    saveDvpPlan() {
      this.addFlag = true;
      this.permissionFlag = 1;
      this.performanceModule = this.$store.getters.performanceModuleCode;
      this.$api.dvpNewTest({dvpId : this.$store.getters.dvpId}).then(res => {
        if (res.flag) {
          let data = res.data.dvpFullVehicleDetail;
          if (res.data.dvpFullVehicleDetail && res.data.columnDataModel) {
            this.addFormData = data;
            this.addFormData.testOwner = data.engineerUserId;
            this.addFormData.count = data.vehicleCount;
            this.addFormData.node = data.projectNodeId;
            this.addFormData.testType = (data.testType).toString();
            this.addFormData.columnDataModel = res.data.columnDataModel;
            this.$refs.addDvpTest.initSelectList(this.$store.getters.dvpId);
          } else {
            this.$refs.addDvpTest.initSelectList(this.$store.getters.dvpId);
          }
        }
      });
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      // 新建/编辑弹窗 关闭
      this.addFlag = false;
      this.addFormData = {};
      // 申请变更弹窗 关闭
      this.applyFlag = false;
      this.applyTableData = [];
    },
    /**
     * todo 导入
     */
    importFile() {

    },
    /**
     * 导出
     */
    exportFile() {
      this.download('/DFMEA/dvp/fullVehicle/dvpPlanExcelExport', {
        vehicleUse: this.formData.vehicleUse || '',
        vehicleState: this.formData.vehicleState || '',
        testSite: this.formData.testSite || '',
        testOwner: this.formData.testOwner || '',
        prototypePlanTime: this.formData.prototypePlanTime || '',
        projectNode: this.formData.projectNode || '',
        planEndTime: this.formData.planEndTime || '',
        planStartTime: this.formData.planStartTime || '',
        dvpId: this.formData.dvpId || '',
      });
    },
    /**
     * 表格 - 点击分页中数字触发的方法
     * @param pagination
     */
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.pageNo = pagination.current;
      this.initData();
    },
    /**
     * 初始化动态下拉选框
     */
    initSelectList(){
      let data = {
        dvpId: this.$store.getters.dvpId
      };
      this.$api.initSelectList(data).then(res => {
        if (res.flag) {
          let selectList = res.data;
          if (selectList && selectList.length > 0) {
            selectList.forEach(item => {
              let config = item.configOption;
              let selectData = {}
              selectData.id = item.id;
              selectData.name = item.name;
              selectData.configData = [];
              if (config && config.length > 0) {
                config.forEach(eachData => {
                  let eachOption = {}
                  eachOption.key = eachData.id;
                  eachOption.value = eachData.id;
                  eachOption.label = eachData.name;
                  selectData.configData.push(eachOption);
                })
              };
              this.selectDataList.push(selectData);
            })
          };
        }
      });
    },
    /**
     * 初始化表格数据
     */
    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.$api.initDvpList(_that.formData).then(res => {
        if (res.flag) {
          //清除之前添加的表头，防止重复添加
          _that.tableColumns = _that.tableColumns.slice(0,6);
          //表头插入整车性能项目配置
          let columnData = res.inputData;
          if (Object.keys(columnData).length > 0) {
            for (let key in columnData) {
              let column = {};
              column.title = columnData[key].name;
              column.dataIndex = columnData[key].id;
              column.align = 'center';
              column.ellipsis = true;
              column.width = 150;
              _that.tableColumns.push(column);
            }
          }
          //查询 先清除所有数据
          _that.tableData = [];
          //表头插入固定列
          _that.tableRightColumns.forEach(item => {
            _that.tableColumns.push(item);
          })
          //获取表格数据
          let tableDataList = res.data.data;
          if (tableDataList) {
            if (tableDataList.length > 0) {
              tableDataList.forEach(item => {
                // 表格数据整理
                let tempData = {};
                // 表格中动态列数据整理
                if (item.columnDataModel && item.columnDataModel.length >0){
                  item.columnDataModel.forEach(colItem => {
                    tempData[colItem.columnId] = colItem.columnValue;
                  });
                }
                tempData.performanceModule = item.performanceModule; // 性能模块
                tempData.testId = item.testId; // 编号
                tempData.vehicleUse = item.vehicleUse; // 试验车用途
                tempData.vehicleState = item.vehicleState; // 车辆状态
                tempData.testType = item.testType; // 试验类型
                _that.testTypeDict.forEach(item => {
                  if (item.value === tempData.testType) {
                    tempData.testType = item.type;
                  }
                });
                tempData.count = item.count; // 数量
                tempData.testSite = item.testSite; // 试验地点
                tempData.testOwner = item.testOwner; // 试验负责人
                tempData.node = item.node; // 节点
                tempData.nodeId = item.nodeId; // 节点Id
                tempData.prototypePlanTime = item.prototypePlanTime; // 样车计划提供时间
                tempData.planStartTime = item.planStartTime; // 计划开始时间
                tempData.planEndTime = item.planEndTime; // 计划结束时间
                _that.tableData.push(tempData);
              })
              _that.pagination.total = res.data.total;
            }
          } else {
            _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 ;
        }
      });
    },
    /**
     * 删除dvp计划试验数据
     * @param data
     */
    deleteDvpData(record) {
      let data = {
        dvpId: this.$store.getters.dvpId,
        testId: record.testId
      }
      this.$api.deleteTest(data).then(res => {
        if (res.flag){
          this.initData();
          this.$message.success(this.$t('plan.dvp.operation-succeeded'), 1);
        }
      });
    },
    /**
     * 编辑dvp计划试验数据
     * @param data
     */
    editDvpTest(record) {
      let data = {
        dvpId: this.$store.getters.dvpId,
        testId: record.testId
      }
      this.$api.editDvpTestInit(data).then(res => {
        if (res.flag) {
          this.addFormData = res.data.dvpFullVehiclePlanInitModel;
          this.addFormData.node = record.nodeId;
          this.$refs.addDvpTest.testOwnerId = res.data.dvpFullVehiclePlanInitModel.testOwnerId;
          this.addFlag = true;
          this.permissionFlag = 2;
          this.performanceModule = record.performanceModule;
          this.$refs.addDvpTest.initSelectList(this.$store.getters.dvpId);
        }
      });
    },


    /**
     * 申请变更
     * @param record
     */
    applyChange(record){
      let data = {
        dvpId: this.$store.getters.dvpId,
        testId: record.testId
      }
      // 固定行数据 赋值
      let rowData = [
        // 试验车用途描述
        {
          changeContent: this.$t("dvp.full.vehicle.dvp.vehicle-use-description"),
          currentDesc: record.vehicleUse,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验类型
        {
          changeContent: this.$t("plan.dvp.test-type"),
          currentDesc: record.testType,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 车辆状态描述
        {
          changeContent: this.$t("plan.dvp.description-of-the-vehicle-status"),
          currentDesc: record.vehicleState,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 车辆数量
        {
          changeContent: this.$t("plan.dvp.number-of-vehicles"),
          currentDesc: record.count,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验地点
        {
          changeContent: this.$t("plan.dvp.test-location"),
          currentDesc: record.testSite,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 试验负责人
        {
          changeContent: this.$t("plan.dvp.study-director"),
          currentDesc: record.testOwner,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 项目节点
        {
          changeContent: this.$t("plan.dvp.project-node"),
          currentDesc: record.node,
          changeDesc: undefined,
          changeReason: undefined
        },
        // 样车计划提供时间
        {
          changeContent: this.$t("plan.dvp.sample-vehicle-plan-delivery-time"),
          currentDesc: record.prototypePlanTime,
          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
        },
      ];
      // 动态行数据 查询
      this.$api.editDvpTestInit(data).then(res => {
        if (res.flag) {
          let response = res.data.dvpFullVehiclePlanInitModel.columnDataModel;
          // 动态行数据 赋值
          response.forEach( item => {
            let row = {
              changeContent: item.columnName,
              currentDesc: item.columnValue,
              changeDesc: undefined,
              changeReason: undefined
            };
            rowData.push(row);
          });
          // 赋值给申请变更弹窗的表格
          this.applyTableData = rowData;
          // 调用申请变更弹窗的初始化表格数据方法
          this.$refs.applyChange.initTableData(this.applyTableData);
          // 调用申请变更弹窗的初始化动态行下拉选框数据方法
          this.$refs.applyChange.initSelectList(this.$store.getters.dvpId);
          this.$refs.applyChange.testId = record.testId;
          // 开启弹窗
          this.applyFlag = true;
        }
      });
    }
  }
}

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

.layout-card {
  padding: 12px;
}

.mt-12 {
  margin-top: 12px;
}

/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden!important;
  margin-bottom: 0!important;
  padding-right: 10px;
  background: rgb(250, 250, 250);
}
</style>
