<template>
  <div>
    <a-card title="查询条件">
      <a-form-model class="search-box" :model="form" layout="inline" @submit.native.prevent="getSalesUserList">

        <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-form-model-item label="昵称" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }" v-if="project_name!=='YINXIANGMAZU'" >
          <a-input v-model="form.nickName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="真实姓名" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }" v-if="project_name==='YINXIANGMAZU'" >
          <a-input v-model="form.real_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="电话号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }" >
          <a-input v-model="form.phone"></a-input>
        </a-form-model-item>
        <a-form-model-item label="身份证号" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }" >
          <a-input v-model="form.card_id"></a-input>
        </a-form-model-item>
        <a-form-model-item label="销售分类" :label-col="{ span: 8 }" :wrapper-col="{ span: 13 }">
          <a-select
            mode="multiple"
            style="width: 190px"
            v-model="form.sales_user_types"
          >
            <a-select-option
              v-for="(i,index) in roleList"
              :value="i.id"
              :key="index"
            >
              {{ i.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <div class="btn-wrap">
          <a-button type="primary" html-type="submit">
            搜索
          </a-button>
        </div>
      </a-form-model>
    </a-card>
    <a-card title="销售人员列表">
      <a-button slot="extra" type="primary" size="small" @click="handleAdd">
        新增账号
      </a-button>
      <a-button v-if="['demo','YINXIANGMAZU'].includes(project_name)" slot="extra" type="primary" size="small" @click="importAccount">
        批量导入账号
      </a-button>
      <input
        type="file"
        id="uploadUserExcel"
        ref="uploadUserExcel"
        v-show="false"
        accept=".xls, .xlsx, .excel"
        @input="readUserExcel" />
      <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 === 'active' ? '#1BAAAC' : '#81A1A2' }">
              {{ record.status === 'active' ? '已激活' : '已禁用' }}
            </span>
            &nbsp;
            <a-button
              size="small"
              :type="record.status === 'active' ? 'danger' : 'default'"
              @click="handleActive(record)">
              {{ record.status === 'active' ? '禁用' : '激活' }}
            </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>
            <a-button size="small" type="primary" @click="$refs.secondSales.show(record)">查看二级销售</a-button>
            <a-button size="small" type="primary" v-if="project_name==='YINXIANGMAZU'" @click="$refs.qrCode.showUrl(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="getSalesUserList">
      </AddModal>

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

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

<script>
import { getSalesUserList, delSalesUser, activeSalesUser, addSalesUserBatch, getSalesUserTypeList } from '@/api/marketingSetting/salesUser'

import AddModal from './salesUser/AddModal'
import EditModal from './salesUser/EditModal'
import SecondSales from './salesUser/SecondSales'
import SalesqrCode from './salesUser/SalesqrCode'

const columns = [
  {
    title: '账号',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '昵称',
    dataIndex: 'nick_name',
    key: 'nick_name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const columnsSale = [
  {
    title: '账号',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '真实姓名',
    dataIndex: 'real_name',
    key: 'real_name'
  },
  {
    title: '电话号码',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '身份证号',
    dataIndex: 'card_id',
    key: 'card_id'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    AddModal,
    EditModal,
    SecondSales,
    SalesqrCode
  },
  created () {
    this.getSalesUserList()
    this.columns = ['demo', 'YINXIANGMAZU'].includes(this.project_name) ? this.columnsSale : this.columns
    this.getSalesUserTypeList()
  },
  data () {
    return {
      project_name: localStorage.mgt_project,
      columns,
      columnsSale,
      data: [],
      roleList: [],
      form: {
        name: '',
        nickName: ''
      },
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      addVisible: false,
      editVisible: false,
      // 当前账号对象
      curentItem: {},
      excelPersonName: '',
      excelUserFile: ''
    }
  },
  methods: {
    importAccount () {
      this.$refs.uploadUserExcel.click() // 浏览文件
    },
    readUserExcel (event) {
      if (event.target.files.length !== 0) {
        const fileList = event.target.files
        this.excelPersonName = fileList[0].name
        console.log('%c [ this.excelPersonName ]-161', 'font-size:13px; background:pink; color:#bf2c9f;', this.excelPersonName)
        this.excelUserFile = this.$refs.uploadUserExcel.files[0]
        console.log('%c [ this.excelUserFile ]-163', 'font-size:13px; background:pink; color:#bf2c9f;', this.excelUserFile)
        this.gmDrUserSure()
      }
    },
    gmDrUserSure () {
      // this.uploadDialog = false;
      const formData = new FormData()
      formData.append('file', this.excelUserFile)
      // 上传excel
      addSalesUserBatch(formData).then(res => {
        if (res.resCode === 200) {
          this.$message.success('导入成功！')
          this.getSalesUserList()
        } else {
          this.$message.warning('导入失败：', res.errInfo)
        }
      })
    },

    handlePageChange (page) {
      this.pagination.pageNum = page.current
      this.getSalesUserList()
    },
    handleDelete (id) {
      delSalesUser(id).then(res => {
        this.$message.success('删除成功')
        this.getSalesUserList()
      })
    },
    handleActive (value) {
      const params = {
        active: value.status !== 'active',
        id: value.id
      }
      activeSalesUser(params).then(res => {
        this.$message.success('操作成功')
        this.getSalesUserList()
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      this.editVisible = true
      this.curentItem = data
    },
    getSalesUserList () {
      this.loading = true
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        name: this.form.name,
        nickName: this.form.nickName,
        card_id: this.form.card_id,
        phone: this.form.phone,
        real_name: this.form.real_name,
        sales_user_types: this.form.sales_user_types

      }
      getSalesUserList(params).then(res => {
        this.loading = false
        this.pagination.total = res.extraInfo.total
        this.pagination.showTotal = () => `共${this.pagination.total}条`
        this.data = res.extraInfo.list
      })
    },
    getSalesUserTypeList () {
      this.loading = true
      const params = {
        pageNum: 1,
        pageSize: 999,
        name: '',
        status: 1
      }
      getSalesUserTypeList(params).then(res => {
        this.loading = false
        this.roleList = res.extraInfo.list.filter(item => item.status !== 2)
      })
    }

  }
}
</script>

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

.onSale-btn {
  color: #67C23A
}

</style>
