/*
 * @Author: Anmin
 * @Email:changanmin1@crc.com.hk
 * @Date: 2019-03-14 10:53:18
 * @Last Modified by: Anmin
 * @Last Modified time: 2019-03-14 11:38:20
 * @description:   组件：地区码
 */

<template>
  <div class="select-area">
    <EMSTableNew
      ref="areasTable"
      :action="action"
      :params="searchForm"
      :columnsFn="columns"
      :rowClickHandle="onSelectionChange"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        :labelWidth="80"
        inline
		style="margin-bottom: 16px;"
      >
        <Row>
          <Col span="8">
            <FormItem
              prop="areaName"
              :label="$t('城市名称')"
            >
              <Input
                v-model="searchForm.areaName"
                type="text"
                :placeholder="$t('请输入')"
              ></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem
              prop="areaCode"
              :label="$t('城市码')"
            >
              <Input
                v-model="searchForm.areaCode"
                type="text"
                :placeholder="$t('请输入')"
              ></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <!-- <div slot="handle-bar">
              <Button
                type="warning"
                icon="md-search"
                @click.native="search"
              >
                {{$t('查询')}}
              </Button>
              <Button
                icon="md-sync"
                @click.native="reset"
              >
                {{$t('重置')}}
              </Button>
            </div> -->
            <!-- <div slot="handle-bar"> -->
            <div style="text-align:right;">
              <Button
                type="warning"
                @click.native="search"
                style="margin-right: 16px;"
              >
                {{$t('查询')}}
              </Button>
              <Button
                @click.native="reset"
              >
                {{$t('重置')}}
              </Button>
            </div>
          </Col>
        </Row>

        
        
      </Form>
      
    </EMSTableNew>
  </div>
</template>
<script>
export default {
  name: 'SelectArea',
  props: {
    title: {
      type: String,
      default() {
        return this.$t('请选择城市地区码');
      }
    },
    ouCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // action: '/ems-admin/standardArea/findByPage',
      action: '/ems-base-application/standardArea/findByPage',
      searchForm: {
        areaName: '',
        areaCode: '',
        ouCode: this.ouCode
      }
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.$emit('SetTitle', this.title);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    columns() {
      return [
        // {
        //   type: 'selection',
        //   width: 45,
        //   align: 'center'
        // },
        {
          title: this.$t('城市名称'),
          key: 'areaName',
          align: 'left',
          width: 600,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: params.row.areaName
                }
              },
              params.row.areaName
            );
          }
        },
        {
          title: this.$t('城市码'),
          key: 'areaCode',
          minWidth: 200,
          align: 'left',
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell ivu-table-cell-ellipsis',
                  title: params.row.areaCode
                }
              },
              params.row.areaCode
            );
          }
        }
      ];
    },
    search(page = 1) {
      this.$refs.areasTable.load(this.searchForm, page);
    },
    reset() {
      this.searchForm.areaName = '';
      this.searchForm.areaCode = '';
      this.search(1);
    },

    // 点击数据行
    onSelectionChange(selected) {
      // if (selected.length == 0) {
      //   return;
      // }
      // if (selected.length > 1) {
      //   this.$Message.warning({
      //     content: this.$t('只能选择一条数据'),
      //     duration: 5
      //   });
      //   return;
      // }
      this.$emit('Close', selected);
    }
  }
};
</script>
<style lang="less" scoped>
  .select-area{
    .emstable-wrap-new{
      .ivu-form-inline .ivu-form-item{
        display: block;
      }
    }
    
  }
</style>