<!-- 站点列表 -->
<!-- :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
 :filter-method="filterHandler" -->
<template>
    <div class="siteList-wrap column">
        <div class="siteList-main ">
            <div class="flex-between">
                <div class="left flex">
                    <h2>站点列表</h2>
                    <GuipButton size="medium" type="normal" @click="cancelEdit(row, 'price')">
                        <img src="@/assets/site/form_link.svg" alt="">新增分组
                    </GuipButton>
                </div>
                <div class="right">
                    <GuipButton size="medium" @click="cancelEdit(row, 'price')">
                        <img src="@/assets/site/form_link.svg" alt="">新增分组
                    </GuipButton>
                </div>
            </div>
            <el-form>
                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    style="width: 100%" :key="random()">
                    <!-- 其他列 -->
                    <el-table-column prop="name" label="站点简称" width="210">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                <span class="">{{ scope.row.name }}</span>
                                <img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="registerDate" label="注册时间"></el-table-column>

                    <!-- 价格列 -->
                    <el-table-column label="站点分组">
                        <template v-slot="{ row, $index }">
                            <el-popover v-model="row.price_popover" placement="top" trigger="manual"
                                :ref="`popover-${$index}`" @show="popshow">
                                <!-- 弹框内容 -->

                                <!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
                                <div class="flex"
                                    style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                                    <GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
                                    <GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定
                                    </GuipButton>
                                </div>
                                <!-- 触发弹框的按钮 -->
                                <span slot="reference" @click="handlePriceClick(row, $index, 'price')">
                                    <div class="flex cell_render">
                                        <span v-if="row.group" :key="random()">{{ groupList[row.group] }}</span>
                                        <img class="edit_icon" src="@/assets/site/drop_icon.svg" alt="">
                                    </div>
                                </span>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phoneService" label="手机服务" :filters="phoneService"
                        :filter-method="filterHandler">
                        <template v-slot="{ row, $index }">
                            <el-popover v-model="row.num_popover" placement="top" trigger="manual"
                                :ref="`popover-${$index}`" @show="popshow">
                                <!-- 弹框内容 -->
                                <div style="text-align: center">
                                    <div class="flex"
                                        style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                                        <GuipButton size="medium" @click="cancelEdit(row, 'phoneService')">取消
                                        </GuipButton>
                                        <GuipButton type="primary" @click="savePrice(row, 'phoneService')"
                                            size="medium">确定
                                        </GuipButton>
                                    </div>
                                </div>
                                <!-- 触发弹框的按钮 -->
                                <span slot="reference" @click="handlePriceClick(row, $index, 'phoneService')">
                                    <div class="flex cell_render">
                                        <span>{{ row.phoneService }}</span>
                                    </div>
                                </span>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="195">
                        <template slot-scope="scope">
                            <div class="flex cell_render" @click="popPayMentModal(scope.row)">
                                <span :class="(scope.row.status == '0' ? 'in_services' : 'in_config')">{{
                                    scope.row.status
                                        ==
                                        '0' ? '运行中' : '配置中' }}</span>
                                <img class="edit_icon" src="@/assets/site/more_setIcon.png" alt="">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="182">
                        <template slot-scope="scope">
                            <div class="flex">
                                <el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
                                <el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="tableData.length">
                </el-pagination>
            </el-form>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '@/components/Footer.vue';
// import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue';

export default {
    name: 'sitelist',
    components: {
        // HelloWorld
        // GuipInput,
        Footer,
        GuipButton
    },
    data() {
        return {
            tableData: [
                {
                    name: '哈哈哈',
                    registerDate: '2025.02.18',
                    group: '1',
                    phoneService: '',
                    status: '1',//配置中中
                },
                {
                    name: '知网学诚教育',
                    registerDate: '2025.02.18',
                    group: '2',
                    phoneService: '',
                    status: '0',//运行中
                },
            ],
            groupList: {
                1: '内部测试',
                2: '查重站点'
            },
            phoneServicelist:
            {
                0: '不限',
                1: ' H5',
                2: '小程序',
                3: '无手机服务'

            },
            currentPage: 1,    //当前页
            pageSize: 2,   //每页的容量
            total: 0,   //列表总数
            phoneService: [
                {
                    text: '不限',
                    value: '0'
                },
                {
                    text: 'H5',
                    value: '1'
                },
                {
                    text: '小程序',
                    value: '2'
                },
                {
                    text: 'H5以及小程序',
                    value: '3'
                },
            ]
        }
    },
    methods: {
        popshow() {
            var ariaEls = document.querySelectorAll('.el-popover')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })

            ariaEls = document.querySelectorAll('.el-radio__original')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })
        },
        random() {
            var randomNumber = Math.random();
            return randomNumber
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        // 列筛选
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        handleSetClick(row) {
            console.log(row);
        },
        handleServiceClick(row) {
            console.log(row);
        },

    }
}
</script>
<style lang="scss" scoped>
.siteList-wrap {
    padding: 12px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .in_services {
        color: #0DAF49;
    }

    .in_config {
        color: #FF4D4F;
    }

    .siteList-main {
        flex: 1;
        padding: 32px 36px;
        border-radius: 4px;
        box-sizing: border-box;
        width: 100%;
        background: #FFFFFF;
        // span {
        //     color: #1E2226;
        // }

        .edit_icon {
            width: 16px;
            height: 16px;
            display: none;
            transition: all .3s;
            margin-left: 8px;
        }

        .el-table__row:hover {
            .edit_icon {
                display: block;
                transition: all .3s;
            }
        }
    }

}
</style>