<template>
  <div>
    <div class="flex mb">
      <a-button
          v-if="this.$api.isLook !== '1'"
          @click="create"
          type="primary">
        {{ $t('global-btn.add') }}
      </a-button>
    </div>
    <!-- 表格 Start -->
    <a-table
        ref="tableRef"
        :loading="loading"
        bordered
        :columns="tableColumns"
        :rowKey="(record, index) => {return index;}"
        size="small"
        :dataSource="tableData"
        :scroll="{ y: 'calc(88vh - 400px)' }"
        :pagination="false">
      <template v-slot:action="text, record" v-if="$api.isLook !== '1'">
        <span>
          <!-- 编辑 -->
          <a class="operate-btn" @click="update(record)">
            <a-tooltip :title="$t('global-btn.edit')">
              <i class="iconfont iconicon-bainji"></i>
            </a-tooltip>
          </a>
          <a class="ml10 operate-btn" @click="del(record)">
            <!-- 删除 -->
            <a-tooltip :title="$t('global-btn.delete')">
              <i class="iconfont iconshanchu"/>
            </a-tooltip>
          </a>
        </span>
      </template>
    </a-table>
    <!-- 表格 End -->

    <!-- 对话框 Start -->
    <a-modal
        :visible="showModal"
        :title="title"
        destroy-on-close
        @cancel="closeModal">
      <a-form layout="inline">
        <a-form-item
            required
            :label="$t('functional-analysis.top-modal.name')">
          <a-input
              allowClear
              :maxLength="100"
              v-model="memo"
              :placeholder="$t('functional-analysis.top-modal.please-enter-name')"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="back" @click="closeModal">
          {{ $t('global-btn.cancel') }}
        </a-button>
        <a-button key="submit" type="primary" :loading="saveLoading" @click="save">
          {{ $t('global-btn.confirm') }}
        </a-button>
      </template>
    </a-modal>
    <!-- 对话框 End -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: {
          span: 1
        },
        wrapperCol: {
          span: 11
        }
      },
      // 表头
      tableColumns: [
        {
          title: () => this.$t('functional-analysis.top-modal.name'),
          dataIndex: 'memo',
          align: 'center',
          width: 800,
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-modal.operate'),
          align: 'center',
          scopedSlots: {customRender: 'action'},
          ellipsis: true
        }
      ],
      tableData: [],
      loading: false,
      saveLoading: false,
      showModal: false,
      title: '',
      memo: '',
      userDefineId: '',
    };
  },
  methods: {
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.loading = true;
      _that.$api.getUserDefinedProperties({
        fmeaId: _that.$store.getters.rfmeaId,
        fmeaFlag: 4,
      }).then(res => {
        if (res.flag) {
          _that.tableData = res.data.rfmUserDefines;
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 新增
     */
    create() {
      this.title = this.$t('functional-analysis.top-modal.add');
      this.showModal = true;
    },
    /**
     * 修改
     */
    update(obj) {
      this.title = this.$t('functional-analysis.top-modal.update');
      this.memo = obj.memo;
      this.userDefineId = obj.userDefineId;
      this.showModal = true;
    },
    /**
     * 删除
     */
    del(obj) {
      let _that = this;
      this.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t('global-message.warn.sure-delete'),
        icon: 'aaoopqa', //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onOk() {
          _that.$api.deleteUserDefinedProperties({
            userDefineId: obj.userDefineId
          }).then(res => {
            if (res.flag) {
              _that.showModal = false;
              _that.$message.success(res.message, 1);
              _that.list();
            } else {
              _that.$message.error(res.message, 1);
            }
          });
        },
        onCancel() {
        }
      });
    },
    /**
     * 关闭
     */
    closeModal() {
      this.showModal = false;
      this.memo = '';
    },
    /**
     * 保存
     */
    save() {
      let _that = this;

      // 验证非空
      if (!_that.memo.trim()) return _that.$message.error(this.$t('global-message.warn.please-enter-name'), 1);
      // 等待中
      _that.saveLoading = true;
      if (_that.userDefineId) {
        _that.$api.updateUserDefinedProperties({
          fmeaId: _that.$store.getters.rfmeaId,
          updatememo: _that.memo,
          fmeaFlag: 1,
          hiduserDefineId: _that.userDefineId,
        }).then(res => {
          if (res.flag) {
            _that.$message.success(res.message, 1);
            _that.closeModal();
            _that.list();
          } else {
            _that.$message.error(res.message, 1);
          }
        }).finally(() => {
          _that.saveLoading = false;
          _that.userDefineId = '';
        });
      } else {
        _that.$api.saveUserDefinedProperties({
          fmeaId: _that.$store.getters.rfmeaId,
          memo: _that.memo,
          fmeaFlag: 1,
        }).then(res => {
          if (res.flag) {
            _that.$message.success(res.message, 1);
            _that.closeModal();
            _that.list();
          } else {
            _that.$message.error(res.message, 1);
          }
        }).finally(() => {
          _that.saveLoading = false;
        });
      }
    }
  },
  mounted() {
    /**
     * 列表
     */
    this.list();
  }
};
</script>
<style lang="less" scoped>

.icon-color {
  color: #1890FF;
}

/deep/ .ant-table-tbody {
  .ant-table-row-cell-ellipsis:nth-of-type(1) {
    text-align: left !important;
  }
}

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