<template>
  <div>
    <van-panel v-for="(item,index) in rule_list" :title="item" :key="index">
      <template #footer>
        <div style="text-align: right;">
          <van-button size="mini" type="info" @click="edit_rule(item,index)">编辑</van-button>
          <van-button size="mini" type="danger" @click="del(index)">删除</van-button>
        </div>
      </template>
    </van-panel>
    <van-cell-group>
      <van-cell required title="创建规则" is-link @click="create_rule"></van-cell>
    </van-cell-group>
    
    <!-- 添加规则弹窗 -->
    <van-dialog class="pk_rule" v-model="show_Rule" :closeOnClickOverlay="false" :beforeClose="colseRules" show-cancel-button get-container="body">
      <van-cell-group>
				<van-field
					v-model="popup_rules_input"
					rows="2"
					autosize
					label="规则"
					label-width="40"
					type="textarea"
					maxlength="40"
					placeholder="请填写规则+积分值，以便成员阅读"
          show-word-limit
				/>
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
  export default {
    name: "ruleItem",
    model: {
      prop: 'list',
      event: 'value'
    },
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data(){
      let rule_list = this.list
      return {
        rule_list: rule_list,
        show_Rule: false,
        popup_rules_input: '',
        type: '',
        index: 0,
      }
    },
    created(){
    },
    methods:{
      colseRules(action, done){
        let self = this
				if(action == 'confirm'){
					if(self.popup_rules_input){
            if(self.type=='add'){
              self.rule_list.push(self.popup_rules_input)
            }else{
              self.rule_list[self.index] = self.popup_rules_input
            }
            self.popup_rules_input = ''
            done()
					}else{
						self.$notify({ type: 'danger', message: '规则不能为空' });
						done(false)
					}
				}else{
          self.popup_rules_input = ''
					done()
				}
      },
      create_rule(){
        let self = this
        self.show_Rule = true
        self.type = 'add'
      },
      edit_rule(item,index){
        let self = this
        self.show_Rule = true
        self.type = 'edit'
        self.popup_rules_input = item
        self.index = index
      },
      del(index){
        this.$dialog.confirm({
          title: '删除规则',
          message: '确定要删除当前规则吗？'
        }).then(() => {
          this.rule_list.splice(index, 1)
          this.show_Rule = false
        })
      }
    }
  }
</script>

<style scoped>
  .member_list_box .van-tag{font-size:0.2rem; margin-left:0.05rem;}
  .member_list_box .van-tag:first-child{margin-left:0rem;}
  .add-btn{color:#1989fa;}
</style>
