<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="" prop="channel">
                <el-input
                    v-model="queryParams.channel"
                    placeholder="请输入包名"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="" prop="platformName">
                <el-select v-model="queryParams.platformName" size="small" placeholder="请选择书城" filterable style="width: 100%" clearable @keyup.enter.native="handleQuery">
                    <el-option
                        v-for="item in bookCityData"
                        :key="item.id"
                        :label="item.platformName"
                        :value="item.platformName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="promotionId">
                <el-input
                    v-model="queryParams.promotionId"
                    placeholder="推广链接ID"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" align="middle">
            <el-col :span="1.5">
                <el-button type="primary" size="small" @click="addHandle">新增推广链接</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="dataList" size="mini" :border="true">
            <el-table-column label="ID" prop="id" width="55" align="center"/>
            <el-table-column label="推广链接ID" prop="promotionId" align="center" width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="包名" prop="channel" width="220" :show-overflow-tooltip="true"/>
            <el-table-column label="书城名称" prop="platformName" align="center" width="100"/>
            <el-table-column label="书城key" prop="platformKey" align="center" width="150"/>
            <el-table-column label="开始时间" prop="startTime" align="center" width="100"/>
            <el-table-column label="结束时间" prop="endTime" align="center" width="100"/>
            <el-table-column label="创建时间" prop="createTime" align="center" width="135"/>
            <el-table-column label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        style="margin-right: 10px"
                        @click="handleEditTen(scope.row)"
                    >修改</el-button>
                    <el-popconfirm
                        title="确定删除吗？"
                        @confirm="handleDel(scope.row.id)"
                    >
                        <el-button slot="reference" type="text" size="mini" style="color: red" icon="el-icon-delete">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 新增修改 -->
        <el-dialog 
            :title="title" 
            :visible.sync="visible" 
            width="450px"
            append-to-body
        >
            <el-form :model="applyParamsForm" :rules="applyRulesType" ref="platFormApply" label-width="100px">
                <el-form-item label="包名" prop="channel" >
                    <el-select
                        v-model="applyParamsForm.channel"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        :loading="loading"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.resourceName"
                            :value="item.resourceName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推广链接ID" prop="promotionId" >
                    <el-input v-model="applyParamsForm.promotionId" placeholder="请输入推广链接ID"/>
                </el-form-item>
                <el-form-item label="书城" prop="platformKey" >
                    <el-select v-model="applyParamsForm.platformKey" placeholder="请选择" filterable style="width: 100%" clearable>
                        <el-option
                            v-for="item in bookCityData"
                            :key="item.id"
                            :label="item.platformName"
                            :value="item.platformKey">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime" >
                    <el-date-picker
                        v-model="applyParamsForm.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime" >
                    <el-date-picker
                        v-model="applyParamsForm.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="applyParamsForm = {platformKey: 'YOU_ZI'};visible = false">取 消</el-button>
                <el-button type="primary" @click="submit('platFormApply')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getApplyChanelList, addOrEditApplyChanel, delApplyChanel } from '@/api/accounts/applyUse'
import { getBookPlatformAll, queryApi } from '@/api/accounts/qwMapping'
export default {
    data () {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                channel: null
            },
            dataList: [],
            total: 0,
            showSearch: true,
            bookCityData: [],
            visible: false,
            applyParamsForm: {platformKey: 'YOU_ZI'},
            applyRulesType: {
                channel:  [{ required: true, message: '请输入包名', trigger: 'blur' }],
                promotionId:  [{ required: true, message: '请输入推广链接id', trigger: 'blur' }],
                platformKey: [{ required: true, message: '请选择书城', trigger: 'blur' }]
            },
            title: '新增推广链接',
            loading: false,
            options: []
        }
    },
    created() {
        this.getList()
        this.getAll()
    },
    methods: {
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                queryApi({resourceName: query}).then(res => {
                    this.options = res.data
                    this.loading = false;
                }).catch(err => this.loading = false)
            } else {
                this.options = [];
            }
        },
        getList () {
            getApplyChanelList(this.queryParams).then(res => {
                let data = res.data
                this.total = data.total
                let records = data.records
                this.dataList = records
            })
        },
        getAll () {
            getBookPlatformAll().then(res => {
                this.bookCityData = res.data
            })
        },
        handleQuery() {
            this.queryParams = { ...this.queryParams, pageNum: 1 }
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },
        addHandle() {
            this.title = '新增推广链接'
            this.applyParamsForm = { platformKey: 'YOU_ZI' }
            this.visible = true
        },
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addOrEditApplyChanel(this.applyParamsForm).then(res => {
                        console.log('addOrEditQwChanel---->', res)
                        if (res.data) {
                            if (this.applyParamsForm.id) { // 修改
                                this.msgSuccess("新增成功");
                            } else {
                                this.msgSuccess("修改成功");
                            }
                            this.getList()
                            this.applyParamsForm = { platformKey: 'YOU_ZI' }
                            this.visible = false
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        handleEditTen(row) {
            this.title = '修改推广链接ID'
            const { id, endTime, startTime, channel, promotionId, platformKey, resourceName} = row
            this.applyParamsForm = { startTime, id, endTime, platformKey, resourceName, channel, promotionId }
            this.visible = true
        },
        handleDel(id) {
            delApplyChanel({id}).then(res => {
                if (res.data) {
                    this.msgSuccess("删除成功");
                    this.getList()
                }
            })
        },
    }
}
</script>