<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">复选框组</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdCheckGroupValue" show level="0"></xd-json-view>
        </div>
        <xd-check-group
          
          v-model="xdCheckGroupValue"
          :list="xdCheckGroupList"
          :default-value="[1, 2]"
        >
        </xd-check-group>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">卡号组</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdRangeGroupValue" show level="0"></xd-json-view>
        </div>
        <xd-range-group
          v-model="xdRangeGroupValue"
        ></xd-range-group>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">选择时间</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdSelectWeekValue" show level="1"></xd-json-view>
        </div>
        <xd-select-week-time
          size="medium"
          :default-value="{list: [0,1,2], start:1636128000000, end:1638720000000}"
          :keys="{list: 'week_day',start: 'week_start', end: 'week_end'}"
          :collapse="true"
          v-model="xdSelectWeekValue"
        ></xd-select-week-time>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">调价规则</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdOverAddPriceValue" show level="1"></xd-json-view>
        </div>
        <xd-over-add-price
          size="medium"
          :default-value="{min: 20, list: 'raise', value: 10}"
          :keys="{min:'price_min', list: 'price_type', value: 'price'}"
          v-model="xdOverAddPriceValue"
        ></xd-over-add-price>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">快递单号输入</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdAddExpressValue" show level="1"></xd-json-view>
        </div>
        <xd-add-express
          v-model="xdAddExpressValue"
          :express="null"
          btn-name="提交"
          width="450px"
          size="mini"
        ></xd-add-express>
      </div>
    </div>
    <div class="app-container__item" >
      <div class="app-container__item-h1">输入范围值</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">{{xdRange}}</div>
        <xd-range v-model="xdRange"></xd-range>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">文本框输入显示Tag</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="xdTextareaTagValue" show level="1"></xd-json-view>
        </div>
        <xd-textarea-tag
          :default-value="checklist"
          v-model="xdTextareaTagValue"
        ></xd-textarea-tag>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">输入数字</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">{{xdNumberValue}}</div>
        <xd-number
          width="200"
          max="10"
          min="-10"
          v-model="xdNumberValue"
        ></xd-number>
      </div>
    </div>

  </div>
</template>

<script>
  import XdRange from "@/components/XdRange";
  import XdTextareaTag from "@/components/XdTextareaTag";
  import XdJsonView from "@/components/XdJsonView";
  import XdNumber from "@/components/XdNumber";
  import XdAddExpress from "@/components/XdAddExpress";
  import XdOverAddPrice from "@/components/XdOverAddPrice";
  import XdSelectWeekTime from "@/components/XdSelectWeekTime";
  import XdRangeGroup from "@/components/XdRangeGroup";
  import XdCheckGroup from "@/components/XdCheckGroup";


  export default {
    name: 'AppInput',
    components: {
      XdCheckGroup,
      XdRangeGroup,
      XdSelectWeekTime,
      XdOverAddPrice,
      XdAddExpress,
      XdNumber,
      XdJsonView,
      XdTextareaTag,
      XdRange,
    },
    data() {
      return {
        xdCheckGroupValue: [],
        xdCheckGroupList: [
          {"label": "万利达集团", "value": 1},
          {"label": "中国联通", "value": 2},
          {"label": "中国移动", "value": 3},
          {"label": "味多美", "value": 4},
        ],
        //多选单行显示
        xdRange: [],
        xdTextareaTagValue: [],
        xdNumberValue: 10,
        xdAddExpressValue: [],
        xdOverAddPriceValue: {},
        xdSelectWeekValue: {},
        xdRangeGroupValue: [],
        list: [
          {"label": "万利达集团", "value": 4},
          {"label": "万利达集团-2", "value": 5},
          {"label": "深圳万利达移动通信设备有限公司", "value": 6},
          {"label": "味多美", "value": 7},
        ],

        //多选选项
        checklistDeflautValue: [4, 5],
        checklist: [
          {"label": "万利达集团", "value": 4},
          {"label": "万利达集团-2", "value": 5},
          {"label": "深圳万利达移动通信设备有限公司", "value": 6},
          {"label": "味多美", "value": 7},
        ]
      }
    },

    methods:{
      handleChange(selected){
        console.log('handleChange',selected)
      },
    }
  }

</script>

<style lang="scss" scoped>
  .app-container {
    padding: 20px;

    &__item {
      margin-bottom: 20px;

      &-h1 {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        font-weight: bold;
        background: #efefef;
        font-size: 16px;
        text-align: left;
        margin-bottom: 30px;
      }

      &-body {
        padding: 0 20px;

        &-value {
          padding-bottom: 10px;
        }
      }
    }

  }
</style>
