<template>
  <div>
    <!-- 表格 Start -->
    <a-table
        ref="tableRef"
        :rowSelection="{
          columnTitle: this.$t('functional-analysis.top-modal.current-default'),
          columnWidth: 100,
          type: 'radio',
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: () => {
            return {props: {
                  disabled: isExist // 禁选项
                }
              };
            }
          }"
        :loading="loading"
        :columns="tableColumns"
        :rowKey="(record, index) => {return index;}"
        size="small"
        :dataSource="tableData"
        :scroll="{ y: 'calc(88vh - 400px)' }"
        :pagination="false">
      <template v-slot:isDefault="text, record">
        <div v-if="record.isDefault === '1'">
          <span class="solid-circle-black"></span>
        </div>
      </template>
      <template v-slot:isDelete="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-show="!isExist"
          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: 'name',
          align: 'center',
          width: 650,
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-modal.system-default'),
          align: 'center',
          width: 100,
          scopedSlots: {customRender: 'isDefault'},
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-modal.status'),
          align: 'center',
          scopedSlots: {
            customRender: 'isDelete' /** 1: 禁用 0：启用 */
          },
          ellipsis: true
        }
      ],
      /** 表格源 */
      tableData: [],
      /** 单选 */
      rowSelectionType: "radio",
      /** 选中项 */
      selectedRowKeys: [],
      /** 选中行信息 */
      selectedRow: {},
      /** 加载中 */
      loading: false,
      /** 保存加载 */
      saveLoading: false,
      /** 主键 */
      id: '',
      /** 是否存在 */
      isExist: false
    };
  },
  methods: {
    /**
     * 初始化右侧树
     */
    initRightTree() {
      this.$emit("initRightTree");
    },

    /**
     * 单选框改变回调
     * @param selectedRowKeys
     * @param selectedRows
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      let row = selectedRows[0];
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRow = row;
    },

    /**
     * 操作行回调
     * @param record
     * @param index
     * @returns {{on: {click: *}}}
     */
    customRow(record, index) {
      var _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            _that.selectedRowKeys = [index];
            _that.selectedRow = record;
          }
        }
      };
    },

    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.loading = true;
      _that.$api.getDFMEAMaturityList({
        fmeaId: _that.$store.getters.rfmeaId
      }).then(res => {
        if (res.flag) {
          if (res.data.id && res.data.rdfmMaturityModels) {
            for (let i = 0; i < res.data.rdfmMaturityModels.length; i++) {
              if (res.data.rdfmMaturityModels[i].id === res.data.id) {
                _that.selectedRowKeys[0] = i;
              }
            }
          }
          _that.tableData = res.data.rdfmMaturityModels;
          _that.isExist = res.data.isExist;
        } 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.saveDFMEAMaturityList({
            fmeaId: _that.$store.getters.rfmeaId,
            id: _that.selectedRow.id
          }).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;
  }
}
</style>
