<template>
  <el-drawer :append-to-body="true" title="审批人设置" :visible.sync="$store.state.auditSetting.approverDrawer" direction="rtl"
    class="set_promoter" size="550px" :before-close="saveApprover">
    <div class="demo-drawer__content">
      <div class="drawer_content">
        <div class="approver_content">
          <p class="tip">不选择所属项目表示由数据所属项目员工审批<br /></p>
          <CustomForm ref="saveForm" :value="approverConfig" label-width="100px">
            <DictSelect label="节点名称" prop="nodeType" dictType="audit_status" :filter="item => isAuditing(item.value)" :span="24"
                        :lg-span="24"
                        :md-span="24"
                        :sm-span="24"
                        :xs-span="24"
              @change="item => approverConfig.nodeName = item.label"  />
            <DictSelect label="审批人类型" prop="auditorType" dictType="auditor_type" :span="24"
                        :lg-span="24"
                        :md-span="24"
                        :sm-span="24"
                        :xs-span="24"/>
            <UserSelect v-if="approverConfig.auditorType.value === '1'" label="用户" prop="users" :span="24"
                        :lg-span="24"
                        :md-span="24"
                        :sm-span="24"
                        :xs-span="24" multiple />
            <RoleSelect v-if="approverConfig.auditorType.value === '2'" label="角色" prop="roles" :span="24"
                        :lg-span="24"
                        :md-span="24"
                        :sm-span="24"
                        :xs-span="24" multiple />
          </CustomForm>
        </div>

      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveApprover">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>

import DictSelect from '../form/DictSelect.vue';
import RoleSelect from '../form/RoleSelect.vue';
import UserSelect from '../form/UserSelect.vue';
import Input from '@/components/element/form/items/Input.vue';
import CustomForm from "../../../../components/CustomElement/CustomForm/CustomForm.vue";
import {isAuditing} from "../../../../utils/audit";

export default {
  components: {CustomForm, UserSelect, RoleSelect, DictSelect, Input },
  data() {
    return {
      approverConfig: {
        auditorType: { value: '1', label: '指定用户审批' },
        users: [],
        roles: [],
        signType: { value: '1', label: '会签' },
      },
    };
  },
  computed: {
    approverConfig1() {
      return this.$store.state.auditSetting.approverConfig.value;
    },
    approvers() {
      const { users = [], roles = [] } = this.approverConfig;
      return [...users, ...roles];
    },
  },
  watch: {
    approverConfig1(val) {
      this.approverConfig = val;
    },
  },
  methods: {
    isAuditing,
    async saveApprover() {
      await this.$refs.saveForm.validate();
      this.approverConfig.error = this.approvers.length === 0;
      this.$store.commit('updateApproverConfig', {
        value: this.approverConfig,
        flag: true,
        id: this.$store.state.auditSetting.approverConfig.id,
      });
      this.$emit('update:nodeConfig', this.approverConfig);
      this.closeDrawer();
    },
    closeDrawer() {
      this.$refs.saveForm.clearValidate();
      this.$store.commit('updateApprover', false);
    }
  }
}
</script>
<style lang="scss">
.set_promoter {
  .approver_content {
    padding-bottom: 10px;

    .tip {
      margin: 20px 0;
      width: 510px;
      padding: 17px;
      line-height: 25px;
      background: rgba(241, 249, 255, 1);
      border: 1px solid rgba(64, 163, 247, 1);
      color: #46a6fe;
      font-size: 14px;
    }
  }

  .approver_self_select .el-button,
  .approver_content .el-button {
    margin-bottom: 20px;
  }

  .approver_content .el-radio,
  .approver_some .el-radio,
  .approver_self_select .el-radio {
    width: 27%;
    margin-bottom: 20px;
  }

  .approver_manager p {
    line-height: 32px;
  }

  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }

  .approver_self {
    padding: 28px 20px;
  }

  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 0;
  }

  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
}

.demo-drawer__footer {
  padding: 10px 30px;
  border-top: 1px solid #f2f2f2;
}

.demo-drawer__footer .el-button {
  float: right;
  margin-right: 10px;
}

.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer_content {
  flex: 1;
}

.demo-drawer__content>div {
  border-top: 1px solid #f2f2f2;
}
</style>
