<template>
  <div>
    <!-- 表格 Start -->
    <a-table
        ref="tableRef"
        :customRow="customRow"
        :rowSelection="{
          columnTitle: this.$t('functional-analysis.top-modal.current-default'),
          columnWidth: 100,
          type: 'radio',
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: record => ({
              props: {
                disabled: $api.isLook === '1'
              }
          })
        }"
        :loading="loading"
        bordered
        :columns="tableColumns"
        :rowKey="(record, index) => {return index;}"
        size="small"
        :dataSource="tableData"
        :scroll="{ y: 'calc(88vh - 400px)' }"
        :pagination="false">
      <template v-slot:defaultDflag="text, record">
        <div v-if="record.defaultDflag === '1'">
          <span class="solid-circle-black"></span>
        </div>
      </template>
      <template v-slot:state="text, record">
        <span>
          {{
            record.state === '1'
                ? $t('functional-analysis.top-modal.disabled')
                : $t('functional-analysis.top-modal.enable')
          }}
        </span>
      </template>
    </a-table>
    <!-- 表格 End -->
    <div slot="footer"
         v-if="this.$api.isLook !== '1'"
         class="dialog-footer mt10 text-right">
      <a-button @click="closeModal" class="mr20">
        {{ $t('global-btn.cancel') }}
      </a-button>
      <a-button
          type="primary"
          :loading="saveLoading"
          @click="save()"
          v-preventReClick>
        {{ $t('global-btn.confirm') }}
      </a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: {
          span: 1
        },
        wrapperCol: {
          span: 11
        }
      },
      // 表头
      tableColumns: [
        {
          title: () => this.$t('functional-analysis.top-modal.name'),
          dataIndex: 'lname',
          align: 'center',
          width: 650,
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-modal.system-default'),
          align: 'center',
          width: 100,
          scopedSlots: {customRender: 'defaultDflag'},
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-modal.status'),
          align: 'center',
          scopedSlots: {
            customRender: 'state' /** 1: 禁用 0：启用 */
          },
          ellipsis: true
        }
      ],
      tableData: [],
      rowSelectionType: "radio",
      selectedRowKeys: [],
      selectedRow: {},
      loading: false,
      saveLoading: false,
      apId: '',
    };
  },
  methods: {
    /**
     * 初始化右侧树
     */
    initRightTree() {
      this.$emit("initRightTree");
    },
    /**
     * 单选框改变回调
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      let row = selectedRows[0];
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRow = row;
    },
    /**
     * 操作行回调
     */
    customRow(record, index) {
      let _that = this;
      if (_that.$api.isLook === '1') return;
      return {
        on: {
          // 鼠标单击行
          click: () => {

            _that.selectedRowKeys = [index];
            _that.selectedRow = record;
          }
        }
      };
    },
    /**
     * 列表
     */
    list() {
      let _that = this;

      _that.loading = true;
      _that.$api.getActionPriority({
        fmeaId: _that.$store.getters.rfmeaId
      }).then(res => {
        if (res.flag) {
          if (res.data.defaultApId && res.data.rfmApModels) {
            for (let i = 0; i < res.data.rfmApModels.length; i++) {
              if (res.data.rfmApModels[i].apId === res.data.defaultApId) {
                _that.selectedRowKeys[0] = i;
              }
            }
          }
          _that.tableData = res.data.rfmApModels;
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 保存
     */
    save() {
      let _that = this;
      _that.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t('global-message.warn.change-current-default-option'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onOk() {
          _that.saveLoading = true;
          _that.$api.saveActionPriority({
            fmeaId: _that.$store.getters.rfmeaId,
            apId: _that.selectedRow.apId
          }).then(res => {
            if (res.flag) {
              // 操作成功。
              _that.$message.success(res.message, 1);
              // 初始化右侧树
              _that.initRightTree();
              // 关闭模态框
              _that.closeModal();
            } else {
              _that.$message.error(res.message, 1);
            }
          }).finally(() => {
            _that.saveLoading = false;
          });
        },
        onCancel() {
        }
      });
    },
    /**
     * 关闭对话框
     */
    closeModal() {
      this.$emit("closeModal");
    },
  },
  mounted() {
    /**
     * 列表
     */
    this.list();
  }
};
</script>
<style lang="less" scoped>
/** 表格头部自动换行 */
/deep/ .ant-table-thead {
  .ant-table-row-cell-ellipsis .ant-table-column-title {
    white-space: normal;
  }
}

/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>
