<template>
  <div class="editTel">
    <bar @cutPage="cutPage" :tit="'编辑模板'" :backPage="0"></bar>
    <div style="height: 55px;width: 100%;"></div>
    <div class="TelList">
      <div class="telConCell" v-for="item in 5" :key="item">
        <div class="tit">
          <div>通用课堂分析</div>
          <div style="color: rgba(54, 129, 252, 1);" @click="addTel">添加模块</div>
        </div>
        <div class="list" v-for="item in 5" :key="item + 'a'">
          <van-swipe-cell>
            <div class="cell">omo智慧课堂分析</div>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <div class="bot">
      <div class="botBtn" @click="saveTel">另存为模板</div>
    </div>
    <van-popup v-model="showPopup">
      <div class="popupCon">
        <div class="tit">模板信息</div>
        <div class="bri">请根据提示补充模版信息</div>
        <div>
          <el-input v-model="input" placeholder="模版名称"></el-input>
          <el-input type="textarea" :rows="3" resize="none" v-model="input" placeholder="模版简介"></el-input>
          <el-select v-model="value" placeholder="所属学科">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>

        <div class="switch">
          <span style="margin-right: 5px;">公开到社区</span
          ><el-switch v-model="switchValue" active-color="rgba(54, 129, 252, 1)"> </el-switch>
        </div>
      </div>
      <div class="btnS">
        <div @click="cancell">取消</div>
        <div style="color: rgba(54, 129, 252, 1);" @click="saveInfo">保存</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import bar from './components/bar.vue'

export default {
  components: {
    bar
  },
  data() {
    return {
      showPopup: false,
      input: '',
      switchValue: false,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        }
      ],
      value: ''
    }
  },
  methods: {
    cutPage() {
      this.$emit('cutPage', 5)
    },
    cancell() {
      this.showPopup = false
    },
    saveInfo() {
      this.$message.success('模版已保存')
      this.showPopup = false
    },
    addTel() {
      this.$emit('cutPage', 7)
    },
    saveTel() {
      this.showPopup = true
    },
		getData(){

		},
  }
}
</script>

<style lang="scss" scoped>
.editTel {
  height: calc(100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.TelList {
  flex: 1;
  overflow: auto;
}
.telConCell {
  .tit {
    width: 100%;
    padding: 13px 15px;
    background-color: rgba(231, 231, 231, 1);
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-weight: 400;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .list {
    // padding: 0 10px;
  }
  /deep/.van-button {
    height: 100% !important;
  }
  .cell {
    padding: 15px 0px;
    padding-left: 15px;
    border-bottom: 0.5px solid rgba(231, 231, 231, 1);
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }
}

.bot {
  height: 60px;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  box-sizing: border-box;
  .botBtn {
    background-color: rgba(54, 129, 252, 1);
    width: 85%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
  }
}
/deep/ .van-popup--center {
  border-radius: 10px;
  width: 280px;
}
/deep/.el-input__inner {
  border: 0;
  background-color: rgba(243, 243, 243, 1);
}
/deep/.el-select {
  width: 100%;
}
/deep/.el-textarea__inner {
  border: 0;
  background-color: rgba(243, 243, 243, 1);
  margin: 10px 0;
}
/deep/.el-select-dropdown {
  z-index: 99999;
}
.popupCon {
  padding: 10px 15px;
  .tit {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 0;
  }
  .bri {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    padding-bottom: 10px;
  }
  .switch {
    margin: 10px 0;
    font-size: 14px;
    // font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
  }
}
.btnS {
  display: flex;
  border-top: 0.5px solid rgba(231, 231, 231, 1);
  justify-content: space-between;
  div {
    flex: 1;
    text-align: center;
    padding: 17px 0;
    font-size: 14px;
    font-weight: 600;
  }
}
</style>
