<template>
  <div class="pad12">
    <a-col class="colClass" :lg="24" :md="19" :sm="24">
        <a-row class="mb12">
          <a-form layout='vertical'>
            <a-row :gutter='24'>
              <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
                <a-form-item :label="$t('base.info.change-content')">
                  <a-input v-model='formData.changeContent' :placeholder="$t('base.info.please-enter-change-content')" allowClear/>
                </a-form-item>
              </a-col>
              <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
                <a-form-item :label="$t('base.info.change-reason')">
                  <a-input v-model='formData.changeReason' :placeholder="$t('base.info.please-enter-change-reason')" allowClear/>
                </a-form-item>
              </a-col>
              <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
                <a-form-item :label="$t('base.info.version')">
                  <a-select
                    v-model='formData.versionNo'
                    :filter-option="handleFilterDataList"
                    :options="versionNoList"
                    :placeholder="$t('base.info.please-select-version')"
                    allowClear
                    mode="multiple">
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :lg='8' :md='12' :sm='24' :xl='6' :xs='24'>
                <a-form-item :label="$t('base.info.change-person')">
                  <a-input v-model='formData.changePerson' :placeholder="$t('base.info.please-enter-change-person')" allowClear/>
                </a-form-item>
              </a-col>
              <span v-show="advanceExpand">
					        <a-col :lg='12' :md='24' :sm='24' :xl='advanceExpand ? 6 : 18' :xs='24'>
						        <a-form-item :label="$t('base.info.change-time')">
							        <a-date-picker v-model="clearTime" allowClear style="width: 100%" @change="handleChangeTime"/>
						        </a-form-item>
					        </a-col>
                </span>
              <a-col :lg='8' :md='24' :sm='24' :xl='24' :xs='24'>
                <a-form-item :label="'\xa0'" class='tr'>
                  <!--重置、查询按钮-->
                  <a-row :gutter='24'>
                    <a-col :lg='24' :md='24' :sm='24' :xl='24' :xs='24'>
                      <a-form-item :label="'\xa0'" class='tr'>
                        <!-- 展开/收起 -->
                        <a @click="toggleAdvance">
                          {{ advanceExpand ? $t('plan.dvp.collapse') : $t('plan.dvp.expand') }}
                          <a-icon :type="advanceExpand ? 'up' : 'down'"/>
                        </a>
                        <!-- 重置 -->
                        <a-button class="ml_10" type @click='reset'>
                          {{ $t('global-btn.reset') }}
                        </a-button>
                        <!-- 查询 -->
                        <a-button class="ml_10" type='primary' @click='search'>
                          {{ $t('global-btn.search') }}
                        </a-button>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-row>
        <a-row class="mb12">
          <a-table :columns='tableColumns'
                   :dataSource='tableData'
                   :loading='tableLoading'
                   :pagination='pagination'
                   :rowKey='(record, index) => { return index; }'
                   :scroll='{ x: 1850 }'
                   size="small"
                   @change='handlePageChange'>
            <template slot='action' slot-scope='row'>
              <!-- 查看 -->
              <a class="operation-btn btnClass" @click="viewChangeManagement(row)">
                <a-tooltip :title="$t('global-btn.look')">
                  <i class="iconfont iconchakan"></i>
                </a-tooltip>
              </a>
            </template>
            <!-- 序号列 -->
            <template slot='index' slot-scope='text, record, index'>
              <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
            </template>
          </a-table>
        </a-row>
    </a-col>
  </div>
</template>
<script>

export default {
  name: "",
  components: {},
  data() {
    return {
      formData: {
        changeContent: undefined,
        changeReason: undefined,
        changePerson: undefined,
        versionNo: undefined,
      },
      addFlag: false,
      advanceExpand: false,
      // 清除选中日期用的
      clearTime: undefined,
      updateTime: undefined,
      // 表头
      tableColumns: [
        {
          title: this.$t('base.info.serial-number'),
          width: 100,
          // fixed: 'left',
          align: 'center',
          scopedSlots: {
            customRender: 'index'
          },
          ellipsis: true
        },
        {
          title: this.$t('base.info.description-of-change-content'),
          dataIndex: 'description',
          // fixed: 'left',
          align: 'center',
          width: 150,
          ellipsis: true
        },
        {
          title: this.$t('base.info.change-reason'),
          dataIndex: 'changeReason',
          align: 'center',
          width: 150,
          ellipsis: true
        },
        {
          title: this.$t('base.info.change-source'),
          dataIndex: 'changeSource',
          align: 'center',
          width: 150,
          ellipsis: true
        },
        {
          title: this.$t('base.info.product.type'),
          dataIndex: 'projectType',
          width: 120,
          align: 'center',
          ellipsis: true
        },
        {
          title: this.$t('base.management.serial-number'),
          dataIndex: 'serialNumber',
          align: 'center',
          width: 120,
          ellipsis: true
        },
        {
          title: this.$t('base.info.vehicle-model-code'),
          dataIndex: 'vehicle',
          align: 'center',
          width: 150,
          ellipsis: true
        },
        {
          title: this.$t('base.info.project.number'),
          dataIndex: 'department',
          align: 'center',
          width: 150,
          ellipsis: true
        },
        {
          title: this.$t('base.info.version'),
          dataIndex: 'state',
          align: 'center',
          width: 100,
          scopedSlots: {
            customRender: 'state'
          },
          ellipsis: true
        },
        {
          title: this.$t('base.info.change-person'),
          dataIndex: 'creator',
          align: 'center',
          width: 150,
          ellipsis: true
        },
        {
          title: this.$t('base.info.change-time'),
          dataIndex: 'updateTime',
          align: 'center',
          width: 100,
          ellipsis: true
        },
        {
          title: this.$t('global-constant.operation'),
          key: 'operation',
          fixed: 'right',
          align: 'center',
          width: 100,
          scopedSlots: {
            customRender: 'action'
          },
          ellipsis: true
        }
      ],
      /** 表格Loading */
      tableLoading: false,
      tableData: [],
      // 分页
      pagination: {
        size: 'small',
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: total => this.$t('workbench.a-total-of-data', {total: `${total}`}), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100', '200'], // 每页数量选项
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        total: 0, //总条数
        showQuickJumper: true,
        position: 'top'
      },
      pageNo: 1,
      pageSize: 10,
      addFormData: {},
      permissionFlag: 1, // 1:创建权限，2：编辑权限，3：查看权限
      // 导入模态框
      importModel: false,
      fileList: [],// 导入文件集合
      versionNoList: [], // 项目节点
      showVerify: false // 核实标识
    };
  },
  methods: {
    //列表渲染
    initData(){

    },
    //版本下拉列表
    initSelectData() {
      let _that = this;
      _that.$api.initDvpBasicInformation().then(res => {
        if (res.flag) {
          // 版本 下拉选数据
          if (res.data.versionNoList && res.data.versionNoList.length > 0) {
            res.data.versionNoList.forEach(item => {
              let versionNo = {};
              versionNo.key = item.key;
              versionNo.value = item.key;
              versionNo.label = item.value;
              _that.versionNoList.push(versionNo);
            });
          }
        }
      });
    },
    //查看变更管理
    viewChangeManagement(row) {
      let _this = this;
      _this.tableLoading = true;
      let data = {
        functionId: row.id
      };
      _this.$api.editInitFunction(data).then(res => {
        if (res.flag) {
          _this.permissionFlag = 3;
          _this.addFlag = true;
        } else {
          _this.$notification.error({message: res.message});
        }
      }).finally(() => {
        _this.tableLoading = false;
      });
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      this.addFlag = false;
      this.showVerify = false;
      this.addFormData = {};
    },
    // 下拉选模糊查询
    handleFilterDataList(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
    },
    //查询
    search(){
      this.initData();
    },
    // 重置
    reset() {
      this.formData.changeContent = undefined;
      this.formData.changeReason = undefined;
      this.formData.changePerson = undefined;
      this.formData.versionNo = undefined;
      this.clearTime = undefined;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.search();
    },
    // 变更时间
    handleChangeTime(date, dateString) {
      if (!dateString) {
        this.formData.changeTime = "";
        return;
      }
      this.formData.changeTime = dateString;
    },
    // 表格 - 点击分页中数字触发的方法
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.pageNo = pagination.current;
      this.search();
    },
    // 展开收起
    toggleAdvance() {
      this.advanceExpand = !this.advanceExpand;
    },
    mounted() {
      if (this.formData.cpacId === '') {
        this.$refs.cpacTree.isChooseFirst = true;
      } else {
        this.$refs.cpacTree.isChooseFirst = false;
      }
      window.onresize = () => {
        this.treeHeight = window.innerHeight - 114 + 'px';
        this.tableHeight = window.innerHeight - 290 + 'px';
        this.tableHeightValue = window.innerHeight - 290;
      };
      this.getNodeTypeList(); // 获取节点类型下拉
    }
  },
}
</script>

<style lang='less' scoped>
/deep/ .search-wrapper {
  .btn-wrap {
    margin-right: 12px;
  }
}

.colClass {
  padding: 12px 0px 0px 24px;
}

.mb12 {
  margin-bottom: 12px
}

.btnClass {
  margin: 0 6px !important;
}
</style>
