<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="formPerms"
      :row-key="record => record.id"
      :pagination="false"
      bordered
    >
      <template #title>
        <div class="table-header">
          <a-radio-group :value="permSelect" @change="allSelect">
            <a-radio-button value="R">全部只读</a-radio-button>
            <a-radio-button value="E">全部可编辑</a-radio-button>
            <a-radio-button value="H">全部隐藏</a-radio-button>
          </a-radio-group>
        </div>
      </template>

      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'perm'">
          <a-radio-group v-model="record.perm" size="small">
            <a-radio-button value="R">只读</a-radio-button>
            <a-radio-button value="E">可编辑</a-radio-button>
            <a-radio-button value="H">隐藏</a-radio-button>
          </a-radio-group>
        </template>
        <template v-else-if="column.dataIndex === 'title'">
          {{ record.title }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'FormAuthorityConfig',
  data() {
    return {
      permSelect: '',
      columns: [
        {
          title: '表单字段',
          dataIndex: 'title',
          key: 'title'
        },
        {
          title: '权限设置',
          dataIndex: 'perm',
          key: 'perm'
        }
      ]
    };
  },
  computed: {
    ...mapState('workflow', ['selectedNode', 'design']),
    nowNode() {
      return this.selectedNode;
    },
    formData() {
      return this.design.formItems || [];
    },
    formPerms: {
      get() {
        return this.selectedNode.props.formPerms || [];
      },
      set(val) {
        this.$set(this.selectedNode.props, 'formPerms', val);
      }
    }
  },
  watch: {
    formPerms: {
      deep: true,
      handler(val) {
        const set = new Set(val.map(f => f.perm));
        this.permSelect = set.size === 1 ? [...set][0] : '';
      }
    }
  },
  mounted() {
    // 备份旧权限
    const oldPermMap = new Map(
      (this.formPerms || []).map(f => [f.id, Object.assign({}, f)])
    );

    // 清空并重新加载权限
    this.formPerms.length = 0;
    this.loadFormPerms(oldPermMap, this.formData);
  },
  methods: {
    allSelect(type) {
      this.permSelect = type;
      this.formPerms.forEach(f => (f.perm = type));
    },
    loadFormPerms(oldPermMap, forms) {
      forms.forEach(form => {
        if (form.name === 'SpanLayout') {
          this.loadFormPerms(oldPermMap, form.props.items || []);
        } else {
          const old = oldPermMap.get(form.id);
          if (old) {
            old.title = form.title;
            old.required = form.props.required;
            this.formPerms.push(old);
          } else {
            this.formPerms.push({
              id: form.id,
              title: form.title,
              required: form.props.required,
              perm: this.nowNode.type === 'ROOT' ? 'E' : 'R'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.table-header {
  margin-bottom: 12px;
}
</style>
