<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"
          :rules="rules"
        >
          <el-form-item label="客户姓名" prop="customerName">
            <el-input
              v-model.trim="ruleForm.customerName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="customerPhoneNo">
            <el-input
              v-model.trim="ruleForm.customerPhoneNo"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="呼叫类型" prop="callType">
            <el-select clearable v-model="ruleForm.callType">
              <el-option label="呼入" :value="1"></el-option>
              <el-option label="呼出" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合作商" prop="partnerDesc">
            <el-input
              v-model.trim="ruleForm.partnerDesc"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="orderStatus">
            <el-select clearable v-model="ruleForm.orderStatus">
              <el-option label="待沟通" :value="0"></el-option>
              <el-option label="已沟通" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="onSubmit"
              >搜索</el-button
            >
            <el-button size="mini" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </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"
        >
          <template v-slot="scope">
            <span>{{
              scope.row.createTime ? parseTime(scope.row.createTime) : ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="callTime"
          label="呼叫时间"
          width="160"
        >
          <template v-slot="scope">
            <span>{{
              scope.row.callTime ? parseTime(scope.row.callTime) : ''
            }}</span>
          </template>
        </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" prop="auditorName" label="坐席姓名">
        </el-table-column>
        <el-table-column align="center" prop="username" label="坐席工号">
        </el-table-column>
        <el-table-column align="center" prop="meetTimes" label="面核次数">
        </el-table-column>
        <el-table-column align="center" prop="durationTimeStr" label="通话时长">
        </el-table-column>
        <el-table-column
          align="center"
          prop="orderStatus"
          fixed="right"
          label="状态"
        >
          <template v-slot="scope">
            <span class="status">
              <span
                class="dot"
                :class="{ yellow: scope.row.orderStatus === '待沟通' }"
              ></span>
              <span>{{ scope.row.orderStatus }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="50">
          <template v-slot="scope">
            <div>
              <el-button
                type="text"
                size="small"
                v-if="scope.row.orderStatus === '已沟通'"
                @click="handleDetail(scope.row)"
                >查看</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <FooterPaginationfrom
        @pager="handleGetPager"
        :total="total"
      ></FooterPaginationfrom>
    </Card>
  </div>
</template>

<script>
import { maxSizeValidate } from '@/views/validate'
import FooterPaginationfrom from './components/FooterPagination'
import { queryOrderList } from '@/api/orderList'
import { parseTime } from '@/utils/util'

export default {
  components: {
    FooterPaginationfrom
  },
  data() {
    return {
      parseTime,
      ruleForm: {
        customerName: '',
        customerPhoneNo: '',
        callType: '',
        orderStatus: '',
        partnerDesc: ''
      },
      rules: {
        customerName: [maxSizeValidate],
        customerPhoneNo: [maxSizeValidate]
      },
      tableData: [],
      pagination: null,
      loading: false,
      total: 0
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.handleQueryOrderList()
        } else {
          return false
        }
      })
    },
    onReset() {
      this.ruleForm = {
        customerName: '',
        customerPhoneNo: '',
        callType: '',
        orderStatus: '',
        partnerDesc: ''
      }
      this.onSubmit()
    },
    handleGetPager(data) {
      this.pagination = data
      this.onSubmit()
    },
    async handleQueryOrderList() {
      try {
        this.loading = true
        const {
          customerName,
          customerPhoneNo,
          callType,
          partnerDesc,
          orderStatus
        } = this.ruleForm
        const {
          code,
          result: { orderInfoList, totalCount }
        } = await queryOrderList({
          customerName,
          customerPhoneNo,
          callType,
          partnerDesc,
          orderStatus,
          pageNo: this.pagination.page,
          pageSize: this.pagination.size
        })
        if (code === 0) {
          this.tableData = orderInfoList
          this.total = totalCount
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handleDetail(row) {
      this.$router.push({
        path: 'order-detail',
        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>