<template>
  <div class="n-app-container">
    <el-card shadow="never" style="margin-bottom:20px;">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="联系人">
          <el-input
            v-model="pagerDto._Co_Contact"
            placeholder="联系人"
            clearable
          />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="pagerDto._Co_Phone"
            placeholder="联系电话"
            clearable
          />
        </el-form-item>
        <el-form-item label="是否受理">
          <el-select
            v-model="pagerDto._Eq_IsHandle"
            placeholder="是否受理"
            clearable
            filterable
          >
            <el-option
              v-for="item in IsHandles"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <el-date-picker
              v-model="pagerDto._Range_CreateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="咨询开始时间"
              value-format="yyyy-MM-dd"
              end-placeholder="咨询结束时间"
            />
          </div>
        </el-form-item>
        <el-form-item><el-button
          :loading="loading"
          type="primary"
          @click="pagerSearch()"
        >搜索</el-button></el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-table :data="data" :highlight-current-row="true" :select-on-indeterminate="true" width="100%">
        <el-table-column
          prop="Contact"
          label="联系人"
        />
        <el-table-column
          prop="Phone"
          label="联系电话"
        />
        <el-table-column
          prop="CreateTime"
          label="咨询时间"
        />
        <el-table-column
          prop="HandleTime"
          label="受理时间"
        />
        <el-table-column
          prop="IsHandle"
          label="是否受理"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsHandle" type="success">是</el-tag>
            <el-tag v-if="!scope.row.IsHandle" type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-link v-if="!scope.row.IsHandle" type="primary" @click="setIsHandle(scope.row)">设置为已受理</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[20,50,100, 200, 300, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        style="margin-top:10px"
        @current-change="pagerSearch"
        @size-change="sizeChange"
      />
    </el-card>

  </div>
</template>
<script>
import { _getPageResult, _setHandel } from '@/api/CustomerMaintenance'
export default {
  name: 'CustomerMaintenance',
  data: function() {
    return {
      pagerDto: {
        PageIndex: 1,
        PageSize: 20,
        total: 0,
        _Co_Contact: '',
        _Co_Phone: '',
        _Eq_IsHandle: '',
        _Range_CreateTime: ''
      },
      IsHandles: [{ Id: 1, Name: '是' }, { Id: 0, Name: '否' }],
      data: [],
      loading: false

    }
  },
  methods: {
    pagerSearch(pageIndex) {
      if (pageIndex && pageIndex > 0) {
        this.pagerDto.PageIndex = pageIndex
      } else {
        this.pagerDto.PageIndex = 1
      }

      _getPageResult(this.pagerDto).then(r => {
        this.data = r.Result
        this.pagerDto.total = r.TotalCount
      })
    },
    setIsHandle(row) {
      _setHandel(row).then(r => {
        this.$alert('设置成功')
        this.pagerSearch()
      })
    },
    sizeChange(size) {
      this.pagerDto.PageSize = size
      this.pagerSearch()
    }
  }
}
</script>
