<template>
  <div>
    <a-card title="查询条件">
      <a-form-model class="search-box" :model="form" layout="inline" @submit.native.prevent="getSalesUserTypeList">
        <a-form-model-item label="销售类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-input v-model="form.name"></a-input>
        </a-form-model-item>
        <a-button type="primary" html-type="submit">
          搜索
        </a-button>
        <div class="btn-wrap">

        </div>
      </a-form-model>
    </a-card>
    <a-card title="销售分类列表">
      <a-button slot="extra" type="primary" size="small" @click="handleAdd">
        新增销售分类
      </a-button>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="data"
          :row-key="record => record.id"
          :pagination="pagination"
          @change="handlePageChange">
          <template slot="status" slot-scope="text, record">
            <span :style="{ color: record.status === 1 ? '#1BAAAC' : '#81A1A2' }">
              {{ record.status === 1 ? '已激活' : '已禁用' }}
            </span>
            &nbsp;
            <a-button
              size="small"
              :type="record.status === 1 ? 'danger' : 'default'"
              @click="handleActive(record)">
              {{ record.status === 1 ? '禁用' : '激活' }}
            </a-button>
          </template>
          <template slot="operation" slot-scope="text, record">
            <a-popconfirm title="确定要删除这个账号吗？" @confirm="handleDelete(record.id)">
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a-button size="small" type="danger">
                删除
              </a-button>
            </a-popconfirm>
            <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
          </template>

          <template slot="roles" slot-scope="roles">
            <a-tag v-for="role in roles" :key="role.id" color="green">
              {{ role.nick_name }}
            </a-tag>
          </template>
        </a-table>

      </a-spin>

      <!-- 新增账号 -->
      <AddModal :role-list="roleList" v-model="addVisible" @update="getSalesUserTypeList">
      </AddModal>

      <!-- 新增账号 -->
      <EditModal :curent-item="curentItem" :role-list="roleList" v-model="editVisible" @update="getSalesUserTypeList">
      </EditModal>
      <SalesqrCode ref="qrCode"></SalesqrCode>

      <SecondSales ref="secondSales"></SecondSales>
    </a-card>
  </div>
</template>

<script>
import { getSalesUserTypeList, deleteSalesUserType, updateSalesUserType } from '@/api/marketingSetting/salesUser'

import AddModal from './salesUserType/AddModal'
import EditModal from './salesUserType/EditModal'

const columns = [
  {
    title: '分类',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    AddModal,
    EditModal
  },
  created () {
    this.getSalesUserTypeList()
  },
  data () {
    return {
      project_name: localStorage.mgt_project,
      columns,
      data: [],
      roleList: [],
      form: {
        name: '',
        nickName: ''
      },
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      addVisible: false,
      editVisible: false,
      // 当前账号对象
      curentItem: {},
      excelPersonName: '',
      excelUserFile: ''
    }
  },
  methods: {
    handlePageChange (page) {
      this.pagination.pageNum = page.current
      this.getSalesUserTypeList()
    },
    handleDelete (id) {
      deleteSalesUserType({ id }).then(res => {
        this.$message.success('删除成功')
        this.getSalesUserTypeList()
      })
    },
    handleActive (value) {
      console.log('%c [ value ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', value)
      const params = {
        status: value.status === 1 ? 0 : 1,
        id: value.id
      }
      updateSalesUserType(params).then(res => {
        this.$message.success('操作成功')
        this.getSalesUserTypeList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.editVisible = true
      this.curentItem = data
    },
    getSalesUserTypeList () {
      this.loading = true
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        name: ''
      }
      getSalesUserTypeList(params).then(res => {
        this.loading = false
        this.pagination.total = res.extraInfo.total
        this.pagination.showTotal = () => `共${this.pagination.total}条`
        this.data = res.extraInfo.list.filter(item => item.status !== 2)
      })
    }

  }
}
</script>

<style scoped>
.offSale-btn {
  color: #F56C6C
}

.onSale-btn {
  color: #67C23A
}

</style>
