<template>
    <div class="main-content12">
        <div class="flex-common">
            <h3>服务列表</h3>
            <div class="warning-text">
                <img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
                <span>PC端站点使用的“科技清新蓝”模板仅支持AI相关服务，列表中置灰的服务不支持。可编辑置灰服务，但需更换模板才能在PC端站点显示。</span>
            </div>

            <!-- page header -->
            <div class="pageheader">
                <div class="pageheader-left">
                    <el-checkbox @change="toggleAllSelection">全选</el-checkbox>
                    <span class="checked-text">共80条，已选0条</span>
                    <GuipButton type="ignore" :btnstyle="btnInfostyleObj">批量删除</GuipButton>
                </div>
                <div class="pageheader-right">
                    <GuipButton type="primary" :btnstyle="btnstyleObj">添加查重服务</GuipButton>
                    <GuipButton type="primary" :btnstyle="btnstyleObj">添加写作辅助</GuipButton>
                    <GuipButton type="primary" :btnstyle="btnstyleObj">添加AIGC</GuipButton>
                </div>
            </div>

            <!-- page content -->
            <el-form>
                <GuipTable :tableData="serviceList" ref="multipleTable" @selectChange="handleSelectionChange" autoColumn="true" :loading="tableLoading">

                    <el-table-column label="选择" width="70" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-checkbox @change="toggleSelection(scope.row)"></el-checkbox>
                        </template>
                    </el-table-column>

                    <el-table-column prop="type_desc" label="服务版本"></el-table-column>
                    <el-table-column prop="supply_price_desc" label="今日供货价">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                {{ scope.row.supply_price_desc }}
                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price_desc" label="售价">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                {{ scope.row.price_desc }}
                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="payment_method_desc" label="收款方式">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                <span class="default-pay-method">{{scope.row.payment_method_desc}}</span>
                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="sort_id" label="排序">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                {{ scope.row.sort_id }}
                                <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="sort_id" label="上首页">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                <GuipSwitch :modelValue="scope.row.sort_id" activeText="默认类型" @change="onSwitchChange"></GuipSwitch>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-link type="primary" :href="serviceListUrl+'?uid='+scope.row.uid" target="_blank" class="mr-16">编辑</el-link>
                            <el-link type="primary" :href="siteSettingUrl+'?uid='+scope.row.uid" target="_blank">删除</el-link>
                        </template>
                    </el-table-column>

                </GuipTable>
            </el-form>
        </div>
    </div>
</template>

<script>

import store from '@/store';
import GuipButton from "@/components/GuipButton.vue";
import GuipTable from "@/components/GuipTable.vue";
import GuipDialog from "@/components/GuipDialog.vue";
import SvgIcon from "@/components/SvgIcon.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";

export default {
    name: 'siteServiceList',
    components: {
        GuipSwitch,
        // eslint-disable-next-line vue/no-unused-components
        GuipInput, SvgIcon, GuipDialog, GuipTable,
        GuipButton

    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            //删除按钮样式
            btnInfostyleObj:{
                width: '99px',
                height: '32px',
                borderRadius: '2px',
            },
            //添加按钮样式
            btnstyleObj: {
                width: '114px',
                height: '32px',
                borderRadius: '4px',
                background: '#006AFF',
            },
            // 表格加载
            tableLoading: false,
            //站点id
            uid:0,
            //站点简称
            siteShortName: "",
            // 站点列表
            serviceList: [],




            // 站点分组
            siteGroups: [],
            // 分组id
            gid: 0,
            // 服务列表url
            serviceListUrl: '/ui',
            // 站点设置url
            siteSettingUrl: '/agent/siteBaseSetting',
            // 新增站点url
            addNewSiteUrl: '/ui',
            popoverFlag:false,
            // 站点分组名称
            selected_group: '',
            isUpIco: false,
            currentIcon: require('@/assets/site/drop_icon.svg'),
            currentGroup: '',
            fitlerIcon: require('@/assets/site/filter.svg'),
            // 手机服务
            phoneServices: [
                {'id': 0,  value: '不限' },
                {'id': 1,  value: '微信H5' },
                {'id': 2,  value: '小程序' },
            ],
            // 当前选中的手机服务
            currentPhoneService: '',
            // 添加分组弹框显示标识
            addGroupDialogVisible: false,
            // 取消按钮显示
            showCancelButton: true,
            // 确定按钮显示
            groupname: '',
        }
    },
    created() {
        if(!this.$route.query.uid) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteList')
        }
        this.uid = this.$route.query.uid;
    },
    mounted() {
        store.commit('SET_BREADRIGHTTEXT', '跳转链接');
        this.getSiteServiceList();
    },
    methods: {
        toggleAllSelection() {
            this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
        },
        toggleSelection(row){
            console.log(row)
        },
        // 获取服务列表
        getSiteServiceList() {
            this.tableLoading = true
            const that = this
            that.serviceList = []
            this.$http('POST', '/agentnew/ajax_get_service_list', {
                uid: this.uid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.tableLoading = false
                this.$nextTick(() => {
                    that.serviceList = response.data.service_list
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 获取站点分组
        getSiteGroups() {
            const that = this
            that.siteGroups = []
            this.$http('POST', '/agentnew/ajax_get_site_groups', {
                gid: this.gid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteGroups = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 点击站点分组单元格时触发
        groupSetting(row, index) {
            // 如果已经打开当前行的弹框，则关闭
            if (row.showPopover === true) {
                row['showPopover'] = false;
                // 切换图标
                this.toggleIcon();

                return;
            }

            // 如果存在分组 则显示已设置分组
            if (row.group) {
                this.selected_group = row.group;
            }

            // 关闭其他行的弹框
            this.popoverFlag = true;
            this.siteList.forEach((item, i) => {
                if (i !== index) {
                    item['showPopover'] = false;
                }
            });
            // 打开当前行的弹框
            row['showPopover'] = true;

            // 切换图标
            this.toggleIcon();
        },
        // 保存站点分组
        addSiteGroupIndex(row) {
            this.$http('POST', '/agentnew/ajax_add_site_group_index', {
                groupid: this.selected_group,
                uid: row.uid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    // 保存成功弹层提示
                    this.$Message.success(response.info);

                    // 更新分组名称
                    this.siteGroups.forEach((item) => {
                        if (item.id === this.selected_group) {
                            row['group'] = item.name;
                        }
                    });
                    row['groupid'] = this.selected_group; // 更新价格
                    row['showPopover'] = false; // 关闭弹框
                    this.$set(this.siteList, row)
                    this.currentIcon = require('@/assets/site/drop_icon.svg');
                } else {
                    this.$Message.error(response.info);
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 取消编辑
        cancleGroupIndexSetting(row) {
            // 关闭弹框
            row['showPopover'] = false;
            this.popoverFlag = false
            // row[type + '_popover'] = false; // 关闭弹框
            this.currentIcon = require('@/assets/site/drop_icon.svg');
            this.$Message.info('已取消编辑');

        },
        toggleIcon() {
            this.isUpIco = !this.isUpIco; // 切换状态

            // 根据状态更新图标和颜色
            if (this.isUpIco) {
                this.currentIcon = require('@/assets/site/up_icon.svg'); // 向上图标
            } else {
                this.currentIcon = require('@/assets/site/drop_icon.svg'); // 向下图标
            }
        },
        // 表格点击、选择
        handleSelectionChange(data) {
            // 多选模式下的时候 data 为数组格式
            // 单选的时候是 对象
            console.log(data, '表格行信息');
        },
        // 弹框相关方法---start
        showAddGroup() {
            this.addGroupDialogVisible = true;
        },
        // 确认按钮事件
        addGroup() {
            this.addGroupDialogVisible = false;

            this.$http('POST', '/agentnew/ajax_add_site_group', {
                name: this.groupname,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        // 更新分组
                        this.getSiteGroups()
                        // 清空分组名称
                        this.groupname = ''
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 取消按钮事件
        cancleAddGroup() {
            this.addGroupDialogVisible = false;
        },
        // 关闭弹框事件
        closeAddGroup() {
            this.addGroupDialogVisible = false;
        },
        addGroupDialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        // 弹框相关方法---end
        addNewSite() {
            window.open(this.addNewSiteUrl, '_blank');
        }
    },
}
</script>
<style lang="scss" scoped>
.warning-text{
  display: flex;
  align-items: center;
  padding: 8px 37px;
  align-self: stretch;
  z-index: 1;
  border-radius: 4px;
  background: #FFF1F0;
  border: 1px solid #FFA39E;
  .warning-icon{
    width: 16px;
    height: 16px;;
    margin-right: 8px;
  }
  span{
    color: #1E2226;
    letter-spacing: 0.08em;
  }
}
.pageheader {
  display: flex;
  justify-content: space-between; /* 关键属性 */
  align-items: center;
  margin: 16px 0px 16px 0px;
}
.pageheader-left {
  display: flex;
  gap: 15px;
  align-items: center
}
.checked-text{
  line-height: 13px;
  letter-spacing: 0.08em;
  color: #8A9099;
  font-size: 12px;
}
.pageheader-right{
  display: flex;
  gap: 15px;
}

.pagetitle {
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #1E2226;
  margin-top:8px;
}
.default-pay-method{
  width: 110px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
  gap: 6px;
  z-index: 0;
  border: 1px solid #DFE2E6;
  border-radius: 4px;
  background: #F6F7FA;
}
</style>