<template>
  <a-card :title="`【 ${name} 】 - 二级销售人员列表`">
    <a-button
      v-if="permissionList"
      slot="extra"
      type="primary"
      size="small"
      @click="handleAdd(id)"
    >
      新增账号
    </a-button>
    <a-button v-if="permissionList" 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
            v-if="permissionList"
            size="small"
            :type="record.status==='active'?'danger':'default'"
            @click="handleActive(record)"
          >
            {{ record.status==='active'?'禁用':'激活' }}
          </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>
        <template slot="action" slot-scope="text, record" v-if="permissionList">
          <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"
            @click="handleEdit(record)"
            type="primary"
          >
            编辑
          </a-button>
          <a-button
            v-if="project_name==='YINXIANGMAZU'"
            size="small"
            @click="$refs.qrCode.showUrl(record)"
            type="primary"
          >
            查看二维码
          </a-button>
        </template>
      </a-table>
    </a-spin>
    <!-- 新增账号 -->
    <AddModalSecond
      :curent-id="id"
      v-model="addVisible"
      @update="getSalesUserList(id)"
    >
    </AddModalSecond>

    <!-- 新增账号 -->
    <EditModalSecond
      :curent-item="curentItem"
      v-model="editVisible"
      @update="getSalesUserList(id)"
    >
    </EditModalSecond>
    <SalesqrCode ref="qrCode"></SalesqrCode>

  </a-card>

</template>

<script>
import { getSalesUserList, deleteSecondSaleList, updateSecondSaleList, addSecondSalesUserBatch } from '@/api/marketingSetting/salesUser'
import AddModalSecond from './AddModalSecond'
import EditModalSecond from './EditModalSecond'
import SalesqrCode from './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: 'action',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

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: 'action',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: {
    AddModalSecond,
    EditModalSecond,
    SalesqrCode
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    },
    phone: {
      type: String,
      default: ''
    }
  },
  computed: {
    permissionList () {
      return !!this.$store.state.user.permissionList.includes('marketing_setting:second_sales_user')
    }
  },
  created () {
    this.getSalesUserList(this.id)
    this.columns = ['demo', 'YINXIANGMAZU'].includes(this.project_name) ? this.columnsSale : this.columns
    // 隐藏操作列
    if (!this.permissionList && this.columns.length === 4) {
      this.columns.pop()
    }
  },
  data () {
    return {
      columnsSale,
      project_name: localStorage.mgt_project,
      columns,
      data: [],
      roleList: [],
      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 file = new FormData()
      file.append('file', this.excelUserFile)
      console.log('%c [ formData ]-203', 'font-size:13px; background:pink; color:#bf2c9f;', file)
      // 上传excel
      addSecondSalesUserBatch(this.id, file).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(this.id)
    },
    handleDelete (id) {
      deleteSecondSaleList(id).then(res => {
        this.$message.success('删除成功')
        this.getSalesUserList(this.id)
      })
    },
    handleActive (value) {
      const params = {
        active: value.status !== 'active',
        id: value.id,
        nick_name: value.nick_name,
        phone: value.phone
        // password:value.password
      }
      updateSecondSaleList(params).then(res => {
        this.$message.success('操作成功')
        this.getSalesUserList(this.id)
      })
    },
    handleAdd () {
      this.addVisible = true
    },
    handleEdit (data) {
      console.log('%c [ data ]-240', 'font-size:13px; background:pink; color:#bf2c9f;', data)
      this.editVisible = true
      this.curentItem = data
    },
    getSalesUserList (id) {
      this.loading = true
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        saleType: 2,
        parent_sales_user_id: id
      }
      getSalesUserList(params).then(res => {
        this.loading = false
        this.pagination.total = res.extraInfo.total
        this.data = res.extraInfo.list
      })
    }

  }
}
</script>

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

</style>
