<template>
  <div class="page_drugs">
    <van-sticky>
      <div class="hisOrderTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="close"></i>
        <span class="titleName">选择项目</span>
        <span @click="save">确认添加</span>
      </div>
      <div class="searchBox">
        <van-search v-model="search_keyword" @keyup.enter.native='onSearch' @input='onSearch' placeholder="请输入搜索关键词"  style="width:80%;">
          <!-- <template #action>
            <div @click="onSearch">搜索</div>
          </template> -->
        </van-search>
        <div class="toolOne" @click="typeShow = true">
          {{ name }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <van-checkbox class="allcheckTitle" v-model="allChecked" @click="toggle">
        <span style="width:60%;display:inline-block;text-align:left;">名称</span>
        <span style="width:20%;display:inline-block;text-align:left;">规格</span>
        <span style="width:15%;display:inline-block;text-align:left;">单价</span>
      </van-checkbox>
    </van-sticky>
    <div class="drugsList">

      <van-checkbox-group v-model="result" ref="checkboxGroup" @change="checkGroup">
        <van-checkbox v-for="(item,index) in project" :key="index" :name="item.id">
          <span style="width:60%;display:inline-block;text-align:left;">{{item.project_name}}</span>
          <span style="width:20%;display:inline-block;text-align:left;">{{item.single_dose}}</span>
          <span style="width:15%;display:inline-block;text-align:left;">{{item.price}}</span>
        </van-checkbox>


      </van-checkbox-group>
    </div>


      <van-popup v-model="typeShow" class="newPopup" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="cost_classify_names"
          @confirm="chooseType"
          @cancel="typeShow = false"
        />
      </van-popup>

  </div>
</template>

<script>
  export default {
    props: {
      project: Array,
      cost_classify_names: Array,
      cost_classify: Array,
      all_project:Array,
    },
    data() {
      return {
        typeShow: false,
        name: '全部',
        typeColumns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
        allChecked: false,
        result: [],

      }
    },
    methods: {
      save(){
        let tempProject = []
        let targetProject = []

        for (let i = 0; i < this.all_project.length; i++){
          for (let b = 0; b < this.result.length; b++){
            if(this.all_project[i].id == this.result[b]){
              tempProject.push(this.all_project[i])
            }
          }
        }

        for (let b = 0; b < tempProject.length; b++) {
          let obj = {
            id: 0,
            project_id: tempProject[b].id,
            project_name: tempProject[b].project_name,
            statistical_classification: tempProject[b].statistical_classification,
            single_dose:  tempProject[b].single_dose,
            delivery_way:  tempProject[b].delivery_way,
            execution_frequency: tempProject[b].execution_frequency,
            number_days:  1,
            total: 1,
            price: tempProject[b].price,
            remark: "",
            medical_code: tempProject[b].medical_code,
            unit:tempProject[b].unit,
            type:tempProject[b].type,
          }
          targetProject.push(obj)
        }

        this.$emit('add', targetProject)
        this.result = []
        this.close()




      },
      close() {
        this.result = []

        this.$parent.close(3);
      },
      onSearch() {
        if (this.search_keyword.length == 0) {
          this.project = this.all_project
        } else {
          let arr = []
          for (let i = 0; i < this.all_project.length; i++) {
            if (this.all_project[i].project_name ? this.all_project[i].project_name.indexOf(this.search_keyword) != -1 : false || this.all_project[i].wubi ? this.all_project[i].wubi.indexOf(this.search_keyword) != -1 : false || this.all_project[i].pinyin ? this.all_project[i].pinyin.indexOf(this.search_keyword) != -1 : false) {
              arr = arr.concat(this.all_project[i])
            }
          }
          this.project = arr

        }

      },
      chooseType(val) {
        this.name = val
        let select_id = 0
        let select_result = []
        for (let i = 0; i < this.cost_classify.length; i++){
          if(this.cost_classify[i].name == val){
            select_id = this.cost_classify[i].id
          }
        }
        this.project = []
        if(this.name == "全部"){
          this.project = this.all_project
        }else{
          for(let i = 0; i < this.all_project.length; i++){
            if(this.all_project[i].cost_classify == select_id){
              select_result.push(this.all_project[i])
            }
          }
          this.project = select_result
        }

        this.typeShow = false

      },
      toggle() {
        if (this.allChecked) {
          for (let i = 0;i < this.project.length;i++){
            this.result.push(this.project[i].id)
          }
        } else {
          this.result = []
        }
      },
      checkGroup(arr) {
        if(arr.length == this.project.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      }
    }
  }
</script>
