<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="title-box">
        <img @click="goback" :src="imgsrc.backpng" title="返回" class="back-png" />
        <span>外呼策略</span>
        <span>/</span>
        <span>{{ $route.query.strategy_name }}</span>
      </div>
      <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 @click="handleDetail(row)" class="img-btn">
                <img :src="imgsrc.detailpng" class="w18h18png" />
              </el-button>
            </el-tooltip>
            <el-tooltip content="编辑">
              <el-button size="small" plain @click="handleEdit(row)" class="img-btn">
                <img :src="imgsrc.editpng" class="w18h18png" />
              </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="600px"
      :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'
import backpng from '@/assets/img/back.svg'
import editpng from '@/assets/img/edit.png'
import detailpng from '@/assets/img/detail.png'
export default {
  name: 'TaskData',
  components: { Pagination, AddOrEdit },
  directives: { waves },
  filters: {},
  data() {
    return {
      imgsrc: {
        backpng: backpng,
        editpng: editpng,
        detailpng: detailpng
      },
      dates: '',
      textMap: {
        detail: '外呼详情',
        update: '编辑详情'
      },
      createdData: [
        { v: 0, k: '未建' },
        { v: 1, k: '已建' }
      ],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn')),
        page: 1,
        pageSize: 20,
        phone: '',
        started_at: '',
        stoped_at: '',
        is_created: '',
        strategy_sn: this.$route.query.strategy_sn
      },
      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 = ''
      }
    },
    $route(to) {
      if (to.name === 'TaskData') {
        this.resetQeury()
        this.listQuery.strategy_sn = to.query.strategy_sn
        this.getList()
      }
    }
  },
  methods: {
    resetQeury() {
      this.dates = ''
      this.listQuery = {
        user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn')),
        page: 1,
        pageSize: 20,
        phone: '',
        started_at: '',
        stoped_at: '',
        is_created: '',
        strategy_sn: this.$route.query.strategy_sn
      }
    },
    goback() {
      this.$router.go(-1)
    },
    addCallback(v) {
      this.dialogFormVisible = false
      if (v === 1) {
        this.getList()
      }
    },
    getList() {
      this.listLoading = true
      getStrategyTask(this.listQuery)
        .then(response => {
          this.listLoading = false
          if (
            Object.prototype.toString.call(response.info) === '[object Object]'
          ) {
            this.total = response.info.total || 0
            if (Array.isArray(response.info.data)) {
              this.list = response.info.data
            } else {
              this.list = []
            }
          } else {
            this.total = 0
            this.list = []
          }
        })
        .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;
}
.filter-container {
  height: 86px;
  .el-row {
    height: 36px;
    margin: 5px 0;
  }
  .title-box {
    font-size: 14px;
    height: 40px;
    border-bottom: 1px solid #e4e9ef;
    line-height: 40px;
    position: relative;
    padding-left: 23px;
    .back-png {
      width: 18px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
    }
    span {
      &:first-child {
        color: #222c36;
      }
      &:nth-child(1) {
        color: #6d6f72;
      }

      &:last-child {
        color: #a7aab0;
      }
    }
  }
}
.body-container {
  height: calc(100% - 145px);
}
.w18h18png {
  width: 18px;
  height: 18px;
}
.img-btn {
  padding: 6px 12px;
}
</style>
