<template>
<div>
  <van-popup
      v-model="postShow"
      class="cgSearchChannel bg-gray"
      position="right"
      get-container="body"
    >
    <div class="title-layout">渠道号</div>
    <van-search
      v-model="keywords"
      placeholder="请输入编码或名称"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <search-result :result-num="searchNum"></search-result>
    <div class="w100 listHeight" ref="scrollRef">
      <van-pull-refresh
      v-model="isRefreshing"
      @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          :offset="10"
          @load="onLoad">
          <van-radio-group v-model="checked">
            <van-cell-group>
              <van-cell :title="titleInitial(item)" clickable @click="itemClick(item,index)" v-for="(item,index) in postDataList"
                        :key="index">
                <van-radio slot="right-icon" :name="item.channelId"/>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="action-bottom">
      <van-button type="default" @click="onCancelClick">取消</van-button>
      <van-button class="submit" type="info" @click="onConfirmClick">确定</van-button>
    </div>
  </van-popup>
</div>
</template>

<script>
import {getCgChannelList} from '@/cgApi/common'
// import {getResListNum} from '../utils/common'
import SearchResult from './SearchResult'
export default {
  name: 'CgSearchChannel',
  components: {SearchResult},
  data() {
    return {
      postShow: false,
      keywords: '',
      isRefreshing: false,
      loading: false,
      finished: false,
      error: false,
      currentPage: 1,
      pageSize: 10,
      postDataList: [],
      checked: '',
      searchNum: '0',
      choosedPost: {}
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    customer: {
      type: Object,
      default: () => {}
    },
    chinfo: {
      type: Object,
      default: ()=> {
        return {
          goodsId: '',
          supplier: ''
        }
      }
    }
  },
  computed: {
    linkInfo () {
      return this.$store.state.linkInfo
    }
  },
  watch: {
    value(val) {
      this.postShow = val
      if (val) {
        this.postDataList = []
        this.keywords = ''
        console.log(this.customer)
        this.choosedPost = JSON.parse(JSON.stringify(this.customer))
        this.checked = !this.customer.channelId ? '' : this.customer.channelId
        this.currentPage = 1
        this.onLoad()
      }
    },
    postShow (val) {
      if (!val) {
        this.$refs.scrollRef.scrollTop = 0
      }
      this.$emit('input', val)
    }
  },
  methods: {
    /// 标题拼接 <!--  -->
    titleInitial(model) {
      let titleStr = model.channelId + '/(' + model.channelOpcode + ')/' + model.channelName + '/' + model.venderName
      return titleStr
    },
    onSearch () {
      this.keywords = this.keywords.replace(/\s+/g,"")
      this.$refs.scrollRef.scrollTop = 0
      this.currentPage = 1
      this.finished = false
      this.onLoad()
    },
    onCancelClick() {
      this.postShow = false
      this.$emit('cancleclick')
    },
    onConfirmClick() {
      this.postShow = false
      let item = {
        page: 'channel',
        value: this.choosedPost
      }
      this.$emit('confirmclick', item)
    },
    itemClick(item, index) {
      this.checked = item.channelId
      this.choosedPost = item
    },
    onRefresh() {
      // 刷新接口
      // this.postDataList = []
      this.currentPage = 1
      this.isRefreshing = true
      this.finished = false
      this.getPostData()
    },
    onLoad() {
      this.loading = true
      this.getPostData()
    },
    getPostData() {
      let _this = this
      let data = {
        'channel': _this.keywords,
        'dbSource': this.linkInfo.sysDbSource, // 数据源'-' + this.linkInfo.appRealDb + '-' + this.linkInfo.sysOrgId,
        'invOwner': this.linkInfo.sysOrgId, //部门id
        'erpUserId': this.linkInfo.sysUserId,
        'pageNum': _this.currentPage,
        'pageSize': _this.pageSize,
        'goodsId': _this.chinfo.goodsId,
        'supplyId': _this.chinfo.supplier
      }
      // let data = {
      //   'channel': _this.keywords,
      //   'dbSource': 'erp_ogg_shaphar', // 数据源'-' + this.linkInfo.appRealDb + '-' + this.linkInfo.sysOrgId,
      //   'invOwner': '608', //部门id
      //   'erpUserId': '25194',
      //   'pageNum': _this.currentPage,
      //   'pageSize': _this.pageSize,
      //   'goodsId': '',
      //   'supplyId': ''
      // }
      getCgChannelList(data).then(rt => {
        if (_this.currentPage === 1) {
          _this.searchNum = rt.entity.total + ''
          this.postDataList = []
        }
        if (rt.code === '00000') {
          if (this.isRefreshing) {
            this.postDataList = rt.entity.channelList
          }
          else if (!!rt.entity.channelList || rt.entity.channelList.length > 0) {
            this.postDataList = this.postDataList.concat(rt.entity.channelList)
          }
          // _this.postDataListSetAction(rt.data)
          // 重置刷新提示
          _this.isRefreshing = false
          // 重置加载更多提示
          _this.loading = false
          // 若当前加载的页数没有满足每页的数量代表完全加载
          if (rt.entity.channelList.length < 10) {
            _this.finished = true
          } else {
            // 加载成功后下一页自增1
            _this.currentPage++
          }
        } else {
          _this.$toast(rt.message)
          // _this.$toast('列表获取失败')
          _this.isRefreshing = false
          _this.error = true
          _this.finished = true
        }
        // 加载状态结束
        _this.loading = false
      }).catch(e => {
        _this.$toast('列表获取失败')
        _this.isRefreshing = false
        _this.loading = false
        _this.error = true
        _this.finished = true
      })
    },
    /// 判断数值是否为空
    isJudgeStrNull(val) {
      if (val !== null && val !== undefined && val !== '') {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.cgSearchChannel{
  width: 75%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .title-layout {
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: white;
    font-size:16px;
    font-weight:bold;
    color: #23262A;
  }

  .listHeight {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .num-tip {
    font-size:16px;
    padding: 10px;
  }

  .item-layout {
    height: 40px;
    line-height: 40px;
    background: white;
    border-bottom: #dedede 1px solid;
    padding-left: 10px;
  }

  .action-bottom {
    width: 100%;
    display: flex;
    button {
      flex: 1;
    }
  }

  .red-tips {
    color: #fb1c1c;
    font-weight: bold;
  }
}
</style>
