<template>
  <div>
    <a-form class="ml10" layout="vertical">
      <a-row :gutter='24'>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item :label="$t('functional-analysis.add-modal.fault-name')">
            <a-input v-model="formData.name" allowClear :placeholder="$t('functional-analysis.add-modal.please-enter-name')"/>
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item :label="$t('functional-analysis.top-modal.creator')">
            <a-input
                allowClear
                v-model='formData.creator'
                :placeholder="$t('functional-analysis.top-modal.please-enter-creator')"
            />
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item :label="$t('functional-analysis.top-modal.create-date')">
            <a-range-picker
                v-model='insertTime'
                @change='(date, dateString)=>{
                formData.insertTimeStart = dateString[0] || undefined;
                formData.insertTimeEnd = dateString[1] || undefined;
              }'
                style='width:100%'
            />
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item class='tr' :label="'\xa0'">
            <a-button class='ml10' @click='reset'>{{ $t('global-btn.reset') }}</a-button>
            <a-button class='ml10' type="primary" @click="search"> {{ $t('global-btn.search') }} </a-button>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-form-item>
          <a-radio-group name="selectType" @change="radioChange" :default-value="1">
            <a-radio :value="1">
              {{ $t('functional-analysis.add-modal.only-current-node') }}
            </a-radio>
            <a-radio :value="2">
              {{ $t('functional-analysis.add-modal.all-nodes') }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>
    </a-form>
    <div>
      <a-table
          :data-source="tableData"
          :columns="tableColumns"
          :customRow="customRow"
          :rowKey="(row, index) => {return row.faultId;}"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          bordered
          size="small"
          :pagination='pagination'
          :loading='tableLoading'
          @change='handlePageChange'>
        <!-- 来源 -->
        <template slot="dataSource" slot-scope="text, record">
					<span>{{ record.dataSource === '0' ? $t('functional-analysis.add-modal.fmea-library-create') :
              record.dataSource === '1'? $t('functional-analysis.add-modal.fmea-library-FMEA-import'): "" }}
					</span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>

export default {
  name: "AddDFMEALibrary",
  props: {
    struTypeCode: {
      default: '',
      type: String
    },
    struId: {
      default: '',
      type: String
    }
  },
  watch: {
    selectedRowKeys(data){
      this.$emit("dataChange", data);
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      tableColumns: [
        {
          title: () => this.$t('research.serial-number'),
          width: 70,
          align: 'center',
          dataIndex: 'index',
          customRender: (value, row, index) => {
            return (this.pagination.current - 1) * this.pagination.pageSize + index + 1;
          }
        },
        {
          title: () => this.$t('functional-analysis.add-modal.fault-number'),
          width: 150,
          dataIndex: 'faultNo',
          className: 'fault-number',
          scopedSlots: { customRender: 'faultNo' },
          align: 'center'
        },
        {
          title: () => this.$t('functional-analysis.add-modal.fault-name'),
          align: "center",
          dataIndex: "faultName",
          key: "name",
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.add-modal.fault-severity'),
          width: 100,
          dataIndex: 'signific',
          align: 'center'
        },
        {
          title: () => this.$t('functional-analysis.add-modal.data_source'),
          width: 150,
          dataIndex: 'dataSource',
          scopedSlots: { customRender: 'dataSource' },
          align: 'center'
        },
        {
          title: () => this.$t('functional-analysis.add-modal.creator'),
          width: 150,
          dataIndex: 'creator',
          align: 'center'
        },
        {
          title: () => this.$t('functional-analysis.property-modal.create-time'),
          width: 150,
          dataIndex: 'insertTime',
          align: 'center'
        }
      ],
      // 搜索
      formData: {
        name: undefined,
        status: '2',
        creator: undefined,
        insertTimeStart: undefined,
        insertTimeEnd: undefined,
        nodeType: undefined,
        nodeSource: undefined
      },
      tempFormData: {},
      // 分页
      pagination: {
        // defaultPageSize: 10,
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: total => this.$t('global-constant.table.show-total', [total]), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100', '200'], // 每页数量选项
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        // onChange: (page, pageSize) => self.changePage(page, pageSize), //点击页码事件
        total: 0, //总条数
        showQuickJumper: true
      },
      // 创建时间
      insertTime: undefined,
      selectedRowKeys: [],
      advanceExpand: false,
    };
  },

  mounted() {
    this.list();
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.pagination.current = 1;
      this.list();
    },
    /**
     * 重置
     */
    reset() {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.formData = {};
      this.selectedRowKeys = [];
      this.list();
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.$api.getNodeFromLibrarySelect({
        nodeName: _that.formData.name,
        nodeType: _that.formData.nodeType,
        nodeSource: _that.formData.nodeSource,
        nodeTypeCode: '06',
        creator: _that.formData.creator,
        insertTimeStart: _that.formData.insertTimeStart,
        insertTimeEnd: _that.formData.insertTimeEnd,
        pageSize: _that.pagination.pageSize,
        pageNo: _that.pagination.current,
      }).then((res) => {
        if (res.flag) {
          _that.tableData = res.data.data;
          _that.pagination.total = res.data.total;
        } else {
          _that.tableData = [];
          _that.pagination.total = 0;
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      })
    },
    /**
     * 单选框改变事件
     */
    radioChange(e) {
      this.$emit('update:selectType', e.target.value);
    },
    /**
     * 复选框改变事件
     */
    onSelectChange(selectedRowKeys, row) {
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 行点击事件
     */
    customRow(record, index) {
      let _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            if (_that.selectedRowKeys.indexOf(record.faultId) !== -1) {
              _that.selectedRowKeys.splice(_that.selectedRowKeys.indexOf(record.faultId), 1);
            } else {
              _that.selectedRowKeys.push(record.faultId)
            }
          }
        }
      };
    },
    // 表格 - 点击分页中数字触发的方法
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.list();
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ant-table-tbody {
  .ant-table-row-cell-ellipsis:nth-of-type(2) {
    text-align: left !important;
  }
}

/*/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  overflow-y: auto !important;
}*/
</style>
