<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="任务编码" prop="task_sn" width="150"></el-table-column>
        <el-table-column label="任务信息" prop="id" width="300">
            <template #default="scope">
                <div class="info">
                    <el-tooltip effect="dark" :content="scope.row.title" placement="top-start">
                        <div class="goods-name">
                            {{ scope.row.title }}
                        </div>
                    </el-tooltip>
                    <div class="goods-desc">任务ID：{{ scope.row.job_id }}</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="任务平台" prop="name">
            <template #default="scope">
                <div class="task-flex-center" v-if="scope.row.categoryJoin">
                    <div class="img" v-if="scope.row.categoryJoin.icon"><el-image :src="scope.row.categoryJoin.icon" fit="cover" style="width: 20px;"></el-image></div>
                    <div class="info">{{ scope.row.categoryJoin.name }}</div>
                </div>
                <el-tag v-else>-</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="投放商品" prop="name" width="300">
            <template #default="scope">
                <div class="task-flex">
                    <div class="img"><el-image :src="scope.row.product_cover_url" fit="cover" style="width: 40px;"></el-image></div>
                    <div class="info">
                        <el-tooltip effect="dark" :content="scope.row.product_name" placement="top-start">
                            <div class="goods-name">
                                {{ scope.row.product_name }}
                            </div>
                        </el-tooltip>
                        <div class="goods-desc">ID：{{ scope.row.product_id }}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="报名进度" prop="name" width="160">
            <template #default="scope">
                <div class="task-flex-p">
                    <div class="flex-s"><el-progress :text-inside="true" striped :percentage="scope.row.progress" :show-text="false" /></div>
                    <div class="flex-n">{{ scope.row.sign_number }}/{{ scope.row.need_number }}</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="报名截止时间" prop="expiration_time_end" width="150"></el-table-column>
        <el-table-column label="状态" prop="status" align="center">
            <template #default="scope">
                <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_at" width="150"></el-table-column>
        <el-table-column label="操作" width="140" align="left" fixed="right">
            <template #default="scope">
                <el-button size="small" @click="table_view(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="table_del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </scTable>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
</template>

<script>
import formMain from './form';
export default {
    components: {
        formMain
    },
    data(){
        return {
            list: {
                apiObj: this.$API.task.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{}
        }
    },
    
    methods: {
        table_auth(data){
            this.$nextTick(() => {
                this.$refs.comboMain.open("edit").setData(data)
            })
        },
        table_view(data){
            this.$nextTick(() => {
                this.$refs.formMain.open("edit").setData(data)
            })
        },
        table_del(data){
            this.$confirm(`确定要执行删除吗`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var resp = await this.$API.task.del.post({"id":data.id});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.refresh()
            }).catch(()=>{})
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
        table_passwd(row){
            this.$nextTick(() => {
                this.$refs.userPasswd.open("edit").setData(row)
            })
        }
    }
}
</script>

<style>
.task-flex{display: flex;gap: 10px;}
.goods-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.goods-desc{font-size: 12px;color: #999;}
.flex-s{flex: 1;}
.task-flex-p{display: flex;align-items: center;gap: 5px;}
.task-flex-center{display: flex;align-items: center;gap: 5px;}
.task-flex-center .img{display: flex;align-items: center;}
</style>