<template>
    <div>
        <div class="step3-wrap min-flex">
            <div class="step3-top flex-common">
                <h3 class="flex gap8"><img src="@/assets/menu/littleTitleIcon1.svg" alt="">服务列表</h3>
                <div class="btngroup">
                    <GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(1)">添加查重服务</GuipButton>
                    <GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(3)">添加写作辅助</GuipButton>
                    <GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(2)">添加AIGC</GuipButton>
                </div>
            </div>
            <div>
                <div class="flex-common table-wrap">
                    <el-form>
                        <GuipTable :border="true" :tableData="tableData" :loading="tableLoading">
                            <el-table-column prop="name" fixed="left" label="检测服务" width="200">
                                <template slot-scope="scope">
                                    <div class="flex nowrap ">
                                        <div :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
                                            }}</div>
                                        <div class="">{{ scope.row.name }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stock" label="今日供货价" min-width="138">
                                <template slot-scope="scope">
                                    <div class="flex cell_render">
                                        <span>¥{{ scope.row.stock }}/篇</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="售价" width="300">
                                <template #default="{ row,$index }">
                                    <el-popover v-model="row.pricePopoverVisible" :ref="`pricePopover-${row.id}`"
                                                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" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价"
                                                       placeholder="请输入售价" unit="元">
                                            </GuipInput>
                                            <div v-else class="flex">
                                                <GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价"
                                                           unit="元">
                                                </GuipInput>
                                                <span class="shortspan">/</span>
                                                <GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符">
                                                </GuipInput>
                                            </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="savePrice(row, 'price')" size="medium">确定</GuipButton>
                                            </div>
                                        </div>
                                        <template #reference>
                                            <div class="flex cell_render" @click="handlePriceClick(row,$index,'price')">
                                                <span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span>
                                                <span v-else :key="random()">¥{{ row.price }}/篇</span>
                                                <span>测试用一下</span>
                                                <span>随便写的</span>
                                                <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
                                                          :hoverColor="'#006AFF'" />
                                            </div>
                                        </template>
                                    </el-popover>
                                </template>
                            </el-table-column>

                            <el-table-column prop="num" label="排序" min-width="95">
                                <template #default="{ row,$index }">
                                    <!-- <el-tooltip :manual="true" v-model="row.numPopoverVisible" placement="top" effect="light">
                                      <template #content>
                                        <div style="text-align: center">
                                          <GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" 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, 'num')">取消</GuipButton>
                                            <GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
                                          </div>
                                        </div>
                                      </template>
                                      <div class="flex cell_render" @click="row.numPopoverVisible = true">
                                        <span>{{ row.num }}</span>
                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
                                          :hoverColor="'#006AFF'" />
                                      </div>
                                    </el-tooltip> -->
                                    <el-popover v-model="row.numPopoverVisible" :ref="`popover-${row.id}`"
                                                placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
                                                popper-class="custom-popover"  @show="popshow" >
                                        <!-- <el-popover v-model="row.numPopoverVisible" placement="top" class="single-popover" trigger="manual" :append-to-body="false" :ref="`popover-${row.id}`"> -->
                                        <div style="text-align: center" :visible-arrow="true">
                                            <GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" 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, 'num')">取消</GuipButton>
                                                <GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
                                            </div>
                                        </div>
                                        <span slot="reference" @click="handlePriceClick(row,$index,'num')">
                      <div class="flex cell_render">
                        <GuipToolTip :content="row.num">
                          <span class="nowrap">{{ row.num }}</span>
                        </GuipToolTip>
                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
                                  :hoverColor="'#006AFF'" />
                      </div>
                    </span>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stock" label="收款方式" min-width="258">
                                <template slot-scope="scope">
                                    <div class="flex cell_render">
                                    <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">
                                        {{ scope.row.payment == '0' ? '默认站点支付' : '自定义支付' }}</span>
                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
                                                 :color="'#8A9099'" :hoverColor="'#006AFF'" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stock" fixed="right" label="上首页" min-width="160">
                                <template slot-scope="scope">
                                    <GuipSwitch :modelValue="scope.row.homeFlag">
                                    </GuipSwitch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" min-width="150px">
                                <div class="flex">
                                    <el-button type="text">编辑</el-button>
                                    <el-button type="text">删除</el-button>
                                </div>
                            </el-table-column>
                        </GuipTable>

                        <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>

            </div>
        </div>

        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton>
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">完成</GuipButton>
        </div>
    </div>
</template>
<script>


import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipToolTip from "@/components/GuipToolTip.vue";
import SvgIcon from "@/components/SvgIcon.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import GuipTable from "@/components/GuipTable.vue";

export default {
  name: 'domainSet',
  props: {
     siteInfo: {
          type: Object,
          required: true
     }
  },
  components: {
      GuipTable, GuipSwitch, SvgIcon, GuipToolTip, GuipInput,
      GuipButton

  },
  data(){
    return {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
        tableData:[],
        tableLoading:false,
        currentPage: 1,    //当前页
        pageSize: 2,   //每页的容量
        total: 0,   //列表总数
        // 服务列表url
        serviceAddUrl: '/agent/siteAddService',
    }
  },
  mounted() {
      if(Object.keys(this.siteInfo).length === 0) {
          this.$message.error('未知错误');
          this.$emit('handelStep', 1)
          return false;
      }
  },
  methods:{
      jumpStep(){
          this.$emit('handelStep', 4)
      },
      nextStep(){
          //保存数据

          this.$emit('handelStep', 4)
      },


      handleSizeChange(val) {
          this.pageSize = val
      },
      handleCurrentChange(val) {
          this.currentPage = val
      },
      serviceAdd(prodid){
          this.$router.push(this.serviceAddUrl + '?uid=' + this.siteInfo.uid + '&prodid=' + prodid)
      },








      handleEvent(data){
          this.newDomain = data
      },
      saveConfirm() {
          let obj = {}
          obj.uid = this.info.uid
          obj.type = this.info.type
          if(this.domainFrom === '1'){
              if(!this.newDomain.prefix || !this.newDomain.domain) return false
              obj.domain = this.newDomain.prefix + this.newDomain.domain
          }else{
              obj.domain = ''
          }

          const that = this
          this.$http('POST', '/agentnew/ajax_update_service_domain', obj,{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  that.$message.success('保存成功');

                  //替换域名
                  const protocol = new URL(that.info.domain).protocol;
                  if(this.domainFrom === '1'){
                      that.info.domain = protocol + "//" +obj.domain;
                      that.info.ser_domain = protocol + "//" +obj.domain;
                  }else{
                      that.info.domain = that.info.site_domain;
                      that.info.ser_domain = '';
                  }

                  that.$emit('saveEvent', that.info)
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
  }
}
</script>
<style lang="scss">
.step3-wrap {
  flex: 1;

  .step3-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    align-items: end;
    h3{
      margin: 0;
    }

    .btngroup {
      display: flex;
      height: 33px;

      button {
        font-size: 12px;
        margin-left: 12px;
      }
    }
  }
}
</style>