<template>
  <div>
    <a-modal
        :title="$t('globalComponents.libraryToFmeaDiff.contrast')"
        :visible='visible'
        width="80%"
        :maskClosable="false"
        @cancel="closeModal"
        :footer="null">
      <a-row>
        <a-tabs style="background-color:#fff;" :activeKey="tabKey" @change="tabChange">
          <!-- 产品功能库 -->
          <a-tab-pane key="02">
            <template #tab>
              <span>
                {{ $t('globalComponents.libraryToFmeaDiff.product-function-library') }}
                <a-badge :count="functionDiffNum" :offset="[-6,-18]"></a-badge>
              </span>
            </template>
          </a-tab-pane>
          <!-- 产品特性库 -->
          <a-tab-pane key="04">
            <template #tab>
              <span>
                {{ $t('globalComponents.libraryToFmeaDiff.product-feature-library') }}
                <a-badge :count="productFeatureDiffNum" :offset="[-6,-18]"></a-badge>
              </span>
            </template>
          </a-tab-pane>
          <!-- 产品失效库 -->
          <a-tab-pane key="06">
            <template #tab>
              <span>
                {{ $t('globalComponents.libraryToFmeaDiff.product-fault-library') }}
                <a-badge :count="faultDiffNum" :offset="[-6,-18]"></a-badge>
              </span>
            </template>
          </a-tab-pane>
          <!-- 接口库 -->
          <a-tab-pane key="99">
            <template #tab>
              <span>
                {{ $t('globalComponents.libraryToFmeaDiff.interface-library') }}
                <a-badge :count="interfaceDiffNum" :offset="[-6,-18]"></a-badge>
              </span>
            </template>
          </a-tab-pane>
          <!-- 预防措施库 -->
          <a-tab-pane key="09">
            <template #tab>
              <span>
                {{ $t('globalComponents.libraryToFmeaDiff.preventive-measures-library') }}
                <a-badge :count="preventDiffNum" :offset="[-6,-18]"></a-badge>
              </span>
            </template>
          </a-tab-pane>
          <!-- 探测措施库 -->
          <a-tab-pane key="10">
            <template #tab>
              <span>
                {{ $t('globalComponents.libraryToFmeaDiff.detection-measures-library') }}
                <a-badge :count="detectDiffNum" :offset="[-6,-18]"></a-badge>
              </span>
            </template>
          </a-tab-pane>
        </a-tabs>
      </a-row>
      <a-row>
        <a-card>
          <template slot="extra">
            <a-row class='tr'>
              <!-- 同步 -->
              <a-button type='primary' class="ml_10" @click='syncToFmea'>{{ $t('globalComponents.libraryToFmeaDiff.sync') }}</a-button>
              <!-- 忽略 -->
              <a-button type='primary' class="ml_10" @click='ignore'>{{ $t('globalComponents.libraryToFmeaDiff.ignore') }}</a-button>
            </a-row>
          </template>
          <a-table
              :data-source="tableData"
              :columns="tableColumns"
              :rowKey="(row, index) => {return row.tptlId;}"
              :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
              bordered
              size="small"
              :pagination="pagination"
              @change="handleTableChange">

            <!-- 操作按钮 -->
            <template slot="operate" slot-scope="text, record">
              <a class="operation-btn" @click="syncToFmea(record)">
                <!-- 同步 -->
                <a-tooltip :title="$t('globalComponents.libraryToFmeaDiff.sync')">
                  {{ $t('globalComponents.libraryToFmeaDiff.sync') }}
                </a-tooltip>
              </a>
              <!-- 忽略 -->
              <a class="operation-btn" @click="ignore(record)">
                <a-tooltip :title="$t('globalComponents.libraryToFmeaDiff.ignore')">
                  {{ $t('globalComponents.libraryToFmeaDiff.ignore') }}
                </a-tooltip>
              </a>
            </template>
            <template slot="status" slot-scope="text, record">
              <span style="color: #22B130" v-if="record.status === '1'">{{ $t('globalComponents.libraryToFmeaDiff.update') }}</span>
              <span style="color: #ee0a0a" v-if="record.status === '2'">{{ $t('globalComponents.libraryToFmeaDiff.del') }}</span>
            </template>
          </a-table>
        </a-card>

      </a-row>
    </a-modal>
  </div>
</template>

<script>

export default {
  name: 'libraryToFmeaDiff',
  components: {
  },
  data() {
    return {
      visible: false,
      /** 加载对象 */
      loader: undefined,
      /** 差异总数 */
      diffTotal: 0,
      /** 默认选项卡 */
      tabKey: "02",
      contentHeight: window.innerHeight - 104 + 'px',
      curFmeaId: undefined,
      /** 表格分页 */
      pagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        showTotal: total => this.$t('global-constant.table.show-total', [total]), //用于显示数据总量和当前数据顺序
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ['10', '20', '50', '100', '200'], // 指定每页可以显示多少条
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // pageSize 变化的回调
        total: 0 // 总条数
      },
      /** 表格数据 */
      tableData: [],
      /** 表格列 */
      tableColumns: [
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.library-entry-number'),
          align: "center",
          dataIndex: "libraryEntryNumber",
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.aboriginal-library-entry-desc'),
          align: "center",
          dataIndex: "libraryEntryName",
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.new-library-entry-desc'),
          align: "center",
          dataIndex: "newLibraryEntryName",
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.status'),
          align: "center",
          dataIndex: "status",
          scopedSlots: {
            customRender: "status"
          },
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.operate'),
          align: "center",
          dataIndex: "operate",
          scopedSlots: {
            customRender: "operate"
          },
          ellipsis: true
        }
      ],
      /** 选中项 */
      selectedRowKeys: [],
      tableLoading: false,
      newTableColumns: [
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.library-entry-number'),
          align: "center",
          dataIndex: "libraryEntryNumber",
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.aboriginal-library-entry-desc'),
          align: "center",
          dataIndex: "libraryEntryName",
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.new-library-entry-desc'),
          align: "center",
          dataIndex: "newLibraryEntryName",
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.status'),
          align: "center",
          dataIndex: "status",
          scopedSlots: {
            customRender: "status"
          },
          ellipsis: true
        },
        {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.operate'),
          align: "center",
          dataIndex: "operate",
          scopedSlots: {
            customRender: "operate"
          },
          ellipsis: true
        }
      ],

      functionDiffNum: 0,
      productFeatureDiffNum: 0,
      faultDiffNum: 0,
      preventDiffNum: 0,
      detectDiffNum: 0,
      interfaceDiffNum: 0
    };
  },
  mounted() {
    window.onresize = () => {
      this.contentHeight = window.innerHeight - 104 + 'px';
    };
  },
  computed: {},
  methods: {
    /**
     * 同步
     * @param record
     */
    syncToFmea(record) {
      let _that = this;
      let ids = [];
      if (record && record.tptlId) {
        ids.push(record.tptlId);
      } else if (_that.selectedRowKeys && _that.selectedRowKeys.length > 0) {
        // 多选批量
        ids = _that.selectedRowKeys;
      } else {
        return _that.$notification.warning({message: _that.$t('global-message.warn.please-select-a-piece-of-data')},5);
      }
      _that.tableLoading = true;
      let syncFunction;
      if (_that.tabKey === '99') {
        syncFunction = _that.$api.interfaceSyncToFmea
      } else {
        syncFunction = _that.$api.syncToFmea
      }
      _that.tableLoading = true;
      syncFunction({
        fmeaId: _that.curFmeaId,
        ids: ids,
        struTypeCode: _that.tabKey
      }).then(res => {
        if (res.flag) {
          _that.$notification.success({message: res.message});
          _that.list();
        } else {
          _that.$notification.error({message: res.message });
        }
      }).finally(() => {
        _that.tableLoading = false;
        _that.selectedRowKeys = [];
        // 刷新Tab显示的数量
        _that.$emit('refresh');
      });
    },
    /**
     * 忽略
     * @param record
     */
    ignore(record) {
      let _that = this;
      let ids = [];
      if (record && record.tptlId) {
        ids.push(record.tptlId);
      } else if (_that.selectedRowKeys && _that.selectedRowKeys.length > 0) {
        // 多选批量
        ids = _that.selectedRowKeys;
      } else {
        return _that.$notification.warning({message: _that.$t('global-message.warn.please-select-a-piece-of-data')},5);
      }
      _that.tableLoading = true;
      _that.$api.ignoreToFmea({
        ids: ids
      }).then(res => {
        if (res.flag) {
          _that.$notification.success({message: res.message});
          _that.list();
        } else {
          _that.$notification.error({message: res.message });
        }
      }).finally(() => {
        _that.tableLoading = false;
        _that.selectedRowKeys = [];
        // 刷新Tab显示的数量
        _that.$emit('refresh');
      });
    },
    /**
     * 弹窗--点击分页中数字触发的方法
     * @param pagination
     */
    handleTableChange(pagination) {
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.current = pagination.current;
      this.pagination.pageNo = pagination.current;
      this.list();
    },
    /**
     * 复选框改变事件
     */
    onSelectChange(selectRowKeys, selectedRows) {
      this.selectedRowKeys = selectRowKeys;
    },
    /**
     * 选项卡切换事件
     * @param activeKey 选项卡Key
     */
    tabChange(activeKey) {
      let _that = this;
      _that.tabKey = activeKey;
      _that.selectedRowKeys = [];
      let columns = [..._that.newTableColumns];
      if (activeKey === '06') { // 失效库 状态列前增加S值对比显示
        columns.splice(3, 0, {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.severity'),
          align: "center",
          dataIndex: "treeVlaue",
          ellipsis: true
        },{
          title: () => this.$t('globalComponents.libraryToFmeaDiff.new-severity'),
          align: "center",
          dataIndex: "libraryVlaue",
          ellipsis: true
        });
      } else if (activeKey === '09') { // 预防措施库 状态列前增加O值对比显示
        columns.splice(3, 0, {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.occurrence'),
          align: "center",
          dataIndex: "treeVlaue",
          ellipsis: true
        },{
          title: () => this.$t('globalComponents.libraryToFmeaDiff.new-occurrence'),
          align: "center",
          dataIndex: "libraryVlaue",
          ellipsis: true
        });
      } else if (activeKey === '10') { // 探测措施库 状态列前增加D值对比显示
        columns.splice(3, 0, {
          title: () => this.$t('globalComponents.libraryToFmeaDiff.detection'),
          align: "center",
          dataIndex: "treeVlaue",
          ellipsis: true
        },{
          title: () => this.$t('globalComponents.libraryToFmeaDiff.new-detection'),
          align: "center",
          dataIndex: "libraryVlaue",
          ellipsis: true
        });
      } else {
        _that.tableColumns = [..._that.newTableColumns];
      }
      _that.tableColumns = columns;
      _that.pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
      };
      _that.list();
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.tableLoading = true;
      _that.$api.getLibraryToFmeaDiff({
        fmeaId: _that.curFmeaId,
        typeCode: _that.tabKey,
        pageNo: _that.pagination.current,
        pageSize: _that.pagination.pageSize
      }).then(res => {
        if (res.flag) {
          _that.tableData = res.data?.libraryToFmeaModels || [];
          _that.pagination.total = res.data?.total;
        } else {
          _that.$notification.error({message: res.message});
        }
      }).finally(() => {
        _that.tableLoading = false;
      });
    },
    /**
     * 关闭弹框
     */
    closeModal() {
      this.selectedRowKeys = [];
      this.$emit("closeModal");
    },
  },
};
</script>

<style lang="less" scoped>

.ant-pro-basicLayout-content {
  margin: 10px;
}

/deep/ .ant-card {
  border-radius: 10px;
}

/deep/ .ant-tabs-bar {
  margin: 0 0 0px 0;
}

.operation-btn {
  color: #1890FF;
}

/deep/.ant-badge-count {
  min-width: 16px;
  height: 18px;
  font-size: 11px;
  line-height: 19px;
  border-radius: 100%;
}
</style>
