<template>
  <div>
    <a-transfer
        :dataSource="leftTableData"
        :titles="[$t('functional-analysis.top-btn.available-language'), $t('functional-analysis.top-btn.selected-language')]"
        :targetKeys="rightTableData"
        :filterOption="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
        :showSelectAll="false"
        @change="onChange"
    >
      <template
          slot="children"
          slot-scope="{
            props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
            on: { itemSelectAll, itemSelect },
          }"
      >
        <a-table
            :rowSelection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
            :columns="direction === 'left' ? leftTableColumns : rightTableColumns"
            :dataSource="filteredItems"
            size="small"
            bordered
            :scroll="{ y: 'calc(88vh - 400px)' }"
            :loading="loading"
            :style="{ pointerEvents: listDisabled ? 'none' : null }"
            :customRow="
            ({ key, disabled: itemDisabled }) => ({
              on: {
                click: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })"
            :pagination="false"
        />
      </template>
    </a-transfer>
  </div>
</template>
<script>

export default {
  data() {
    return {
      /** 左侧表格列头 */
      leftTableColumns: [
        {
          title: () => this.$t('functional-analysis.top-btn.language'),
          dataIndex: 'lname',
          align: 'center',
        },
      ],
      /** 右侧表格列头 */
      rightTableColumns: [
        {
          title: () => this.$t('functional-analysis.top-btn.language'),
          dataIndex: 'lname',
          align: 'center',
        },
      ],
      /** 左侧表格数据 */
      leftTableData: [],
      /** 右侧表格数据 */
      rightTableData: [],
      /** 加载中... */
      loading: false,
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    /**
     * 选项在两栏之间转移时的回调函数
     * @param nextTargetKeys
     */
    onChange(nextTargetKeys) {
      if (nextTargetKeys.length > this.rightTableData.length) {
        let difference = new Set([...new Set(nextTargetKeys)].filter(x => !new Set(this.rightTableData).has(x)));
        this.save(difference, nextTargetKeys);
      } else {
        let difference = new Set([...new Set(this.rightTableData)].filter(x => !new Set(nextTargetKeys).has(x)));
        this.del(difference, nextTargetKeys);
      }
    },
    /**
     * 表格配置项
     * @param disabled
     * @param selectedKeys
     * @param itemSelectAll
     * @param itemSelect
     */
    getRowSelection({disabled, selectedKeys, itemSelectAll, itemSelect}) {
      return {
        // 选择框的默认属性配置
        getCheckboxProps: item => ({props: {disabled: disabled || item.disabled}}),
        onSelect({key}, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
        columnTitle: '\xa0',
      };
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.loading = true;
      let buttonRight = document.getElementsByClassName('anticon-right')
      buttonRight[0].className = 'iconfont iconjiahao pl4'
      let buttonLeft = document.getElementsByClassName('anticon-left')
      buttonLeft[0].className = 'iconfont iconjianhao pl4'
      _that.$api.getLanguageSettings({
        fmeaId: _that.$store.getters.rfmeaId
      }).then(res => {
        if (res.flag) {
          let lkey = res.data.lkey;
          let rdfmLanguages = res.data.rdfmLanguages;
          let rdfmcurrentNls = res.data.rdfmcurrentNls;
          // 左侧
          _that.leftTableData = [...rdfmLanguages, ...rdfmcurrentNls].map(item => {
            item.key = item.lkey.toString();
            item.disabled = _that.$api.isLook === '1' || item.lkey === lkey;
            item.lname = _that.$t('global-dict.select-nls.' + item.lkey);
            return item;
          });
          // 右侧
          _that.rightTableData = rdfmcurrentNls.map(item => item.lkey.toString());
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 保存
     * @param lkeys 语言标识集合
     * @param rightTableData 右侧表格数据
     */
    save(lkeys, rightTableData) {
      let _that = this;
      _that.loading = true;
      _that.$api.saveLanguageSettings({
        fmeaId: _that.$store.getters.rfmeaId,
        lkeys: lkeys
      }).then(res => {
        if (res.flag) {
          // 操作成功。
          _that.$message.success(res.message, 1);
          this.rightTableData = rightTableData;
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 删除
     * @param lkeys 语言标识集合
     * @param rightTableData 右侧表格数据
     */
    del(lkeys, rightTableData) {
      let _that = this;
      _that.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t( 'global-message.warn.can-not-undo'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onOk() {
          // 等待中
          _that.loading = true;
          _that.$api.deleteLanguageSettings({
            fmeaId: _that.$store.getters.rfmeaId,
            lkeys: lkeys
          }).then(res => {
            if (res.flag) {
              // 操作成功。
              _that.$message.success(res.message, 1);
              _that.rightTableData = rightTableData;
            } else {
              _that.$message.error(res.message, 1);
            }
          }).finally(() => {
            _that.loading = false;
          });
        },
        onCancel() {
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
/deep/ .ant-table-small.ant-table-bordered .ant-table-content {
  border-right: 0;
}

.f12current {
  font-size: 12px !important;
}
</style>
