<template>
  <awsui-layout>
    <awsui-main>
      <awsui-dialog
        v-loading="loading"
        element-loading-text="加载中"
        :border=false
        :title=title
        :visible.sync="dialogVisible"
        width="400px"
        :close-on-click-modal=false
        :before-close="handleClose">
        <!--awsui-dialog标签中的内容都可以自行去控制-->
        <div class="text-general-color">
          <awsui-form ref="form" :model="form" label-position="top" style="padding:0 5px">
            <div class="awsui-form-item">
              <label class="awsui-form-item__label">成员</label>
              <div class="awsui-form-item__content">
                <awsui-select filterable v-model="form.targetUserid" :options="form.userOpts" size="large" key="user"></awsui-select>
              </div>
            </div>
          </awsui-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <awsui-button :disabled="buttonDisabled" class="button-general-color" type="primary" @click="submit">确定</awsui-button>
            <awsui-button @click="cancel">取消</awsui-button>
        </span>
      </awsui-dialog>
    </awsui-main>
  </awsui-layout>
</template>

<script>
import awsuiAxios from "../../awsuiAxios";

export default {
  name: "MemberAdd",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    teamId: {// 小组ID
      type: String,
      default: ''
    },
    title: {// 标题
      type: String,
      default: ''
    },
    userid:{
      type: String,
      default:''
    },
    teamMembers:{
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      buttonDisabled: false,
      form: {
        userOpts: [],
        targetUserid: ''
      },
    }
  },
  methods: {
    initData() {
      const that = this;
      that.loading = true;
      // console.log("teams",that.teamMembers);
      that.teamMembers.forEach(member=>{
        let option = {
          value: member.userId,
          label: member.userName
        }
        // if (member.userId == that.userid){
        //   option.disabled = true;
        // }
        if (member.userId != that.userid){
          that.form.userOpts.push(option);
        }
      })
      that.loading = false;
    },
    clearAllData() {// 清空数据
      const that = this;
      that.form.userOpts = [];
      that.form.targetUserid = '';
      that.buttonDisabled = false;
    },
    handleClose(done) {
      this.closeDlalog('cancel');
      done();
    },
    cancel() {
      this.closeDlalog('cancel');
    },
    submit() {
      this.closeDlalog('save');
    },
    closeDlalog(type) {// 取消/确定之后的关闭
      const that = this;
      if (type == 'save') {

        if (that.form.targetUserid == '') {
          that.$message.error('请选择[成员]');
          return;
        }

        // 权限复制
        that.loading = true;
        that.buttonDisabled = true;
        const params = {
          url:'jd',
          data:{
            cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_member_perm_copy',
            teamId: that.teamId,
            userid: that.userid,
            targetUserid: that.form.targetUserid
          }
        };
        awsuiAxios.post(params).then(function (ro) {
          that.loading = false;
          if (ro.result == 'ok') {
            that.$message({
              message: '权限复制成功',
              type: 'success'
            });
            that.$emit('getResult', 'ok');
            that.dialogVisible = false;
            // 清空所有数据
            that.clearAllData();
          } else {
            that.$message({
              message: ro.msg,
              type: 'warning'
            });
            that.$emit('cancel');
            that.dialogVisible = false;
            // 清空所有数据
            that.clearAllData();
          }
        }).catch(error=>{
          console.log(error);
          that.loading = false;
          that.buttonDisabled = false;
        })
      } else {
        that.$emit('cancel');
        that.dialogVisible = false;
        // 清空所有数据
        that.clearAllData();
      }
    },

  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
      if (val) {// 打开
        this.initData();
      } else {// 关闭
      }
    }
  }
}
</script>

<style scoped>

</style>