<template>
    <div class="communal-list">
        <div class="communal-title">
            <div>团组任务分配</div>
        </div>
        <div>
            <div style="display: flex;">
                <div style="width: 30%;">
                    <el-select v-model="diId" filterable clearable placeholder="请选择" style="width: 90%;"
                        @change="diidChange()">
                        <el-option v-for="item1 in delegationInfos" :key=item1.id :label=item1.name
                            :value=item1.id></el-option>
                    </el-select>
                </div>
                <div style="width: 30%;">
                    <el-select v-model="ctId" filterable clearable placeholder="请选择" style="width: 90%;"
                        @change="sdIdChange()">
                        <el-option v-for=" item1 in setData" :key=item1.id :label=item1.name :value=item1.id></el-option>
                    </el-select>
                </div>
                <div style="width: 30%;">
                    <el-button type="primary" style="margin-left: 10px;" @click="btn">保存</el-button>
                </div>
            </div>
        </div>
        <div>
            <span style="font-weight: bold;">团 号：</span>{{ DelegationInfo.tourCode }}
            <span style="font-weight: bold;">客 户：</span>{{ DelegationInfo.clientName }}
            <span style="font-weight: bold;">出访国家：</span>{{ DelegationInfo.visitCountry }}
            <span style="font-weight: bold;">起止日期：</span>{{ DelegationInfo.visitStartDate }} ～ {{
                DelegationInfo.visitEndDate }}
            <span style="font-weight: bold;">天数/人数：</span>{{ DelegationInfo.visitDays }}天/{{ DelegationInfo.visitPNumber }}人
        </div>
        <div style="background-color:#215CA6;color: aliceblue;">
            <div>人员安排</div>
        </div>
        <div style="margin-top: 10px;">
            <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(  item, index  ) in   user  " :key="index"
                    style="margin-left: 5px;width: 200px;margin-top: 10px;">
                    <el-checkbox :label="item.id" :value="userStr.indexOf(item.id) != -1" border @change="check(item.id)">{{
                        item.name
                    }}</el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rules: {},
            token: '',
            userId: 0,
            delegationInfos: [],
            setData: [],
            user: [],
            diId: '',
            ctId: '',

            userStr: [],
            TaskAssignment: {},
            DelegationInfo: {}
        }
    },
    methods: {
        GetTaskAssignmen() {
            var that = this
            var url = "/api/Groups/GetTaskAssignmen";
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.delegationInfos = res.data.data.delegationInfos;
                    that.setData = res.data.data.setData;
                    that.user = res.data.data.user;
                }
            })
        },
        TaskAssignmenQuery() {
            var that = this
            var diidI = 0;
            if (that.diId != '') {
                diidI = that.diId
            }
            var ctIdI = 0;
            if (that.ctId != '') {
                ctIdI = that.ctId
            }
            var url = "/api/Groups/TaskAssignmenQuery";
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    diId: diidI,
                    ctId: ctIdI,
                },
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.userStr = res.data.data.userStr
                    that.TaskAssignment = res.data.data.taskAssignment
                    that.DelegationInfo = res.data.data.delegationInfo
                } else {
                    that.userStr = [];
                    that.TaskAssignment = {};
                    that.DelegationInfo = {}
                }
            })
        },
        btn() {
            var id = 0
            var that = this;
            if (that.TaskAssignment.id != undefined) {
                id = that.TaskAssignment.id;
            }
            var url = "/api/Groups/GetTaskAssignmenOp";
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    diId: that.diId,
                    ctId: that.ctId,
                    uIdStr: that.userStr,
                    isEnable: 1,
                    createUserId: that.userId,
                    remark: ""
                },
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                } else {
                    that.$message.error('保存失败！' + resp.data.msg);
                }
            })
        },
        diidChange() {
            this.TaskAssignmenQuery()
            console.log(this.userStr)
        },
        sdIdChange() {
            this.TaskAssignmenQuery()
            console.log(this.userStr)
        },
        check(id) {
            var index = this.userStr.indexOf(id)
            if (index == -1) {
                this.userStr.push(id)
            } else {
                this.userStr = this.userStr.filter((x) => x !== id)
            }
        }
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.GetTaskAssignmen();
        this.TaskAssignmenQuery();
    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-top: 8px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}
</style>