/*
 * @Author: Anmin
 * @Email:changanmin1@crc.com.hk
 * @Date: 2018-10-23 10:33:07
 * @Last Modified by: Anmin
 * @Last Modified time: 2019-05-28 11:09:42
 * @description:  选择业务小类
 */
<template>
  <div>
    <EMSTableNew
      ref="configTable"
      :action="action"
      :columns="propsColumns"
      :params="searchForm"
      :onSelectionChange="onSelectRow"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        style="height: auto !important;"
        :label-width="100"
      >
        <Row>
          <Col :span="8">
            <FormItem
              prop="categoryName"
              label="业务类别"
            >
              <SelectInput
                v-model="searchForm.categoryName"
                component="SelectBusinessType"
                placeholder="请选择"
                clearable
                @handleSelect="getBusinessBigClass"
                :width="500"
              ></SelectInput>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem
              prop="subcategoryCode"
              label="业务小类编码"
            >
              <Input
                v-model="searchForm.subcategoryCode"
                placeholder="请输入"
                clearable
                type="text"
                :maxlength="30"
              />
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem
              prop="subcategoryName"
              label="业务小类名称"
            >
              <Input
                v-model="searchForm.subcategoryName"
                placeholder="请输入"
                clearable
                type="text"
                :maxlength="30"
              />
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem
              prop="valid"
              label="有效性"
            >
              <Select
                v-model="searchForm.valid"
                clearable
                :transfer="true"
              >
                <Option value="true">
                  启用
                </Option>
                <Option value="false">
                  停用
                </Option>
              </Select>
            </FormItem>
          </Col>
          
          <Col :span="16">
            <div class="search_btns ivu-form-item">
              <Button
                type="warning"
                @click.native="search()"
              >
                查询
              </Button>
              <Button
                @click.native="reset"
              >
                重置
              </Button>
            </div>
          </Col>
        </Row>
      </Form>
      
    </EMSTableNew>
  </div>
</template>
<script>
export default {
  directives: {},
  props: {
    title: {
      type: String,
      default: '选择SBU专用段'
    },
    // 是否开启多选
    selection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // action: '/ems-admin/subcategory/findSubcategoryPage',
      action: '/ems-base-application/subcategory/findSubcategoryPage',
      selectionData: null,
      /* 搜索框组 */
      searchForm: {
        businessLineCode: [],
        categoryName: '', // 大类名称
        categoryCode: '', // 业务类别
        subcategoryCode: '', // 业务小类编码
        subcategoryName: '', // 业务小类名称
        valid: '', // 有效性
        lang: '' // 多语言编码
      },
      propsColumns: [
        {
          type: 'selection',
          width: 60,
          resizable: true,
        },
        {
          title: '业务小类编码',
          width: 300,
          resizable: true,
          key: 'subcategoryCode'
        },
        {
          title: '业务小类名称',
          resizable: true,
          width: 300,
          key: 'subcategoryName'
        },
        {
          title: '状态',
          minWidth: 290,
          key: 'valid',
          render: (h, params) => {
            return h(
              'span',
              // {
              //   props: {
              //     type: 'dot',
              //     color: params.row.valid ? 'warning' : 'error'
              //   }
              // },
              params.row.valid ? '启用' : '停用'
            );
          }
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.$emit('SetTitle', this.title);
    const buttons = [
      {
        text: '确认',
        action: 'save',
        theme: 'warning',
        handle: () => {
          this.save();
        }
      },
      {
        text: '关闭',
        action: 'close',
        handle: () => {
          this.$emit('Close');
        }
      }
    ];
    this.selection && this.$emit('SetPageActions', buttons);
    this.selection && this.$emit('SetTitle', "请选择业务小类");
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    save() {
      if (this.selection) {
        this.$emit('Close', this.selectionData);
      }
    },
    // 点击数据行
    onSelectRow(selected) {
      this.selectionData = selected;
      if (selected.length == 0) {
        return;
      }
      if (this.selection) {
        return;
      }
      if (selected.length > 1) {
        this.$Message.warning({
          content: '只能选择一条数据',
          duration: 5
        });
        return;
      }
      this.$emit('Close', selected[0]);
    },
    /**
     * 弹出 业务类别 选择页面
     */
    getBusinessBigClass({ title = '', code = '' } = {}) {
      this.searchForm.categoryName = title;
      this.searchForm.categoryCode = code;
    },
    /**
     * 业务小类查询 搜索方法
     */
    search(page) {
      this.$refs.configTable.load(this.searchForm, page);
    },
    /**
     * 业务小类查询 重置方法
     * 1.重置所有搜索条件
     * 2.重新拉取数据
     */
    reset() {
      this.$refs.searchForm.resetFields();
      this.search(1);
    }
  }
};
</script>
<style>
</style>