<template>
  <div>
    <!-- 投放范围和位置 -->
    <div class="drawer-item">
      <div class="drawer-item-title">投放范围和位置</div>
      <div class="drawer-item-con">
        <el-form ref="form">
          <el-form-item label="投放场景">
            <el-radio-group v-model="test">
              <el-radio-button
                v-for="item in [{ value: '默认' }, { value: '快手联盟' }]"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择投放位置">
            <el-radio-group v-model="test">
              <el-radio-button
                v-for="item in [
                  { value: '优选广告位' },
                  { value: '按场景选择广告位' }
                ]"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="test === '按场景选择广告位'">
            <el-checkbox-group v-model="testPlat">
              <el-checkbox
                v-for="item in [
                  '信息流广告',
                  '上下滑大屏广告',
                  '视频播放页广告'
                ]"
                :key="item"
                :label="item"
                border
              >
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 制作创意 -->
    <div class="drawer-item">
      <div class="drawer-item-title">制作创意</div>
      <div class="drawer-item-con">
        <el-form ref="form">
          <el-form-item label="创意方式">
            <el-radio-group v-model="test">
              <el-radio :label="null">程序化创意</el-radio>
              <el-radio :label="1">自定义创意</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="选择素材组">
            <el-select
              v-model="test"
              filterable
              clearable
              placeholder="请选择素材组"
              style="width: 200px"
            >
              <el-option
                v-for="item in [
                  { value: '0', label: '选项一' },
                  { value: '1', label: '选项二' }
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p>
              素材组包含( 竖版视频:
              <font style="color:greenyellow">20</font>
              竖版视频:
              <font style="color:skyblue">20</font>
              大图横图:
              <font style="color:pink">20</font>
              小图:
              <font style="color:darkorange">20</font>
              大图竖图:
              <font style="color:darkorchid">20</font>
              )
            </p>
          </el-form-item>

          <el-form-item label="创意组合">
            <el-radio-group v-model="test">
              <el-radio-button
                v-for="item in [{ value: '系统随机' }, { value: '自定义' }]"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-radio-button>
            </el-radio-group>
            <!-- icon提示 -->
            <el-tooltip effect="light" placement="top-start">
              <div slot="content" style="font-size:14px;">
                设置每个创意所需素材数量<br />系统随机：根据素材组和计划数量随机分配
              </div>
              <i class="el-icon-info icon-light"></i>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: null,
      testPlat: []
    };
  },
  props: {
    globleEnums: {
      type: Object,
      default: () => {
        return {};
      }
    },
    putinBaseInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {}
};
</script>

<style scoped>
.icon-light:hover {
  color: #409eff;
}
</style>
