<template>
  <div class="plate">
    <div>
      <ul>
        <li app-border dir-bottom>
          <div class="title">PC端</div>
          <div class="preview-con">
            <div class="preview">
              <img :src="info.pcIcon||require('@/assets/images/default/img_tipspc_default.png')" alt="">
            </div>
            <div class="upload-con">
              <button class="ui-button submit" @click="$emit('openMaterial','pcIcon')"> 选择图片</button>
              <div class="ui-remark">建议300*300px，1m以内，支持jpg/png格式</div>
            </div>
          </div>
          <div class="title">移动端</div>
          <div class="preview-con">
            <div class="preview">
              <img :src="info.appIcon||require('@/assets/images/default/img_tipsmb_default.png')" alt="">
            </div>
            <div class="upload-con">
              <button class="ui-button submit" @click="$emit('openMaterial','appIcon')"> 选择图片</button>
              <div class="ui-remark">建议300*300px，1m以内，支持jpg/png格式</div>
            </div>
          </div>
        </li>
        <li>
          <div class="title">显示设置</div>
          <div class="switch-con">
              <span class="title">仅首次打开链接时，提示</span>
              <switcher name="pano" :value="info.isRemind" @change="onSwitcherChange"></switcher>
          </div>
          <div class="bars">
              <RangeItem :value="rang" @input="onRangeChange" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Switcher from "@/components/shared/Switcher";
import RangeItem from "@/components/rangeItem";

import { mapGetters } from "vuex";

export default {
    props:['select'],
    components:{
      Switcher,
      RangeItem
    },
    watch:{
      info:{
        immediate:true,
        deep:true,
        handler:function (newVal) {
          this.rang.value = newVal.remindTime
        }
      }
    },
    computed: {
      ...mapGetters({
        info:'info'
      })
    },
    data(){
      return {
        img:'',
        param:'',
        isShow:false,
        rang: {
            label: '显示时间',
            unit: "秒",
            value: 1,
            min: 0,
            max: 3,
            gradient: 1,
            tip:true
        }
      }
    },
    methods:{
      onRangeChange(data) {
        this.info.remindTime = parseInt(data.value)
      },
      onSwitcherChange(data){
        this.info.isRemind = data
      }
    }
}
</script>
<style lang="less" src="./style.less"></style>

<style lang="less" scoped>
.preview-con{
  display: flex;
  .preview{
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
  .upload-con{
    flex: 1;
    .ui-button{
      width: 100%;
    }
    .ui-remark{
      margin-top: 10px;
      width: 100%;
      word-break: keep-all;
    }
  }
  .bars{
  }
}
</style>

