<template>
    <div class="main-content12">
        <div class="flex-common">
            <h3 class="mb12">服务列表</h3>

            <PromptText text='PC端站点使用的“科技清新蓝”模板仅支持AI相关服务，列表中置灰的服务不支持。可编辑置灰服务，但需更换模板才能在PC端站点显示。' :type="3" class="mb24 pl-37"/>

            <!-- page header -->
            <div class="pageheader">
                <div class="pageheader-left">
                    <el-checkbox @change="toggleAllSelection" :indeterminate="isIndeterminate" v-model="selectAll">全选</el-checkbox>
                    <span class="checked-text">共{{ serviceList.length }}条，已选{{ selectedCount }}条</span>

                    <GuipButton type="ignore" :btnstyle="btnInfostyleObj" @click="handleBatchDelClick">批量删除</GuipButton>
                </div>
                <div class="pageheader-right">
                    <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(1)">添加查重服务</GuipButton>
                    <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(3)">添加写作辅助</GuipButton>
                    <GuipButton type="primary" :btnstyle="btnstyleObj" @click="jumpAdd(2)">添加AIGC</GuipButton>
                </div>
            </div>

            <!-- page content -->
            <el-form>
                <GuipTable :tableData="serviceList" ref="multipleTable" autoColumn="true" :loading="tableLoading"
                @selection-change="handleSelectionChange" @select="handleSelect">
                    <el-table-column type="selection" width="100">
                        <template slot="header">
                            <span class="selection-header-text">选择</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="type_desc" label="服务版本"></el-table-column>

                    <el-table-column prop="supply_price_desc" label="今日供货价"></el-table-column>

                    <el-table-column prop="price_desc" label="售价">
                        <template #default="{ row,$index }">
                            <el-popover v-model="row.pricePopoverVisible" :ref="`pricePopover-${row.type}`"
                                        placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
                                        popper-class="custom-popover"  @show="popshow" >
                                <div style="text-align: center">
                                    <div class="flex">
                                        <GuipInput ref="GuipInput" width="133px" v-model="row.price" label="售价" placeholder="请输入售价" :unit="row.price_unit"></GuipInput>
                                        <template  v-if="row.price_unit_num>1">
                                            <span class="shortspan">/</span>
                                            <GuipInput ref="GuipInput" width="133px" v-model="row.price_unit_num" unit="字符">
                                            </GuipInput>
                                        </template>
                                    </div>
                                    <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="saveEdit(row, 'price')" size="medium">确定</GuipButton>
                                    </div>
                                </div>
                                <template #reference>
                                    <div class="flex cell_render" @click="handleEditClick(row,$index,'price')">
                                        <span :key="random()">{{ row.price_desc }}</span>
                                        <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'"
                                                  :hoverColor="'#006AFF'" />
                                    </div>
                                </template>
                            </el-popover>
                        </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>

                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                <span :class="(scope.row.payment_method_desc == '默认站点支付' ? 'normal_payment' : 'self_payment')">
                                    {{ scope.row.payment_method_desc == '默认站点支付' ? '默认站点支付' : '自定义支付' }}
                                </span>
                                <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
                                          @click="popPayMentModal(scope.row)" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="sort_id" label="排序">
                        <template #default="{ row,$index }">
                            <el-popover v-model="row.sortPopoverVisible" :ref="`popover-${row.type}`"
                                        placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
                                        popper-class="custom-popover"  @show="popshow" >
                                <div style="text-align: center">
                                    <GuipInput ref="GuipInput" width="252px" v-model="row.sort_id" label="排序" placeholder="请输入数字"></GuipInput>
                                    <p style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
                                    <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                                        <GuipButton size="medium" @click="cancelEdit(row, 'sort')">取消</GuipButton>
                                        <GuipButton type="primary" @click="saveEdit(row, 'sort')" size="medium">确定</GuipButton>
                                    </div>
                                </div>
                                <template #reference>
                                    <div class="flex cell_render" @click="handleEditClick(row,$index,'sort')">
                                        <span :key="random()">{{ row.sort_id }}</span>
                                        <svg-icon :size="16" :path="require('@/assets/site/tableEdit.svg')" :color="'#8A9099'"
                                                  :hoverColor="'#006AFF'" />
                                    </div>
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column prop="sort_id" label="上首页">
                        <template slot-scope="scope">
                            <div class="flex cell_render">
                                <GuipSwitch :modelValue="scope.row.is_index_display" active-value="1" inactive-value="0" @change="onSwitchChange(scope.row)"></GuipSwitch>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-link type="primary" :href="serviceEditUrl+'?uid='+uid+'&type='+scope.row.type" target="_blank" class="mr-16">编辑</el-link>
                            <el-link type="primary" @click="handleDelClick(scope.row, scope.$index)">删除</el-link>
                        </template>
                    </el-table-column>

                </GuipTable>

                <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false" @confirm="handleConfirm"
                            @cancel="handleCancel" type="center" >
                    <PromptText text='按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。' :type="1" class="mb24 mt12"/>
                    <PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
                </GuipDialog>

                <GuipDialog :dialogVisible="dialogDelConfim" title="提示" :show-close-button="false" @confirm="handleDelConfirm"
                            @cancel="handleDelCancel">
                    确定要移除服务吗?
                </GuipDialog>
                <GuipDialog :dialogVisible="dialogBatchDelConfim" title="提示" :show-close-button="false" @confirm="handleBatchDelConfirm"
                            @cancel="handleBatchDelCancel">
                    确定要移除选中的服务吗?
                </GuipDialog>
            </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";
import {getServicePriceDesc} from "@/utils/common";
import PaymentMethod from "@/components/paymentMethod.vue";
import PromptText from "@/components/PromptText.vue";

export default {
    name: 'siteServiceList',
    components: {
        PromptText,
        PaymentMethod,
        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: [],
            //支付方式
            payList: [],

            selectedRows:[],//表格选中项
            selectAll: false,//是否全选
            isIndeterminate: false,//全选/半选状态

            //编辑图片展示
            popoverFlag:false,
            //弹框
            dialogVisible: false,   //是否展示弹框
            dialogTitle: "",    //弹框标题
            editRow:{},

            //删除二次确认
            dialogDelConfim: false,
            delRow:{},
            dialogBatchDelConfim: false,
            delRows:[],

            // 服务列表url
            serviceAddUrl: '/agent/siteServiceAdd',
            // 站点设置url
            serviceEditUrl: '/agent/siteServiceEdit',
            // 新增站点url
            addNewSiteUrl: '/ui',
        }
    },
    created() {
        if(!this.$route.query.uid) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteList')
        }
        this.uid = this.$route.query.uid;
    },
    mounted() {
        this.getSiteServiceList();
    },
    computed: {
        selectedCount() {
            return this.selectedRows.length;
        },
    },
    methods: {
        jumpAdd(prodid){
            this.$router.push(this.serviceAddUrl + '?uid=' + this.uid + '&prodid=' + prodid)
        },
        toggleAllSelection() {
            this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
        },
        // 获取服务列表
        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
                    store.commit('SET_BREADRIGHTTEXT', response.data.site_short_name);
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleSelect(selection, row) {
            console.log('操作的行:', row);
            console.log('当前所有选中行:', selection);
        },
        // 处理选择变化
        handleSelectionChange(rows) {
            this.selectedRows = rows;
            // 更新全选按钮状态
            const allSelected = rows.length === this.serviceList.length;
            const noneSelected = rows.length === 0;

            this.selectAll = allSelected;
            this.isIndeterminate = !noneSelected && !allSelected;
        },
        // 批量删除
        handleBatchDelClick() {
            this.dialogBatchDelConfim = true
        },
        handleBatchDelCancel(){
            this.dialogBatchDelConfim = false
        },
        handleBatchDelConfirm(){
            let delTypes = [];
            this.selectedRows.forEach((row) => {
                delTypes.push(row.type)
            });

            const that = this
            this.dialogBatchDelConfim = false
            this.$http('POST', '/agentnew/ajax_del_services', {
                uid: that.uid,
                types: JSON.stringify(delTypes)
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                if(response.status){
                    that.$message.success('删除成功');
                    that.selectedRows = [];
                    that.$nextTick(() => {
                        this.serviceList = this.serviceList.filter(row => !delTypes.includes(row.type));
                    })
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        //删除
        handleDelClick(row, index) {
            this.dialogDelConfim = true
            this.delRow.index = index
            this.delRow.type = row.type
        },
        handleDelCancel(){
            this.dialogDelConfim = false
        },
        handleDelConfirm(){
            const that = this
            this.dialogDelConfim = false
            this.$http('POST', '/agentnew/ajax_del_service', {
                uid: that.uid,
                type: that.delRow.type
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                if(response.status){
                    that.$message.success('删除成功');
                    this.$nextTick(() => {
                        that.serviceList.splice(that.delRow.index, 1);
                    })
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 点击价格单元格时触发
        handleEditClick(row, index, type) {
            // 关闭其他行的弹框
            this.popoverFlag = true;
            this.serviceList.forEach((item, i) => {
                if (i !== index) {
                    item[type + 'PopoverVisible'] = false;
                }
            });
            // 打开当前行的弹框
            row[type + 'PopoverVisible'] = true;
        },
        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')
            })
        },
        // 保存价格
        saveEdit(row, type) {
            row[type + 'PopoverVisible'] = false; // 关闭弹框
            if(type == 'price') this.savePrice(row)
            if(type == 'sort') this.saveUpdateInfo(row, true)
        },
        // 取消编辑
        cancelEdit(row, type) {
            row[type + 'PopoverVisible'] = false;
            this.popoverFlag = false
            // row[type + '_popover'] = false; // 关闭弹框
            this.$Message.info('已取消编辑');
        },
        random() {
            var randomNumber = Math.random();
            return randomNumber
        },
        savePrice(row){
            if (row.price === '') {
                this.$message.warning('价格不能为空');
                return;
            }
            row.price_desc = getServicePriceDesc(row.price, row.price_unit, row.price_unit_num);

            let obj = {}
            obj.uid = this.uid
            obj.type = row.type
            obj.unit_num = row.price_unit_num
            if(row.price_unit == '元'){
                obj.unit_price = row.price
            }else{
                obj.unit_piece = row.price
            }

            this.saveRequest('/agentnew/ajax_set_service_price', obj, row)
        },
        onSwitchChange(row){
            row.is_index_display = row.is_index_display == "1" ? "0" : "1"
            this.saveUpdateInfo(row)
        },
        saveUpdateInfo(row, resort = false){
            let obj = {}
            obj.uid = this.uid
            obj.type = row.type
            obj.sort_id = row.sort_id
            obj.is_index_display = row.is_index_display
            obj.is_display_price = row.is_display_price
            obj.is_recommend = row.is_recommend
            this.saveRequest('/agentnew/ajax_update_service_show', obj, row, resort)
        },
        saveRequest(url, obj, row, resort = false){
            const that = this
            this.$http('POST', url, obj,{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                if(response.status){
                    that.$message.success('保存成功');
                    this.$nextTick(() => {
                        that.$set(that.serviceList, row)
                        if(resort){
                            this.sortServiceList()
                        }
                    })
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        sortServiceList() {
            const sortable = this.serviceList
                .map((row, i) => ({ row, i }))
                .filter(item => item.row.sort_id > 0)
                .sort((a, b) => a.row.sort_id - b.row.sort_id);

            let i = 0;
            this.serviceList = this.serviceList.map(row => {
                if (row.sort_id > 0) {
                    return sortable[i++].row;
                }
                return row;
            });
        },
        popPayMentModal(row){
            this.dialogVisible = true;
            this.dialogTitle = row.type_desc + '-收款方式'
            this.editRow = row
            this.getPayList(row.type)
        },
        // 获取支付列表
        getPayList(type) {
            const that = this
            that.payList = []
            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
                uid: that.uid,
                type: type,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.payList = response.data.paylist
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        confirmPayment(payList){
            this.payList = payList
        },
        // 确认按钮事件
        handleConfirm() {
            this.dialogVisible = false;

            let obj = {}
            obj.uid = this.uid
            obj.type = this.editRow.type
            obj.info = ""

            let hasClose = false
            this.payList.forEach((row) => {
                if(row.status == 1) {
                    let value = row.pay_type
                    if(row.id) value += ',' + row.id

                    obj.info = obj.info + ';' + value;
                }else{
                    hasClose = true
                }
            });
            obj.info = obj.info.substr(1, obj.info.length-1);

            if(hasClose) this.editRow.payment_method_desc = '自定义支付';

            this.saveRequest('/agentnew/ajax_payment_switch', obj, this.editRow)
        },
        // 取消按钮事件
        handleCancel() {
            this.dialogVisible = false;
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .custom-popover {
  position: fixed !important;
  // max-height: 290px;
  // overflow-y: auto;
  margin-top: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}

::v-deep .el-table__header-wrapper .el-checkbox {
    display: none;
}

/* 隐藏表头的复选框 */
::v-deep .el-table__header-wrapper .el-checkbox {
    display: none !important;
}

/* 确保选择文字可见 */
::v-deep .selection-header-text {
    display: inline-block;
    margin-left: 8px;
    /* 调整位置 */
    font-size: 14px;
    color: #606266;
    font-weight: bold;
}

/* 调整表头单元格的padding */
::v-deep .el-table .el-table__header th {
    padding: 8px 0;
    /* 根据需要调整 */
}

.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;
}
.mr-16 {
  margin-right: 16px;
}
.pl-37{
  padding-left: 37px;
}
.normal_payment,
.self_payment {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  background: #F6F7FA;
  box-sizing: border-box;
  border: 1px solid #DFE2E6;
  letter-spacing: 0.08em;
  color: #626573;
}

.self_payment {
  border: 1px solid #BFDAFF;
  background: #F2F7FF;
  color: #006AFF;
}
</style>