<template>
    <div>
        <div class="pageheader">
            <span class="pagetitle">{{info.type_desc}}-价格设置</span>
        </div>

        <PromptText v-if="serviceAddInfo && serviceAddInfo.prompt && serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1" class="mb12">
            <template #desc v-if="serviceAddInfo.prompt.content">
                <div class="alert-more-info mt12">
                    <div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">
                        {{ item }}
                    </div>
                </div>
            </template>
        </PromptText>

        <!-- 网页售价 -->
        <div class="flex-common mb12 price-set" v-if="serviceAddInfo.web_price_set">
            <el-form class="el-row demo-ruleForm" ref="formRef">
                <div class="price-top">
                    <span class="title">网页支付与售价</span>
                    <span class="desc"
                          v-if="serviceAddInfo.supply_price">供货价：{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</span>
                </div>

                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="flex-between mb12">
                            <div>售价管理</div>
                        </div>
                        <div class="flex-between">
                            <div class="short-width" v-if="Object.keys(serviceAddInfo.set_units).length>1">
                                <GuipSelect width="100%" v-model="service_unit" placeholder="选择计费方式"
                                            :options="serviceAddInfo.set_units" @change="handleUnitName"/>
                            </div>
                            <div class="short-width" v-if="service_unit !== '0'">
                                <GuipInput v-model="info.price" width="100%"
                                           ref="GuipInput" :unit="'元/'+serviceAddInfo.unit_name"></GuipInput>
                            </div>
                        </div>
                        <div class="flex-between mt12" v-if="service_unit === '0'">
                            <div class="short-width">
                                <GuipInput width="100%" v-model="info.price" ref="GuipInput" unit="元">
                                </GuipInput>
                            </div>
                            <div class="short-width">
                                <GuipInput width="100%" v-model="info.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name">
                                </GuipInput>
                            </div>
                        </div>
                    </div>
                    <template v-if="serviceAddInfo.base_set && service_unit === '0'">
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <div class="flex-between mb12">
                                <div>起售价格（选填）</div>
                                <div>超过设定字符，按照正常售价收取</div>
                            </div>
                            <div class="flex-between">
                                <div class="third-width">
                                    <GuipInput width="100%" v-model="info.base_unit_num" ref="GuipInput"
                                               unit="字符内"></GuipInput>
                                </div>
                                <div class="w85">
                                    用户需支付
                                </div>
                                <div class="third-width">
                                    <GuipInput width="100%" v-model="info.base_unit_price" ref="GuipInput"
                                               unit="元"></GuipInput>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="flex service-opt mt12">
                    <GuipButton type="ignore" @click="resetPrice">重置</GuipButton>
                    <GuipButton type="primary" @click="savePrice" size="medium">保存</GuipButton>
                </div>
            </el-form>
        </div>

        <!-- 店铺售价-->
        <div class="flex-common mb12 price-set" v-if="serviceAddInfo.shop_price_set">
            <el-form class="el-row demo-ruleForm" ref="formRef">
                <div class="price-top">
                    <span class="title">{{ serviceAddInfo.shop_name }}支付管理</span>
                    <span class="desc"></span>
                </div>

                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="flex-between mb12">
                            <div>售价管理</div>
                        </div>
                        <div class="flex-between">
                            <div class="short-width" v-if="Object.keys(serviceAddInfo.set_units).length>1">
                                <GuipSelect width="100%" v-model="service_unit" placeholder="选择计费方式"
                                            :options="serviceAddInfo.set_units"  @change="handleUnitName"/>
                            </div>
                            <div class="short-width" v-if="service_unit !== '0'">
                                <GuipInput v-model="info.unit_piece" width="100%"
                                           ref="GuipInput" :unit="'件/'+serviceAddInfo.unit_name"></GuipInput>
                            </div>
                        </div>
                        <div class="flex-between mt12" v-if="service_unit === '0'">
                            <div class="short-width">
                                <GuipInput width="100%" v-model="info.unit_piece" ref="GuipInput" unit="件">
                                </GuipInput>
                            </div>
                            <div class="short-width">
                                <GuipInput width="100%" v-model="info.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name">
                                </GuipInput>
                            </div>
                        </div>
                    </div>
                    <template v-if="serviceAddInfo.base_set && service_unit === '0'">
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <div class="flex-between mb12">
                                <div>起售价格（选填）</div>
                                <div>超过设定字符，按照正常售价收取</div>
                            </div>
                            <div class="flex-between">
                                <div class="third-width">
                                    <GuipInput width="100%" v-model="info.base_unit_num" ref="GuipInput"
                                               unit="字符内"></GuipInput>
                                </div>
                                <div class="w85">
                                    用户需支付
                                </div>
                                <div class="third-width">
                                    <GuipInput width="100%" v-model="info.base_unit_piece" ref="GuipInput"
                                               unit="件"></GuipInput>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="flex service-opt mt12">
                    <GuipButton type="ignore" @click="resetShopPrice">重置</GuipButton>
                    <GuipButton type="primary" @click="saveShopPrice()" size="medium">保存</GuipButton>
                </div>
            </el-form>
        </div>

        <!-- 店铺商品绑定-->
        <div class="flex-common mb12 price-set" v-if="serviceAddInfo.shop_price_set">
            <el-form class="el-row demo-ruleForm" ref="formRef">
                <div class="price-top">
                    <span class="title">关联电商商品</span>
                    <span class="desc">必须关联，且确保服务与{{ serviceAddInfo.shop_name }}电商商品一致</span>
                </div>
                <div class="flex-wrap" @click="bindGoods">
                    <div class="flex-left bind-button gap12">
                        <img src="@/assets/addIcon.svg" alt="">
                        <span>添加宝贝</span>
                    </div>
                </div>
                <div class="bind-list" v-if="bindList">
                    <div class="bind-item" v-for="(row, key) in bindList" :key="key">
                        <img :src="row.pic_url ? row.pic_url : require('@/assets/site/invalid.png')" alt="">
                        <div class="bind-goods-info">
                            <div class="bind-goods-title">
                                <el-link :href="row.link" target="_blank">{{ row.title }}</el-link>
                            </div>
                            <div class="flex-between gap12">
                                <div class="flex gap12">
                                    <span v-if="row.price">￥{{ row.price }}</span>
                                    <span v-if="row.sec_title">{{ row.sec_title }}</span>
                                </div>
                                <div class="flex gap12">
                                        <span class="bind-btn bind-delete"
                                              @click="handleDelBindClick(row, key)">删除</span>
                                    <span class="bind-btn"
                                          :class="row.is_default === '1' ? 'bind-default-active' : 'bind-default'"
                                          @click="handleDefaultConfirm(row.id)">默认商品</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>

            <bindGoods :showBind="showBind" :uid="uid" :type="type" :pati="pati" :pageCode="pageCode"
                       @handleBind="handleBind">
            </bindGoods>

            <GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false"
                        @confirm="handleDelBindConfirm" @cancel="handleDelBindCancel">
                您确定要删除吗？删除后所有绑定都会删除
            </GuipDialog>
        </div>
    </div>
</template>
<script>

import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import bindGoods from "@/components/bindGoods.vue";
import GuipDialog from "@/components/GuipDialog.vue";
import PromptText from "@/components/PromptText.vue";

export default {
  name: 'priceSet',
  props: {
    serviceInfo: {
        type: Object,
        required: true
    }
  },
  components: {
      GuipSelect,
      GuipInput,
      GuipButton,
      PromptText,
      bindGoods,
      GuipDialog

  },
  data(){
    return {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
        info:{},
        uid: 0,
        type: 0,
        serviceAddInfo:{},
        service_unit:'',
        bindList: [],
        showBind: false,
        pati: '',
        pageCode: '',
        dialogDelBindConfim: false,
    }
  },
  mounted() {
      this.info = JSON.parse(JSON.stringify(this.serviceInfo))
      if(Object.keys(this.info).length>0){
          this.uid = this.info.uid
          this.type = this.info.type
          this.getServiceAddInfo()
          this.getServiceBindGoods()
      }
  },
  methods:{
      //获得要添加的服务信息
      getServiceAddInfo() {
          const that = this
          that.$http('POST', '/agentnew/ajax_get_service_add_info', {
              uid: that.uid,
              type: that.type,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if (response.status) {
                  that.$nextTick(() => {
                      that.serviceAddInfo = response.data
                      that.service_unit = that.serviceAddInfo.unit
                      //拼多多渠道查询商品所需参数初始化
                      if (that.serviceAddInfo.shop_name === '拼多多') this.initPddParam(that.uid)
                  })
                  return true
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      //查询绑定的宝贝
      getServiceBindGoods() {
          const that = this
          that.$http('POST', '/agentnew/ajax_get_service_bind_goods', {
              uid: that.uid,
              type: that.type,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if (response.status && response.data) {
                  that.$nextTick(() => {
                      that.bindList = response.data
                  })
              }
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      handleUnitName(){
          this.serviceAddInfo.unit_name =  this.serviceAddInfo.set_units[this.service_unit]
      },
      resetPrice() {
          this.info.price = ''
          this.info.unit_num = ''
          this.info.b_unit_price = ''
          this.info.b_unit_num = ''
      },
      savePrice() {
          const that = this
          //非字符计费
          if(that.service_unit !== '0') {
              that.info.unit_num = 1
              that.info.base_unit_num = ''
              that.info.base_unit_price = ''
          }
          this.$http('POST', "/agentnew/ajax_set_service_price", {
              uid: that.uid,
              type: that.type,
              unit: that.service_unit,
              unit_num: that.info.unit_num,
              unit_price: that.info.price,
              b_unit_num: that.info.base_unit_num,
              b_unit_price: that.info.base_unit_price,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if (response.status) {
                  that.$message.success('保存成功');
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      resetShopPrice() {
          this.info.unit_piece = ''
          this.info.unit_num = ''
          this.info.b_unit_piece = ''
          this.info.b_unit_num = ''
      },
      saveShopPrice() {
          const that = this
          //非字符计费 单位默认为 1
          //非字符计费
          if(that.service_unit !== '0') {
              that.info.unit_num = 1
              that.info.base_unit_num = ''
              that.info.base_unit_piece = ''
          }
          this.$http('POST', "/agentnew/ajax_set_service_price", {
              uid: that.uid,
              type: that.type,
              unit: that.service_unit,
              unit_num: that.info.unit_num,
              unit_piece: that.info.unit_piece,
              b_unit_num: that.info.base_unit_num,
              b_unit_piece: that.info.base_unit_piece,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if (response.status) {
                  that.$message.success('保存成功');
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      //------绑定相关 start------
      bindGoods() {
          this.showBind = true
      },
      handleBind(bindRes) {
          this.showBind = false
          if (bindRes) this.getServiceBindGoods()
      },
      async getPddPageCode(uid) {
          const that = this
          return await that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
              uid: uid,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              return response.data
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      async initPddParam(uid) {
          if (typeof window.PDD_OPEN_init === 'function') {
              this.pageCode = await this.getPddPageCode(uid)

              await window.PDD_OPEN_init({ code: this.pageCode })
              this.pati = await window.PDD_OPEN_getPati()
          } else {
              console.error('PDD_OPEN_init 不存在，SDK 未正确加载');
          }
      },
      handleDelBindClick(row, index) {
          this.dialogDelBindConfim = true
          this.delRow.index = index
          this.delRow.row = row
      },
      handleDelBindCancel() {
          this.dialogDelBindConfim = false
      },
      handleDelBindConfirm() {
          const that = this
          this.dialogDelBindConfim = false
          this.$http('POST', '/agentnew/ajax_del_bind_service_goods', {
              uid: that.uid,
              type: that.type,
              numiid: that.delRow.row.num_iid,
              skuid: that.delRow.row.sku_id,
              paytype: that.delRow.row.pay_type,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if (response.status) {
                  that.$message.success('删除成功');
                  this.$nextTick(() => {
                      that.bindList.splice(that.delRow.index, 1);
                  })
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      handleDefaultConfirm(id) {
          const that = this
          this.$http('POST', '/agentnew/ajax_default_bind_setting', {
              uid: that.uid,
              type: that.type,
              id: id,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if (response.status) {
                  that.$message.success('设置成功');
                  that.bindList.forEach((item) => {
                      item.is_default = '0'
                      if (item.id === id) item.is_default = '1'
                  });
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      //------绑定相关 end------
  }
}
</script>
<style lang="scss">
.price-set {
  letter-spacing: 0.08em;

  .price-top {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .title {
      font-size: 14px;
      font-weight: bold;
      color: #1E2226;
    }

    .desc {
      font-size: 14px;
      color: #626573;
      margin-left: 12px;
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .third-width {
    width: calc((100% - 109px) / 2);
  }
}
.service-opt {
  justify-content: right;
}

.bind-button {
  padding: 15px 20px;
  border-radius: 4px;
  border: 1px dashed #BABDC2;
  justify-content: center;
  align-items: center;
}

.bind-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  margin-top: 32px;

  .bind-item {
    display: flex;
    gap: 22px;
    justify-content: space-between;
    width: calc((100% - 78px) / 2);
    height: 80px;
    border-radius: 8px;
    background: #FAFAFA;
    padding: 16px;
    color: #626573;

    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }

    .bind-goods-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: calc(100% - 80px);

      .bind-goods-title {
        text-align: left;

        a {
          color: #1E2226;
        }

        a:hover {
          color: #006AFF;
        }
      }

      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .bind-btn {
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 0 50%;
        background-size: 16px 16px;
        padding: 2px 0 2px 22px;
      }

      .bind-delete {
        color: #626573;
        background-image: url(@/assets/site/delete.svg);
      }

      .bind-default {
        color: #626573;
        background-image: url(@/assets/site/star-icon.svg);
      }

      .bind-default-active {
        color: #006AFF;
        background-image: url(@/assets/site/star-active-icon.svg);
      }
    }

  }
}
</style>