<template>
  <div class="order-list">
    <Card class="order-list-card">
      <div class="search">
        <el-form
          class="count-form"
          ref="ruleForm"
          size="mini"
          inline
          :model="ruleForm"
        >
          <el-form-item label="营销员姓名" prop="customName">
            <el-input
              v-model.trim="ruleForm.customName"
              placeholder="请输入营销员姓名"
              maxlength="21"
            >
              <i slot="prefix" class="el-icon-search"></i
            ></el-input>
          </el-form-item>
          <el-form-item label="营销员工号" prop="customId">
            <el-input
              v-model.trim="ruleForm.customId"
              placeholder="请输入营销员工号"
              maxlength="21"
            >
              <i slot="prefix" class="el-icon-search"></i
            ></el-input>
          </el-form-item>
          <el-form-item label="展业开始时间" prop="times">
            <el-date-picker
              v-model="ruleForm.times"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-end mb10">
        <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
        <el-button size="mini" @click="onReset">重置</el-button>
      </div>
      <el-table
        class="mb10"
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column align="center" prop="orderId" label="序号" fixed>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="客户姓名"
          width="160"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="callTime"
          label="客户手机号"
          width="160"
        >
        </el-table-column>
        <el-table-column align="center" prop="partnerDesc" label="管理员姓名">
        </el-table-column>
        <el-table-column align="center" prop="customerName" label="营销员工号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="customerPhoneNo"
          label="展业时长"
          width="160"
        >
        </el-table-column>
        <el-table-column align="center" prop="callType" label="展业开始时间">
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right">
          <template v-slot="scope">
            <div>
              <el-button
                type="text"
                size="small"
                @click="handleDetail(scope.row)"
                >查看</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <FooterPaginationfrom
        @pager="handleGetPager"
        :total="total"
      ></FooterPaginationfrom>
    </Card>
  </div>
</template>

<script>
import FooterPaginationfrom from './components/FooterPagination'
import { parseTime } from '@/utils/util'

export default {
  components: {
    FooterPaginationfrom
  },
  data() {
    return {
      parseTime,
      ruleForm: {
        customName: '',
        customId: '',
        times: ''
      },
      tableData: [{}],
      pagination: null,
      loading: false,
      total: 0
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.handleQueryOrderList()
        } else {
          return false
        }
      })
    },
    onReset() {
      this.ruleForm = {
        customName: '',
        customId: '',
        times: ''
      }
      this.onSubmit()
    },
    handleGetPager(data) {
      this.pagination = data
      // this.onSubmit()
    },
    async handleQueryOrderList() {
      try {
        this.loading = true
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handleDetail(row) {
      this.$router.push({
        path: 'monitor-details',
        query: { id: row.orderId }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  .order-list-card {
    .search {
      .count-form {
        margin-top: 20px;
        margin-left: 20px;
      }
    }
    .status {
      display: flex;
      justify-content: center;
      align-items: center;
      .dot {
        margin-right: 6px;
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #34c780;
      }
      .yellow {
        background-color: #ffaa00;
      }
    }
  }
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
</style>