<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-input v-model="query.userName" clearable placeholder="请输入用户名" style="width:150px;" />
      <el-select v-model="query.registeredAddressProvince" clearable placeholder="请选择地区" style="width: 120px">
        <el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="query.enterpriseName" clearable placeholder="请输入企业名称" style="width:150px;" />
      <el-input v-model="query.enterpriseContactPerson" clearable placeholder="请输入联系人" style="width:150px;" />
      <el-input v-model="query.enterpriseContactPersonPhone" clearable placeholder="请输入联系电话" style="width:150px;" />
      <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
        <el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <date-range-picker v-model="query.createTime" start-placeholder="注册开始日期" style="width: 280px" />
      <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
      <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
    </div>
    <div class="toolbar">
      <div>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加客户</el-button>
      </div>
      <div style="text-align: right">
        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(true)">批量激活</el-button>
        <el-button type="danger" icon="el-icon-help" :disabled="!multipleSelection.length" @click="batchOperate(false)">批量锁定</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="content">
      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
        <el-table-column prop="customerId" label="供应商id" width="70" />
        <el-table-column prop="userName" label="供应商名称" />
        <el-table-column prop="registeredAddressProvince" label="区域" :formatter="(row, col, val)=>{return dict.label.area_province[val]}" />
        <el-table-column prop="enterpriseName" label="企业名称" />
        <el-table-column prop="enterpriseContactPerson" label="联系人" />
        <el-table-column prop="enterpriseContactPersonPhone" label="联系电话" />
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.custom_status[scope.row.status] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="锁定/激活" align="center" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#13ce66" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" align="center" width="160" />
        <el-table-column label="操作" align="right" width="200">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.status==='3'" content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toView(scope.row, true)" /></el-tooltip>
            <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toView(scope.row)" /></el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
    </div>
    <add-page ref="addPage" />
    <edit-page ref="editPage" />
    <view-page ref="viewPage" />
  </div>
</template>
<script>
import { HttpReq } from '@/api/common'
import DateRangePicker from '@/components/DateRangePicker'
import addPage from './add'
import editPage from './edit'
import viewPage from './view'

export default {
  components: { DateRangePicker, addPage, editPage, viewPage },
  dicts: ['user_status', 'custom_status', 'area_province'],
  data() {
    return {
      textColors: ['#ccc', '#32cd32', '#bba', '#000', '#f00'],
      loading: false,
      page: 1,
      pageSize: 20,
      total: 0,
      query: {},
      tableData: [],
      currentTime: '',
      multipleSelection: []
    }
  },
  mounted() {
    this.currentTimeFn()
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    indexMethod(index) {
      return 1 + index + this.page * this.pageSize - this.pageSize
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    loadData() {
      // 清除参数无值的情况
      Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
        if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
      })
      HttpReq.backstageApi.queryCustomer({
        page: this.page - 1,
        pageSize: this.pageSize,
        ...this.query
      }).then((res) => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    batchOperate(type) {
      if (!this.multipleSelection.length) {
        return this.$message({
          message: '未选取数据',
          type: 'info'
        })
      }
      HttpReq.backstageApi.userEnableDisable({
        ids: this.multipleSelection.map(item => { return item.sysUserId }),
        type: type
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        if (res.code === 200) {
          this.loadData()
        }
      })
    },
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" 用户' + data.userName + '的账号, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        HttpReq.backstageApi.userEnableDisable({
          ids: [data.sysUserId],
          type: val
        }).then((res) => {
          this.$notify({
            title: res.msg,
            type: 'success',
            duration: 2500
          })
          if (res.code === 200) {
            this.loadData()
          }
        })
      }).catch(() => {
        data.enabled = !data.enabled
      })
    },
    toAdd() {
      this.$refs.addPage.loadData()
    },
    toEdit(item) {
      this.$refs.editPage.loadData(item.customerId)
    },
    toView(item, isReview) {
      this.$refs.viewPage.loadData(item.customerId, isReview)
    },
    toSearch() {
      this.page = 1
      this.loadData()
    },
    clearLimit() {
      this.query = {}
      this.currentTimeFn()
      this.loadData()
    },
    pageChange(e) {
      this.page = e
      this.loadData()
    },
    sizeChange(e) {
      this.page = 1
      this.pageSize = e
      this.loadData()
    },
    currentTimeFn() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (day >= 0 && day <= 9) {
        day = '0' + day
      }
      this.currentTime = year + '-' + month + '-' + day
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
}
.content {
  margin-top: 15px;
  overflow: auto;
}
</style>
