<template>
    <div>
        <el-form :model="formData" :rules="formRules" ref="formRef">
            <div class="step1-wrap min-flex pb90">
                <div class="flex-common">
                    <h3>站点信息</h3>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24">
                                <div slot="formLeft">站点简称</div>
                                <div slot="formRight" class="desc">一个站点对应一个销售渠道，定义好名字好区分</div>
                                <GuipInput slot="formDom" ref="GuipInput" prop="short_name" :maxlength="10" :showWordLimit="true"
                                           v-model="formData.short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
                            </GuipFormItem>
                            <GuipFormItem column="column" class="channel-radio">
                                <div slot="formLeft">销售渠道</div>
                                <span slot="formRight" class="desc">{{channel_label}}</span>
                                <GuipRadio slot="formDom" v-model="formData.sale_channel" :options="sale_channels"
                                           prop="sale_channel" :rules="formRules.sale_channel" @change="radioChange" />
                            </GuipFormItem>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <GuipFormItem column="column" class="mb24">
                                <div slot="formLeft">域名来源</div>
                                <GuipRadio slot="formDom" v-model="domainType" :options="domain_types" prop="domain" :rules="formRules.domain"
                                           @change="radioDomainChange" />
                            </GuipFormItem>
                            <GuipFormItem column="column">
                                <div slot="formLeft">域名设置</div>
                                <GuipInput v-show="domainType==='1'" slot="formDom" v-model="domainPrefix" class="w540">
                                    <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
                                    <span slot="appendshow">{{domainName}}</span>
                                </GuipInput>
                                <domainBind v-show="domainType==='2'" slot="formDom" :defaultPrefix="domainPrefix" :defaultDomain="domainName" @handleEvent="handleChangeDomain" />
                            </GuipFormItem>
                        </div>
                    </div>
                </div>
                <div class="mt20 flex-common">
                    <h3>模板选择</h3>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <p class="flex-left-desc">销售方向</p>
                            <div class="flex mt12">
                                <GuipRadio v-model="formData.site_type" :options="site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
                            </div>
                            <div class="tem-home">
                                <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
                                <div class="tem-home-bottom">
                                    <b>经典深蓝模板（默认）</b>
                                    <div>
                                        <div class="tem-look" @click="lookTemImg">
                                            <img src="@/assets/register/look-tem.svg" alt="">
                                            预览
                                        </div>
                                        <div @click="editTemImg">
                                            <img src="@/assets/register/edit-tem.svg" alt="">
                                            修改
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                        </div>
                    </div>

                </div>
            </div>

            <div class="register-btns">
                <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="saveConfirm">下一步</GuipButton>
            </div>
        </el-form>
    </div>
</template>
<script>

import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipRadio from "@/components/GuipRadio.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import domainBind from "@/components/domainBind.vue";

export default {
  name: 'domainSet',
  props: {
      siteInfo: {
          type: Object,
          required: true
      }
  },
  components: {
      domainBind,
      GuipFormItem, GuipRadio, GuipInput,
      GuipButton
  },
  data(){
    return {
        formData: {
            short_name: '',
            domain:'',
            sale_channel: '',
            site_type: '',
            site_tpl: '1',
            not_finished_uid: '',
        },
        formRules: {
            short_name: [
                { required: true, message: '请输入站点简称', trigger: 'blur' }
            ],
            sale_channel: [
                { required: true, message: '请选择销售渠道', trigger: 'blur' }
            ],
            domain: [
                { required: true, message: '请设置站点域名', trigger: 'blur' }
            ],
            site_type: [
                { required: true, message: '请选择站点类型', trigger: 'blur' }
            ],
        },

        channel_options: [
            { label: '淘系平台售卖', value: '0', selectedLabel: ''},
            { label: '非电商平台销售', value: '1', selectedLabel: '适用于搜索推广，如360、百度、微信售卖等渠道' },
            { label: '自用不出售', value: '2', selectedLabel: '适用于不需要对外售卖，专用于自己检测的用户' },
            { label: '拼多多平台售卖', value: '3', selectedLabel: '' }
        ],

        sale_channels:{},
        domain_types:{},
        site_types:{},
        domainType: '1',
        domainPrefix: '',
        domainName: '',
        platDomain: '',
    }
  },
  watch:{
      domainPrefix() {
          this.checkFormDataDomain();
      },
      domainName() {
          this.checkFormDataDomain();
      }
  },
  computed: {
    channel_label() {
        const labels = this.sale_channels_label;
        const value = this.formData.sale_channel;
        return labels && labels[value] ? labels[value] : '';
    }
  },
  mounted() {
      this.getAddInfo()
  },
  methods:{
      getAddInfo() {
          const that = this
          that.payList = []
          this.$http('POST', '/agentnew/ajax_get_site_add_info', {}).then(response => {
              if(response.status){
                  const addInfo = response.data
                  that.sale_channels = addInfo.sale_channels
                  that.sale_channels_label = addInfo.sale_channels_label
                  that.domain_types = addInfo.domain_types
                  that.site_types = addInfo.site_types
                  that.platDomain = addInfo.plat_domain

                  if(Object.keys(that.siteInfo).length>0){
                      that.$nextTick(() => {
                          that.formData.short_name = that.siteInfo.short_name
                          that.formData.domain = that.siteInfo.domain
                          that.formData.sale_channel = that.siteInfo.sale_channel
                          that.formData.site_type = that.siteInfo.site_type
                          that.formData.site_tpl = that.siteInfo.site_tpl
                          that.formData.not_finished_uid = that.siteInfo.uid

                          //域名存在且不是平台主域名
                          if(that.formData.domain){
                              that.domainType = String(that.siteInfo.domain_type)
                              that.domainPrefix = that.siteInfo.domain_prefix;
                              that.domainName = that.siteInfo.domain_name;
                          }
                      })
                  }else{
                      that.domainName = that.platDomain
                  }
                  return true
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      radioChange(val){
          this.formData.sale_channel = val
      },
      radioDomainChange(val){
          this.domainType = val
          this.domainName = val === '1' ? this.platDomain : ''
      },
      radioTypeChange(val){
          this.formData.site_type = val
      },
      handleClear() {
          this.domainPrefix = '';
      },
      handleChangeDomain(data) {
          this.domainPrefix = data.prefix
          this.domainName = data.domain
      },
      checkFormDataDomain(){
          if (this.domainPrefix && this.domainName) {
              this.formData.domain = this.domainPrefix + this.domainName;
          }
      },
      lookTemImg(){

      },
      editTemImg(){

      },
      saveConfirm() {
          const that = this
          that.$refs.formRef.validate((valid) => {
              if (valid) {
                  const that = this
                  that.$http('POST', '/agentnew/ajax_add_new_site', that.formData).then(response => {
                      if(response.status && response.data.uid){
                          that.formData.uid = response.data.uid
                          that.formData.domain_type = that.domainType
                          that.formData.domain_prefix = that.domainPrefix
                          that.formData.domain_name = that.domainName
                          that.$emit('handelSiteInfo', that.formData)

                          if(that.formData.sale_channel === '2'){
                              //自用站点无需设置收款方式
                              that.$emit('handelStep', 3)
                          }else{
                              that.$emit('handelStep', 2)
                          }
                          return true;
                      }
                      that.$message.error(response.info);
                  }).catch(error => {
                      console.error(error, 'error')
                  })
              }
          });
      },
  }
}
</script>
<style lang="scss" scoped>
.w540{
  width: 540px;
}
.pb90{
  padding-bottom: 90px;
}
.mt20{
  margin-top: 20px;
}
.step1-wrap{
  padding-bottom: 90px;
}

.tem-home {
  width: 100%;
  border-radius: 4px;
  opacity: 1;
  background: #FFFFFF;
  /* middle/middle_line_1 */
  border: 1px solid #DFE2E6;

  .tem-home-top {
    width: 100%;
  }

  .tem-home-bottom {
    display: flex;
    align-items: center;
    padding: 22px 32px;
    justify-content: space-between;

    .tem-look {
      margin-right: 36px;
    }

    div {
      display: flex;
      align-items: center;

      img {
        margin-right: 6px;
      }
    }
  }
}

::v-deep{
  .el-input-group__append{
    width: 175px;
    letter-spacing: 0.08em;
  }

  .channel-radio .el-radio-group{
    text-align: left;
  }
  .channel-radio .el-radio{
    min-width: 120px;
    margin-bottom: 12px;
  }
}
</style>