/*
 * @任务池动态维度选择
 */

<template>
  <div>
    <EMSTableNew
      ref="searchTable"
      :action="action"
      :params="searchForm"
      :columns="columns"
      :isIndexAuto="false"
      highlight-row
      :onSelectionChange="onSelectionChange"
    >
      <Form
        slot="search-bar"
        ref="searchForm"
        :model="searchForm"
        :labelWidth="90"
        inline
      >
        <Row :gutter="10">
          <Col :span="8">
          <FormItem
            prop="valueCode"
            :label="$t('值代码')"
          >
            <Input
              v-model.trim="searchForm.valueCode"
              :placeholder="$t('请输入')"
              clearable
              size="small"
            ></Input>
          </FormItem>
          </Col>
          <Col :span="8">
          <FormItem
            prop="valueName"
            :label="$t('值名称')"
          >
            <Input
              v-model.trim="searchForm.valueName"
              :placeholder="$t('请输入')"
              clearable
              size="small"
            ></Input>
          </FormItem>
          </Col>
          <Col :span="8">
          <div class="search_btns ivu-form-item">
            <Button
              type="warning"
              @click.native="search"
            >
              {{ $t('查询') }}
            </Button>
            <Button
              @click.native="reset"
            >
              {{ $t('重置') }}
            </Button>
          </div>
          </Col>
        </Row>
      </Form>
    </EMSTableNew>
    <!-- <Form
      ref="searchForm"
      :model="searchForm"
    >
    <Row :gutter="10">
      <Col :span="8">
        <FormItem
          prop="valueCode"
          :label="$t('值代码')"
        >
          <Input
            v-model.trim="searchForm.valueCode"
            :placeholder="$t('请输入')"
            clearable
            size="small"
          ></Input>
        </FormItem>
      </Col>
      <Col :span="8">
        <FormItem
          prop="valueName"
          :label="$t('值名称')"
        >
          <Input
            v-model.trim="searchForm.valueName"
            :placeholder="$t('请输入')"
            clearable
            size="small"
          ></Input>
        </FormItem>
      </Col>
    </Row>
    </Form>
    <div style="margin-bottom:15px">
      <Button
        type="warning"
        icon="ios-search"
        size="small"
        style="margin-right:10px"
        @click.native="search"
      >
        {{$t('查询')}}
      </Button>
      <Button
        type="info"
        icon="ios-refresh"
        size="small"
        @click.native="reset"
      >
         {{$t('重置')}}
      </Button>
    </div>
    <Table
        :data="valueDetailList"
        :columns="columns"
        stripe
        border
        highlight-row
        @on-selection-change="onSelectionChange"
      ></Table> -->
  </div>
</template>
<script>

import { DispatchDimensionList } from '../server.js';
export default {
  name: 'SelectDispatchDimension',
  directives: {},
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
    queryOpts: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      action: '/ems-shared-dispatch-application/business/scopes/segments',
      searchForm: {
        dimensionId: '',
        enabled: '1',
        valueCode: '',
        valueName: '',
        sharedOrgCode: '',
        segmentName: '',
        isEffectTime: 1
      },
      valueDetailList: [],
      tableSelect: [],
      columns: [
        {
          type: 'selection',
          width: 50,
          align: 'center'
        },
        {
          title: this.$t('序号'),
          align: 'center',
          type: 'index',
          resizable: true,
          width: 60
        },
        {
          title: this.$t('值代码'),
          align: 'left',
          key: 'valueCode',
          width: 120,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis'
                }
              },
              params.row.valueCode
            );
          }
        },
        {
          title: this.$t('值名称'),
          align: 'left',
          key: 'valueName ',
          minWidth: 120,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.valueName
                }
              },
              params.row.valueName
            );
          }
        },
        {
          title: this.$t('层级'),
          align: 'left',
          key: 'valueLevel',
          width: 70,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.valueLevel
                }
              },
              params.row.valueLevel
            );
          }
        },
        {
          title: this.$t('父值名称'),
          width: 100,
          align: 'left',
          key: 'parentName',
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.parentName
                }
              },
              params.row.parentName
            );
          }
        },
        {
          title: this.$t('父值代码'),
          width: 100,
          align: 'left',
          key: 'parentCode',
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.parentCode
                }
              },
              params.row.parentCode
            );
          }
        },
        {
          title: this.$t('有效日期'),
          align: 'left',
          key: 'effectStartTime',
          width: 130,
          resizable: true,
          render: (h, params) => {
            const dateTime = `${params.row.effectStartTime} - ${params.row.effectEndTime}`;
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: dateTime
                }
              },
              dateTime
            );
          }
        },
        {
          title: this.$t('启用'),
          align: 'left',
          key: 'enabled ',
          width: 60,
          render: (h, params) => {
            return h(
              'span',
              {
                attrs: {
                  type: 'dot',
                  title: params.row.enabled == '1' ? this.$t('是') : this.$t('否')
                }
              },
              params.row.enabled == '1' ? this.$t('是') : this.$t('否')
            );
          }
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.searchForm = Object.assign({}, this.searchForm, this.queryOpts);
    this.$emit('SetTitle', this.title);
    this.$emit('SetPageActions', [
      {
        text: this.$t('保存'),
        theme: 'warning',
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t('取消'),
        handle: () => {
          this.$emit('Close');
        }
      }
    ]);
    // this.getTableList()
  },
  methods: {
    // 获取table数据
    getTableList() {
      this.valueDetailList = [];
      DispatchDimensionList(this.searchForm).then(res => {
        const { code = '', msg = '', data = [] } = res;
        if (code === 'S000A000') {
          this.valueDetailList = data;
        } else {
          this.$Message.error(msg);
        }
      });
    },

    // 查询
    search(page = 1) {
      this.$refs.searchTable.load(this.searchForm, page);
    },

    // 重置
    reset() {
      this.$refs.searchForm.resetFields();
      this.search(1);
    },

    // 点击数据行
    onSelectionChange(selected) {
      if (selected.length == 0) {
        return;
      }
      this.tableSelect = [];
      if (selected.length > 0) {
        this.tableSelect = selected;
      }
    },

    // 保存
    save() {
      if (this.tableSelect.length < 1) {
        this.$Message.error(this.$t('请选择一项数据'));
        return;
      }
      this.$emit('Close', this.tableSelect);
    }
  }
};
</script>