<template>
  <div class="main-container-text">
    <div class="title">柜体管理</div>
    <div class="header">
      <el-input v-model="name" clearable placeholder="请输入试剂名称" />
      <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button type="primary" plain icon="el-icon-plus" @click="handleFormOpen('add')">新增自定义柜体</el-button>
      <el-button icon="el-icon-unlock" @click="handleLock">柜体锁定/解锁</el-button>
      <el-button @click="handleDraw"><svg-icon icon-class="分配权限" /> 分配抽屉权限</el-button>
      <el-button @click="handleUser"><svg-icon icon-class="分配禁用用户" /> 分配禁用用户</el-button>
      <el-button type="danger" plain icon="el-icon-close" @click="handleEmpty">清空数据</el-button>
      <div class="right">
        <el-button icon="el-icon-delete" circle @click="handleDel" />
        <el-button icon="el-icon-refresh" circle @click="getList" />
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      element-loading-text="拼命加载中"
      :header-cell-style="headerStyle"
      height="69vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        width="50"
      />
      <el-table-column
        prop="client_name"
        show-overflow-tooltip
        label="柜体名称"
        align="center"
      />
      <el-table-column
        prop="client_title"
        show-overflow-tooltip
        label="柜体标题"
        align="center"
      />
      <el-table-column
        prop="place"
        label="所处位置"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="contact_people_name"
        label="联系人"
        align="center"
      />
      <el-table-column
        prop="contact_phone"
        label="联系电话"
        align="center"
      />
      <el-table-column
        prop="is_enabled"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.is_enabled=== 0 ? 'danger' : 'success'"
            disable-transitions
          >{{ scope.row.is_enabled === 0 ?'异常':'正常' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="说明"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button @click="handleFormEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="my-pagination" style="text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="total"
        :page-size.sync="page_size"
        :disabled="loading"
        @current-change="pageChange"
      />
    </div>
    <el-dialog :title="dialogTitile" :visible.sync="dialogVisible" @close="onClose">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
          <el-col :span="24">
            <el-form-item label="柜体名称" prop="client_name">
              <el-input
                v-model="formData.client_name"
                placeholder="请输入柜体名称"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="柜体标题" prop="client_title">
              <el-input
                v-model="formData.client_title"
                placeholder="请输入柜体标题"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="柜体序号" prop="client_code">
              <el-input v-model="formData.client_code" placeholder="请输入柜体序号" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="柜体类型" prop="client_type">
              <el-input v-model="formData.client_type" placeholder="请输入柜体类型" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="柜体位置" prop="place">
              <el-input v-model="formData.place" placeholder="请输入柜体位置" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="柜体滤芯 生产日期" prop="filter_production_date">
              <el-date-picker
                v-model="formData.filter_production_date"
                style="width: 100%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择柜体滤芯 生产日期"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提醒滤芯 到期提前" prop="filter_shelf_life_warning_value">
              <el-input
                v-model="formData.filter_shelf_life_warning_value"
                placeholder="请输入提醒滤芯 到期提前"
                clearable
                :style="{width: '100%'}"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact_people_name">
              <el-input v-model="formData.contact_people_name" placeholder="请输入联系人" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contact_phone">
              <el-input v-model="formData.contact_phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说明" prop="description">
              <el-input v-model="formData.description" placeholder="请输入说明" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" style="text-align: center">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogDrawVisible" title="分配抽屉权限">
      <div class="user-header">
        <el-select v-model="drawer_id" placeholder="请选择抽屉" @change="handleDrawSelect">
          <el-option
            v-for="item in drawData"
            :key="item.id"
            :label="item.cell_code"
            :value="item.id"
          />
        </el-select>
        <el-button plain type="danger" @click="handleDrawUser"><svg-icon icon-class="确认禁用" /> 确认禁用</el-button>
        <el-button plain type="success" @click="handleDrawUser"><svg-icon icon-class="解除禁用" /> 解除禁用</el-button>
      </div>
      <el-table
        v-loading="loadingDraw"
        element-loading-text="拼命加载中"
        :header-cell-style="headerStyle"
        :data="userDrawData"
        height="420"
        @selection-change="handleDrawUserSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="50" />
        <el-table-column align="center" property="real_name" label="用户名称" />
        <el-table-column align="center" property="user_code" label="工号" />
        <el-table-column align="center" label="禁用状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.drawer_type === 1?'danger':'success'">{{ scope.row.drawer_type === 1? '已禁用':'未禁用' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-pagination" style="text-align: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="user_draw_page"
          :total="user_draw_total"
          :page-size.sync="user_draw_page_size"
          :disabled="loadingDraw"
          @current-change="userDrawPageChange"
        />
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogUserVisible" width="60%" title="分配禁用用户">
      <div class="user-header">
        <el-input v-model="seach_user" clearable placeholder="请输入内容" />
        <el-button type="primary" icon="el-icon-search" @click="getUserList">搜索</el-button>
        <el-button plain type="danger" @click="handleDisUser"><svg-icon icon-class="确认禁用" /> 确认禁用</el-button>
        <el-button plain type="success" @click="handleEnUser"><svg-icon icon-class="解除禁用" /> 解除禁用</el-button>
      </div>
      <el-table
        v-loading="loadingUser"
        element-loading-text="拼命加载中"
        :header-cell-style="headerStyle"
        :data="userData"
        height="420"
        @selection-change="handleUserSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="50" />
        <el-table-column align="center" property="name" label="用户头像">
          <template slot-scope="scope">
            <el-avatar :size="20" :src="scope.row.circleUrl" />
          </template>
        </el-table-column>
        <el-table-column align="center" property="real_name" label="用户名称" />
        <el-table-column align="center" property="role_name" label="用户身份" />
        <el-table-column align="center" label="禁用状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status_type === 1?'danger':'success'">{{ scope.row.status_type === 1? '已禁用':'未禁用' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-pagination" style="text-align: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="user_page"
          :total="user_total"
          :page-size.sync="user_page_size"
          :disabled="loadingUser"
          @current-change="userPageChange"
        />
      </div>

    </el-dialog>
  </div>
</template>

<script>
import stringify from '@/utils/stringify'
import {
  get_list,
  add_or_update,
  update_status,
  get_client_drawer,
  get_drawer_power,
  user_ban_relieve, set_drawer_power, user_ban_list, user_ban_confirm, del, client_empty
} from '@/api/reagent/client'

export default {
  name: 'Client',
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 0,
      name: '',
      loading: false,
      multipleSelection: [],
      tableData: [],
      headerStyle: { 'background': '#E6E6E6' },
      formData: {
        client_id: undefined,
        client_name: undefined,
        client_title: undefined,
        client_code: undefined,
        client_type: undefined,
        place: undefined,
        filter_production_date: null,
        filter_shelf_life_warning_value: undefined,
        contact_people_name: undefined,
        contact_phone: undefined,
        description: undefined
      },
      rules: {
        client_name: [{
          required: true,
          message: '请输入柜体名称',
          trigger: 'blur'
        }],
        client_title: [{
          required: true,
          message: '请输入柜体标题',
          trigger: 'blur'
        }],
        client_code: [{
          required: true,
          message: '请输入柜体序号',
          trigger: 'blur'
        }],
        client_type: [{
          required: true,
          message: '请输入柜体类型',
          trigger: 'blur'
        }],
        place: [],
        filter_production_date: [{
          required: true,
          message: '请选择柜体滤芯 生产日期',
          trigger: 'change'
        }],
        filter_shelf_life_warning_value: [{
          required: true,
          message: '请输入提醒滤芯 到期提前',
          trigger: 'blur'
        }],
        contact_people_name: [],
        contact_phone: [],
        description: []
      },
      dialogVisible: false,
      dialogTitile: '',
      // 抽屉权限
      loadingDraw: false,
      dialogDrawVisible: false,
      drawData: [],
      userDrawData: [],
      multipleDrawSelection: [],
      user_draw_page: 1,
      user_draw_page_size: 15,
      user_draw_total: 0,
      client_id: undefined,
      client_code: undefined,
      drawer_id: undefined,
      client_cell_code: undefined,
      // 用户
      dialogUserVisible: false,
      loadingUser: false,
      seach_user: '',
      userData: [],
      user_page: 1,
      user_page_size: 15,
      user_total: 0,
      multipleUserSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleDisUser() {
      if (this.multipleUserSelection.length !== 1) {
        this.$message.warning('请选择一个用户！')
        return
      }
      const data = {
        user_id: this.multipleUserSelection[0].user_id,
        client_id: this.client_id
      }
      user_ban_confirm(stringify(data)).then(res => {
        if (res.status === 0) {
          this.$message.success(res.msg)
          this.getUserList()
        }
      })
    },
    handleEnUser() {
      if (this.multipleUserSelection.length !== 1) {
        this.$message.warning('请选择一个用户！')
        return
      }
      const data = {
        user_id: this.multipleUserSelection[0].user_id,
        client_id: this.client_id
      }
      user_ban_relieve(stringify(data)).then(res => {
        if (res.status === 0) {
          this.$message.success(res.msg)
          this.getUserList()
        }
      })
    },
    handleUser() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个柜体！')
        return
      }
      this.getUserList()
      this.dialogUserVisible = true
    },
    getUserList() {
      const data = {
        seach_user: this.seach_user,
        client_id: this.client_id,
        page: this.user_page,
        page_size: this.user_page_size
      }
      this.loadingUser = true
      user_ban_list(stringify(data)).then(
        res => {
          this.userData = res.data.data
          this.user_total = res.data.total_count
        }
      ).finally(() => { this.loadingUser = false })
    },
    userPageChange(page) {
      this.user_page = page
      this.getUserList()
    },
    // 抽屉禁用或解除禁用
    handleDrawUser() {
      if (this.multipleDrawSelection.length !== 1) {
        this.$message.warning('请选择一个用户！')
        return
      }
      const { user_id, drawer_type } = this.multipleDrawSelection[0]
      const data = {
        drawer_id: this.drawer_id,
        client_id: this.client_id,
        client_code: this.client_cell_code,
        client_cell_code: this.client_cell_code,
        drawer_user_info: JSON.stringify({ [user_id]: drawer_type === 0 ? 1 : 0 })
      }
      set_drawer_power(stringify(data)).then(res => {
        this.$message.success(res.msg)
        this.getDrawUserList()
      })
    },
    // 用户多选
    handleUserSelectionChange(val) {
      this.multipleUserSelection = val
    },
    //  选择不同抽屉刷新用户数据
    handleDrawSelect(val) {
      this.drawer_id = val
      this.getDrawUserList()
    },
    // 获取柜体抽屉数据
    handleDraw() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个柜体！')
        return
      }
      this.client_id = this.multipleSelection[0].client_id
      this.client_code = this.multipleSelection[0].client_code
      this.loading = true
      get_client_drawer(stringify({ client_id: this.client_id })).then(
        res => {
          this.drawData = res.data
          this.drawer_id = this.drawData[0].id
          this.client_cell_code = this.drawData[0].cell_code
          this.getDrawUserList()
          this.dialogDrawVisible = true
        }
      ).finally(() => { this.loading = false })
    },
    // 获取分配抽屉权限 用户列表
    getDrawUserList() {
      const data = {
        drawer_id: this.drawer_id,
        client_id: this.client_id,
        page: this.user_draw_page,
        page_size: this.user_draw_page_size
      }
      this.loadingDraw = true
      get_drawer_power(stringify(data)).then(res => {
        this.userDrawData = res.data.data_list
        this.user_draw_total = res.data.total_count
      }).finally(() => { this.loadingDraw = false })
    },
    // 获取分配抽屉权限 用户列表 分页
    userDrawPageChange(page) {
      this.user_draw_page = page
      this.getDrawUserList()
    },
    // // 获取分配抽屉权限 用户列表选择用户
    handleDrawUserSelectionChange(val) {
      this.multipleDrawSelection = val
    },
    // 选择柜体
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 柜体分页
    pageChange(page) {
      this.page = page
      this.getList()
    },
    // 获取柜体列表数据
    getList() {
      this.loading = true
      const data = {
        page: this.page,
        page_size: this.page_size,
        seach_word: this.name
      }
      get_list(stringify(data)).then(res => {
        this.tableData = res.data.data_list
        this.total = res.data.total_count
      }).finally(() => { this.loading = false })
    },
    onClose() {
      this.dialogVisible = false
      this.formData = {
        client_id: undefined,
        client_name: undefined,
        client_title: undefined,
        client_code: undefined,
        client_type: undefined,
        place: undefined,
        filter_production_date: null,
        filter_shelf_life_warning_value: undefined,
        contact_people_name: undefined,
        contact_phone: undefined,
        description: undefined
      }
      this.$refs['elForm'].resetFields()
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        add_or_update(stringify(this.formData)).then(
          res => {
            this.$message.success(res.msg)
            this.onClose()
            this.getList()
          }
        )
      })
    },
    handleFormOpen(t) {
      this.dialogTitile = '新增自定义柜体'
      this.dialogVisible = true
    },
    handleFormEdit(row) {
      this.dialogTitile = '编辑柜体信息'
      Object.keys(this.formData).forEach(item => {
        this.formData[item] = row[item]
      })
      this.formData.client_id = row.client_id
      this.dialogVisible = true
    },
    handleDel() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个柜体！')
        return
      }
      this.$confirm('确定要删除所选的柜体吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(stringify({ client_id: this.multipleSelection[0].client_id })).then(
          res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 柜体锁定
    handleLock() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个柜体！')
        return
      }
      const { client_id, is_enabled } = this.multipleSelection[0]
      const data = {
        status_type: is_enabled === 0 ? 1 : 0,
        client_id: client_id
      }
      const text = is_enabled === 1 ? '确定要锁定所选的柜体？' : '确定要解锁所选的柜体？'
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        update_status(stringify(data)).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleEmpty() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个柜体！')
        return
      }
      this.$confirm('确定要清空所选的柜体数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        client_empty(stringify({ client_id: this.multipleSelection[0].client_id })).then(
          res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-container-text{
  min-height:calc(100vh - 110px) ;
  padding: 1rem;
  margin: 1rem;
  background: white;
  .title{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .header{
    margin: 1rem 0 1rem 0;
    .right{
      float: right;
    }
    .el-input{
      width: 9.375rem;
      margin-right: 1rem;
    }
    .el-select {
      margin-right: 1rem;
    }
    .header-right{
      float: right;
    }
  }
}

.user-header {
  margin-bottom: 1rem;
  .el-input{
    width: 12.5rem;
    margin-right: 1rem;
  }
  .el-select{
    width: 12.5rem;
    margin-right: 1rem;
  }
}
</style>
