<template>
  <div class="right_con">
    <div v-if="isList">
      <div class="news_info_fgx fl"></div>
      <p class="honor_set fl">推广员荣誉管理</p>
      <div class="clear"></div>
      <p class="fl mar_T_15">
        业绩每1元=
        <InputNumber v-model="performance" :min="0" class="wid_45 sml_input" @on-blur="setHonorSetRatio" v-if="role==1||role==0"></InputNumber>
        <span v-else>{{performance}}</span>
        荣誉值
      </p>
      <!-- <p class="fl mar_L_30 mar_T_15">
        有效达标用户1名=
        <InputNumber v-model="effective_user" :min="0" class="wid_45 sml_input" @on-blur="setHonorSetRatio" v-if="role==1||role==0"></InputNumber>
        <span v-else>{{effective_user}}</span>
         荣誉值
      </p> -->
      <Button class="fr" type="primary" @click="addHonor" v-if="role==1||role==0">添加新等级</Button>
      <div class="clear"></div>
      <Table :columns="honorList" :data="honorData" border class="tables"></Table>
      <div class="page">
        <Page :total="count" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getHonorSetInfo" />
      </div>
    </div>
    <div v-else>
      <changeHonor :is_Add="is_Add" :honorId='honorId' @return_last="return_last" :pindex='pindex'></changeHonor>
    </div>
  </div>
</template>
<script>
import changeHonor from "@@/honor/change_honor";
import { mapState } from "vuex";
export default {
  name: "honor_set",
  components: { changeHonor },
  data() {
    return {
      pindex: 1,
      count: 0,
      is_Add: true,
      honorId:null,
      isList: true,
      performance: null,
      effective_user:null,
      honorList: [
        {
          title: "ID",
          key: "id"
        },
        {
          title: "荣誉名称",
          key: "name"
        },
        {
          title: "推广等级",
          key: "rank"
        },
        {
          title: "最低荣誉值",
          key: "honor_num"
        },
        {
          title: "特权",
          render:(h,params)=>{
            let powerList=params.row.privilege
            if(!!!powerList.length){
              return h('span','')
            }else{
              return h('div',powerList.map(item => {
                return h('div',[
                  h('p',{
                    style:{
                      lineHeight:'34px'
                    }
                  },item.title),
                ])
              }))
            }
          }
        },
        {
          title:'图标',
          render:(h,params)=>{
            let powerList=params.row.privilege
            if(!!!powerList.length){
              return h('span','')
            }else{
              return h('div',powerList.map(item => {
                return h('p',{
                  style:{
                    width:'30px',
                    height:'30px',
                  }
                },[
                  h('img',{
                    attrs:{
                      src:item.icon_url
                    },
                    style:{
                      width:'30px',
                      height:'30px',
                      marginTop:'5px',
                      marginBottom:'5px',
                      display:!!item.icon_url?'block':'none'
                    }
                  }),
                ])
              }))
            }
          }
        },
        {
          title: "最后编辑时间",
          key: "update_time"
        },
        {
          title: "编辑者",
          key: "manager_name"
        },
      ],
      honorData: []
    };
  },
  watch: {},
  computed:{
    ...mapState({
      role: state => state.adminInfo.role_id,
    }),
  },
  methods: {
    changePerformance(data){
      this.performance=data
      this.setHonorSetRatio()
    },
    changeEffectiveUser(data){
      this.effective_user=data
      this.setHonorSetRatio()
    },
    deleteHonorInfo(id,index){
      this.$Modal.confirm({
        title: "提示信息",
        class: "vertical-center-modal no-padding",
        render: h => {
          return h("div", { class: "login_out" }, [
            h("p",
              {
                style: {
                  width: "100%",
                  padding: "30px 0px!important",
                  textAlign: "center",
                  backgourndColor: "rgba(52, 64, 78, 1)",
                  fontSize: "16px",
                  color: "rgba(51, 51, 51, 1)",
                  fontWeight: "400"
                },
              },"确认删除吗？")
          ]);
        },
        onOk: () => {
          this.$api.deleteHonorSetInfo({id}).then(data=>{
            if(data.code==200){
              this.$Message.info(data.msg)
              this.getHonorSetInfo()
            }else{
              this.$Message.info(data.msg)
            }
          })
        }
      });
    },
    setHonorSetRatio(){
      if(!!this.performance){
        this.$api.setHonorSetRatio({
          price_ratio:this.performance,
        }).then(data=>{
          if(data.code==200){
            this.$Message.info(data.msg)
          }else{
            this.$Message.info(data.msg)
          }
        })
      }
    },
    getHonorSetInfo(page = 1) {
      this.$store.commit('changeloading',true)
      this.pindex=page
      this.$api.getHonorSetInfo({limit:10,page:this.pindex}).then(data=>{
        if(data.code==200){
          this.$store.commit('changeloading',false)
          this.honorData=data.data
          this.count=data.count
        }else{
          this.$store.commit('changeloading',false)
          this.$Message.info(data.msg)
        }
      })
    },
    getHonorSetRatio() {
      this.$api.getHonorSetRatio().then(data =>{
        if(data.code==200){
          this.performance=Number(data.data.price_ratio)
          this.effective_user=Number(data.data.user_ratio)
        }
      })
    },
    addHonor() {
      this.is_Add = true;
      this.isList = false;
    },
    editHonor() {
      this.is_Add = false;
      this.isList = false;
    },
    return_last(pindex) {
      this.getHonorSetInfo(pindex)
      this.isList = true;
    }
  },
  created() {
    if(this.role==1||this.role==0){
      this.honorList.push(
        {
          title: "操作",
          render: (h, params) => {
            const edit_btn = h(
              "span",
              {
                class: "operate-btn",
                style: {
                  color: "rgba(0, 156, 255, 1)"
                },
                on: {
                  click: () => {
                    this.isList=false
                    this.is_Add=false
                    this.honorId=params.row.id
                  }
                }
              },
              "编辑"
            );
            const delete_btn = h(
              "span",
              {
                class: "operate-btn",
                style: {
                  color: "rgba(255, 121, 0, 1)"
                },
                on: {
                  click: () => {
                    this.deleteHonorInfo(params.row.id,params.index)
                  }
                }
              },
              "删除"
            );
            return [edit_btn,delete_btn]
          }
        }
      )
    }
    this.getHonorSetRatio();
    this.getHonorSetInfo()
  }
};
</script>
<style>
.sml_input{
  position: relative;
  top: -3px
}
.sml_input .ivu-input-number-handler-wrap {
  display: none;
}
.sml_input .ivu-input-number {
  text-align: center;
}
.honor_set {
  font-size: 15px;
  margin-top: 15px;
  margin-left: 5px;
}
</style>



