<template>
  <div
    v-if="activeElement.page"
    class="panel-wrap">
    <div
      class="panel-row"
      flex>
      <vpd-icon name="type" />
      <div class="panel-label">页面标题</div>
      <div class="panel-value">
        <Input
          v-model="activeElement.title" 
          />
      </div>
    </div>
    <div
      class="panel-row"
      flex>
      <vpd-icon name="smartphone" />
      <div class="panel-label">页面宽度</div>
      <div class="panel-value">
        <Input-number :max="maxPageWidth" :min="1"  :value="activeElement.width" @on-blur="handleResize()" style="width: 100%"></Input-number>
      </div>
    </div>
    <div
      class="panel-row"
      flex>
      <vpd-icon name="smartphone" />
      <div class="panel-label">页面高度</div>
      <div class="panel-value">
        <Input-number :min="1"  :value="activeElement.height" @on-blur="handleResize()" style="width: 100%"></Input-number>
      </div>
    </div>
    <div
      class="panel-row"
      flex>
      <vpd-icon name="droplet" />
      <div class="panel-label">页面背景色</div>
      <div class="panel-value">
        <input
          v-model="activeElement.backgroundColor"
          type="color">
      </div>
    </div>
    <div
      class="panel-row"
      flex>
      <vpd-icon name="droplet" />
      <div class="panel-label">背景图</div>
      <div class="panel-value">
       <div
         
          :style="{ backgroundImage: 'url(' + activeElement.backPic + ')' }"
          class="panel-preview"
          @click="addPic"
        >
          <Icon type="md-photos" v-show="!activeElement.backPic" name="plus" />
        </div>
      </div>
    </div>
    <div
      class="panel-row"
      flex>
      <vpd-icon name="clock" />
      <div class="panel-label">截止日期</div>
      <div class="panel-value">
        <DatePicker type="date" :value="activeElement.endTime" placeholder="请选择日期" style="width: 200px"></DatePicker>
        <!-- <input
          v-model="activeElement.endTime"
          type="date" /> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['activeElement', 'tab'],
  data() {
    return {
      maxPageWidth: 0 
    }
  },
  mounted() {
    this.maxPageWidth = document.body.clientWidth
    console.log( document.body.clientWidth, 999)
  },
  methods:{
    addPic() {
        this.$parent.$vpd.$emit("upload", payload => {
        this.$parent.$vpd.commit("addContainerBackPic", payload);
      });
    },
    handleResize() {
      this.$parent.$vpd.commit("handleresize");
    }
  }
}
</script>
