<template>
  <div>
    <EMSTableNew
      ref="configTable"
      :ellipsis="false"
      action="/mobile-service/approvalConfigCtl/templeteQuery"
      :columns="columns"
      :params="searchForm"
      :onSelectionChange="onSelectRow"
      :rowClickHandle="rowClick"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        class="ivu-form-no-margin-bottom"
        :label-width="120"
      >
        <!-- 表单  -->
        <Row>
          <Col span="8">
            <FormItem
              prop="tmpName"
              label="模板名称"
            >
              <Input
                v-model="searchForm.tmpName"
                placeholder="请输入"
                clearable
                type="text"
                :maxlength="40"
              />
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem
              prop="tmpCode"
              label="模板编码"
            >
              <Input
                v-model="searchForm.tmpCode"
                placeholder="请输入"
                clearable
                type="text"
                :maxlength="40"
              />
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem
              prop="remark"
              label="描述"
              placeholder="请输入"
            >
              <Input
                v-model="searchForm.remark"
                clearable
                type="text"
                :maxlength="60"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="handle-bar">
        <Button
          type="warning"
          @click.native="search"
        >
          查询
        </Button>
        <Button
          type="default"
          @click.native="reset"
          style="margin-right:0;"
        >
          重置
        </Button>
      </div>
    </EMSTableNew>
  </div>
</template>

<script>
import { ListChek } from '../server.js';
export default {
  directives: {},
  props: {
    title: {
      type: String,
      default: '请选择移动审批模板'
    },
  },
  data() {
    return {
      // 控制steps显示隐藏
      showTable: false,
      current: 0,
      /* 搜索表单 */
      searchForm: {
        uuid: '', // 模板id
        createdBy: '', // 创建人
        createdTime: '', // 创建时间
        updateBy: '', // 修改人
        updateTime: '', // 修改时间
        tmpName: '', // 模板名称
        tmpCode: '', // 模板编码
        remark: '', // 描述
        themeName: '', // 应用主题名称
        themeCode: '' // 应用主题编码
      },

      themeList: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center',
          resizable: true
        },
        {
          title: '模板名称',
          align: 'left',
          key: 'tmpName',
          width: 150,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: params.row.tmpName
                }
              },
              params.row.tmpName
            );
          }
        },
        {
          title: '模板编码',
          align: 'left',
          key: 'tmpCode',
          width: 220,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: params.row.tmpCode
                }
              },
              params.row.tmpCode
            );
          }
        },

        {
          title: '描述',
          align: 'left',
          key: 'remark',
          minWidth: 100,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: params.row.remark
                }
              },
              params.row.remark
            );
          }
        }
      ],
      ids: []
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.$emit('SetTitle', this.title);
    this.getThemeList();
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    getThemeList() {
      ListChek({}).then(res => {
        if (res.status === 200) {
          res.resultlist = res.data.resultlist || [];
          this.themeList = res.resultlist.map(item => {
            return {
              label: item.themeName,
              value: item.themeCode
            };
          });
        }
      });
    },
    // 点击表格行 触发该事件
    onSelectRow(selected = []) {
      if (selected.length == 0) {
        return;
      }
      if (selected.length > 1) {
        this.$Message.warning({
          content: '只能选择一条数据',
          duration: 5
        });
        return;
      }
      this.$emit('Close', selected[0]);
    },
    search(page) {
      this.$refs.configTable.load(this.searchForm, page);
    },

    /**
     * 重置
     */
    reset() {
      this.$refs.searchForm.resetFields();
      this.search(1);
    },
    rowClick(selection) {
      if (selection) {
        this.$emit('Close', selection);
      }
    }
  }
};
</script>
<style scoped>
.emstable-wrap-new /deep/ .search-form form {
  height: auto !important;
}
.emstable-wrap-new /deep/  .handle-bar-solt {
  top: 57px;
  right: 0 !important;
}
/deep/ .emstable-wrap-new .ivu-table .ivu-table-cell {
  padding-right: 0 !important;
}
.emstable-wrap-new .search-form form {
  height: 90px!important;
}
</style>

