<template>
	<div class="xd-select-site-path">
		<div class="xd-select-site-path__select-site" v-if="siteList.length > 0" :style="{display:isSiteHidden?'none':''}">
			<div>站点：</div>
			<xd-select-list
				style="max-width: 30%;"
				:size="size"
				:default-value="site"
				:disabled="isSiteDisabled || disabled"
				v-model="site"
				:list="siteList"
				@change="handleSelectSite"
			></xd-select-list>
		</div>
		<div class="xd-select-site-path__select-empty"  v-if="noData">当前加盟商暂无站点，请开通站点在进行配置</div>
		<div class="xd-select-site-path__select-site" v-if="appList.length > 0">
			<div :style="{display:isSiteHidden?'none':''}">应用：</div>
			<xd-select-pages-path
				:size="size"
        :placeholder="placeholder"
				v-model="app"
				:disabled="disabled"
				:default-value="app"
				:key="appListKey"
				:setting="appSetting"
			></xd-select-pages-path>
		</div>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import XdSelectList from "@/components/XdSelectList";
  import XdSelectPagesPath from "@/components/formItem/XdSelectPagesPath";
  export default {
    name: "XdSelectSitePath",
		components: {
      XdSelectList,
      XdSelectPagesPath
		},
    mixins: [emitter],
		props:{
      defaultValue: {
        type: null|Object,
        default() {
          return null
        },
      },

      maps: {
        type: Object | null,
        default() {
          return null
        },
      },

      setting: {
        type: Object,
        default() {
          return {}
        },
      },

      disabled: {
        type: Boolean,
        default: false,
      },

      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      placeholder: {
        type: String,
        default: '请选择',
      },


      //自定义方法
      handleCustom: {
        type: Function || null,
        default: null
      },

		},
		watch: {
      site(n,o){
        if(o !== null) {
          this.change();
          this.update();
          this.appListKey = Date.now();
          this.app = null;
				}
			},
      app(){
        this.change();
        this.update();
			},
		},
		data(){
      return {
        site: null,
				siteSelect: null,
        siteList: [],
				noData: false,
				isSiteDisabled: false,

        app: null,
				appList: [],
        appListKey: 'appListKey',
        appSetting: {
          router: null
				},
        isSiteHidden:false,
			}
		},

		created(){
      this.getSite();
      if(this.setting && this.setting['site_id']){
        this.isSiteDisabled = true;
			}
      if(this.setting && typeof this.setting['hiddenSite'] === 'boolean'){
        this.isSiteHidden = this.setting['hiddenSite'];
			}
		},

		methods: {
      initSiteList(){
        if(this.defaultValue !== null && this.$xdHelper.checkVarType(this.defaultValue) === 'object') {
          let defaultValue = this.$xdHelper.cloneDeep(this.defaultValue);
          if(this.defaultValue.app) defaultValue = this.$xdHelper.cloneDeep(this.defaultValue.app)
          if (defaultValue.site_id) this.site = defaultValue.site_id;
          if (defaultValue.path) {
            let temp = this.$xdHelper.cloneDeep(defaultValue);
            if(!temp.frontPath) temp.frontPath = `/${temp.dir}${temp.path}`;
            if (temp.path) temp['value'] = temp.path;
            if (temp.site_id) delete temp.site_id;
            this.app = temp;
          }
          this.update()
				};

        if (this.setting && this.setting['site_id']) {
          this.site = this.setting['site_id'];
        }


			},

      handleSelectSite(item){
        this.siteSelect = item;
        if(item.value === '' || item.value === null || item.value === undefined) return
        this.handleCustom({
          action: 'appList',
          data: {
            params: item,
            cb: (res) => {
              this.appList = res;
              this.appSetting = {
                router: this.appList
              }
            }
          }
        });
			},

			getSite(){
        this.handleCustom({
          action: 'siteList',
          data: {
            cb: (res) => {
              this.noData = res.length === 0;
              this.siteList = res;
              let site = null;
              if (this.setting && this.setting['site_id']) {
                site = this.setting['site_id'];
                if(!this.$xdHelper.isKeyInLists(this.siteList, site, 'value')) {
                  this.$message({
										message: '当前传入的网站ID不可以用，请确认之后再试！',
										type: 'error'
									})
								}
              }

              this.initSiteList();
            }
          }
        });
			},

      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(){
			  if((this.siteSelect && this.siteSelect.value) &&
					(this.app && this.app.value)
				) {

          let platform_type = this.app.platform_type
          if(this.app.appType !== '') {
            if(!this.app.platform_type) {
              platform_type = this.app.appType === 'h5'? 9 : (this.app.appType==='wxmp' ? 8:-1)
            }
          }

			    return {
			      all: {site: this.siteSelect.select, app: this.app},
						app: {
              platform_id: this.app.platform_id,
              path: this.app.path,
			        dir: this.app.dir,
              frontPath: this.app.frontPath,
							host: this.siteSelect.select.site_domain,
              site_id: this.siteSelect.select.site_id,
              fixed_business_code: this.app.fixed_business_code || '',
              site_url: `https://${this.siteSelect.select.site_domain}/${this.app.dir}${this.app.path}`,
              appType: this.app.appType,
              appValue: Number(this.app.appValue),
              platform_type: platform_type,
              page_id: this.app.page_id,
              page_value:  this.app.page_value || this.app.value,
              aopen_app_code: this.app.aopen_app_code,
						},
						site: {
			        site_host: this.siteSelect.select.site_domain,
							site_code: this.siteSelect.select.site_code,
              site_id: this.siteSelect.select.site_id,
              site_name: this.siteSelect.select.site_name,
			      }
					}
				}
			  return null;

			},

			/**
			 * @description 数据改变事件
			 */
			change(){
			  this.$emit('onChange', this.checkParams())
			},


      /**
			 * @description 双向绑定数据处理
       */
			update(){
        this.$emit('input', this.checkParams());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
          this.dispatch('ElFormItem', 'el.form.blur', [this.checkParams()])
        }
			},


		}
  }
</script>

<style scoped lang="scss">
	.xd-select-site-path {
		&__select-site {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			&:first-child {
				padding-bottom: 10px;
			}
			& > *:first-child {
				color: #666;
				font-size: 12px;
				flex-shrink: 0;
			}

			& > *:last-child {
				flex: 1;
			}
		}
		&__select-empty {
			color: $red;
			line-height: 18px;
		}
	}

	@media screen and (max-width: 768px) {
		.xd-select-site-path {
		}
	}
</style>
