<template>
  <div class="op-page sms-template-page i-table">
    <Row class="i-table-top-btns">
      <Button type="primary" icon="md-add" @click="clickEvent('save',0)">增加</Button>
    </Row>
    <tree-table
      expand-key="name"
      :show-index="true"
      :expand-type="false"
      :selectable="false"
      :border="true"
      :columns="columns"
      :data="data"
      :stripe="true"
      :row-dblclick="dbclick"
    >
      <template slot="likes" slot-scope="scope">
        <cs-button
          :actions="parentMenus"
          :data="scope.row"
          styleCss="marginRight:5px"
          size="small"
          :click="clickEvent"
          v-if="!scope.row.parent_id"
        ></cs-button>
        <cs-button
          :actions="childMenus"
          :data="scope.row"
          styleCss="marginRight:5px"
          size="small"
          :click="clickEvent"
          v-else
        ></cs-button>
      </template>
    </tree-table>
     <Modal
            v-model="smsModal" 
            title="短信模板" width="50" @on-cancel="closeModal">
           <template-form @close-modal="closeModal" :tableVm="this" :model="model" :action="action" ref="forms"></template-form>
            <div slot="footer"></div>
        </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import TemplateForm from "./sms-template-form.vue";
import TreeTable from 'tree-table-vue'
@Component({
  components: {
    TemplateForm,TreeTable
  }
})
export default class SmsTemplate extends Vue {
  smsModal:boolean=false;
  action:string=";"
  model:any={
      name:"",
      template:""
  };
  columns: Array<any> = [
    {
      title: "模板名称",
      key: "name",
      minWidth: "150px",
      align: "left"
    },
    {
      title: "模板内容",
      key: "template",
      minWidth: "250px"
    },

    {
      title: "操作",
      key: "likes",
      minWidth: "200px",
      type: "template",
      template: "likes"
    }
  ];

  parentMenus: Array<any> = [
    {
      icon: "ios-eye",
      action: "detail",
      label: "详情",
      type: "info"
    },
    {
      icon: "ios-create-outline",
      action: "update",
      label: "编辑",
      type: "primary"
    },
    {
      icon: "md-trash",
      action: "delete",
      label: "删除",
      type: "error"
    },
    {
      icon: "md-add",
      action: "add",
      label: "新增子模板",
      type: "success"
    }
  ];

  childMenus: Array<any> = [
    {
      icon: "ios-eye",
      action: "detail",
      label: "详情",
      type: "info"
    },
    {
      icon: "ios-create-outline",
      action: "update",
      label: "编辑",
      type: "primary"
    },
    {
      icon: "md-trash",
      action: "delete",
      label: "删除",
      type: "error"
    }
  ];
  data: Array<any> = [];

    showModal(){
        this.smsModal=!0;
    }
    closeModal(){
      (this.$refs["forms"] as any).resetFields();
      this.smsModal=!1;
    }

  deleteSuccessBack(){
      this.getData()
  }
  clickEvent(name: string, obj: any) {
      if(name=="delete"){
        this.$tools.deleteEntity(this,this.$msPrefix.sms+"/api/v1/data/delete/smsTemplate/"+obj.id,this.deleteSuccessBack)
      }else{
        this.action=name;
        if(obj){
            if(name=="add"){
                this.model={parent_id:obj.id,name:"",template:"",priority:""}
            }else{
                this.model=_.cloneDeep(obj);
            }  
        }else{
           this.model={
                name:"",
                template:""
            };
        }
         this.showModal();
      }
      
  }
  getData() {
    let url = this.$msPrefix.sms + "/api/v1/data/all/smsTemplate";
    this.getApiData("get", url + "?size=1000", {}, res => {
      if (res.data.content.length > 0) {
        let parentData = res.data.content.filter(item => {
          item.children = item.child;
          return !item.parent_id;
        });

        this.data = parentData;
      }
    });
  }

  dbclick() {}

  mounted() {
    this.getData();
  }
}
</script>

