<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <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.is_created" placeholder="请选择处理状态" clearable>
            <el-option v-for="item in createdData" :label="item.k" :key="item.v" :value="item.v"></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" style="padding:10px"></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="客户姓名" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="值班日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.duty_date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="外呼日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.call_date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼叫时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.call_time }}</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.is_created_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="导入时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.import_date }}</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-tooltip content="查看">
              <el-button size="small" plain icon="el-icon-tickets" @click="handleDetail(row)"></el-button>
            </el-tooltip>
            <el-tooltip content="编辑">
              <el-button size="small" plain icon="el-icon-edit-outline" @click="handleEdit(row)"></el-button>
            </el-tooltip>
          </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-dialog
      :title="textMap[dialogStatus]"
      :append-to-body="true"
      width="30%"
      :visible.sync="dialogFormVisible"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <AddOrEdit
        v-if="dialogFormVisible"
        :dialogStatus="dialogStatus"
        :temp="temp"
        @save="addCallback"
      ></AddOrEdit>
    </el-dialog>
  </div>
</template>

<script>
import { getStrategyTask } 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: '编辑详情'
      },
      createdData: [
        { v: 0, k: '未新建' },
        { v: 1, k: '已新建' }
      ],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn')),
        page: 1,
        pageSize: 20,
        phone: '',
        started_at: '',
        stoped_at: '',
        is_created: ''
      },
      temp: {},
      dialogFormVisible: false,
      dialogStatus: ''
    }
  },
  created() {
    this.getList()
  },
  watch: {
    dates: function(val) {
      if (Array.isArray(val)) {
        if (val.length > 0) {
          this.listQuery.started_at = this.$moment(val[0]).format(
            'YYYY-MM-DD HH:mm:ss'
          )
        }
        if (val.length > 1) {
          this.listQuery.stoped_at = this.$moment(val[1]).format(
            'YYYY-MM-DD HH:mm:ss'
          )
        }
      } else {
        this.listQuery.started_at = ''
        this.listQuery.stoped_at = ''
      }
    }
  },
  methods: {
    addCallback(v) {
      this.dialogFormVisible = false
      if (v === 1) {
        this.getList()
      }
    },
    getList() {
      //  this.$route.query
      this.listLoading = true
      getStrategyTask(this.listQuery)
        .then(response => {
          this.listLoading = false
          this.list = Array.from(response.info)
          this.total =
            Object.prototype.toString.call(response.meta) === '[object Object]'
              ? response.meta.total
              : this.list.length
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    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;
}
</style>
