<template>
  <div>
    <p class="edit_page_title">{{pageTitle}}</p>
    <Form ref="changeHonor" :model="changeHonor" :rules="honor_rule" :label-width="110" id="changeHonor" >
      <div style="width:670px">
        <FormItem label="等级名称" prop="name">
          <Input type="text" v-model="changeHonor.name" class="wid_275" placeholder="如：推广精英"></Input>
        </FormItem>
        <FormItem label="推广等级" prop="rank">
          <Input type="text" v-model="changeHonor.rank" class="wid_275" placeholder="如：预备组长"></Input>
        </FormItem>
        <FormItem label="最低荣誉值" prop="honor_num">
          <InputNumber v-model="changeHonor.honor_num" class="wid_275 fl" :min="0"></InputNumber>
          <p class="form_tap_text" style="white-space:norwap">达到某等级所需要的最低荣誉分值，如10000</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem :label="index===0?'特权':''" class="other_form_item" v-for="(item,index) in inputList" :key="'inputList-'+index">
          <div class="fl wid_100">
            <div style="height:30px;width:280px;margin-top:2px" class="fl" @click="canDelete(index,$event)">
              <Input v-model="item.title" type="text" class="wid_275 fl" id="focusinput"></Input>
            </div>
            <div style="display:inline;margin-top:2px" class="candelete fl" v-if="isdelete&&index==powerIndex">
                <img src="../../../static/image/yes.png" alt :class="inputList.length?'mar_T_6 mar_L_5 yesimg':'mar_L_5 mar_T_7 yesimg'" @click="editinputList(item.title,index)" >
                <img src="../../../static/image/no.png" alt :class="inputList.length?'mar_T_6 noimg':'noimg mar_T_6'" @click="deleteinputList(index)">
              </div>
              <div v-if="index===inputList.length-1&&!isdelete" class="fl">
                <img src="../../../static/image/add.png" alt="" :class="inputList.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_power" @click="addinputList(item,index)">
                <div style="display:inline" v-if="!is_power&&isdelete==false">
                  <img src="../../../static/image/yes.png" alt :class="inputList.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editinputList(item.title,index)" >
                  <img src="../../../static/image/no.png" alt :class="inputList.length?'mar_T_8':'mar_T_6'" @click="deleteinputList(index)">
                </div>
              </div>
          </div>
          <div style="width:275px;margin-top:2px" class="zd1 fl">
            <uploadPowerIcon @uploadSuc="uploadlogo" :listindex='index' :covers="item.icon_url" class=" uploadhonoricon"></uploadPowerIcon>
          </div>
          <p class="form_tap_text wid_275 notbr fl" style="top:20px;" v-if="index==0">支持PNG、JPG图片格式，尺寸100*100PX，大小限制2MB内</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem :label="inputList.length===0?'特权':''" class="other_form_item" v-if="inputList.length===0">
          <div @click="addinput" class="fl"><Input v-model="addPowerInfo.title" type="text" class="wid_275" ></Input></div>
          <img src="../../../static/image/add.png" alt :class="inputList.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_3'" v-if="is_power" @click="addinputList('')">
          <div v-else style="display:inline" class="clear">
            <img src="../../../static/image/yes.png" alt :class="inputList.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editinputList(addPowerInfo.title,0)" >
            <img src="../../../static/image/no.png" alt :class="inputList.length?'mar_T_8':'mar_T_6'" @click="deleteinputList()">
          </div>
          <div style="width:275px;margin-top:20px;height:25px" class="zd1 fl clear">
            <uploadPowerIcon @uploadSuc="uploadlogo" ></uploadPowerIcon>
          </div>
          <p class="form_tap_text wid_275 notbr fl" style="top:20px;margin-top:-2px" >支持PNG、JPG图片格式，尺寸100*100PX，大小限制2MB内</p>
          <div class="clear"></div>
        </FormItem>
        <FormItem class="form_btn">
          <Button type="primary" @click="editHonor('changeHonor')">确认</Button>
          <Button class="return_btn mar_L_15" @click="return_last">取消</Button>
        </FormItem>
      </div>
    </Form>
  </div>
</template>
<script>
import uploadPowerIcon from '@@/base/upload_power_icon'
export default {
  name: "change_honor",
  props: {
    is_Add: Boolean,
    honorId: Number,
    pindex: Number,
  },
  components:{uploadPowerIcon},
  data() {
    return {
      isdelete:false,
      is_power: true,
      logosavename:'',
      logocovers:'',
      addpowername: "",
      powerIndex:null,
      addPowerInfo: {
        title: ""
      },
      changeHonor: {
        name:'',
        rank:'',
        honor_num: null,
      },
      honor_rule: {
        name: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        rank: [
          { required: true, message: "推广等级不能为空", trigger: "blur" }
        ],
        honor_num: [
          { required: true, type: "number", message: "最低荣誉值不能为空", trigger: "blur" }
        ],
      },
      inputList: []
    };
  },
  computed: {
    pageTitle() {
      if (this.is_Add) {
        return "添加荣誉特权";
      } else {
        return "编辑荣誉特权";
      }
    },
  },
  methods: {
    addinput(){
      this.inputList.push({title:''})
      this.is_power=false
      setTimeout(() => {
        document.getElementById('focusinput').getElementsByTagName('input')[0].focus()
      }, 300);
    },
    return_last() {
      this.$emit("return_last",this.pindex);
    },
    editHonor(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          if(!this.is_power){
            this.editinputList(this.inputList[this.inputList.length-1].title,this.inputList.length-1)
          }
          if(!this.is_power){
            return false
          }
          let privilege=[]
          !!this.inputList.length?this.inputList.forEach((item,index)=>{
            privilege.push({title:item.title,icon:item.icon||''})
          }):''
          let params={
            name:this.changeHonor.name,
            rank:this.changeHonor.rank,
            honor_num:this.changeHonor.honor_num,
            privilege:privilege
          }
          if(!this.is_Add){
            params.id=this.honorId
          }
          let api=!!!this.is_Add?'editHonorSetInfo':'addHonorSetInfo'
          this.$api[api]({...params}).then(data=>{
            if(data.code==200){
              this.$emit('return_last',this.pindex)
              this.$Message.info(data.msg)
            }else{
              this.$Message.info(data.msg)
            }
          })
        }
      });
    },
    addpower() {
      if (this.addpowername !== "") {
        this.inputList.push({ powername: this.addpowername });
      }
    },
    addinputList() {
      this.inputList.push({ title: "" });
      this.is_power = false;
    },
    editinputList(title, index) {
      if (!!title) {
        this.inputList[index].title = title;
        this.is_power = true;
        this.isdelete=false
      } else {
        this.is_power = true;
        this.inputList.splice(index, 1);
      }
    },
    deleteinputList(index) {
      this.inputList.splice(index, 1);
      this.is_power = true;
      this.isdelete = false;
    },
    canDelete(index,event){
      this.powerIndex==index?this.isdelete=!this.isdelete:this.powerIndex=index;this.isdelete=true
      if(event.target.className.indexOf('yesimg')!==-1){
        this.isdelete=false
      }
      if(event.target.className.indexOf('noimg')!==-1){
        this.inputList.splice(this.powerIndex, 1);
        this.isdelete=false
      }
    },
    uploadlogo(cover,index){
      this.inputList[index].icon_url=!!cover.legnth?cover[0].url:''
      this.inputList[index].icon=!!cover.length?cover[0].filename:''
    },
    getHonorInfoDetail(id){
      this.inputList=[]
      this.$api.getHonorInfoDetail({id}).then(data=>{
        if(data){
          this.changeHonor=data
          if(!!data.privilege.length){
            data.privilege.forEach(item => {
              this.inputList.push({title:item.title,icon_url:item.icon_url,icon:item.icon})
            }); 
          }
        }
      })
    }
  },
  created(){
    this.$nextTick(()=>{
      if(!this.is_Add&&!!this.honorId){
        this.getHonorInfoDetail(this.honorId)
      }
    })
  }
};
</script>
<style>
#changeHonor .ivu-input-group-append,
.ivu-input-group-prepend {
  background-color: #fff !important;
  border-left: none !important;
}
.ivu-form-item-error .ivu-input-group-append,
.ivu-form-item-error .ivu-input-group-prepend {
  border-color: #dddee1 !important;
}
.ivu-form-item-error .ivu-input-number {
  border-color: #dddee1 !important;
}
.ivu-input-number.ivu-input-number-focused {
  box-shadow: none !important;
}
.uploadhonoricon{
  position: relative;
  top: 20px
}
.notbr{
  white-space: nowrap
}
</style>
