<!-- 保姆任务清单设置 -->
    <template>
    <div>
        <el-row>
            <el-row style=" line-height: 35px;">每日任务 <a @click="clickTask(1)" style="color: #1890ff">&nbsp;&nbsp;编辑</a></el-row>
            <div v-for="(item,index) in dayTask" :key="index">
                <el-row style="margin-bottom: 10px;" v-if="item.chooseSize>0">
                    <!--大类-->
                    <span class="worktypeclass">&nbsp;&nbsp;{{item.categoryName}}&nbsp;</span>
                    <span v-for="(items,indexs) in item.TaskItems" :key="indexs" class="smalltype">
                        <!--小类-->
                        <span class="childtype" v-if="items.choose==1">{{items.itemName}}</span>
                    </span>
                </el-row>
            </div>
        </el-row>

        <el-row>
            <el-row style=" line-height: 35px;">每周任务 <a @click="clickTask(2)" style="color: #1890ff">&nbsp;&nbsp;编辑</a></el-row>
            <div v-for="(item,index) in weekTask" :key="index">
                <el-row style="margin-bottom: 10px;" v-if="item.chooseSize>0">
                    <!--大类-->
                    <span class="worktypeclass">&nbsp;&nbsp;{{item.categoryName}}&nbsp;</span>
                    <span v-for="(items,indexs) in item.TaskItems" :key="indexs" class="smalltype">
                        <!--小类-->
                        <span class="childtype" v-if="items.choose==1">{{items.itemName}}</span>
                    </span>
                </el-row>
            </div>
        </el-row>

        <el-row>
            <el-row style=" line-height: 35px;">每月任务 <a @click="clickTask(3)" style="color: #1890ff">&nbsp;&nbsp;编辑</a></el-row>
            <div v-for="(item,index) in monthTask" :key="index">
                <el-row style="margin-bottom: 10px;" v-if="item.chooseSize>0">
                    <!--大类-->
                    <span class="worktypeclass">&nbsp;&nbsp;{{item.categoryName}}&nbsp;</span>
                    <span v-for="(items,indexs) in item.TaskItems" :key="indexs" class="smalltype">
                        <!--小类-->
                        <span class="childtype" v-if="items.choose==1">{{items.itemName}}</span>
                    </span>
                </el-row>
            </div>
        </el-row>

        <!--修改任务 -->
        <el-dialog :title="settingTypeName" :visible.sync="showTaskSet" width="900px" :close-on-click-modal="false" center>
            <el-form>
                <div v-for="(item,index) in tempData" :key="index">
                    <el-row style="margin-bottom: 10px;">
                        <!--大类-->
                        <span class="worktypeclass">&nbsp;&nbsp;{{item.categoryName}}&nbsp;</span>
                        <span v-for="(items,indexs) in item.TaskItems" :key="indexs">
                            <!--小类-->
                            <span class="childtype" v-if="items.choose==1" @click="chooseItem(item.categoryId,items.itemId)">{{items.itemName}}</span>
                            <span class="childtypeNoChoose" v-if="items.choose==0" @click="chooseItem(item.categoryId,items.itemId)">{{items.itemName}}</span>
                        </span>
                    </el-row>
                    <br />
                </div>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showTaskSet = false">取消</el-button>
                <el-button type="primary" @click="saveTaskSet">保存</el-button>
            </div>
        </el-dialog>

    </div>

</template>
    
    <script>
import { taskItemList, setTask } from "@/api/customerorder";
export default {
    components: {},
    props: {
        orderId: "",
        taskChildId: "",
    },
    data() {
        return {
            tempData: [], //修改时临时数据
            showTaskSet: false,
            settingType: 1,
            settingTypeName: "",
            dayTask: [],
            weekTask: [],
            monthTask: [],
        };
    },
    created() {
        // this.getTaskItemList(1);
        // this.getTaskItemList(2);
        // this.getTaskItemList(3);
    },
    activated() {},
    methods: {
        saveTaskSet() {
            //保存编辑的任务
            let taskItems = [];
            for (let i = 0; i < this.tempData.length; i++) {
                let taskItem = {
                    categoryId: this.tempData[i].categoryId,
                    itemIds: [],
                };

                for (let k = 0; k < this.tempData[i].TaskItems.length; k++) {
                    if (this.tempData[i].TaskItems[k].choose == 1) {
                        let item = {
                            itemId: this.tempData[i].TaskItems[k].itemId,
                            choose: 1,
                        };
                        taskItem.itemIds.push(item);
                    }
                }

                if (taskItem.itemIds.length > 0) {
                    taskItems.push(taskItem);
                }
            }

            let reqData = {
                id: this.orderId,
                taskType: this.settingType,
                taskItems: [],
                taskChildId: this.taskChildId,
            };
            reqData.taskItems = taskItems;
            console.log(reqData);

            setTask(reqData)
                .then((res) => {
                    if (res.data.errno == 0) {
                        this.$message.success(`操作成功`);
                        this.showTaskSet = false;
                        //刷新数据
                        this.getTaskItemList(1);
                        this.getTaskItemList(2);
                        this.getTaskItemList(3);
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
        chooseItem(categoryId, itemId) {
            //点击选择的任务item
            console.log(categoryId, itemId);
            for (let i = 0; i < this.tempData.length; i++) {
                if (this.tempData[i].categoryId == categoryId) {
                    for (
                        let k = 0;
                        k < this.tempData[i].TaskItems.length;
                        k++
                    ) {
                        if (this.tempData[i].TaskItems[k].itemId == itemId) {
                            if (this.tempData[i].TaskItems[k].choose == 1) {
                                this.tempData[i].TaskItems[k].choose = 0;
                            } else {
                                this.tempData[i].TaskItems[k].choose = 1;
                            }
                        }
                    }
                }
            }
        },
        clickTask(type) {
            //修改任务弹窗
            this.showTaskSet = true;
            this.settingType = type;
            this.tempData = [];
            if (type == 1) {
                this.settingTypeName = "每日任务编辑";
                this.tempData = JSON.parse(JSON.stringify(this.dayTask));
            }
            if (type == 2) {
                this.settingTypeName = "每周任务编辑";
                this.tempData = JSON.parse(JSON.stringify(this.weekTask));
            }
            if (type == 3) {
                this.settingTypeName = "每月任务编辑";
                this.tempData = JSON.parse(JSON.stringify(this.monthTask));
            }
        },
        getTaskItemList(type) {
            taskItemList({ id: this.orderId, taskType: type })
                .then((res) => {
                    if (res.data.errno == 0) {
                        if (type == 1) {
                            //日
                            this.dayTask = res.data.data;
                        }
                        if (type == 2) {
                            //周
                            this.weekTask = res.data.data;
                        }
                        if (type == 3) {
                            //月
                            this.monthTask = res.data.data;
                        }
                    } else {
                        this.$message.error(res.data.errmsg);
                    }
                })
                .catch((e) => {
                    this.$message.error(e.data.errmsg);
                });
        },
    },
};
</script>
    
<style scoped>
.worktypeclass {
    /* font:bold; */
    font-weight: 600;
    font-size: 16px;
}
.childtype {
    border: 1px solid #40ccf7;
    color: #40ccf7;
    border-radius: 15px;
    padding: 3px 10px 3px 10px;
    background: #e8f8ff;
    cursor: pointer;
}
.childtypeNoChoose {
    border: 1px solid #dddade;
    color: #dddade;
    border-radius: 15px;
    padding: 3px 10px 3px 10px;
    cursor: pointer;
}
.smalltype {
    margin-right: 6px;
}
</style>