<template>
  <div class="label_page">
    <el-form inline>
      <el-form-item style="margin-right:0;">
        <el-select
          v-model="form.model.type"
          size="mini"
          style="width: 130px;"
        >
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.model.name"
          size="mini"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="fetch">查询</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
        <el-button type="primary" size="mini" @click="add">新建标签</el-button>
        <el-button size="mini" @click="exportTag">导出标签</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData.records"
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="name"
        label="标签名"
      />
      <el-table-column
        prop="tagCount"
        label="客户"
      />
      <el-table-column
        prop="type"
        label="标签类型"
        :formatter="getType"
      />
      <el-table-column
        prop="tradeCondition"
        label="打标条件"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.type===1">未设置</span>
          <p v-else class="condition">
            <span>{{ getCondition(scope.row.config) }}</span>
            <span @click="moreCondition(scope.row)">查看更多</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template
          slot-scope="scope"
        >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="edit(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deletes(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="batch_btn">
      <el-button :disabled="!multipleSelection.length" @click="deletes(false)">批量删除</el-button>
    </div>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="form.size"
      :page.sync="form.current"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <Dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :fullscreen="!true"
      :before-close="close"
      width="35%"
    >
      <more v-if="dialog.visible" :info="dialog.info" @close="close" />
    </Dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Label from '@/api/Label'
import { Dialog } from 'element-ui'
import more from './more'
import { downloadFile } from '@/utils/commons'
// import {getIntervalTime} from '@/utils/date'
export default {
  components: {
    Pagination,
    Dialog,
    more
  },
  data() {
    return {
      form: {
        "current": 1,
        "map": {},
        "model": {
          "name": "",
          "type": ''
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      },
      typeList: [
        { label: '全部标签类型', value: '' },
        { label: '手动标签', value: 1 },
        { label: '自动标签', value: 2 }
      ],
      tableData: {},
      multipleSelection: [],
      dialog: {}
    }
  },
  created() {
    this.getLabelList()
  },
  methods: {
    async getLabelList() {
      const res = await Label.getLabelList(this.form)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    getType(row, item, value) {
      return Number(value) === 1 ? '手动标签' : '自动标签'
    },
    add() {
      this.$router.push({ path: '/customer-manage/label/add', query: { type: 'add' }})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    fetch() {
      this.getLabelList()
    },
    reset() {
      this.form = {
        "current": 1,
        "map": {},
        "model": {
          "name": "",
          "type": ''
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      }
    },
    edit(id) {
      this.$router.push({ path: '/customer-manage/label/add', query: { type: 'edit', id }})
    },
    exportTag() {
      Label.exportTag(this.form).then(res => {
        downloadFile(res)
      })
    },
    deletes(id) {
      const _ = this
      let ids = []
      if (id) {
        ids = [id]
      } else {
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
      }
      _.$confirm( `确认要${id ? '删除本' : '批量删除所选'}标签吗`, `${id ? '删除' : '批量删除'}标签`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Label.deleteTag({ ids }).then(res => {
          if (res.data.code === 0) {
            _.getLabelList()
            _.$message.success('操作成功')
          }
        })
      })
    },
    getCondition (obj) {
      let t = ''
      t += `最后消费时间在${obj.lastConsumTime.value}${obj.lastConsumTime.type === 1 ? '天' : ''}内;`
      if (obj.totalConsumTimes) {
        const times = obj.totalConsumTimes.split('-')
        t += `累计成功交易在${times[0]}-${times[1]}次`
      }
      if (obj.totalConsumAmount) {
        const amount = obj.totalConsumAmount.split('-')
        t += `累计消费金额在${amount[0] / 100}-${amount[1] / 100}元`
      }
      return t
    },
    moreCondition(item) {
      this.dialog = {
        title: '打标详情',
        info: item,
        visible: true
      }
    },
    close() {
      this.dialog = {}
    }
  }
}
</script>

<style lang='less' scoped>
.label_page {
  margin-top: 20px;
  background-color:#fff;
  padding:20px;
  .batch_btn {
    padding: 5px 10px;
    border: 1px solid #dfe6ec;
    border-top: 0;
  }
  .condition {
    span{
      display: block;
      &:nth-child(1) {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      &:nth-child(2) {
        color: #1682e6;
        text-align: left;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}

/deep/ .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3A68F2;
    .el-dialog__title {
      font-size:24px;
      color: #fff;
    }
  }
}
</style>
