<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">{{formData.sale_channel_label}}</span>
                                <GuipRadio slot="formDom" v-model="formData.sale_channel" :options="formData.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="formData.domain_type" :options="formData.domain_types" prop="domain" :rules="formRules.domain"
                                           @change="radioDomainChange" />
                            </GuipFormItem>
                            <GuipFormItem column="column">
                                <div slot="formLeft">域名设置</div>
                                <GuipInput v-show="formData.domain_type==='1'" slot="formDom" v-model="formData.domain_prefix" class="w540">
                                    <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
                                    <span slot="appendshow">{{formData.domain_name}}</span>
                                </GuipInput>
                                <domainBind v-show="formData.domain_type==='2'" slot="formDom" :defaultPrefix="formData.domain_prefix" :defaultDomain="formData.domain_name" @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="formData.site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
                            </div>
                            <div class="tem-home">
                                <div class="tem-home-top">
                                    <img :src="formData.picture?formData.picture:require('@/assets/register/tem-img-normal.png')" alt="">
                                </div>
                                <div class="tem-home-bottom">
                                    <input type="hidden" v-model="formData.site_tpl">
                                    <b>{{formData.site_tpl_name}}</b>
                                    <div>
                                        <div class="tem-look" @click="previewTpl">
                                            <img src="@/assets/register/look-tem.svg" alt="">
                                            预览
                                        </div>
                                        <div @click="changeTpl">
                                            <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";
import db from '@/utils/indexedDBUtil'

export default {
  name: 'domainSet',
  props: {
      siteInfo: {
          type: Object,
          required: true
      }
  },
  components: {
      domainBind,
      GuipFormItem, GuipRadio, GuipInput,
      GuipButton
  },
  data(){
    return {
        formData: {
            short_name: '',
            sale_channel: '',
            sale_channel_label: '',
            site_type: '',
            site_tpl: '',
            site_tpl_name: '',
            site_tpl_ico: '',
            site_tpl_logo: '',
            picture:'',
            not_finished_uid: '',
            plat_domain: '',
            domain_type: '',
            domain_prefix: '',
            domain_name: '',
            sale_channels:{},
            sale_channels_label:{},
            domain_types:{},
            site_types:{},
            site_type_tpl:{},
        },
        formRules: {
            short_name: [
                { required: true, message: '请输入站点简称', trigger: 'blur' }
            ],
            sale_channel: [
                { required: true, message: '请选择销售渠道', trigger: 'blur' }
            ],
            domain_prefix: [
                { required: true, message: '请设置站点域名', trigger: 'blur' }
            ],
            site_type: [
                { required: true, message: '请选择站点类型', trigger: 'blur' }
            ],
        },
    }
  },
  computed: {
    submitData() {
        return {
            short_name: this.formData.short_name,
            domain: this.formData.domain_prefix + this.formData.domain_name,
            sale_channel: this.formData.sale_channel,
            site_type: this.formData.site_type,
            site_tpl: this.formData.site_tpl,
            not_finished_uid: this.formData.not_finished_uid,
            ico: this.formData.site_tpl_ico,
            logo: this.formData.site_tpl_logo,
        }
    },
  },
  mounted() {
      const formData = JSON.parse(localStorage.getItem('formData'))
      if(formData){
          this.formData = formData;
          localStorage.removeItem('formData')
          this.getSiteTplSet()
          return true;
      }

      this.getAddInfo()
  },
  methods:{
      async getSiteTplSet(){
          const siteTplInfo = JSON.parse(localStorage.getItem('site_tpl_info'))
          if(siteTplInfo){
              this.formData.site_tpl = siteTplInfo.site_tpl
              this.formData.site_tpl_name = siteTplInfo.site_tpl_name
              this.formData.picture = siteTplInfo.picture
              localStorage.removeItem('site_tpl_info')
          }

          const ico = await db.get('ico')
          if(ico){
              this.formData.site_tpl_ico = ico
              await db.remove('ico')
          }
          const logo = await db.get('logo')
          if(logo){
              this.formData.site_tpl_logo = logo
              await db.remove('logo')
          }
      },
      getAddInfo() {
          const that = this
          this.$http('POST', '/agentnew/ajax_get_site_add_info', {}).then(response => {
              if(response.status){
                  const addInfo = response.data
                  that.formData.sale_channels = addInfo.sale_channels
                  that.formData.sale_channels_label = addInfo.sale_channels_label

                  that.formData.domain_type = String(addInfo.domain_type)
                  that.formData.domain_types = addInfo.domain_types
                  that.formData.plat_domain = addInfo.plat_domain
                  that.formData.domain_name = addInfo.plat_domain

                  that.formData.site_type = String(addInfo.site_type)
                  that.formData.site_types = addInfo.site_types
                  that.formData.site_type_tpl = addInfo.site_type_tpl
                  if(that.formData.site_type){
                      that.formData.site_tpl = this.formData.site_type_tpl[this.formData.site_type].site_tpl
                      that.formData.site_tpl_name = this.formData.site_type_tpl[this.formData.site_type].site_tpl_name
                      that.formData.picture = this.formData.site_type_tpl[this.formData.site_type].picture
                  }

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

                          //域名存在且不是平台主域名
                          if(that.siteInfo.domain){
                              that.formData.domain_type = String(that.siteInfo.domain_type)
                              that.formData.domain_prefix = that.siteInfo.domain_prefix;
                              that.formData.domain_name = that.siteInfo.domain_name;
                          }
                      })
                  }
                  return true
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      radioChange(){
          const labels = this.formData.sale_channels_label;
          const value = this.formData.sale_channel;
          this.formData.sale_channel_label = labels && labels[value] ? labels[value] : '';
      },
      radioDomainChange(){
          this.formData.domain_name = this.formData.domain_type === '1' ? this.formData.plat_domain : ''
      },
      radioTypeChange(){
          if(this.formData.site_type){
              this.formData.site_tpl = this.formData.site_type_tpl[this.formData.site_type].site_tpl
              this.formData.site_tpl_name = this.formData.site_type_tpl[this.formData.site_type].site_tpl_name
              this.formData.picture = this.formData.site_type_tpl[this.formData.site_type].picture
          }
      },
      handleClear() {
          this.formData.domain_prefix = '';
      },
      handleChangeDomain(data) {
          this.formData.domain_prefix = data.prefix
          this.formData.domain_name = data.domain
      },
      previewTpl(){
          window.open('http://'+this.siteInfo.domain, '_blank');
      },
      changeTpl(){
          if(this.formData.site_type === ''){
              this.$message.warning('请选择站点类型');
              return false;
          }
          localStorage.setItem('formData', JSON.stringify(this.formData))
          this.$router.push(`/agent/siteTemplate?site_type=${this.formData.site_type}`)
      },
      saveConfirm() {
          const that = this
          that.$refs.formRef.validate((valid) => {
              if (valid) {
                  const that = this
                  that.$http('POST', '/agentnew/ajax_add_new_site', that.submitData).then(response => {
                      if(response.status && response.data.uid){
                          that.formData.uid = response.data.uid
                          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%;
    height: 255px;
    overflow: hidden;
    img{
      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>