<template>
    <div>
        <PromptText text='操作提示：设置价格并保存，即添加服务' :type="2" class="mr12 ml12"/>

        <div class="main-content12">
            <!-- page content -->
            <div class="flex-common" v-for="(ver_row) in serviceAddList" :key="ver_row.name">
                <h3>{{ver_row.name}}</h3>
                <div class="service-setting-area" :class="row.status == 1 ? 'service-setting-open' : ''" v-for="(row) in ver_row.list" :key="row.type" :id="'section_'+row.type">
                    <el-form class="el-row demo-ruleForm" ref="formRef">
                        <div class="service-flex service-title">
                            <div class="service-title-left">
                                <span class="service-title-name">{{row.type_name}}</span>
                                <span v-if="row.status == 1" class="service-title-status">已开启</span>
                                <span v-if="row.status == 1" class="service-title-close">关闭服务</span>
                            </div>
                            <div class="service-title-right">
                                <el-checkbox v-model="row.has_base_price" @change="toggleSetBasePrice(row)">设置起售价格</el-checkbox>
                            </div>
                        </div>
                        <div class="service-flex">
                            <div class="service-info-item">
                                <span class="mr12">供货价格</span>
                                <span>{{row.supply_price}}</span>
                            </div>
                            <div class="service-info-item" v-if="row.freedom_set">
                                <GuipRadio label="计费方式" v-model="row.default_set" :options="methodOptions" @change="methodChange()"/>
                            </div>
                            <div class="service-info-item">
                                <GuipInput v-model="row.price" label="售价管理" ref="GuipInput" width="180px" unit="元"></GuipInput>
                                <template v-if="row.default_set == 0">
                                    <span class="mr12"></span>
                                    <GuipInput v-model="row.unit_num" ref="GuipInput" width="180px" unit="字符"></GuipInput>
                                </template>
                            </div>
                        </div>
                        <div class="service-flex" v-if="row.has_base_price">
                            <div class="service-info-item">
                                <GuipInput v-model="row.b_unit_num" label="起售价格" ref="GuipInput" width="240px" unit="字符内"></GuipInput>
                                <span class="ml12 mr12">用户需支付</span>
                                <GuipInput v-model="row.b_unit_price" ref="GuipInput" width="240px" unit="元"></GuipInput>
                                <span class="service-base-remark ml12">备注：超过设定字符，按照正常售价收取</span>
                            </div>
                        </div>
                        <div class="service-flex service-opt">
                            <GuipButton type="ignore" @click="reset">重置</GuipButton>
                            <GuipButton type="primary" @click="save(row)" size="medium">保存</GuipButton>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipRadio from "@/components/GuipRadio.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";
import PromptText from "@/components/PromptText.vue";

export default {
    name: 'siteServiceAdd',
    props: [''],
    components: {
        PromptText,
        GuipButton,
        GuipInput,
        GuipRadio


    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
            uid:0,
            serviceAddList:[],
            methodOptions: [],
            obj:{
                '1': {
              type: '1',
              name: '万方数字哈哈哈哈',
              is_select: true,
              list: [
                  {
                      type: '29',
                      name: '万方通用版44生生世世生生世世',
                      is_select: true,
                      //componentsName:'1-1'
                  },
                  {
                      type: '30',
                      name: '通用说播版44',
                      is_select: false,
                      //componentsName:'1-2'
                  },
                  {
                      type: '32',
                      name: '本科通用版44',
                      is_select: false,
                      //componentsName:'1-3'
                  },
              ]
          },
          '3': {
              type: '3',
              name: '万方',
              is_select: true,
              list: [
                  {
                      type: '6',
                      name: '万方通用版a salads asides33',
                      is_select: true,
                      //componentsName:'2-2'
                  },
                  {
                      type: '27',
                      name: '通用说播版33',
                      is_select: true,
                      //componentsName:'2-3'
                  },
                  {
                      type: '109',
                      name: '本科通用版33',
                      is_select: true,
                      //componentsName:'2-4'
                  },
              ]
          },
          '6': {
              type: '6',
              name: '万方',
              is_select: true,
              list: [
                  {
                      type: '10',
                      name: '万方通用版11',
                      is_select: false,
                      //componentsName:'3-4'
                  },
                  {
                      type: '11',
                      name: '通用说播版11',
                      is_select: true,
                      //componentsName:'3-5'
                  },
                  {
                      type: '105',
                      name: '本科通用版11',
                      is_select: false,
                      //componentsName:'3-4'
                  },
              ]
          },
            }
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        if(!this.$route.query.uid) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteList')
        }
        this.uid = this.$route.query.uid;

        // store.commit('SET_CUSTOMIZE', true);
        // store.commit('SET_SLIDER_MENU', 'siteSettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '站点信息');

        this.getServiceAdd();
    },
    methods: {
        // 获取站点信息
        getServiceAdd() {
            const that = this
            that.siteInfo = []
            this.$http('POST', '/agentnew/ajax_get_service_add', {
                uid:  that.uid,
                prodid: that.$route.query.prodid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.serviceAddList = response.data.service_add_list
                    store.commit('SET_BREADRIGHTTEXT', response.data.site_short_name);
                    // 假装有数据啦
                    store.commit('SET_SECOND_MENU', this.obj);
                    that.methodOptions = Object.entries(response.data.freedom_set_method).map(([key, value]) => ({
                        label: value,
                        value: Number(key)
                    }));
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        toggleSetBasePrice(row){
            row.has_base_price = row.has_base_price == true ? false : true;
        },
        methodChange(){
        },
        reset(){

        },
        save(row){
            console.log(row)
            const that = this
            this.$http('POST', "/agentnew/ajax_set_service_price", {
                uid: that.uid,
                type: row.type,
                unit_num: row.unit_num,
                unit_price: row.price,
                // unit_piece: row.unit_piece,
                b_unit_num: row.b_unit_num,
                b_unit_price: row.b_unit_price,
                // b_unit_piece: row.b_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')
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.ml12{
  margin-left: 12px;
}

.mr12{
  margin-right: 12px;
}

.warning-text{
  margin: 0 12px;
  display: flex;
  align-items: center;
  padding: 8px 13px;
  align-self: stretch;
  z-index: 1;
  border-radius: 4px;
  background: #FEFCE8;
  border: 1px solid rgba(255, 140, 0, 0.3);
  .warning-icon{
    width: 16px;
    height: 16px;;
    margin-right: 8px;
  }
  span{
    color: #1E2226;
    letter-spacing: 0.08em;
    font-size: 14px;
  }
}

.service-setting-open{
  background: #F2FBED!important;
}

.service-setting-area{
  padding: 24px;
  background: #F6F7FA;
  margin-bottom: 12px;
  letter-spacing: 0.08em;

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

  .el-checkbox{
    color: #1E2226;
  }

  .service-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .service-flex:last-child{
    margin-bottom: 0;
  }

  .service-title{

    .service-title-left .service-title-name{
      color: #1E2226;
      margin-right: 24px;
    }

    .service-title-left .service-title-status{
      border-radius: 4px;
      border: 1px solid rgba(0, 194, 97, 0.6);
      color: #0DAF49;
      padding: 2px 10px 2px 32px;
      background-image: url(@/assets/site/open_success.svg);
      background-repeat: no-repeat;
      background-position: 10px 50%;
      background-size: 16px 16px;
      margin-right: 12px;
    }
    .service-title-left .service-title-close{
      color: #8A9099;
      background-image: url(@/assets/site/form_close.svg);
      background-repeat: no-repeat;
      background-position: 0 50%;
      background-size: 16px 16px;
      padding: 2px 10px 2px 22px;
    }
  }

  .service-info-item{
    display: flex;
    align-items: center;
  }

  .service-base-remark{
    font-size: 12px;
    color: #8A9099;
  }

  .service-opt{
    justify-content: right;
  }
}

</style>