<template>
  <Dialog
    :is-dialog-exist="isAllotMaster"
    :title="checkDialogTitle"
    :dialog-style="checkDialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <!-- 搜索表单 -->
        <el-row :gutter="0">
          <el-form v-if="isSearchVisible" ref="formData" label-width="auto" size="mini" :model="formData" inline>
            <el-col :span="6">
              <el-form-item label="站长ID" prop="uid">
                <el-input v-model="formData.uid" placeholder="站长ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="formData.phone" placeholder="手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="等级" prop="levelList">
                <el-select v-model="formData.levelList" placeholder="等级">
                  <el-option v-for="(item, index) in levelList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="微信号" prop="accWxId">
                <el-input v-model="formData.accWxId" placeholder="微信号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="优惠码" prop="inviteCode">
                <el-input v-model="formData.inviteCode" placeholder="优惠码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否实名" prop="idVerified">
                <el-select v-model="formData.idVerified" placeholder="请选择">
                  <el-option v-for="(item, index) in idVerified" :key="index" :label="item" :value="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否完成企业认证" prop="companyVerify">
                <el-select v-model="formData.companyVerify" placeholder="请选择">
                  <el-option v-for="(item, index) in companyVerify" :key="index" :label="item" :value="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="state">
                <el-select v-model="formData.state" placeholder="请选择">
                  <el-option v-for="(item, index) in state" :key="index" :label="item" :value="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left: 9.2%">
              <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
              <el-button type="info" plain size="mini" @click="resetForm('formData')">重置</el-button>
            </el-col>
          </el-form>
        </el-row>
        <!-- 操作按钮 -->
        <ActionButton :open-add="false" :open-delete="false" @handle-refresh="refreshData" @handle-search="isSearchVisible = !isSearchVisible" />
        <div class="chose-master"> 已选 {{ multipleSelection.length }} 个站长</div>
        <!-- 表格数据 -->
        <div class="table-container">
          <el-table :data="tableData" border fit @selection-change="handleSelectionChange">
            <el-table-column
              label="序号"
              type="selection"
              width="55"
              align="center">
            </el-table-column>
            <el-table-column label="站长ID"
                             align="center"
                             prop="uid"></el-table-column>
            <el-table-column label="姓名"
                             align="center"
                             prop="name"></el-table-column>
            <el-table-column label="手机号"
                             align="center"
                             prop="phone"></el-table-column>
            <el-table-column label="微信号"
                             align="center"
                             prop="accWxId"></el-table-column>
            <el-table-column label="等级"
                             align="center"
                             prop="levelName"></el-table-column>
            <el-table-column label="成长值"
                             align="center"
                             prop="integral"></el-table-column>
            <el-table-column label="优惠码"
                             align="center"
                             prop="inviteCode"></el-table-column>
            <el-table-column label="是否实名"
                             align="center"
                             prop="idVerifiedText"></el-table-column>
            <el-table-column label="是否企业认证"
                             align="center"
                             prop="companyVerifyText"></el-table-column>
            <el-table-column label="状态" align="center" prop="sendState">
              <template slot-scope="scope">
                <span :style="{color: scope.row.stateText === '正常' ? ' #0DB903' : '#FF494A'}">{{ scope.row.stateText }}</span>
              </template>
            </el-table-column>
            <el-table-column label="加入时间"
                             align="center"
                             prop="regTime"></el-table-column>
          </el-table>
        </div>
        <!-- 底部分页组件 -->
        <div class="pagination-container">
          <el-pagination :current-page="formData.currentPage"
                         :page-sizes="[10, 20, 30, 40]"
                         :page-size="formData.limit"
                         layout="total,  prev, pager, next, sizes,jumper"
                         :total="formData.total"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-main>
      <el-footer>
        <el-button type="primary" size="mini" @click="SaveUser">确认选择</el-button>
        <el-button type="info" plain size="mini" @click="handleClose">取消</el-button>
      </el-footer>
    </el-container>
  </Dialog>
</template>

<script>
/**
 * 客户经理管理-站长分配页面
 */
import Dialog from '@/components/Dialog/index'
import ActionButton from '@/components/ActionButton/index'
import { getUserList, postAddUser } from '/src/api/master-info-manage/account-manager-management'
export default {
  components: { ActionButton, Dialog },
  props: {
    // 每行选中的数据
    itemChoseData: {
      type: Object,
      require: true,
      default: () => {}
    },
    isAllotMaster: {
      type: Boolean,
      default: () => {}
    }
  },
  data() {
    return {
      // UI控制参数
      isSearchVisible: true,
      // 弹窗
      checkDialogTitle: '分配站长',
      checkDialogStyle: {
        '--dialog-width': '1400px',
        '--dialog-height': '809px',
        '--title-height': '51px'
      },
      // 表格数据
      tableData: [],
      // 状态
      state: '',
      // 实名认证数据
      idVerified: '',
      // 企业认证数据
      companyVerify: '',
      // 等级数据
      levelList: '',
      // 多选框数据
      multipleSelection: [],
      // 表单参数
      formData: {
        uid: '',
        name: '',
        phone: '',
        levelId: '',
        inviteCode: '',
        accWxId: '',
        idVerified: '',
        companyVerify: '',
        state: '',
        // 当前显示页数
        currentPage: 1,
        // 每页页数
        limit: 10,
        // 总页数
        total: 20
      }
    }
  },
  watch: {
    isAllotMaster(val) {
      if (val) {
        console.log(JSON.stringify(this.itemChoseData), '选中的数据(站长分配)')
        this._baseRequest()
        this.multipleSelection = []
      }
    }
  },
  // created() {
  //   this._baseRequest()
  // },
  methods: {
    // 更新操作
    refreshData() {
      this._baseRequest(true)
    },
    // 基础请求
    _baseRequest(refres = false) {
      if (refres) {
        this.$message.success('刷新成功~')
      }
      const params = {
        uid: this.formData.uid,
        name: this.formData.name,
        phone: this.formData.phone,
        levelId: this.formData.levelId,
        inviteCode: this.formData.inviteCode,
        accWxId: this.formData.accWxId,
        idVerified: this.formData.idVerified,
        companyVerify: this.formData.companyVerify,
        state: this.formData.state,
        p: this.formData.currentPage,
        limit: this.formData.limit
      }
      getUserList(params).then(resp => {
        if (parseInt(resp.code) === 0) {
          console.log(resp.data)
          // 站长列表数据
          this.tableData = resp.data.userList
          // 状态
          this.state = resp.data.state
          // 实名认证数据
          this.idVerified = resp.data.idVerified
          // 企业认证数据
          this.companyVerify = resp.data.companyVerify
          // 等级数据
          this.levelList = resp.data.levelList
        }
      })
    },
    // 加入保存操作请求
    _postRequest() {
      // console.log(JSON.stringify(this.multipleSelection))
      if (this.multipleSelection.length > 0) {
        const uid = this.multipleSelection.map(item => {
          return item.uid
        })
        // console.log(JSON.stringify(uid))
        const params = {
          customerId: this.itemChoseData.id,
          uids: uid
        }
        postAddUser(params).then(resp => {
          if (parseInt(resp.code) === 0) {
            this.$message.success('成功！')
            this.handleClose()
            this.handleSuccess()
          }
        })
      } else {
        this.$message.warning('请选择站长')
      }
    },
    // 确认保存操作
    SaveUser() {
      this._postRequest()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(JSON.stringify(this.multipleSelection.length))
    },
    // 关闭弹窗操作
    closeDialog() {
      this.isClientNum = false
    },
    // 打开客户数弹窗
    openClientNumDialog() {
      this.isClientNum = true
    },
    // 提交操作
    onSubmit() {
      this._baseRequest()
    },
    // 表单重置
    resetForm(val) {
      this.$refs[val].resetFields()
      this._baseRequest()
    },
    handleClose() {
      this.$emit('handle-close')
    },
    handleSuccess() {
      this.$emit('handle-success')
    },
    // 每页数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formData.limit = val
      this._baseRequest()
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.currentPage = val
      this._baseRequest()
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container{
    width: 100%;
    height: 100%;
    .el-main{
      width: 100%;
      height: 100%;
      .table-container{
        position: relative;
      }
      .chose-master{
        position: absolute;
        width: 109px;
        height: 32px;
        background: #E8F4FF;
        border-radius: 3px;
        color: #1890FF;
        font-size: 14px;
        text-align: center;
        line-height: 34px;
        top: 22.5%;
        left: 5%;
      }
      .pagination-container{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .table-container{
      }
    }
    .el-footer {
      height: 10%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      /*padding-bottom: 15px;*/
    }
  }
</style>

