<template>
  <div class="guild_sale_detail_div">
    <Modal id="guild_sale_detail_div" v-model="isGuildSaleMd" :title="modalTitle" class-name="vertical-center-modal" :width="modalwidth">
      <div style="height:340px;overflow:auto">
        <Table :columns="studioChannelList" border :data="studioChannelData"></Table>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "guild_sale_detail",
  props: {
    isGuildSale: Boolean,
    gname: String,
    gnum: Number,
    gid: Number,
  },
  data() {
    return {
      firstsale: [],
      secondsale: [],
      thirdsale: [],
      changehonor:false,
      curIndex:null,
      changeval:'',
      beforechangeval:'',
      studioChannelList:[
        {
          title:'推广员账号',
          key:'name'
        },
        {
          title:'角色名称',
          key:'role_name'
        },
        {
          title:'总流水',
          render:(h,params)=>{
            return h('span',Number(params.row.recharge_amount)/100)
          }
        },
        {
          title:'荣誉值',
          render: (h, params) => {
            if ( this.changehonor && params.index === this.curIndex) {
              return h("div", [
                h("InputNumber", {
                  props: {
                    type: "text",
                    value: this.changeval,
                    autofocus: "autofocus"
                  },
                  style: { width: "80px", margin: "0px 5px" },
                  class: "is_show_input",
                  on: {
                    input: value => {
                      this.changeval = value;
                    },
                    "on-blur": () => {
                      this.changeCurindexHonor(params.row.id,params.index)
                    }
                  }
                })
              ]);
            } else {
              return h("div", [
                h("span",
                  {
                    class: "a_text",
                    on: {
                      click: () => {
                        setTimeout(() => {
                          document.getElementsByClassName("is_show_input")[0].getElementsByTagName("input")[0].focus();
                        }, 10);
                        this.changehonor=true
                        this.curIndex = params.index;
                        this.changeval = Number(params.row.total_honor_num)
                        this.beforechangeval = Number(params.row.total_honor_num)
                      }
                    }
                  },Number(params.row.total_honor_num) )
              ]);
            }
          }
        }
      ],
      studioChannelData:[],
      guildName: [
        {
          width: 100,
          renderHeader: (h, params) => {
            return h("span",
              {
                style: { color: "#607a95" }
              }, "公会名称" );
          }
        },
        {
          renderHeader: (h, params) => {
            return h("span",
              {
                style: { color: "#607a95" }
              }, this.gname );
          }
        }
      ],
      guildNum: [
        {
          width: 100,
          renderHeader: (h, params) => {
            return h("span",
              {
                style: { color: "#607a95" }
              }, "数量" );
          }
        },
        {
          renderHeader: (h, params) => {
            return h("span",
              {
                style: { color: "#607a95" }
              }, this.gnum );
          }
        }
      ],
      guildData: [],
      guildNumData: []
    };
  },
  computed: {
    isGuildSaleMd: {
      get(n) {
        this.$nextTick(() => {
          if (n && this.isGuildSale) {
            this.getStudioChannel()
          }
        });
        return this.isGuildSale;
      },
      set(val) {
        this.$emit("update:isGuildSale", val);
      }
    },
    modalTitle() {
      if(this.gname){
        return "【 " + this.gname + " 】" + "推广员详情";
      }else{
        return '推广员详情'
      }
    },
    modalwidth(){
      let maxlen=Math.max(this.firstsale.length,this.secondsale.length,this.thirdsale.length)
      return Number(110*maxlen)>=540?Number(110*maxlen):550
    }
  },
  watch: {},
  methods: {
    getStudioChannel(){
      this.$api.getStudioChannel({studio_id:this.gid}).then(data =>{
        if(data.code==200){
          this.studioChannelData=data.data
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    changeCurindexHonor(id,i){
      if(this.changeval==this.beforechangeval){
        this.changehonor=false
        return false
      }
      this.$api.changeCurindexHonor({id,honor_num:this.changeval}).then(data=>{
        if(data.code==200){
          this.$Message.info(data.msg)
          this.changehonor=false
          this.studioChannelData[i].total_honor_num=this.changeval
        }else{
          this.$Message.info(data.msg)
        }
      })
    }
  },
  created() {

  }
};
</script>
<style lang="less">
#guild_name .ivu-table:before,
#guild_num .ivu-table:before {
  height: 0 !important;
}
#guild_sale_detail_div .ivu-modal-confirm,
#guild_sale_detail_div .ivu-modal-body {
  padding: 20px 34px 20px 34px !important;
}
#guild_sale_detail_div .ivu-modal-footer {
  display: none;
}
#guild_sale_detail_div .ivu-modal-header {
  background-color: rgba(52, 64, 78, 1);
  border-radius: 6px 6px 0px 0px;
  font-size: 14px;
}
#guild_sale_detail_div .ivu-modal-header-inner {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
}
#guild_name .ivu-table-tip,
#guild_num .ivu-table-tip {
  display: none !important;
}
#guild_name .ivu-table-border td,
.ivu-table-border th,
#guild_num .ivu-table-border td,
.ivu-table-border th {
  border: none !important;
}
#guild_name .ivu-table table,
#guild_num .ivu-table table {
  width: auto !important;
}
#guild_sale_list .ivu-modal-footer {
  display: none;
}
.first_td {
  width: 130px !important;
  background-color: rgba(212, 220, 229, 1) !important;
  color: rgba(96, 122, 149, 1) !important;
  font-size: 13px;
  font-weight: bold;
  height: 40px;
  text-align: left !important;
  padding-left: 10px;
  border-bottom: 1px solid rgba(212, 220, 229, 1);
}
#guild_people {
  border: 1px solid rgba(240, 240, 240, 1);
  border-top: none !important;
}
#guild_people td {
  width: 100px;
  text-align: center;
  color: rgba(96, 122, 149, 1);
}
</style>


