<template>
  <div class="stencilled" v-if="show">
    <bar @cutPage="close()" :tit="'添加模块'" :backPage="0" style="z-index: 1000;"></bar>
    <div class="selectInp">
      <van-search shape="round" v-model="selectValue" placeholder="搜索表单" />
      <span>搜索</span>
    </div>
    <div class="sortList">
      <div :class="[showIndex == 0 ? 'sl_active' : '']" @click.stop="showIndex = 0">通用</div>
      <div :class="[showIndex == 1 ? 'sl_active' : '']" @click.stop="showIndex = 1">学科</div>
      <div :class="[showIndex == 2 ? 'sl_active' : '']" @click.stop="showIndex = 2">扩展</div>
    </div>
    <div class="stencilList">
      <div style="margin-bottom: 15px;" v-for="(item, index) in showDataList" :key="item.value+index">
        <addStencil :data="item" :isChoice="choiceList.includes(item.value)"></addStencil>
      </div>
    </div>
    <!-- <div class="stencilList">
      <div style="margin-bottom: 15px;" v-for="item in 10" :key="item">
        <addStencil></addStencil>
      </div>
    </div>
    <div class="stencilList">
      <div style="margin-bottom: 15px;" v-for="item in 10" :key="item">
        <addStencil></addStencil>
      </div>
    </div> -->
    <div class="botBtn">
      <div :class="['btn', choiceList.length == 0 ? 'b_disabled' : '']" @click.stop="addYes">
        添加（{{ choiceList.length }}）
      </div>
    </div>
  </div>
</template>

<script>
import bar from './components/bar.vue'
import addStencil from './components/addStencil'
import { Dialog } from 'vant'
export default {
  components: {
    bar,
    addStencil
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    showDataList() {
      let result = []
      result = this.data.filter(i => {
        return i.type == this.showIndex && i.title.indexOf(this.selectValue) != -1
      })
      return result
    }
  },
  data() {
    return {
      selectValue: '',
      dataList: [],
      tagSubject: '',
      show: false,
      showIndex: 0,
      choiceList: []
    }
  },
  methods: {
    open(index = 0) {
      this.show = true
			this.showIndex = index;
			this.choiceList = [];
    },
    close() {
      this.show = false;
			this.$emit("close");
    },
    addYes() {
      if (this.choiceList.length == 0) return this.$toast('请选择你需要添加的分析')
      Dialog.confirm({
        title: '确定添加分析',
        message: `确定添加 ${this.choiceList.length} 个分析吗?`
      })
        .then(_ => {
					this.$emit("success",this.choiceList);
        })
        .catch(_ => {
          console.log('不添加')
        })
    },
		addChoice(id){
			if(this.choiceList.includes(id)){
				this.choiceList = this.choiceList.filter(i => i != id)
			}else{
				this.choiceList.push(id)
			}
		},
  },
  mounted() {
    this.dataList = JSON.parse(JSON.stringify(this.data))
  }
}
</script>

<style lang="scss" scoped>
.stencilled {
  height: 100% !important;
  // height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // padding: 10px 15px;
  box-sizing: border-box;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 2005;
  background-color: #fff;
  padding-top: 55px;
  .telCon {
    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;
    }
    .list {
      padding: 0 10px;
    }
    .cell {
      padding: 15px 0px;
      border-bottom: 0.5px solid rgba(231, 231, 231, 1);
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .actionBtn {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    .btn {
      width: 48%;
      border-radius: 6px;
      padding: 12px 0;
      display: flex;
      justify-content: center;
      color: rgba(54, 129, 252, 1);
      background-color: rgba(242, 243, 255, 1);
      font-size: 16px;
    }
    .btn1 {
      color: #fff;
      background-color: rgba(54, 129, 252, 1);
    }
  }
}
.stencilled {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
/deep/.van-action-sheet {
  height: 80% !important;
}
/deep/.van-action-sheet__header {
  font-weight: 600;
}
.selectInp {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .van-search {
    width: 100%;
    .van-search__content {
      height: 45px;
      align-items: center;
    }
  }
  span {
    color: rgba(54, 129, 252, 1);
    font-size: 16px;
    font-weight: 600;
    display: block;
    width: 40px;
  }
}
.sortList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 0.5px rgba(231, 231, 231, 1) solid;
  div {
    width: 33%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
  }
  .sortImg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0.5px rgba(231, 231, 231, 1) solid;
  }
  .sl_active {
    color: rgba(54, 129, 252, 1);
    font-weight: bold;
  }
}
.stencilList {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}
.botBtn {
  height: 60px;
  background-color: #fff;
  width: 100%;
  padding: 10px 25px;
  box-sizing: border-box;
  border-top: 0.5px #ccc solid;
  .btn {
    width: 100%;
    background-color: rgba(54, 129, 252, 1);
    color: #fff;
    height: 40px;
    border-radius: 5px;
    display: flex;
    font-size: 16px;
    // font-weight: 600;
    justify-content: center;
    align-items: center;
  }
  .b_disabled {
    background-color: #ccc;
    color: #fff;
  }
}
.actionCon {
  height: 100% !important;
  // height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 15px;
  box-sizing: border-box;
  .sheetTit {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 10px;
  }
  .claList {
    flex: 1;
    overflow: auto;
    .ListBlc {
      width: 30%;
      height: 35px;
      border-radius: 30px;
      display: inline-block;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 400;
      line-height: 35px;
      background-color: rgba(243, 247, 253, 1);
      text-align: center;
      border: 1px rgba(242, 243, 255, 1) solid;
    }
  }
  .claList > div {
    margin-right: calc(10% / 2);
    margin-bottom: 10px;
  }
  .claList :nth-child(3n) {
    margin-right: 0;
  }
  .actionBtn {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      width: 48%;
      border-radius: 6px;
      padding: 12px 0;
      display: flex;
      justify-content: center;
      color: rgba(54, 129, 252, 1);
      background-color: rgba(242, 243, 255, 1);
      font-size: 16px;
    }
    .btn1 {
      color: #fff;
      background-color: rgba(54, 129, 252, 1);
    }
  }
}

:deep(.van-dialog){
	z-index: 3000;
}
</style>
