<template>
  <div>
    <el-dialog title="上下架" :visible.sync="dialogFormVisible" width="600px">
      <div class="wrap">
        <div class="item">
          已选中：
          <span style="color:red">28</span> 个SPU商品
        </div>
        <div class="item">
          <span class="name">操作类型</span>
          <div class="right">
            <el-radio v-model="radio" label="2">上架</el-radio>
            <el-radio v-model="radio" label="3">下架</el-radio>
          </div>
        </div>
        <div class="item">
          <span class="name">操作平台</span>
          <div class="right">
            <el-checkbox v-model="checked">EDS</el-checkbox>
            <el-checkbox v-model="checked">E淘</el-checkbox>
          </div>
        </div>

        <div class="item">
          <span class="name">执行时间</span>
          <div class="right">
            <el-radio v-model="radio" label="3">立即</el-radio>
          </div>
        </div>
        <div class="item">
          <span class="name">执行时间</span>
          <div class="right">
            <el-radio v-model="radio" label="3">定时</el-radio>
            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期"></el-date-picker>
          </div>
        </div>
        <div class="item">
          <i class="el-icon-warning" style="color: #46B791;font-size: 18px;"></i>
          <span style="color: #999999;font-size: 13px;">设置了定时上下架的商品，到指定时间则会自动上下架！</span>
        </div>
        <!-- <div class="item item2">
          <span class="name">关联标签</span>
          <div class="label-box">
            <el-tag
              :key="index"
              v-for="(tag,index) in label"
              closable
              :disable-transitions="false"
              size="medium"
              @close="labelClose(tag)"
              effect="plain"
              type="info"
            >{{tag}}</el-tag>
            <el-input
              class="input-new-tag"
              v-if="labelVisible"
              v-model="labelValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="labelInputConfirm"
              @blur="labelInputConfirm"
            ></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="labelShow">+ 添加选项</el-button>
          </div>
        </div>-->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      radio: "1",
      checked: true,
      input: "",
      label: ["标签一", "标签二", "标签三"],
      labelVisible: false,
      labelValue: "",
      value1: ""
    };
  },
  methods: {
    labelClose(tag) {
      this.label.splice(this.label.indexOf(tag), 1);
    },

    labelShow() {
      this.labelVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    labelInputConfirm() {
      let labelValue = this.labelValue;
      if (labelValue) {
        this.label.push(labelValue);
      }
      this.labelVisible = false;
      this.labelValue = "";
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.wrap {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .name {
      width: 70px;
    }
    .right {
      .input {
        width: 330px;
      }
    }
    .right2 {
      display: flex;
      .global-label {
        .global-label-tip {
          font-size: 12px;
          color: red;
        }
        /deep/ .el-radio {
          margin-right: 2px;
        }
      }
    }
  }
  .item2 {
    margin-bottom: 12px;
  }
  .label-box {
    flex: 1;
    // .label {
    //   display: inline-block;
    //   padding: 8px 20px;
    //   border: 1px solid #d7d7d7;
    //   margin-right: 10px;
    //   margin-bottom: 10px;
    //   border-radius: 4px;
    // }

    .el-tag {
      // margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 8px;
    }
    .button-new-tag {
      // margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;

      margin-bottom: 8px;
    }
    .input-new-tag {
      width: 90px;
      // margin-left: 10px;
      vertical-align: bottom;
      height: 32px;
      line-height: 30px;

      margin-bottom: 8px;
    }
    /deep/ .el-tag--medium {
      height: 32px;
      line-height: 30px;
    }
  }
}
</style>
