<template>
  <div class="div_page_bg">
    <div class="div_header">
      <div class="div_header_title">
        <div class="div_header_tab">
          <span class="span_value">正常：{{amounts.zhengchang}}</span>
          <span class="span_value" style="margin-left: 20px">暂停：{{amounts.zanting}}</span>
          <span class="span_value" style="margin-left: 20px" v-if="!isShowTitle">其他：{{amounts.qita}}</span>
          <span class="span_value" style="margin-left: 20px" v-if="isShowTitle">黑名单：{{amounts.heimingdan}}</span>
          <span class="span_value" style="margin-left: 20px" v-if="isShowTitle">休眠：{{amounts.xiumian}}</span>
          <span class="span_value" style="margin-left: 20px" v-if="isShowTitle">除名：{{amounts.chuming}}</span>
          <span class="span_value" style="margin-left: 20px" v-if="isShowTitle">罚款：{{amounts.fakuan}}</span>
        </div>

        <div class="div_header_arrow" @click="showTitle">
          <img :src="imageSrc" height="15px"/>
        </div>

      </div>
    </div>
    <div class="div_content">
      <div class="div_content_title">
        <span class="span_content_title">供方列表</span>
        <span class="span_content_choose" @click.stop="onClickScreen">筛选</span>
      </div>
      <!--<div class="line-h"></div>-->
      <div class="div_content_detail">
        <provider-info-item v-for="(data,index) in infos" :key="index" :info="data"></provider-info-item>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showPopup" position="right" width="80%" :hide-on-blur="false">
        <div class="div_popup">
          <span class="span_screen">筛选</span>
          <div class="line_h"></div>
          <div class="div_popup_content">
            <provider-info-screen :screen-value="screenLevel"></provider-info-screen>
            <provider-info-screen :screen-value="screenState"></provider-info-screen>
            <provider-info-screen :screen-value="screenMonth"></provider-info-screen>

          </div>
          <div class="div_popup_button">
            <span class="span_popup_cancel" @click="onClickPopupCancel">重置</span>
            <span class="span_popup_confirm" @click="onClickPopupConfirm">确定</span>
          </div>
        </div>
      </popup>
    </div>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>
  import ProviderInfoItem from "../../components/providerInfo/providerInfoItem";
  import {getCountByStateAmount, getListByStateAndType, getDictDetail} from "../../service/getData";
  import ProviderInfoScreen from "../../components/providerInfo/providerInfoScreen";
  import util from "../../util/util";
  export default {
    name: "providerInfo",
    components: {ProviderInfoScreen, ProviderInfoItem},
    data(){
      return{
        typeId:'',
        isShowTitle:false,
        imageSrc:require('../../assets/images/icon_arrow_right.png'),
        loading: false,
        fbState:'',
        level:'',
        month:'',
        amounts:{},
        infos:[],
        showPopup:false,
        levelData:{},
        screenLevel:{},
        screenState:{},//(1:正常、2:暂停、3:黑名单、4:休眠、5:除名、6:罚款)
        screenMonth:{},
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("供方信息");
      }
      catch (e) {

      }
      this.typeId = this.$route.query.typeId;
      this.initMonth();
      this.initState();
      this.getDictDetailJs();
      this.getLists();
      this.getCountByStateAmountJs();
    },
    methods:{
      initMonth(){
        let months = []
        for (let i = 1; i < 13; i++) {
          let value = '';
          if (i < 10) {
            value = '0'+i;
          }
          months.push({
            name:i+'月',
            value:value,
            isSelected:false
          })
        }
        this.screenMonth = {
          title:'月份',
          isTotalSelected:false,
          value:months
        };
      },
      initState(){
        let states = [];
        states.push({
          name:'正常',
          value:1,
          isSelected:false
        });
        states.push({
          name:'暂停',
          value:2,
          isSelected:false
        });
        states.push({
          name:'黑名单',
          value:3,
          isSelected:false
        });
        states.push({
          name:'休眠',
          value:4,
          isSelected:false
        });
        states.push({
          name:'除名',
          value:5,
          isSelected:false
        });
        states.push({
          name:'罚款',
          value:6,
          isSelected:false
        });
        this.screenState = {
          title:'状态',
          isTotalSelected:false,
          value:states
        };
      },
      showTitle(){
        this.isShowTitle = !this.isShowTitle;
        if (this.isShowTitle) {
          this.imageSrc = require('../../assets/images/icon_arrow_left.png');
        } else {
          this.imageSrc = require('../../assets/images/icon_arrow_right.png');
        }
      },
      getDictDetailJs(){
        let that = this;
        let params = {
          dictCode:'fbTypeInfoLevel'
        }
        getDictDetail(params).then(res => {
          if (res.resultCode === '200') {
            that.levelData = res.data;
            that.initLevels();
          }
        }).catch(error => {

        })
      },
      initLevels(){
        let levels = [];
        for (let i = 0; i < this.levelData.length; i++) {
          let data = this.levelData[i];
          levels.push({
            isSelected:false,
            value:data.detailId,
            name:data.detailName
          });
        }
        this.screenLevel = {
          title:'等级',
          isTotalSelected:false,
          value:levels
        };
        console.log(this.screenLevel)
      },
      getCountByStateAmountJs(){
        let that = this;
        let params = {
        }
        getCountByStateAmount(params).then(res => {
          if (res.status === 200) {
            that.amounts = res.data;
          } else {
            that.showTips("获取数量失败")
          }
        }).catch(error => {

        })
      },

      getLists(){
        let that = this;
        let params = {
          typeId:this.typeId,
          level:this.level,
          fbState:this.fbState,
          month:this.month
        }
        that.loading = true
        getListByStateAndType(params).then(res => {
          that.loading = false
          if (res.status === 200) {
            that.infos = res.data.fbInfo;
          } else {
            that.showTips(res.message)
          }
        }).catch(error => {
          that.loading = false
        })
      },

      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      },
      onClickScreen(){
        this.showPopup = true;
      },
      onClickPopupCancel(){
        this.initLevels();
        this.initState();
        this.initMonth();
        // this.showPopup = false;
      },
      onClickPopupConfirm(){
        this.showPopup = false;
        // console.log(this.screenLevel)
        // console.log(this.screenState)
        // console.log(this.screenMonth)
        this.level = '';
        this.month = '';
        this.fbState = '';
        let levelIds = '';
        for (let i = 0; i < this.screenLevel.value.length; i++) {
          let value = this.screenLevel.value[i];
          if (value.isSelected) {
            levelIds += value.value+",";
          }
        }
        if (util.isNotEmpty(levelIds)){
          this.level = levelIds.substr(0,levelIds.lastIndexOf(","));
        }

        let fbStates = '';
        for (let i = 0; i < this.screenState.value.length; i++) {
          let value = this.screenState.value[i];
          if (value.isSelected) {
            fbStates += value.value+",";
          }
        }
        if (util.isNotEmpty(fbStates)){
          this.fbState = fbStates.substr(0,fbStates.lastIndexOf(","));
        }

        let months = '';
        for (let i = 0; i < this.screenMonth.value.length; i++) {
          let value = this.screenMonth.value[i];
          if (value.isSelected) {
            months += value.value+",";
          }
        }
        if (util.isNotEmpty(months)){
          this.month = months.substr(0,months.lastIndexOf(","));
        }
        this.getLists();

      },

    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
  }
  .div_header{
    display: flex;
    flex-direction: row;
    height: 162px;
    background-color: #78AEF9;
  }
  .div_header_title{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 62px;
    padding: 0 15px;
  }

  .div_header_tab{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: calc(100vw - 60px);
    height: 20px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .div_header_arrow{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 62px;
    flex: 1;
    margin-left: 10px;
  }

  .div_content{
    display: flex;
    flex-direction: column;
    margin: -100px 15px 0;
    height: calc(100vh - 77px);
    background-color: white;
    border-radius: 7px;
  }
  .div_content_title{
    display: flex;
    flex-direction: row;
    margin: 20px 20px 20px 20px;
    background-color: white;
  }
  .span_content_title{
    color: #999999;
    width: 100%;
    flex: 1;
    font-size: 14px;
  }
  .span_content_choose{
    display: flex;
    flex-direction: row;
    color: #999999;
    font-size: 14px;
  }
  .span_content_choose::before{
    content: " ";
    display: block;
    height: 20px;
    width: 20px;
    margin-right: 2px;
    background: url("../../assets/images/icon_screen.png") no-repeat;
    background-size: 100%;
  }
  .div_content_detail{
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px 20px;
    height: calc(100vh - 97px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }
  .span_value{
    font-size: 14px;
    color: white;
  }
  .line-h{
    width: calc(100% - 40px);
    margin-left: 20px;
    height: 1px;
    background-color: #D9D9D9;

  }
  .div_popup{
    width: 100%;
    height: 100vh;
    background-color: #ffffff;

  }
  .div_popup_content{
    width: 100%;
    height: calc(100vh - 85px);
    padding-bottom: 10px;
    overflow-y: auto;
  }

  .div_popup_button{
    display: flex;
    width: 100%;
    height: 44px;
  }
  .span_screen{
    font-size: 16px;
    color: #333333;
    height: 40px;
    display: flex;
    align-items: center;
    margin: 0 10px;
  }
  .span_popup_cancel{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dbdbdb;
    color: white;
  }
  .span_popup_confirm{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #78AEF9;
    color: white;
  }
  .line_h{
    width: 100%;
    background-color: #e8e8e8;
    height: 1px;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
  .div_popup_level{
    display: flex;
    padding: 0 10px 10px 10px;
  }
  .span_button_select{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #78AEF9;
    color: white;
  }
  .span_button_unselect{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    width: 53px;
    border-radius: 10px;
    background-color: #F7F7F7;
    color: black;
  }

</style>
