<template>
  <a-card :bordered="false">
    <a-descriptions bordered>
      <a-descriptions-item label="计划名称">
        test@example.com
      </a-descriptions-item>
      <a-descriptions-item label="公众号">
        Prepaid
      </a-descriptions-item>
    </a-descriptions>
    <div class="mt-25">
      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" header="已选绑定设备">
          <div v-if="targetKeys.length">
            <a-checkbox-group @change="onChangeCheck" style="width: 100%;">
              <a-row>
                <a-col :span="6" v-for="item in targetKeys" :key="item.key" class="mb-15">
                  <a-checkbox :value="item.key">
                    {{ item.title }}
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </div>
          <div v-else>
            <a-empty />
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="选择绑定设备" :disabled="false">
          <div>
            <a-col :md="24" :xs="24" :xl="8" >
              <a-input-search placeholder="请输入设备号" class="mb-15" enter-button @search="onSearch" />
            </a-col>
          </div>
          <a-checkbox-group @change="onChange">
            <a-row>
              <a-col :span="6" v-for="item in mockData" :key="item.key" class="mb-15">
                <a-checkbox :value="item.key">
                  {{ item.title }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!--  -->
    <div class="mt-25 textClass">
      <a-button :loading="loading" type="primary" @click="nextStep" class="mr-25">提交</a-button>
      <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
    </div>
  </a-card>
</template>

<script>
  export default {
    name: 'Step2',
    data() {
      return {
        mockData: [],
        targetKeys: [],
        activeKey: ['1', '2'],
        SelecteData: [],
        loading: false,
        timer: 0,
      }
    },
    mounted() {
      this.getMock()
    },
    methods: {
      getMock() {
        const targetKeys = []
        const mockData = []
        for (let i = 0; i < 20; i++) {
          const data = {
            key: i.toString(),
            title: `设备${i + 1}`,
            chosen: Math.random() * 2 > 1,
          }
          if (data.chosen) {
            targetKeys.push(data.key)
          }
          mockData.push(data)
        }
        this.mockData = mockData
        // this.targetKeys = targetKeys
        console.log(this.mockData, this.targetKeys)
      },
      //选择
      onChange(checkedValues) {
        const that = this
        for (var j = 0; j < that.mockData.length; j++) {
          for (var i = 0; i < checkedValues.length; i++) {
            if (that.mockData[j].key == checkedValues[i]) {
              that.targetKeys.push(that.mockData[j])
              that.mockData.splice(j, 1)
            }
          }
        }
        console.log(that.targetKeys)
      },
      //已选
      onChangeCheck(checkedValues) {
        console.log('已选', checkedValues)
        this.SelecteData = checkedValues
      },
      onSearch(value) {
        console.log('search:', value)
      },
      nextStep() {
        const that = this
        if (that.SelecteData.length <= 0) {
          this.$message.info('请先选择设备')
          return
        }
        console.log('提交信息', that.SelecteData)
        this.$message.info(that.SelecteData)
        this.$emit('nextStep')
      },
      prevStep() {
        this.$emit('prevStep')
      }
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    }
  }
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;
    float: left;

    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }

  /deep/.tree-transfer {
    display: flex;
    justify-content: space-between;
  }

  /deep/.ant-transfer-list {
    width: 44%;
    flex: none;
    margin-top: 25px;
    min-height: 400px;
  }

  /deep/.ant-transfer-operation {
    margin: auto 8px;
  }

  /deep/.ant-card-body {
    padding-bottom: 0;
  }

  /deep/.ant-transfer-list-content>.LazyLoad {
    width: 25%;
    float: left;
  }

  /deep/.ant-descriptions-bordered .ant-descriptions-item-label {
    width: 160px;
  }
</style>
