<template>
  <Drawer title="抄送人设置" :value="copyerDrawer" placement="right" class="set_copyer" width="550px" :closable="false" @on-close="closeDrawer(false)">
<!--    {{ copyerConfig }}-->
    <div class="demo-drawer__content">
      <div class="copyer_content drawer_content">
        <DkForm slot="content" ref="formInline" v-model="formData" :col-count="1">
          <!--用户-->
          <DkFormItem label="用户" prop="userId" >
            <SelectMagnifier ref="user" v-model="copyerConfig.nodeObjectIdList" :display-text="copyerConfig.userNames"
                             :type="this.$config.MagnifierType.user"
                             :multiple="true"
                             @ok="userChange"></SelectMagnifier>
          </DkFormItem>
        </DkForm>
      </div>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="closeDrawer">取 消</Button>
        <Button type="primary" @click="saveCopyer">确 定</Button>
      </div>
    </div>
  </Drawer>
</template>
<script>
import {mapState, mapMutations} from 'vuex'

export default {
  components: {
  },
  data() {
    return {
      formData: {},
      copyerConfig: {},
      ccSelfSelectFlag: [],
      copyerVisible: false,
      checkedList: [],
      userList: [],//用戶
    }
  },
  computed: {
    ...mapState(['copyerDrawer', 'copyerConfig1']),
  },
  watch: {
    copyerConfig1(val) {
      this.copyerConfig = val.value;
      this.ccSelfSelectFlag = this.copyerConfig.ccSelfSelectFlag == 0 ? [] : [this.copyerConfig.ccSelfSelectFlag]
    }
  },
  methods: {
    ...mapMutations(['setCopyerConfig', 'setCopyer']),
    selectUserOk(val) {
      this.$set(this.copyerConfig,'nodeObjectList',[...this.$appfunc.replaceJsonKey(this.$appfunc.replaceJsonKey(val, "userName", "name"), "userId", "id")])
    },
    saveCopyer() {
      this.copyerConfig.ccSelfSelectFlag = this.ccSelfSelectFlag.length == 0 ? 0 : 1;
      this.copyerConfig.error = !this.$appfunc.copyerStr(this.copyerConfig);
      this.setCopyerConfig({
        value: this.copyerConfig,
        flag: true,
        id: this.copyerConfig1.id
      })
      this.closeDrawer();
    },
    closeDrawer() {
      this.setCopyer(false)
    },

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

<style lang="less" scoped>
.set_copyer {
  .copyer_content {
    padding: 20px 20px 0;

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

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
}

.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>
