<template>
  <div class="run-mod-box">
    <PageTable ref="templateTable" action="QueryTemplate" :columnsFn="columns">
      <Form :model="searchForm" ref="templateForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="templateCode" :label="$t('module.menuTemplate.templateCode')">
          <Input type="text" maxlength="30" v-model="searchForm.templateCode" :placeholder="$t('module.menuTemplate.enterCode')" size="small"></Input>
        </Form-item>
        <Form-item prop="templateName" :label="$t('module.menuTemplate.templateName')">
          <Input type="text" maxlength="30" v-model="searchForm.templateName" :placeholder="$t('module.menuTemplate.enterName')" size="small"></Input>
        </Form-item>
        <Form-item prop="templateState" :label="$t('common.status')">
          <Select v-model="searchForm.templateState" size="small" clearable>
            <Option value=1>{{$t('common.valid')}}</Option>
            <Option value=2>{{$t('common.invalid')}}</Option>
          </Select>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button size="small" @click.native="search" type="warning" icon="ios-search">{{$t('common.search')}}</Button>
        <Button size="small" @click.native="reset" type="info" icon="md-sync">{{$t('common.reset')}}</Button>
      </div>
      <div slot="table-bar">
        <Button type="ghost" icon="plus-round" size="small" @click="add">{{$t('common.create')}}</Button>
        <!-- <Button type="ghost" icon="trash-a" size="small" @click="deleted()">删除</Button> -->
      </div>
    </PageTable>
  </div>
</template>
<script>
import MenuTemplateEdit from "./MenuTemplateEdit.vue";
export default{
  components:{

  },
  props:{
  },
  data(){
    return{
      searchForm: {
        templateCode: "",
        templateName: "",
        templateState: ""
      },
    }
  },
  computed:{

  },
  created:function(){

  },
  beforeMount:function(){

  },
  mounted:function(){

  },
  beforeDestroy:function(){

  },
  destroyed:function(){

  },
  methods:{
    columns(){
      return [
        // {
        //   type: "selection",
        //   width: 55,
        //   fixed: 'left',
        //   align: "center"
        // },
        {
          title: this.$t('common.operating'),
          align: "center",
          fixed: 'left',
          width: 110,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t('common.edit'),
                    handle: () => {
                      this.edit(params.row.templateId, params.row.version);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.menuTemplate.templateCode'),
          key: "templateCode",
          align: "center",
          // sortable: "custom",
          width: 120,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.templateCode
              }
            }, params.row.templateCode);
          }
        },
        {
          title: this.$t('module.menuTemplate.templateName'),
          key: "templateName",
          align: "center",
          // sortable: "custom",
          width: 120,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.templateName
              }
            }, params.row.templateName);
          }
        },
        {
          title: this.$t('module.menuTemplate.templateDesc'),
          key: "remark",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.remark
              }
            }, params.row.remark);
          }
        },
        {
          title: this.$t('module.userManage.affiliation'),
          key: "orgName",
          align: "center",
          // sortable: "custom",
          width: 140,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.orgName
              }
            }, params.row.orgName);
          }
        },
        {
          title: this.$t('common.status'),
          align: "center",
          key: "templateState",
          width: 120,
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: params.row.templateState == 1 ? "blue" : "red"
                }
              },
              params.row.templateState == 1 ? this.$t('common.valid') : this.$t('common.invalid')
            );
          }
        },
        {
          title: this.$t('module.feedback.creator'),
          key: "createUserName",
          align: "center",
          width: 110,
          render: (h, params) => {
            return h('div', {
              attrs: {
                class: 'ivu-table-cell ivu-table-cell-ellipsis',
                title: params.row.createUserName
              }
            }, params.row.createUserName);
          }
        },
        {
          title:  this.$t('module.feedback.createTime'),
          key: "createTime",
          align: "center",
          // sortable: "custom",
          width: 110,
          render: (h, params) => {
            return h("span", {}, this.getDateString(params.row.createTime));
          }
        },
      ]
    },
    search(page) {
      this.$refs["templateTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["templateForm"].resetFields();
      this.search(1);
    },
    add() {
      new this.$pageModal(
        MenuTemplateEdit,
        {
          props: {
          }
        }, (data) => {
          this.search();
      });
    },
    edit(id, version) {
      new this.$pageModal(
        MenuTemplateEdit,
        {
          props: {
            templateId: id,
            version: version
          }
        }, (data) => {
          this.search();
      });
    },
    getDateString(DateStr) {
      if (
        DateStr == undefined ||
        DateStr == null ||
        DateStr == "" ||
        DateStr.trim() == ""
      ) {
        return "";
      }
      return DateStr.split(" ")[0];
    },
  },
  watch:{

  },
  directives:{

  }
}
</script>
