<template>
    <div>
        <div class="search-content">
            <el-form :inline="true">
                <el-form-item label="创建时间:">
                    <el-date-picker
                        :editable="false"
                        v-model="time"
                        @change="timearr => {timearr ? (searchForm.create_time_start = timearr[0], searchForm.create_time_end = timearr[1]) : searchForm.create_time_start = searchForm.create_time_end = undefined}"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.project_id" clearable placeholder="请选择项目">
                        <el-option label="全部" value></el-option>
                        <el-option v-for="(item, index) in 	projectList" :key="index" :label="item.project_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.id" clearable placeholder="请输入渠道ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.promotion_sources_id" clearable placeholder="请选择推广来源">
                        <el-option label="全部" value></el-option>
                        <el-option v-for="(item, index) in 	sourcesList" :key="index" :label="item.sources_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.promotion_type_id" clearable placeholder="请选择推广形式">
                        <el-option label="全部" value></el-option>
                        <el-option v-for="(item, index) in 	typeList" :key="index" :label="item.type_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.promotion_admin_id" clearable placeholder="请选择负责人">
                        <el-option label="全部" value></el-option>
                        <el-option v-for="(item, index) in 	adminList" :key="index" :label="item.admin_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.remark" clearable placeholder="请输入渠道备注"></el-input>
                </el-form-item>
                <el-form-item class="ml-10">
                    <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
                </el-form-item>
                <el-form-item class="ml-10" v-if="projectList.length > 0 && hasPermission('add-promote-channel')">
                    <el-button icon="el-icon-plus" type="primary" @click="add">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" v-loading="tableLoading" border fit :max-height="vheight">
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="project.project_name" label="所属项目"></el-table-column>
            <el-table-column prop="source.sources_name" label="推广来源"></el-table-column>
            <el-table-column prop="type.type_name" label="推广形式"></el-table-column>
            <el-table-column prop="admin.admin_name" label="负责人"></el-table-column>
            <el-table-column prop="remark" label="渠道备注"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-permission="'add-user-promote'" type="text" @click="edit(scope.row)">添加推广</el-button>
                    <el-button v-permission="'list-channel-promote-detail'" type="text" @click="view(scope.row)">查看详情</el-button>
                    <!-- <el-button type="text" @click="del(scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="marginT-20"
            @current-change="handleCurrentChange"
            :hide-on-single-page="false"
            :current-page="pageNo"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
        />
        <add v-if="addDialog.show" v-model="addDialog.show" :exData="addDialog.exData" @success="init"></add>
        <edit v-if="editDialog.show" v-model="editDialog.show" :exData="editDialog.exData" @success="init"></edit>
        <tableComponent v-if="tableDialog.show" v-model="tableDialog.show" :exData="tableDialog.exData" @success="init"></tableComponent>
    </div>
</template>

<script>
import page from '@/mixin/page'
import projectList from '../mixin/projectList'
import configList from '../mixin/configList'
import add from './_dialog/add'
import edit from './_dialog/edit'
import tableComponent from './_dialog/table'
export default {
    mixins: [page, projectList, configList],
    components: {
        add,
        edit,
        tableComponent,
    },
    computed: {
        vheight() {
            return document.body.clientHeight - 280 
        }
    },
    data() {
        return {
            time: [],
            addDialog: {
                show: false,
                exData: {}
            },
            editDialog: {
                show: false,
                exData: {}
            },
            tableDialog: {
                show: false,
                exData: {}
            },
            tableData: [],
            searchForm: {
                id: undefined,
                project_id: undefined
            },
            tableUrl: '/listPromoteChannel',
        }
    },
    methods: {
        edit(row) {
            this.editDialog.exData = {...row, projectList: this.projectList, sourcesList: this.sourcesList, typeList: this.typeList, adminList: this.adminList}
            this.editDialog.show = true
        },
        add() {
            this.addDialog.exData = {projectList: this.projectList, sourcesList: this.sourcesList, typeList: this.typeList, adminList: this.adminList}
            this.addDialog.show = true
        },
        view(row) {
            this.tableDialog.exData = row
            this.tableDialog.show = true
        },
        async del(row) {
            this.$confirm('是否删除', '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const data = await this.$fetch('/deletePromoteSource', {id: row.id})
                if (data.code == 200) {
                    this.$message.success('删除成功')
                    this.init()
                }
            }).catch(() => {});
        }
    },
    async mounted() {
        this.init()
    },
}
</script>

<style lang="scss" scoped>
</style>
