<style>
  .sidaoEdit .dirBackground {
    width: 80px;
    height: 80px;
  }

  .sidaoEdit .dirBackground img {
    width: 100%;
    height: 100%;
  }

  .sidaoEdit .img-edge-cover {
    width: 100%;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
  }

  .sidaoContent .dir_EduContent {
    height: 140px;
    background-color: #fff;
    background-color: #424146;
  }

  .sidaoContent .dir_EduItem {
    width:100%;
    display: flex;
    padding:23px 100px;
    font-size:14px;
    color:#fff;
  }
  .dir_ItemImg{
    width:140px;
    height:93px;
    border-radius: 6px;
    overflow: hidden;
  }
  .dir_ItemImg img{
      width:100%;
      height:100%;
  }
  .edu_xuexi{
      width:373px;
      overflow: hidden;
      color:#fff;
      font-size:15px;
      margin-left:15px;
  }
</style>
<template>
  <div :class="{'active':eduData.isCked}">
    <div class="diy-component-options" v-if="eduData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview sidaoContent">
      <div class="dir_EduContent"
        :style="{marginLeft:eduData.data.PaddingLeft+'px',
        marginRight:eduData.data.PaddingRight+'px',marginTop:eduData.data.PaddingTop+'px',
        marginBottom:eduData.data.PaddingBottom+'px'}">
        <div class="dir_EduItem">
            <div class="dir_ItemImg">
                <img v-if="eduData.data.Cover" :src="eduData.data.Cover" style="width:100%;height:100%;" alt=""/>
                <img v-else src="../../../assets/img/default.png" alt=""/>
            </div>
            <div class="edu_xuexi">
                <div style="font-size:13px;margin-bottom:8px;color:#DBDADE">上次学习:</div>
                <div class="vue-line-clamp" style="height:32px;margin-top:4px;">{{eduData.data.Name}}</div>
                <div>
                    <el-progress :percentage="eduData.data.showProgress" status="success"></el-progress>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit sidaoEdit" v-if="eduData.isCked">
      <el-form label-width="150px">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="封面图" size="small">
              <div>
                <el-button size="mini" @click="choicImg=true">选择文件</el-button>
              </div>
              <div class="dirBackground">
                <img v-if="eduData.data.Cover" :src="eduData.data.Cover" alt="" />
                <img v-else src="../../../assets/img/default.png" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="课程名称" size="small">
              <el-input v-model="eduData.data.Name"></el-input>
            </el-form-item>
            <el-form-item label="显示进度" size="small">
              <el-input type="number" size="small" :min="0" v-model="eduData.data.showProgress">
              </el-input>
            </el-form-item>
            <el-form-item label="上边距">
              <el-input type="number" size="small" :min="0" v-model="eduData.data.PaddingTop">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="下边距">
              <el-input type="number" size="small" :min="0" v-model="eduData.data.PaddingBottom">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="左边距">
              <el-input type="number" size="small" :min="0" v-model="eduData.data.PaddingLeft">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="右边距">
              <el-input type="number" size="small" :min="0" v-model="eduData.data.PaddingRight">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["eduData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        data: this.eduData.data,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.eduData.data.Cover = this.getIconLink(msg.url);
        this.choicImg = false;
      },
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
