<template>
  <el-form ref="form" label-width="150px">
    <el-form-item label="主题样式">
      <el-select v-model="comp.props.theme.val" placeholder="请选择">
        <el-option label="样式一" value="1"></el-option>
        <el-option label="样式二" value="2"></el-option>
        <el-option label="样式三" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="logo样式" v-if="comp.props.theme.val==1">
      <el-radio v-model="comp.props.logoStyle.val" label="0">圆形</el-radio>
      <el-radio v-model="comp.props.logoStyle.val" label="1">方形</el-radio>
    </el-form-item>

    <el-form-item v-if="comp.props.bgColor.available " label="背景颜色">
      <el-color-picker v-model="comp.props.bgColor.val"></el-color-picker>
    </el-form-item>

    <el-form-item label="企业名称颜色" v-if="comp.props.theme.val!=3">
      <el-color-picker v-model="comp.props.coNameColor.val"></el-color-picker>
    </el-form-item>
    <el-form-item label="无产品信息隐藏组件">
      <el-switch
        v-model="comp.props.compShow.val"
        active-value="1"
        inactive-value="0"
        @change="changeSwitch()"
      ></el-switch>
    </el-form-item>

    <el-form-item v-if="comp.props.linkType.available" label="跳转到">
      <el-select v-model="comp.props.linkType.val" placeholder="请选择">
        <el-option
          v-for="item in linkType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>

    <div v-if="comp.props.linkType.val">
      <el-form-item
        v-if="comp.props.linkType.available&&comp.props.linkType.val===sup8._def.linkType.innerPage.value"
        label="选择页面"
      >
        <el-select v-model="comp.props.linkVal.val" placeholder="请选择">
          <el-option v-for="p in cfg.pages" :key="p.type" :label="p.name" :value="p.type"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="comp.props.linkType.available&&comp.props.linkType.val===sup8._def.linkType.outerPage.value"
        label="外部地址"
      >
        <el-input
          v-model="comp.props.linkVal.val"
          placeholder="请输入地址"
          :disabled="sup8.role.permissionLevel<comp.props.linkType.level"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item
        v-if="comp.props.linkType.available&&comp.props.linkType.val===sup8._def.linkType.otherTemplate.value"
        label="模板编号"
      >
        <el-input
          v-model="comp.props.linkVal.val"
          placeholder="请输入模板编号"
          :disabled="sup8.role.permissionLevel<comp.props.linkType.level"
        ></el-input>
      </el-form-item> -->
    </div>
  </el-form>
</template>

<script>
export default {
  name: "CompProductProps",
  props: ["cfg", "comp"],
  data() {
    return {
		linkVal: {
			innerPage: "",
			outerPage: "",
			otherTemplate: ""
		},
	  	linkType: { // 页面中链接的跳转方式
			not: {
				value: '-1',
				label: '无'
			},
			innerPage: {
				value: '0',
				label: '内部页面'
			},
			outerPage: {
				value: '1',
				label: '外部页面'
			}
		}
    };
  },
  methods: {
    changeSwitch() {
      this.$forceUpdate();
    }
  },
  watch: {
    "comp.props.linkType.val": function(n, o) {
      var that = this;

      switch (o) {
        case that.sup8._def.linkType.innerPage.value:
          that.linkVal.innerPage = that.comp.props.linkVal.val;
          break;
        case that.sup8._def.linkType.outerPage.value:
          that.linkVal.outerPage = that.comp.props.linkVal.val;
          break;
        // case that.sup8._def.linkType.otherTemplate.value:
        //   that.linkVal.otherTemplate = that.comp.props.linkVal.val;
        //   break;
      }

      switch (n) {
        case that.sup8._def.linkType.innerPage.value:
          that.comp.props.linkVal.val = that.linkVal.innerPage;
          break;
        case that.sup8._def.linkType.outerPage.value:
          that.comp.props.linkVal.val = that.linkVal.outerPage;
          break;
        // case that.sup8._def.linkType.otherTemplate.value:
        //   that.comp.props.linkVal.val = that.linkVal.otherTemplate;
        //   break;
      }
    }
  },
  created: function() {
    var that = this;
    that.mergeCompProps(that.comp);
  },
  mounted: function() {
    var that = this;
  }
};
</script>

<style scoped>
</style>
