<template>
	<a-modal
		:title="$t('global-btn.new')"
		:visible="addFlag"
		:width="1200"
		@cancel="closeModal"
    :maskClosable="false"
    :footer="null"
    :bodyStyle="{
			height: '40vh',
			overflow: 'hidden',
			overflowY: 'auto',
		}"
	>
    <a-table
      ref="tableRef"
      :columns="tableColumns"
      :dataSource="tableData"
      :pagination="pagination"
      :rowKey="(record, index) => { return index; }"
      :loading="tableLoading"
      size="small"
      bordered
      @change='handlePageChange'
      :scroll="{ x: 1850, y: tableHeightValue }"
    >
      <!-- 序号列 -->
      <template slot='index' slot-scope='text, record, index'>
        <span>{{ index + 1 }}</span>
      </template>

      <!-- 操作 -->
      <template slot="action" slot-scope="name, row, index">
        <div>
          <!-- 保存 -->
          <a class="operate-btn"
            @click="save(row)">
            <a-tooltip :title="$t('global-btn.save')">
              <a-icon type="check"/>
            </a-tooltip>
          </a>
        </div>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
export default {
  name: 'AddFrequency',
	props: {},
  data() {
    return {
      addFlag: false,
      /** 表格Loading */
      tableLoading: false,
      /** 表格数据 */
      tableData: [],
      /** 分页 */
      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
      },
      tableHeightValue: window.innerHeight - 350,
      tableColumnsWidth: 0,
      /** 表头信息 */
      tableColumns: [
        // 序号
        {
          title: () => this.$t('dvp.full.vehicle.dvp.serial-number'),
          width: 50,
          dataIndex:'index',
          align: 'center',
          scopedSlots: {
            customRender: 'index'
          },
          ellipsis: true
        },
        // 试验代码
        {
          title: () => this.$t('dvp.full.vehicle.dvp.test-code'),
          width: 80,
          align: 'center',
          dataIndex: 'testCode',
          ellipsis: true
        },
        // 试验内容
        {
          title: () => this.$t('dvp.full.vehicle.dvp.test-content'),
          width: 80,
          align: 'center',
          dataIndex: 'testContent',
          ellipsis: true
        },
        // 试验标准
        {
          title: () => this.$t('base.info.Test-standards'),
          width: 80,
          align: 'center',
          dataIndex: 'testStandard',
          ellipsis: true
        },
        // 备注
        {
          title: () => this.$t('dvp.full.vehicle.dvp.notes'),
          width: 100,
          align: 'center',
          dataIndex: 'remark',
          ellipsis: true
        },
        // 操作
        {
          title: this.$t('global-constant.operation'),
          align: 'center',
          width: 50,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
    }
  },
  mounted() {
    window.onresize = () => {
      this.tableHeight = window.innerHeight - 421 + 'px';
      this.tableHeightValue = window.innerHeight - 421;
    };
  },
  methods: {
    /**
     * 表格 - 点击分页中数字触发的方法
     * @param pagination
     */
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.pageNo = pagination.current;
      this.initData();
    },
    /**
     * 初始化
     */
    initData() {
      let _that = this;
      _that.tableLoading = true;
      _that.$api.initAddFrequencyList({
        dvpId: _that.$route.query.dvpId,
        /** 分页 */
        pagination: {
          pageSize: _that.pagination.pageSize,
          pageCurrent: _that.pagination.current
        },
      }).then(res => {
        if (res.flag) {
          _that.tableData = res.data.data || [];
          _that.pagination.total = res.data.total || 0;
        } else {
          _that.$notification.error({message: res.message});
        }
      }).finally(() => {
        _that.tableLoading = false;
      });
    },
    /**
     * 新建频次保存
     */
    save(val) {
      let _that = this;
      _that.$api.addDvpFrequency({
        dvpId: _that.$route.query.dvpId,
        detailId: val.detailId
      }).then(res => {
        if (res.flag) {
          _that.$notification.success({message: res.message});
        } else {
          _that.$notification.error({message: res.message});
        }
      }).finally(() => {
        _that.tableLoading = false;
        _that.addFlag = false;
        _that.$emit("editTableDataInit");
      });
    },
    /**
     * 模态框关闭
     */
    closeModal() {
      this.addFlag = false;
    }
  }
}
</script>

<style lang='less' scoped>
.text-right {
  text-align: right;
}
</style>