<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-serviceOrder__pensionorder}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="" clearable></el-input>
        </el-form-item>
        <!--<el-form-item>-->
          <!--<el-input v-model="dataForm.status" placeholder="status" clearable></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="订单状态" prop="status">
          <el-select v-model="dataForm.status"  filterable placeholder="订单状态">
            <el-option label="" value=""></el-option>
            <el-option label="未接单" value="0"></el-option>
            <el-option label="已派发" value="1"></el-option>
            <el-option label="已完成" value="2"></el-option>
            <el-option label="已取消" value="3"></el-option>
            <el-option label="待评价" value="4"></el-option>
            <el-option label="已接单未派发" value="5"></el-option>
          </el-select>
          <!--<el-input v-model="dataForm.orderRecipientName" placeholder="接单人姓名"></el-input>-->
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <!--<el-form-item>-->
          <!--<el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
          <!--<el-button v-if="$hasPermission('serviceOrder:pensionorder:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
          <!--<el-button v-if="$hasPermission('serviceOrder:pensionorder:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>-->
        <!--</el-form-item>-->
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <!--<el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="orderNum" label="订单编号" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="status" label="订单状态 0未接单 ，1已接单  2已完成 3已取消" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="statusName" label="订单状态" header-align="center" align="center"></el-table-column>
        <el-table-column prop="address" label="详细地址" header-align="center" align="center"></el-table-column>
        <!--<el-table-column prop="serviceId" label="订单所属的服务id" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="serviceName" label="订单服务名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="appointmentPerson" label="预约人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="appointmentPhone" label="预约人电话" header-align="center" align="center"></el-table-column>
        <el-table-column prop="appointmentTime" label="预约时间" header-align="center" align="center"></el-table-column>
        <!--<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="orderRecipientId" label="接单人id" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="orderRecipientName" label="服务人姓名" header-align="center" align="center"></el-table-column>
        <!--<el-table-column prop="orderRecipientTime" label="接单时间" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="orderRecipientPhone" label="服务人电话" header-align="center" align="center"></el-table-column>
        <!--<el-table-column prop="actPrice" label="订单实际金额" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="communityName" label="所属社区名称" header-align="center" align="center"></el-table-column>
        <!--<el-table-column prop="communityId" label="所属社区id" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="deptId" label="部门ID" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="creatorName" label="订单发起人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creatorTel" label="订单发起人联系电话" header-align="center" align="center"></el-table-column>
        <!--<el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>-->
        <!--<el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column>-->
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <!--<el-button v-if="$hasPermission('serviceOrder:pensionorder:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>-->
            <!--<el-button v-if="$hasPermission('serviceOrder:pensionorder:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>-->
            <el-button  type="text" size="small" @click="detailHandle(scope.row.id)">查看详情</el-button>
            <!--<el-button v-if="scope.row.status==5 || scope.row.status== 1 " type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">查看详情</el-button>-->
            <el-button v-if="scope.row.status==5 || scope.row.status== 1 " type="text" size="small" @click="cancelHandle(scope.row.id)">取消接单</el-button>
            <el-button v-if="scope.row.status==0" type="text" size="small" @click="receiveHandle(scope.row.id)">接单</el-button>
            <el-button v-if="scope.row.status==5 " type="text" size="small" @click="sendHandle(scope.row.id)">派单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <receive v-if="receiveVisible" ref="receive" @refreshDataList="getDataList"></receive>
      <send v-if="sendVisible" ref="send" @refreshDataList="getDataList"></send>
      <cancel v-if="cancelVisible" ref="cancel" @refreshDataList="getDataList"></cancel>
      <detail v-if="detailVisible" ref="detail" @refreshDataList="getDataList"></detail>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './pensionorder-add-or-update'
import receive from './pensionorder-receive'
import send from './pensionorder-send'
import cancel from './pensionorder-cancel'
import detail from './pensionorder-detail'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      receiveVisible: false,
      sendVisible: false,
      cancelVisible: false,
      detailVisible: false,
      mixinViewModuleOptions: {
        getDataListURL: '/serviceOrder/pensionorder/organization',
        getDataListIsPage: true,
        exportURL: '/serviceOrder/pensionorder/export',
        deleteURL: '/serviceOrder/pensionorder',
        deleteIsBatch: true
      },
      dataForm: {
        id: '',
        status: ''
      }
    }
  },
  components: {
    AddOrUpdate,
    receive,
    send,
    cancel,
    detail
  },
  methods: {
    // 接单弹出框
    receiveHandle (id) {
      this.receiveVisible = true
      this.$nextTick(() => {
        this.$refs.receive.dataForm.id = id
        this.$refs.receive.init()
      })
    },
    sendHandle (id) {
      this.sendVisible = true
      this.$nextTick(() => {
        this.$refs.send.dataForm.id = id
        this.$refs.send.init()
      })
    },
    detailHandle (id) {
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.detail.dataForm.id = id
        this.$refs.detail.init()
      })
    },
    cancelHandle (id) {
      this.cancelVisible = true
      this.$nextTick(() => {
        this.$refs.cancel.dataForm.id = id
        this.$refs.cancel.init()
      })
    }
  }
}
</script>
