/*
 * @Author: Anmin
 * @Email:changanmin1@crc.com.hk
 * @Date: 2018-08-25 11:36:28
 * @Last Modified by: Anmin
 * @Last Modified time: 2019-06-26 21:11:31
 * @Description  选择机构值
 * @service: EMS-BASE-DATA/mdCompany/findAllMdCompanyPage
 */

<template>
  <div>
    <EMSTableNew
      ref="fsmTable"
      :action="action"
      :params="searchForm"
      :columnsFn="columnsFn"
      :highlight-row="true"
      :onSelectionChange="onSelectionChange"
      :rowClickHandle="rowClick"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        :label-width="120"
      >
      <Row>
        <Col span="8">
        <FormItem
          prop="buCode"
          label="所属BU"
        >
          <DataSelect
            v-model="searchForm.buCode"
            code="BU"
            placeholder="请选择"
            clearable
            transfer
            @loadFinish="({valueMap={}}= {})=>dataSet.buCode = valueMap"
          ></DataSelect>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          prop="companyCode"
          label="机构编码"
        >
          <Input
            v-model="searchForm.companyCode"
            type="text"
            placeholder="请输入"
            clearable
          ></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          prop="companyName"
          label="机构名称"
        >
          <Input
            v-model="searchForm.companyName"
            type="text"
            placeholder="请输入"
            clearable
          ></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          prop="valid"
          label="ERP是否有效"
        >
          <Select
            v-model="searchForm.valid"
            placeholder="请选择"
            transfer
            clearable
          >
            <Option value="Y">
              是
            </Option>
            <Option value="N">
              否
            </Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          prop="enabled"
          label="EMS是否有效"
        >
          <Select
            v-model="searchForm.enabled"
            placeholder="请选择"
            transfer
            clearable
          >
            <Option value="true">
              是
            </Option>
            <Option value="false">
              否
            </Option>
          </Select>
        </FormItem>
        </Col>
        </Row>
      </Form>
      <div slot="handle-bar">
        <Button
          type="warning"
          @click.native="search"
        >
          查询
        </Button>
        <Button
          type="default"
          @click.native="reset"
        >
          重置
        </Button>
      </div>
    </EMSTableNew>
  </div>
</template>
<script>
export default {
  name: 'SelectMdCompany',
  directives: {},
  props: {
    title: {
      type: String,
      default() {
        return '请选择机构值';
      }
    }
  },
  data() {
    return {
      // action: '/ems-base-data/mdCompany/findAllMdCompanyPage',
      action: '/ems-base-application/mdCompany/findAllMdCompanyPage',
      searchForm: {
        buCode: '',
        companyCode: '',
        companyName: '',
        enabled: '', // ems是否启用，true是 ，false否
        valid: '' // fms是否启用，Y是，N否
      },
      dataSet: {
        buCode: null
      }
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.$emit('SetTitle', this.title);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    search(page) {
      this.$refs.fsmTable.load(this.searchForm, page);
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.search(1);
    },
    // 点击数据行
    onSelectionChange(selected) {
      if (selected.length == 0) {
        return;
      }
      if (selected.length > 1) {
        this.$Message.warning({
          content: '只能选择一条数据',
          duration: 5
        });
        return;
      }
      this.$emit('Close', selected[0]);
    },
    rowClick(selection) {
      if (selection) {
        this.$emit('Close', selection);
      }
    },
    columnsFn() {
      return [
        {
          title: '序号',
          type: 'index',
          width: 60,
          resizable: true,
          align: 'center'
        },
        {
          title: '所属BU编码',
          align: 'left',
          key: 'buCode',
          resizable: true,
          width: 85,
          render: (h, params) => {
            const val = params.row.buCode || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '所属BU名称',
          align: 'left',
          key: 'buCode',
          resizable: true,
          width: 100,
          render: (h, params) => {
            const val = this.dataSet.buCode && params.row.buCode ? this.dataSet.buCode[params.row.buCode] : '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '机构编码',
          align: 'left',
          key: 'companyCode',
          resizable: true,
          width: 100,
          render: (h, params) => {
            const val = params.row.companyCode || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '机构名称',
          align: 'left',
          key: 'companyName',
          minWidth: 180,
          resizable: true,
          render: (h, params) => {
            const val = params.row.companyName || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '层级',
          align: 'left',
          key: 'level',
          resizable: true,
          width: 60,
          render: (h, params) => {
            const val = params.row.level || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '是否父级',
          align: 'left',
          key: 'isParentValue',
          resizable: true,
          width: 100,
          render: (h, params) => {
            let val = params.row.isParentValue;
            if (!val) return;
            val = val.toUpperCase();
            return val ? h(
              'Tag',
              {
                props: {
                  type: 'dot',
                  color: val == 'Y' ? 'warning' : 'error'
                }
              },
              val === 'Y' ? '是' : '否'
            ) : null;
          }
        },
        {
          title: '父级',
          align: 'left',
          key: 'parentValue',
          resizable: true,
          width: 100,
          render: (h, params) => {
            const val = params.row.parentValue || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '有效日期起',
          align: 'left',
          key: 'effectiveFrom',
          resizable: true,
          width: 100,
          render: (h, params) => {
            const val = params.row.effectiveFrom || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: '核算版本',
          align: 'left',
          key: 'fmsVersion',
          resizable: true,
          width: 100,
          render: (h, params) => {
            const val = params.row.fmsVersion || '';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        },
        {
          title: 'ERP有效性',
          align: 'left',
          key: 'valid',
          resizable: true,
          width: 80,
          render: (h, params) => {
            let val = params.row.valid;
            if (!val) return;
            val = val.toUpperCase();
            const label = val == 'Y' ? '有效' : '无效';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: label
                }
              },
              label
            );
          }
        },
        {
          title: 'EMS有效性',
          align: 'left',
          key: 'enabled',
          width: 80,
          render: (h, params) => {
            const val = params.row.enabled ? '有效' : '无效';
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: val
                }
              },
              val
            );
          }
        }
      ];
    }
  }
};
</script>
<style lang="less" scoped>
.emstable-wrap-new /deep/ .search-form form {
  height: auto !important;
}
.emstable-wrap-new /deep/  .handle-bar-solt {
  top: 57px;
  right: 0;
}
</style>