<template>
  <div
    v-if="!activeElement.page && tab === 1"
    class="panel-wrap">
    <!-- 公共属性 -->
    <div class="panel-row">
      <vpd-icon name="layers" />
      <div class="panel-label">层级</div>
      <div class="panel-value">
        <Input
          v-model="activeElement.z"
          type="number" ></Input>
      </div>
    </div>

    <div class="panel-row">
      <vpd-icon name="more-horizontal" />
      <div class="panel-label">宽度</div>
      <div class="panel-value">
        <Input type="number"
          v-model="widthDisplay">
        <Select
          slot="prepend"
          v-model="widthType"
          style="width:80px">
          <Option value="percent">百分比</Option>
          <Option value="pixel">像素值</Option>
        </Select>
        <Select
          slot="append"
          v-model="widthType"
          style="width: 50px">
          <Option value="percent">%</Option>
          <Option value="pixel">px</Option>
        </Select>
      </Input>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="more-horizontal" />
      <div class="panel-label">高度</div>
      <div class="panel-value">
        <Input type="number"
          v-model="heightDisplay">
        <Select
          slot="prepend"
          v-model="heightType"
          style="width:80px">
          <Option value="percent">百分比</Option>
          <Option value="pixel">像素值</Option>
        </Select>
        <Select
          slot="append"
          v-model="heightType"
          style="width: 50px">
          <Option value="percent">%</Option>
          <Option value="pixel">px</Option>
        </Select>
      </Input>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="more-horizontal" />
      <div class="panel-label">横坐标</div>
      <div class="panel-value">
        <Input type="number"
          v-model="leftDisplay">
        <Select
          slot="prepend"
          v-model="leftType"
          style="width:80px">
          <Option value="percent">百分比</Option>
          <Option value="pixel">像素值</Option>
        </Select>
        <Select
          slot="append"
          v-model="leftType"
          style="width: 50px">
          <Option value="percent">%</Option>
          <Option value="pixel">px</Option>
        </Select>
      </Input>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="more-horizontal" />
      <div class="panel-label">纵坐标</div>
      <div class="panel-value">
        <Input type="number"
          v-model="topDisplay">
        <Select
          slot="prepend"
          v-model="topType"
          style="width:80px">
          <Option value="percent">百分比</Option>
          <Option value="pixel">像素值</Option>
        </Select>
        <Select
          slot="append"
          v-model="topType"
          style="width: 50px">
          <Option value="percent">%</Option>
          <Option value="pixel">px</Option>
        </Select>
      </Input>
      </div>
    </div>

    <!-- 组件样式 -->
    <component
      v-for="(item, i) in widgetStyle"
      v-if="item.type === activeElement.type"
      :is="widgetStyle[i]"
      :key="i"
      :active-element="activeElement"
    />

    <!-- 自定义样式 -->
    <!-- <div>
      <hr />
      <div class="panel-row">
        <vpd-icon name="layout" />
        <div class="panel-label">自定义样式</div>
      </div>
       <div class="panel-row">
        <vpd-icon name="layout" />
        <div class="panel-value"><codemirror v-model="activeElement.mystyle" :options="cmOptions"></codemirror></div>
      </div>

    </div>-->

    <!-- 添加到容器 -->
    <div v-if="activeElement.isChild">
      <hr >
      <div class="panel-row">
        <vpd-icon name="layout" />
        <div class="panel-label">元素名称</div>
        <div class="panel-value">
          <Input v-model="activeElement.name" ></Input>
        </div>
      </div>
      <div class="panel-row">
        <vpd-icon name="layout" />
        <div class="panel-label">所属容器</div>
        <div class="panel-value">
          <Select v-model="activeElement.belong" @on-change="changeBelong()">
            <Option
              v-for="(val, index) in containerName"
              :key="index"
              :value="val">{{ val }}</Option>
          </Select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import widget from '../../plugins/widget';
import vpd from '../../mixins/vpd';

export default {
  name: 'PanelStyle',
  mixins: [vpd],
  props: ['activeElement', 'tab'],
  data () {
    return {
      widthType: 'percent',
      heightType: 'percent',
      leftType: 'percent',
      topType: 'percent',
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: {
          name: 'javascript',
          json: true
        },
        theme: 'base16-dark',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    };
  },
  computed: {
    widgetStyle () {
      return widget.getWidgetStyle();
    },
    // 页面高度
    height () {
      return this.$vpd.state.page.height;
    },
    // 读取和设置, 计算属性的 getter 和 setter
    widthDisplay: {
      get: function () {
        if (this.widthType == 'percent') {
          return Number(this.activeElement.width).toFixed(2);
        } else {
          return Number(this.activeElement.width / 100 * this.activeElement.offsetWidth / 100 * this.$vpd.state.page.width).toFixed(2);
        }
      },
      set: function (v) {
        if (this.widthType == 'percent') {
          this.activeElement.width = v
        } else {
          this.activeElement.width = (v / this.$vpd.state.page.width) * this.activeElement.offsetWidth;
        }
      }
    },
    // 读取和设置, 计算属性的 getter 和 setter
    heightDisplay: {
      get: function () {
        if (this.heightType == 'percent') {
          return Number(this.activeElement.height).toFixed(2);
        } else {
          return Number(this.activeElement.height / 100 * this.activeElement.offsetHeight / 100 * this.$vpd.state.page.height).toFixed(2);
        }
      },
      set: function (v) {
        if (this.heightType == 'percent') {
          this.activeElement.height = v
        } else {
          this.activeElement.height = (v / this.$vpd.state.page.height) * this.activeElement.offsetHeight;
        }
      }
    },
    // 读取和设置, 计算属性的 getter 和 setter
    leftDisplay: {
      get: function () {
        if (this.leftType == 'percent') {
          return Number(this.activeElement.left).toFixed(2);
        } else {
          return Number(this.activeElement.left / 100 * this.activeElement.offsetWidth / 100 * this.$vpd.state.page.width).toFixed(2);
        }
      },
      set: function (v) {
        if (this.leftType == 'percent') {
          this.activeElement.offsetLeft = this.activeElement.offsetLeft + (v - this.activeElement.left) * this.activeElement.offsetWidth / 100
          this.activeElement.left = v
        } else {
          this.activeElement.left = (v / this.$vpd.state.page.width) * this.activeElement.offsetWidth;
          this.activeElement.offsetLeft = v / this.$vpd.state.page.width;
        }
      }
    },
    // 读取和设置, 计算属性的 getter 和 setter
    topDisplay: {
      get: function () {
        if (this.topType == 'percent') {
          return Number(this.activeElement.top).toFixed(2);
        } else {
          return Number(this.activeElement.top / 100 * this.activeElement.offsetHeight / 100 * this.$vpd.state.page.height).toFixed(2);
        }
      },
      set: function (v) {
        if (this.topType == 'percent') {
          this.activeElement.offsetTop = this.activeElement.offsetTop + (v - this.activeElement.top) * this.activeElement.offsetHeight / 100
          this.activeElement.top = v
        } else {
          this.activeElement.height = (v / this.$vpd.state.page.height) * this.activeElement.offsetHeight;
        }
      }
    },
    // 容器名称
    containerName () {
      var arr = ['page'];
      this.$vpd.state.widgets.map(
        val => val.isContainer && val.name && arr.push(val.name)
      );

      return arr;
    }
  },
  methods: {
    updateWidget () {
      this.$vpd.commit('updateWidgets', [this.activeElement]);
    },
    changeBelong() {
      if (this.activeElement.belong == 'page') {
        this.activeElement.offsetLeft = this.activeElement.left;
        this.activeElement.offsetTop = this.activeElement.top;
         this.activeElement.offsetWidth = 100;
        this.activeElement.offsetHeight = 100
      } else {
        let belongWidgets = this.$vpd.state.widgets.filter(item => {
          return item.uuid == this.activeElement.belong
        })
        this.activeElement.offsetLeft = belongWidgets[0].offsetLeft 
            + this.activeElement.left * (belongWidgets[0].width * belongWidgets[0].offsetWidth / 100 ) / 100
        this.activeElement.offsetTop = belongWidgets[0].offsetTop 
          + this.activeElement.top * (belongWidgets[0].height * belongWidgets[0].offsetHeight / 100 ) / 100
       
        this.activeElement.offsetWidth = belongWidgets[0].width
        this.activeElement.offsetHeight = belongWidgets[0].height
      }
    }
  }
};
</script>
