<template>
    <div class="content" v-loading="loading">
        <div class="search">
            <el-input clearable v-model="input1" placeholder="项目名称模糊查找" @change="taskAuditList">
            </el-input>
            <el-input style="margin: 0 10px;" clearable v-model="input2" placeholder="人员模糊查找"
                @change="taskAuditList"></el-input>
            <div style="text-align: center;width: 650px;margin-right: 20px;">
                <el-radio-group v-model="audit">
                    <el-radio :label="false.toString()">待审核</el-radio>
                    <el-radio :label="true.toString()">已审核</el-radio>
                </el-radio-group>
            </div>
            <el-button type="primary" size="small" @click="taskAuditList">查询</el-button>

            <span style="color: #1478F6;font-weight: 600;font-size: 25px; margin-left: 30px;"> {{ total }}</span>
        </div>
        <div class="item">
            <div v-for="(item, index) in  items " :key="index" class="box">
                <div class="top">
                    <div style="display: flex;justify-content: space-between;margin:10px 0 ;">
                        <span style=" font-size: 18px;  font-weight: 500; ">{{ item.projectName }}</span>
                        <span>{{ item.overDate | getDate }}</span>
                    </div>
                    <div style="font-size: 16px;display: flex;justify-content: space-between;margin: 10px 0;">
                        <span>{{ item.cPersonName }}</span>
                        <span>{{ item.hour }}</span>
                        <span
                            style="color:#52C41A;width: 80px;height: 22px;background: #FFFFFF;border-radius: 4px;text-align: center;font-size: 14px;line-height: 22px;">{{
                                item.isOverName
                            }}</span>
                    </div>
                </div>
                <div>
                    <p class="left-border"><span style="margin-left: 15px;">任务内容:</span>
                    </p>
                    <div
                        style="height: 110px;padding: 5px 10px;border-radius: 8px;border: 1px solid #E0E2E6;color:#999999;">
                        {{
                            item.content }}
                    </div>
                </div>
                <div>
                    <p class="left-border"><span style="margin-left: 15px;">反馈内容:</span>
                    </p>
                    <div
                        style="height: 110px;padding: 5px 10px;border-radius: 8px;border: 1px solid #E0E2E6;color:#999999;">
                        {{ item.backContent }} </div>
                </div>
                <div style="text-align: center;padding: 10px;">
                    <el-radio-group v-model="item['radio' + index]" :name="index">
                        <el-radio :label=0>A</el-radio>
                        <el-radio :label=-15>B</el-radio>
                        <el-radio :label=-30>C</el-radio>
                    </el-radio-group>
                </div>
                <div>
                    <p class="left-border"><span style="margin-left: 15px;">结果复议:</span>
                    </p>
                    <el-input type="textarea" :rows="6" placeholder="请输入复议内容" v-model="item['result' + index]"></el-input>
                </div>
                <div style="position: absolute;right: 10px;bottom: 30px;">
                    <el-button type="success" size="small" @click="taskAudit(item, index)">审核</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { taskAuditList, taskAudit } from "@/api/apis/myJob";

export default {
    components: {

    },
    data() {
        return {
            result: '',
            items: [],
            radio: null,
            total: '',
            input1: '',
            input2: '',
            loading: false,
            audit: false.toString(),
        };
    },

    mounted() {
        this.taskAuditList()
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('T')[0]
        },
    },

    methods: {
        async taskAuditList() {
            this.loading = true
            let data = {
                projectName: this.input1,
                personName: this.input2,
                auditState: this.audit,
            }
            let res = await taskAuditList(data);
            if (res.code == 1) {
                this.total = res.data[0]
                this.items = res.data[1]
                // this.items.forEach((el, index) => {
                //     // el.radio = '';
                //     // el['result' + index] = "0"
                // })
                this.loading = false

            }

        },
        async taskAudit(item, index) {
            // console.log(item);
            let data = {
                id: item.billid,
                auditState: item['radio' + index],
                auditResult: item['result' + index]
            }
            let res = await taskAudit(data);
            if (res.code == 1) {
                this.$vmNews("审核成功", "success");
                this.taskAuditList()

            }
        },

    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    width: 100%;
    min-width: 600px;
    padding: 20px 20px;
    // display: flex;
    // flex-direction: column;


    .search {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 650px;
        margin-bottom: 10px;

        ::v-deep .el-input__inner {
            // width: 200px;
        }
    }

    .item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        height: calc(100% - 80px);
        overflow-x: auto;
        border-top: 1px solid #F2F2F2;
        padding-top: 10px;

        .box {
            position: relative;
            border: 1px solid #d5d7d6;
            background: #FAFAFA;
            box-shadow: 0px 2px 8px 4px #F8F8F8;
            border-radius: 8px;
            border: 1px solid #E0E2E6;
            margin-right: 10px;
            width: 360px;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .top {
                width: 360px;
                margin-left: -10px;
                padding: 10px;
                color: #FFFFFF;
                height: 94px;
                background: #1478F6;
                border-radius: 7px;
                font-family: PingFangSC;
                display: flex;
                flex-direction: column;
                justify-content: center;

            }

            .left-border {
                border-left: 3px solid #2261F6;
                margin: 15px 10px 15px 0;
            }
        }
    }




}
</style>