<!--
批量添加应用功能红名单
@Author: linqian
@Date: 2021-07-13
-->
<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 表格树 -->
    <vxe-table ref="vxeGrid" :data="sourceData" v-bind="gridOptions" highlight-hover-row>
      <vxe-table-column type="checkbox" width="60" align="center">
        <template #header="row">
          <span class="custom-checkbox">
            <el-checkbox
              :indeterminate="row.indeterminate"
              v-model="row.checked"
              @change="handleToggleAllCheck"
            ></el-checkbox>
          </span>
        </template>
        <template #checkbox="scoped">
          <span class="custom-checkbox">
            <el-checkbox
              :indeterminate="scoped.indeterminate"
              v-model="scoped.checked"
              @change="handleToggleCheck(scoped.row)"
            ></el-checkbox>
          </span>
        </template>
      </vxe-table-column>
      <vxe-table-column type="seq" width="60" align="center" title="序号"></vxe-table-column>
      <vxe-table-column
        align="left"
        header-align="center"
        title="应用功能名称"
        field="label"
        :treeNode="true"
      ></vxe-table-column>
    </vxe-table>

    <div v-footer>
      <dg-button @click="handleCancel">取消</dg-button>
      <dg-button type="primary" @click="handleSubmit">保存</dg-button>
    </div>
  </div>
</template>

<script>
import getTreeDataMixin from '@/components/transfer-tree/mixin';
import batchSetlevelAppFunc from './batch-setlevel-appfunc.vue';
import { getFunIdsInRedList } from '@/api/list-manage';
import searchBar from '@/components/search-bar';
import { appRestApi } from '@/api/application';
export default {
  props: {
    data: [Array]
  },
  mixins: [getTreeDataMixin],
  components: { searchBar },
  data() {
    return {
      conditionForm: [
        {
          label: '应用系统名称',
          name: 'applyName',
          op: '=',
          value: '',
          component: 'SelectApp',
          apiUrl: appRestApi.table,
          valueName: 'applyName',
          labelName: 'applyName'
        }
      ],
      value: [],
      valueName: 'id',
      childrenName: 'child',
      pidName: 'p',
      gridOptions: {
        border: true,
        rowId: 'id',
        treeConfig: { children: 'child', indent: 40 },
        loading: false,
        checkboxConfig: {
          // 设置复选框支持分页勾选，需要设置 rowId 行数据主键
          reserve: true
        }
      }
    };
  },
  computed: {},
  methods: {
    handleToggleCheck(row) {
      this.$refs.vxeGrid.toggleCheckboxRow(row);
    },
    handleToggleAllCheck() {
      this.$refs.vxeGrid.toggleAllCheckboxRow();
    },
    receiveSearch(val) {
      const appName = val.applyName.value;
      this.dataSource = this.data.filter((item) => item.label.indexOf(appName) > -1);
    },
    handleCancel() {
      this.$emit('close');
    },
    handleSubmit() {
      // 获取全选和半选的节点
      const checkboxRecords = this.$refs.vxeGrid.getCheckboxRecords(true);
      const checkboxReserveRecords = this.$refs.vxeGrid.getCheckboxReserveRecords(true);
      const indeterminateRecords = this.$refs.vxeGrid.getCheckboxIndeterminateRecords(true);
      const totalRecords = [...checkboxRecords, ...checkboxReserveRecords, ...indeterminateRecords].filter(
        (item) => item.appId
      );
      if (totalRecords.length > 0) {
        this.setLevel(totalRecords);
      } else {
        this.$message.warning('请至少选择一个应用功能!');
      }
    },
    /**
     * 设置名单级别
     */
    setLevel(selectedData) {
      const vm = this;
      const layer = this.$dgLayer({
        title: '设置红名单级别',
        content: batchSetlevelAppFunc,
        props: {
          data: this.data,
          value: selectedData.map((item) => item.id),
          selectedData,
          operate: 'add'
        },
        on: {
          success() {
            vm.$emit('success');
            layer.close(layer.dialogIndex);
          }
        },
        cancel: function (index) {
          // 关闭对应弹窗的ID
          layer.close(index);
          return false;
        },
        area: ['800px', '600px']
      });
    }
  },
  created() {
    // 查询已被添加为红名单的功能id
    getFunIdsInRedList().then((res) => {
      this.value = this.getChildKeys(this.data, res.data.content);
    });
  },
  mounted() {}
};
</script>

<style lang='scss' scoped>
@import url('../index.scss');
</style>