<template>
  <div>
    <hr />
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">类型</div>
      <div class="panel-value">
      <Select v-model="activeElement.dateType">
          <Option
            v-for="item in dateTypeList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div class="panel-row" v-if="activeElement.dateType == 'date'">
      <vpd-icon name="clock" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <DatePicker type="date" v-model="activeElement.dateValue" placeholder="请选择日期" style="width: 200px"></DatePicker>
      </div>
    </div>
    <div class="panel-row" v-if="activeElement.dateType == 'daterange'">
      <vpd-icon name="clock" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <DatePicker type="daterange" v-model="activeElement.dateValue" placeholder="请选择日期" style="width: 200px"></DatePicker>
      </div>
    </div>
    <div class="panel-row" v-if="activeElement.dateType == 'datetime'">
      <vpd-icon name="clock" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <DatePicker type="datetime" v-model="activeElement.dateValue" placeholder="请选择日期" style="width: 200px"></DatePicker>
      </div>
    </div>
    <div class="panel-row" v-if="activeElement.dateType == 'datetimerange'">
      <vpd-icon name="clock" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <DatePicker type="datetimerange" v-model="activeElement.dateValue" placeholder="请选择日期" style="width: 200px"></DatePicker>
      </div>
    </div>
    <div class="panel-row" v-if="activeElement.dateType == 'year'">
      <vpd-icon name="clock" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <DatePicker type="year" v-model="activeElement.dateValue" placeholder="请选择日期" style="width: 200px"></DatePicker>
      </div>
    </div>
     <div class="panel-row" v-if="activeElement.dateType == 'month'">
      <vpd-icon name="clock" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <DatePicker type="month" v-model="activeElement.dateValue" placeholder="请选择日期" style="width: 200px"></DatePicker>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">尺寸</div>
      <div class="panel-value">
        <Select v-model="activeElement.size">
          <Option
            v-for="item in sizeTypeList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">是否禁用</div>
      <div class="panel-value">
        <Switch v-model="activeElement.diabled" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">是否只读</div>
      <div class="panel-value">
        <Switch v-model="activeElement.readonly" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label" style="width:280px">是否将弹窗放在本页面内</div>
      <div class="panel-value">
        <Switch v-model="activeElement.transfer" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BraidDatepickerStyle",
  props: ["activeElement"],
  data() {
    return {
      sizeTypeList: [
        {
          value: "small",
          label: "small"
        },
        {
          value: "default",
          label: "default"
        },
        {
          value: "large",
          label: "large"
        }
      ],
      dateTypeList: [
        {
          value: "date",
          label: "date"
        },
        {
          value: "daterange",
          label: "daterange"
        },
        {
          value: "datetime",
          label: "datetime"
        },
        {
          value: "datetimerange",
          label: "datetimerange"
        },
        {
          value: "year",
          label: "year"
        },
        {
          value: "month",
          label: "month"
        }
      ],
      
    };
  },
  methods: {
  }
};
</script>
