<template>
  <div class="app-container">
    <div class="filter-container text-rt">
      <el-button
        style="margin-left:10px;padding:10px;"
        icon="el-icon-circle-plus-outline"
        @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.strategy_name }}</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.total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="外呼日期" align="center">
          <template slot-scope="{row}">
            <span>{{ row.day_type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="外呼频率" align="center">
          <template slot-scope="{row}">
            <span>{{ row.frequency_type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <span>{{ row.disabled_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.created_at }}</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-edit-outline" @click="importData(row)"></el-button>
            </el-tooltip>
            <el-tooltip content="任务数据">
              <el-button size="small" plain icon="el-icon-document" @click="goTaskData(row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button size="small" plain icon="el-icon-delete" @click="handleDelete(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="textMap[dialogStatus]+'外呼策略'"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      width="30%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <AddOrEdit
        v-if="dialogFormVisible"
        :temp="temp"
        :dialogStatus="dialogStatus"
        @save="addCallback"
      ></AddOrEdit>
    </el-dialog>
    <el-dialog
      title="导入数据"
      width="30%"
      :visible.sync="importVisible"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <ImprtData
        v-if="importVisible"
        :temp="temp"
        :dialogStatus="dialogStatus"
        @indexSave="importCallbackIndex"
      ></ImprtData>
    </el-dialog>
  </div>
</template>

<script>
import { getStrategySet, deleteStrategySet } from '@/api/article'
import waves from '@/directive/waves'
import AddOrEdit from './add'
import ImprtData from './import-data'

export default {
  name: 'Dashboard',
  components: { AddOrEdit, ImprtData },
  directives: { waves },
  filters: {},
  data() {
    return {
      textMap: {
        update: '编辑',
        create: '新建'
      },
      fileList: [],
      multipleSelection: [],
      tableKey: 0,
      list: [],
      listLoading: true,

      temp: {
        account: '',
        strategy_name: '',
        call_number: '',
        day_type: '0',
        frequency_type: '2',
        call_time_set: '',
        setdate1: '',
        setdate2: '',
        project_sn: '',
        disabled: '',
        upload: ''
      },
      dialogFormVisible: false,
      importVisible: false,
      dialogStatus: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    addCallback() {
      this.dialogFormVisible = false
      this.getList()
    },
    importCallbackIndex() {
      debugger
      this.importVisible = false
      this.getList()
    },
    getList() {
      this.listLoading = true
      getStrategySet({
        user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn'))
      })
        .then(response => {
          this.listLoading = false
          this.list = Array.from(response.info)
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.getList()
    },
    resetTemp() {
      this.temp = {
        account: '',
        strategy_name: '',
        call_number: '',
        day_type: '0',
        frequency_type: '2',
        call_time_set: '',
        setdate1: '',
        setdate2: '',
        project_sn: '',
        disabled: '',
        upload: ''
      }
    },
    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) {
      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)'
          })
          deleteStrategySet({
            user_sn: this.$publicTools.decrypt(localStorage.getItem('user_sn')),
            strategy_sn: row.strategy_sn || ''
          })
            .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>
<style lang="scss" scoped>
table {
  button {
    border: none;
    background: transparent;
  }
}
</style>
