<template>
  <div class="bocaiTV-container">
    <!-- <div class="pb16 bb1 mb16 f20" style="color:#ff4400">伯才TV</div> -->
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>伯才TV</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="contentContainer">
      <div class="setCenter">
        <div class="block bgf">
          <div class="title p12 tc bbdot1">实时播放控制</div>
          <div class="control p20 df">
            <div class="dfcloumn">
              <div class="iconfont icon-xiangyou" style="transform:rotate(180deg)" size="23" color></div>上一页
            </div>
            <div class="pause dfcloumn">
              <div class="iconfont icon-zanting" size="23" color></div>暂停
            </div>
            <div class="dfcloumn">
              <div class="iconfont icon-xiangyou" size="23" color></div>下一页
            </div>
          </div>
        </div>
        <div class="showList">
          <div class="title">播放列表</div>
          <div class="list bgf">
            <a-radio-group v-model="radioVal" @change="onChange" class="radiogroup">
              <!-- <div class='dib' wx:for='{{sex}}' wx:key='value'> -->
              <a-radio value="1">
                <div class="dib">{{'播放招工列表'}}</div>
              </a-radio>
              <a-radio value="2">
                <div class="dib">{{'播放招生列表'}}</div>
              </a-radio>
              <a-radio value="3">
                <div class="dib">{{'招生招工交替播放'}}</div>
              </a-radio>
              <!-- </div> -->
            </a-radio-group>
          </div>
        </div>
        <div class="showList">
          <div class="title">播放间隔时间</div>
          <div class="content p26 df bd1">
            <div class>
              <i class="iconfont icon-jian" @click="changeTime('minus')"></i>
            </div>
            <div class style="min-width:40px">
              <span style="font-size:30px">{{second}}</span> 秒
            </div>
            <div class>
              <i class="iconfont icon-jia1" @click="changeTime('add')"></i>
            </div>
          </div>
        </div>
        <div class="showList">
          <div class="title">更换logo</div>
          <div class="logocontent bgf bd1">
            <!-- <div class="iconfont icon-bocailogo" style></div> -->
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bocailogo" />
              </svg>
            </div>
            <a class>更换图片</a>
          </div>
        </div>
        <div class="dtBtn" style>
          <button class>更新配置</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import ''

export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      second: 8,
      radioVal: 1,
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.$emit('setTitle', '伯才TV')

  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onChange(e) {
      console.log(e)
    },
    changeTime(e) {
      if (e == 'add') {
        this.second += 1
      } else {
        this.second -= 1
      }
      if (this.second <= 2) {
        this.$message.warning('间隔时间不能少于2秒')
        this.second = 2
      }
    },
  },
}
</script>

<style scoped lang="less">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.contentContainer {
  display: flex;
  // justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  padding-top: 58px;
  // text-align: center;
  .setCenter {
    width: 430px;
  }
}
.block {
  margin-bottom: 8px;
  margin-top: 10px;
  border: 1px solid #dddddd;
  // box-shadow: 0px 4px 4px 0px #dedede;
}

.p12 {
  padding: 12px;
}
.p26 {
  padding: 26px;
}
.block .title {
  font-size: 20px;
  font-weight: 600;
}
.df {
  display: flex;
  justify-content: space-around;
}
.control > div {
  text-align: center;
}
.control > div .iconfont {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 12px;
}
.control .pause .iconfont {
  font-size: 38px;
  line-height: 38px;
  margin-bottom: 4px;
}
.dfcloumn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}
.showList .title {
  padding: 24px 0px 16px;
  font-size: 16px;
  font-weight: 600;
}
.radiogroup {
  display: flex;
  flex-direction: column;
  border: 1px solid #dddddd;

  label:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
  }
  label {
    display: block;
    padding: 17px 24px;
    font-size: 16px;
  }
  .ant-radio {
    margin-right: 10px;
  }
}
.showList > div .iconfont {
  font-size: 38px;
  line-height: 38px;
}
.showList .content {
  line-height: 38px;
}
.showList .content input {
  width: 36px;
  height: 36px;
  margin-right: 8px;
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
}
.logocontent {
  display: flex;
  justify-content: space-between;
  // padding: 12px 22px;
  a {
    line-height: 88px;
    font-size: 16px;
    margin-right: 12px;
    color: blue;
    text-decoration: underline;
  }
  > div {
    width: 176px;
    height: 88px;
    text-align: center;
    background-color: #ddd;
  }
}
.logocontent svg {
  width: 124px;
  height: 88px;
  color: #ccc;
}
.dtBtn {
  padding: 34px 0;

  button {
    width: 92px;
    height: 32px;
    background: #ff4400;
    outline: none;
    border: none;
    color: #fff;
    font-size: 14px;
  }
}
.iconfont {
  color: #999;
  cursor: pointer;
}
</style>
