<template>
  <div id="tableWrap">
    <div>
      <h2>选择分发接口:</h2>
    </div>
    <div>
      <a-checkbox-group @change="onChange">
        <a-checkbox
          v-for="item in dataDistribution"
          :key="item.id"
          :disabled="item.status ===1 "
          :value="item.id">
          {{ item.interfaceName }}
        </a-checkbox>
      </a-checkbox-group>

      <!-- <a-radio-group @change="onChange">
        <a-row>
          <a-col
            :span="12"
            v-for="item in dataDistribution"
            :key="item.id"
          >
            <a-radio :disabled="item.status ===1 " :value="item.id">
              {{ item.interfaceName }}
            </a-radio >
          </a-col>
        </a-row>
      </a-radio-group> -->
    </div>
    <div class="footer-btn">
      <a-button class="closeBtn" type="work" @click="onClose">
        取消
      </a-button>

      <a-button class="submitBtn" type="add" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
import { distribute } from '@/api/masterDataManger/searchMasterData'
export default {
  date() {
    return {
      showdate: '',
      showJournal: true,
      distributionId: []
    }
  },
 props: {
    dataDistribution: {
      type: Array,
      required: true
    },
    selectedRows: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    onChange(checkedValues) {
      console.log(`checkedValues`, checkedValues)
      this.distributionId = checkedValues
      // console.log(`this.distributionId`, this.distributionId)
    },
    onClose() {
      this.showState = false
      this.$emit('getDataDistributionl', this.showState)
    },
    onSubmit() {
      const data = []
      this.distributionId.forEach(item => {
        data.push(
           {
          type: '1',
          distributionId: item,
          list: this.selectedRows
          }
        )
      })
      distribute(data).then(res => {
        if (res.code === 200) {
          this.$message.info(res.msg)
          this.$emit('clearSelectedRows')
          this.onClose()
        } else {
            this.$message.info(res.msg)
        }
      })
    }
  }

}
</script>

<style  lang="less" scoped>
#tableWrap{

  box-sizing: border-box;
  padding: 25px 30px;

  .footer-btn{
    margin-top: 20px;
    text-align: center;
    .ant-btn{
      margin: 0 20px;
    }
  }

}

</style>
