<!-- 批量删除用户权限 -->
<template>
  <div class="sidelip-box">
    <Form
      ref="searchForm"
      slot="search-bar"
      :model="searchForm"
      :rules="rules"
      :label-width="180"
    >
      <Row
        :gutter="16"
        type="flex"
        justify="center"
        class="code-row-bg"
      >
        <Col :span="16">
        <Form-item
          prop="companyCodes"
          label="核算机构"
        >
          <SelectCompany
            size="small"
            style="width:240px"
            :disabled="true"
          />
        </Form-item>
        </Col>
      </Row>

      <Row
        :gutter="16"
        type="flex"
        justify="center"
        class="code-row-bg"
      >
        <Col :span="16">
        <Form-item
          prop="manuallyCreator"
          label="付款准备手工操作用户"
        >
          <SelectEmployee
            :value="showEmployeeName(searchForm.manuallyCreator)"
            @handleSelect="selectEmployee"
          />
        </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { SelectCompany } from '@paymentPlatformComps/index.js';
import Server from '../server';
const server = new Server();

export default {
  name: 'DelEmployeePermission',

  components: {
    SelectCompany
  },

  props: {
    companyCodes: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    }
  },

  data() {
    return {
      searchForm: {
        companyCodes: this.companyCodes,
        manuallyCreator: [] // 手工操作用户 数组
      },
      rules: {
        manuallyCreator: [
          {
            required: true,
            message: '请选择付款准备手工操作用户'
          }
        ]
      }
    };
  },

  computed: {},

  watch: {},

  created() {
    console.log('companyCodes', this.searchForm.companyCodes);
    this.setPageActions();
  },

  mounted() {},

  methods: {
    // 设置弹出框属性
    setPageActions() {
      this.$emit('setTitle', '付款工作台配置');

      this.$emit('SetPageActions', [
        {
          text: this.$t('保存'),
          theme: 'primary',
          icon: 'edit',
          action: 'EditEmail',
          handle: this.save
        }
      ]);
    },
    // 保存
    save() {
      const manualEmpId = this.showEmployeeId(this.searchForm.manuallyCreator); // 手工操作用户Id

      const datas = {
        ouCodeList: this.searchForm.companyCodes,
        manualEmpId: manualEmpId[0]
      };

      console.log('saving', datas);

      this.$refs.searchForm.validate(valid => {
        if (valid) {
          // 提交数据
          server
            .delUserPermissionBatch(datas)
            .then(response => {
              if (response.statusCode !== '-1') {
                this.$Message.success('保存成功');
                this.$emit('close');
              } else {
                this.$Message.error(response.msg);
              }
            })
            .catch(err => {});
        } else {
          this.$Message.error({
            content: '未通过验证',
            duration: 3
          });
        }
      });
    },

    // 选择 付款准备手工操作用户
    selectEmployee(data) {
      console.log(data);
      if (data.length > 1) {
        return this.$Message.warning('最多只能选一个');
      }
      this.searchForm.manuallyCreator = data;
    },

    showEmployeeName(data) {
      if (!data || !(data instanceof Array)) {
        return '';
      }
      const names = [];
      data.map(item => {
        names.push(item.title);
      });
      return names.join(',');
    },

    showEmployeeId(data) {
      if (!data || !(data instanceof Array)) {
        return [];
      }
      const ids = [];
      data.map(item => {
        ids.push(item.id);
      });
      return ids;
    }
  }
};
</script>

<style lang='less' scoped>
</style>
