<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">Transfer 穿梭框</div>
      <div class="app-container__item-body">
        <xd-transfer
          :default-value="[1,2,3]"
          :left-default-value="[5]"
          :right-default-value="[3]"
          v-model="transferValue"
          :list="transferList"
          @change="handleChange"
        ></xd-transfer>
      </div>
    </div>
    <div class="app-container__item" >
      <div class="app-container__item-h1">多选单行显示(自定义插槽)</div>
      <div class="app-container__item-body">
        <xd-check-box-list
          :list="list"
          v-model="listDeflautValue"
          label-key="value"
          label-name="label"
          item-width="auto"
          is-one-line
          is-all
          item-margin="0 20px 0 0"
          @change="handleChange"
        >
        </xd-check-box-list>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">复选框-选项</div>
      <div class="app-container__item-body">
        <xd-check-list
          :defaule-value="[4,5]"
          @change="handleChange"
          :list="null"
        ></xd-check-list>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">单选框-选项</div>
      <div class="app-container__item-body">
        <xd-radio-list
          :defaule-value="4"
          @change="handleChange"
          :list="null"
        ></xd-radio-list>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">单选框-二选一</div>
      <div class="app-container__item-body">
        <xd-radio-status
          default-value="N"
          @change="handleChange"
          :type-value="2"
          type="associate"
        ></xd-radio-status>
      </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">{{selectValue}}</div>
        <xd-select-list
          :list="null"
          :default-value="5"
          @change="handleSelect"
          v-model="selectValue"
        ></xd-select-list>
      </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">{{selectListValue}}</div>
        <xd-select-list
          :list="null"
          :default-value="5"
          collapse-tags
          multiple
          @change="handleSelect"
          v-model="selectListValue"
        ></xd-select-list>
      </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">{{selectSearchListValue}}</div>
        <xd-select-list
          collapse-tags
          multiple
          is-remote
          @change="handleSelect"
          @onSearch="handleSearch"
          v-model="selectSearchListValue"
        ></xd-select-list>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">下拉选择状态器</div>
      <div class="app-container__item-body">
        <div style="font-size: 12px; line-height: 20px;padding-bottom: 20px;">（best,status,check,associate,yes,open）
        </div>
        <xd-select-status
          placeholder="请选择是否推荐"
          is-all
          :default-value="1"
          type="associate"
        ></xd-select-status>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">Switch 开关</div>
      <div class="app-container__item-body">
        <xd-switch
          :default-value="1"
          :type-value="4"
          v-model="switchComtus"
          :list="['不推荐','推荐']"
          :show-tips="true"
          :color="['#42B983','#F56C6C']"
        ></xd-switch>
      </div>
    </div>

  </div>
</template>

<script>
  import XdCheckBoxList from "@/components/XdCheckBoxList";
  import XdCheckList from "@/components/XdCheckList";
  import XdRadioList from "@/components/XdRadioList";
  import XdRadioStatus from "@/components/XdRadioStatus";
  import XdSwitch from "@/components/XdSwitch";
  import XdSelectStatus from "@/components/XdSelectStatus";
  import XdSelectList from "@/components/XdSelectList";
  import XdTransfer from "@/components/XdTransfer";

  export default {
    name: 'AppSelect',
    components: {
      XdTransfer,
      XdSelectList,
      XdSelectStatus,
      XdSwitch,
      XdRadioList,
      XdCheckBoxList,
      XdCheckList,
      XdRadioStatus
    },
    data() {
      return {
        //Transfer
        transferList: [],
        transferValue:[],

        //多选单行显示
        listDeflautValue:[4,5],
        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},
        ],

        //Switch
        switchComtus: 2,

        //Select
        selectValue: 4,
        selectListValue: 4,
        selectSearchListValue: 4,
        testResult: ["Alabama", "Alaska", "Arizona",
          "Arkansas", "California", "Colorado",
          "Connecticut", "Delaware", "Florida",
          "Georgia", "Hawaii", "Idaho", "Illinois",
          "Indiana", "Iowa", "Kansas", "Kentucky",
          "Louisiana", "Maine", "Maryland",
          "Massachusetts", "Michigan", "Minnesota",
          "Mississippi", "Missouri", "Montana",
          "Nebraska", "Nevada", "New Hampshire",
          "New Jersey", "New Mexico", "New York",
          "North Carolina", "North Dakota", "Ohio",
          "Oklahoma", "Oregon", "Pennsylvania",
          "Rhode Island", "South Carolina",
          "South Dakota", "Tennessee", "Texas",
          "Utah", "Vermont", "Virginia",
          "Washington", "West Virginia", "Wisconsin",
          "Wyoming"],
        testResultList: [],
      }
    },

    created(){
      this.testResultList = this.testResult.map(item => {
        return {value: `value:${item}`, label: `label:${item}`};
      });

      setTimeout(()=>{
        this.transferList = [
          {label: '上海', pinyin: 'shanghai', key: 1, first_pinyin: 'sh'},
          {label: '北京', pinyin: 'beijing', key: 2, first_pinyin: 'bj'},
          {label: '广州', pinyin: 'guangzhou', key: 3, first_pinyin: 'gz'},
          {label: '深圳', pinyin: 'shenzhen', key: 4, first_pinyin: 'sz'},
          {label: '南京', pinyin: 'nanjing', key: 5, first_pinyin: 'nj'},
          {label: '西安', pinyin: 'xian', key: 6, first_pinyin: 'xa'},
          {label: '成都', pinyin: 'chengdu', key: 7, first_pinyin: 'cd'}
        ]
      }, 2000)
    },

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

      handleSelect({value, select}){
        console.log('handleSelect', value, select )
      },

      handleSearch({query}, resolve ){
        console.log(query)
        setTimeout(() => {
          let list = this.testResultList.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
          console.log(list);
          resolve(list)
        }, 500);
      }
    }
  }

</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>
