<template>
  <Drawer title="审批人设置" :value="approverDrawer" placement="right" class="set_promoter" width="550px" :closable="false"
          @on-close="closeDrawer">
    <div class="demo-drawer__content">
      <div class="drawer_content">
        <div class="approver_content">
          <RadioGroup v-model="approverConfig.approverType" class="clear" @on-change="changeType">
            <Radio :label="1">用户</Radio>
            <Radio :label="2">职务</Radio>
          </RadioGroup>
          <DkForm slot="content" ref="formInline" v-model="formData" :col-count="1">
            <!--用户-->
            <DkFormItem label="用户" prop="userId" v-if="approverConfig.approverType==1">
              <SelectMagnifier ref="user" v-model="approverConfig.nodeObjectIdList" :display-text="approverConfig.userNames"
                               :type="this.$config.MagnifierType.user"
                               :multiple="true"
                               @ok="userChange"></SelectMagnifier>
            </DkFormItem>
            <!--职务-->
            <DkFormItem :label="'职务'" prop="postName" v-if="approverConfig.approverType==2">
              <SelectPop
                :title="$t('postName')"
                ref="postSelect"
                :multiple="true"
                v-model="approverConfig.nodeObjectIdList"
                :options="postList"
                :label-in-value="true"
                labelKey="postName"
                valueKey=postId
                @on-select-label="postChange"
                @on-clear="userOrPostClear">
              </SelectPop>
            </DkFormItem>
          </DkForm>
        </div>
      </div>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="closeDrawer">取 消</Button>
        <Button type="primary" @click="saveApprover">确 定</Button>
      </div>
    </div>
  </Drawer>
</template>
<script>
import {mapState, mapMutations} from 'vuex'

export default {
  components: {},
  props: ['directorMaxLevel'],
  data() {
    return {
      formData: {},
      approverConfig: {},
      approverVisible: false,
      approverRoleVisible: false,
      approverEmplyessList: [],
      checkedRoleList: [],
      checkedList: [],
      postList: [],//职务
      userList: [],//用戶
    }
  },
  computed: {
    ...mapState(['approverConfig1', 'approverDrawer']),
  },
  watch: {
    approverConfig1(val) {
      this.approverConfig = val.value;
    }
  },
  methods: {
    ...mapMutations(['setApproverConfig', 'setApprover']),

    changeType(val) {
      console.log('v', val)
      this.approverConfig.nodeObjectList = [];
      this.approverConfig.nodeObjectIdList = [];
      this.approverConfig.nodeObject = undefined;
      this.approverConfig.examineMode = 1;
      this.approverConfig.noHanderAction = 2;
      if (val == 2) {
        this.approverConfig.directorLevel = 1;
      } else if (val == 4) {
        this.approverConfig.selectMode = 1;
        this.approverConfig.selectRange = 1;
      } else if (val == 7) {
        this.approverConfig.examineEndDirectorLevel = 1
      }
    },
    saveApprover() {
      console.log('3343',this.approverConfig)
      this.approverConfig.error = !this.$appfunc.setApproverStr(this.approverConfig)
      this.setApproverConfig({
        value: this.approverConfig,
        flag: true,
        id: this.approverConfig1.id
      })
      this.$emit("update:nodeConfig", this.approverConfig);
      this.closeDrawer()
    },
    closeDrawer() {
      this.setApprover(false)
    },
    /**
     * @desc   : 初始加载数据
     * @author : 张潇木
     * @date   : 2022-4-28 14:06
     */
    getWebInitData() {
      // 获取职务
      this.getPost();
    },
    /**
     * @desc   : 获取职务
     * @author : 周兴
     * @date   : 2023/9/14 11:35
     */
    getPost() {
      let params = {
        ftyId: this.$store.state.user.ftyId,
      }
      this.excute(this.$service.commonService, this.$service.commonService.getPost, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.postList = res.data
        }
      })
    },
    /**
     * @desc   : 职位变化事件
     * @author : 张潇木
     * @date   : 2022-4-28 17:05
     */
    postChange(val) {
      this.approverConfig.nodeObjectList = [...this.$appfunc.replaceJsonKey(this.$appfunc.replaceJsonKey(val, "postName", "name"), "postId", "id")]
    },

    /**
     * @desc   : 用戶变化事件
     * @author : 张潇木
     * @date   : 2022-10-09 15:41
     */
    userChange(val) {
      if(val){
        this.approverConfig.userNames = this.$refs.user.selectedValue;
        this.approverConfig.nodeObjectList = [...this.$appfunc.replaceJsonKey(this.$appfunc.replaceJsonKey(val, "userName", "name"), "userId", "id")]
      }
    },

    /**
     * @desc   : 清空用戶事件
     * @author : 张潇木
     * @date   : 2022-10-09 15:41
     */
    userOrPostClear() {
      this.approverConfig.nodeObjectList = []
    }
  },
  created() {
    this.getWebInitData();  // 获取基础数据
  }
}
</script>
<style lang="less" scoped>
.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

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

  .approver_content .Radio,
  .approver_some .Radio,
  .approver_self_select .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 {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}


</style>
