<template>
  <div>
    <Modal v-model="showUserGroupModal">
      <p slot="header">{{modalTitle}}</p>
      <Row>
        <!--查询条件-->
        <Col span="24">
        <Form id="user-marshalling-form" onsubmit="return false">
          <Form-item>
            <Input 
              v-model="cname" 
              placeholder="请输入客户名称,回车查询" 
              style="width:100%"
              icon="ios-search-strong" 
              @on-enter="_pageChange(1)"></Input>
          </Form-item>
        </Form>
        </Col>
        <Col span="24" style="margin-bottom: 10px">
        <el-table
          border
          size="small"
          highlight-current-row
          :data="getPage.records"
          style="width: 100%"
          :height="300"
          @row-click="_rowChange"
          @row-dblclick="_dbClick"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            :prop="item.key"
            :label="item.title" 
            :min-width="item.width">
            <template slot-scope="scope">
              <span >{{scope.row[item.key]}}</span>
            </template>
          </el-table-column>
        </el-table>
        </Col>
        <Col span="24">
        <div style="float: left;padding-top:15px">共 {{getPage.total === undefined ? 0: getPage.total}} 条</div>
        <div style="float: left">
          <Page 
            :total="getPage.total" 
            :page-size="getPage.size" 
            :current="getPage.current" 
            placement="top"
            style="margin-top: 10px;"
            simple 
            @on-change="_pageChange"></Page>
        </div>
        <div style="clear: both"></div>
        </Col>
      </Row>
      <div slot="footer" class="btn-width">
        <Button style="margin-left: 8px" @click="_cancel">取消</Button>
        <Button type="primary" @click="_ok">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 选择客户(单选)
 */
export default {
  components: {},
  data() {
    return {
      loading: true,
      pageParams: { rows: 20 },
      pageColumns: [
        { title: '中文名称', key: 'cname' },
        { title: '信用等级', key: 'credit', sex: true, width: 100 },
        { title: '主联系人', key: 'contact', sex: true, width: 100 }
      ],
      getPage: {},
      showUserGroupModal: false,
      modalTitle: '',
      currentRowData: {},
      cname: ''
    }
  },
  methods: {
    _open() {
      this.modalTitle = '选择客户'
      this.cname = ''
      this._judge()
    },
    _judge() {
      this.showUserGroupModal = true
      this.currentRowData = {}
      this._page()
    },
    _page: function() {
      this.$store
        .dispatch('LmsCustomer/page', this._searchParams())
        .then(() => {
          this.loading = false
          this.getPage = this.$store.state.LmsCustomer.page
        })
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._page()
    },
    _searchParams() {
      const data = this.$serialize('user-marshalling-form')
      if (this.cname) {
        data.cname = this.cname
      }
      return this.$extend(data, this.pageParams)
    },
    _search() {
      this._page()
    },
    _rowChange(data) {
      this.currentRowData = data // 选中的行数据;
    },
    _cancel() {
      this.showUserGroupModal = false
    },
    _ok() {
      if (JSON.stringify(this.currentRowData) === '{}') {
        switch (this.modalTitle) {
          case '选择客户':
            this.$Message.warning('请选择一条客户数据！')
            break
        }
      } else {
        this.$emit('on-result-change', this.currentRowData)
        this.showUserGroupModal = false
      }
    },
    // 双击
    _dbClick(data, event) {
      this.currentRowData = data // 选中的行数据;
      this._ok()
    }
  }
}
</script>
