<template>
  <el-dialog
    title="关联商品"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="510px"
  >

  <div class="content">
    <el-transfer v-model="value" :data="data"></el-transfer>
  </div>
 
    <span slot="footer" class="dialog-footer">
       <el-button size="small" @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import PicUpload from '@/components/pic-upload'
export default {
  data () {
    return {
      visible: false,
      data: [
          {
            key: 1,
            label: `备选项1`,
          },
          {
            key: 2,
            label: `备选项2`,
          },
          {
            key: 3,
            label: `备选项3`,
          },
          {
            key: 4,
            label: `备选项4`,
          },
          {
            key: 5,
            label: `备选项5`,
          },
          {
            key: 6,
            label: `备选项6`,
          },
      ],
      value: [1,4]
    }
  },
 
  methods: {
    open(){
      this.visible = true
    },
    dataFormSubmit(){},
    submit () {
       this.visible = false
      this.$emit('close')
      //  this.$http({
      //       url: this.$http.adornUrl(`/prod/category`),
      //       method: this.dataForm.categoryId ? 'put' : 'post',
      //       data: this.$http.adornData({
      //         'categoryId': this.dataForm.categoryId || undefined,
      //         'categoryName': this.dataForm.categoryName,
      //         'status': this.dataForm.status,
      //         'seq': this.dataForm.seq,
      //         'grade': this.dataForm.grade,
      //         'parentId': this.dataForm.parentId,
      //         'pic': this.dataForm.pic
      //       })
      //     }).then(({ data }) => {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success',
      //         duration: 1500,
      //         onClose: () => {
      //           this.visible = false
      //           this.$emit('close')
      //         }
      //       })
      //     })
    },
   
  }
}
</script>

<style lang="scss">
.setp-box{
  display: flex;
  .setp{
    flex-shrink: 1;
    .num{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
    .line{
      width: 1px;
      height: 100px;
      background: #ccc;
      margin-left: 15px;
    }
  }

  .content{
    .title{
      font-size: 18px;
    }
    .desc{
          color: rgba(150, 150, 150, 1);
          font-size: 14px;
          line-height: 20px;
    }

    .box{
      border: 1px dashed rgba(232, 232, 236, 1);
      padding: 10px 20px;
      background: rgb(250, 250, 250);
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .name-box{
        color: rgba(150, 150, 150, 1);
        font-size: 14px;
        line-height: 23px;
        display: flex;
        align-items: center;
      }
    }
    .upload-demo,.el-upload,.el-upload-dragger{
      width: 440px;
      height: 88px;
    }
    .el-icon-upload{
      margin: 0;
    }
  }
}
</style>
