<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row class="txt-rt">
        <div class="dis-ib">
          <el-input
            clearable
            v-model="listQuery.phone"
            maxlength="11"
            placeholder="请输入手机号码"
            style="width: 200px;"
          />
        </div>

        <div class="dis-ib">
          <el-select v-model="listQuery.status" placeholder="请选择处理状态" clearable>
            <el-option
              v-for="(item, key) in pushResultData"
              :label="item"
              :key="key"
              :value="key"
            >{{ item }}</el-option>
          </el-select>
        </div>

        <el-date-picker
          v-model="dates"
          type="datetimerange"
          range-separator="至"
          start-placeholder="推送开始日期"
          end-placeholder="推送结束日期"
        ></el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter"></el-button>
      </el-row>
    </div>

    <div class="body-container">
      <el-table
        ref="singleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="客户姓名" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.project_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="值班日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.version }}</span>
          </template>
        </el-table-column>
        <el-table-column label="外呼日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.notes }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼叫时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.code_statusCN }}</span>
          </template>
        </el-table-column>
        <el-table-column label="话术流程" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sql_statusCN }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sql_upload_statusCN }}</span>
          </template>
        </el-table-column>
        <el-table-column label="导入时间" align="center">
          <template slot-scope="{row}">
            <span>{{ $moment(row.created_at.date).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="handleDetail(row)">查看</el-button>
            <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <el-drawer
      :title="textMap[dialogStatus]"
      :append-to-body="true"
      :visible.sync="dialogFormVisible"
      :destroy-on-close="true"
      :wrapperClosable="false"
      @close="addCallback(0)"
      direction="rtl"
    >
      <AddOrEdit
        v-if="dialogFormVisible"
        :dialogStatus="dialogStatus"
        :temp="temp"
        @save="addCallback"
      ></AddOrEdit>
    </el-drawer>
  </div>
</template>

<script>
import { fetchProjectsList } from '@/api/article'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import AddOrEdit from './add'

export default {
  name: 'TaskData',
  components: { Pagination, AddOrEdit },
  directives: { waves },
  filters: {},
  data() {
    return {
      dates: '',
      textMap: {
        detail: '外呼详情',
        update: '编辑详情'
      },
      pushResultData: { 0: '部署中', 1: '部署失败', 2: '部署成功' },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 10,
        phone: '',
        startDate: '',
        endDate: '',
        status: ''
      },
      temp: {},
      dialogFormVisible: false,
      dialogStatus: ''
    }
  },
  created() {
    this.getList()
  },
  watch: {
    dates: function(val) {
      if (Array.isArray(val) && val.length === 2) {
        this.listQuery.startDate = this.$moment(val[0]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        this.listQuery.endDate = this.$moment(val[1]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      } else {
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
      }
    }
  },
  methods: {
    addCallback(status) {
      this.dialogFormVisible = false
      if (status) {
        this.getList()
      }
    },
    getList() {
      //  this.$route.query
      this.listLoading = true
      fetchProjectsList(this.listQuery).then(response => {
        this.listLoading = false
        this.list = Array.from(response.data)
        this.total =
          Object.prototype.toString.call(response.meta) === '[object Object]'
            ? response.meta.total
            : this.list.length
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleEdit(row) {
      this.temp = this.$publicTools.deepClone(row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleDetail(row) {
      this.temp = this.$publicTools.deepClone(row) // copy obj
      this.dialogStatus = 'detail'
      this.dialogFormVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.dis-ib {
  display: inline-block;
}

.txt-rt {
  text-align: right;
}
.drawer_body_box {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
