<template>
  <div class="app-container">
    <div class="filter-container text-rt">
      <!-- <el-input
        clearable
        v-model="listQuery.name"
        placeholder="源码名称"
        style="width: 200px;"
        class="filter-item"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查询</el-button>-->
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >新建</el-button>
    </div>
    <div class="body-container">
      <el-table
        ref="singleTable"
        :key="tableKey"
        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.typeCN }}</span>
          </template>
        </el-table-column>
        <el-table-column label="导入数据量" align="center">
          <template slot-scope="{row}">
            <span>{{ row.lang }}</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 label="外呼频率" align="center">
          <template slot-scope="{row}">
            <span>{{ row.source }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <span>{{ row.url }}</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,$index}">
            <el-button type="text" size="small" @click="importData(row)">导入数据</el-button>
            <el-button type="text" size="small" @click="goTaskData(row)">任务数据</el-button>
            <el-button type="text" size="small" @click="handleDelete(row,$index)">删除</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]+'外呼策略'"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :destroy-on-close="true"
      :wrapperClosable="false"
      @close="addCallback(0)"
      direction="rtl"
    >
      <AddOrEdit
        v-if="dialogFormVisible"
        :temp="temp"
        :dialogStatus="dialogStatus"
        @save="addCallback"
      ></AddOrEdit>
    </el-drawer>
    <el-drawer
      title="导入数据"
      :visible.sync="importVisible"
      :append-to-body="true"
      :destroy-on-close="true"
      :wrapperClosable="false"
      @close="importCallback(0)"
      direction="rtl"
    >
      <ImprtData
        v-if="importVisible"
        :temp="temp"
        :dialogStatus="dialogStatus"
        @save="importCallback"
      ></ImprtData>
    </el-drawer>
  </div>
</template>

<script>
import { fetchCodesList, deleteCodes } from '@/api/article'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import AddOrEdit from './add'
import ImprtData from './import-data'

export default {
  name: 'Dashboard',
  components: { Pagination, AddOrEdit, ImprtData },
  directives: { waves },
  filters: {},
  data() {
    return {
      textMap: {
        update: '编辑',
        create: '新增'
      },
      fileList: [],
      multipleSelection: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 10
      },
      temp: {
        name: '',
        files: '',
        account: '',
        phone: '',
        dates: '',
        rate: '',
        setdate1: '',
        setdate2: '',
        process: '',
        status: ''
      },
      dialogFormVisible: false,
      importVisible: false,
      dialogStatus: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    addCallback(status) {
      this.dialogFormVisible = false
      if (status) {
        this.getList()
      }
    },
    importCallback(status) {
      this.importVisible = false
      if (status) {
        this.getList()
      }
    },
    getList() {
      this.listLoading = true
      fetchCodesList(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
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        name: '',
        files: '',
        account: '',
        phone: '',
        dates: '',
        rate: '',
        setdate1: '',
        setdate2: '',
        process: '',
        status: ''
      }
    },
    handleCreate() {
      if (this.list.length >= 20) {
        this.$message({
          message: '最多2个外呼策略',
          type: 'warning'
        })
      } else {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      }
    },
    goTaskData(row) {
      this.$router.push({
        path: '/strategy/taskdata/index'
        // ,
        // query: { id: row.id }
      })
    },
    importData(row) {
      this.temp = this.$publicTools.deepClone(row) // copy obj
      this.importVisible = true
    },
    handleDelete(row, index) {
      this.$confirm('确定要删除此条数据吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          deleteCodes(row.id)
            .then(res => {
              loading.close()
              this.getList()
              this.$message({
                message:
                  Object.prototype.toString.call(res) === '[object Object]' &&
                  res.info
                    ? res.info
                    : 'delete Successfully',
                type: 'success'
              })
            })
            .catch(() => {
              loading.close()
            })
        })
        .catch(() => {})
    }
  }
}
</script>
