<template>
  <div class="operation">
    <div class="operation-title">
      医助管理
    </div>

    <div class="operation-content">
      <el-alert
        :closable="false"
        title="注：去掉勾选后，系统将自动不分配给该人员，请谨慎操作"
        type="info"
      />
      <div class="checkbox-container">
        <el-checkbox-group
          v-model="checklist"
          size="medium"
        >
          <div class="checkbox-content">
            <div
              v-for="(item, index) in adminList"
              :key="index"
              class="checkbox-item"
            >
              <el-checkbox :label="item.id">
                {{ item.name }}
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div class="bottom-button">
        <el-button @click="cancel">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="sumbitmatch"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    setDiagnoseMatch,
    operatorQuery,
    sumbitMatch
  } from '@/api/operation';
  export default {
    data() {
      return {
        checklist: [],
        adminList: [],
      };
    },
    mounted() {
      this.getCheckList();
      this.getAdminList();
    },
    methods: {
      cancel() {
        this.$confirm('取消后将不保存本次操作内容', '确认取消吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.getCheckList();
        });
      },
      sumbitmatch() {
        const params = {
          bizType: 1,
          userIds: this.checklist,
        };
        sumbitMatch(params)
          .then((res) => {
            if (res.code == '000000') {
              this.$message.success('保存成功');
            }
          })
          .catch((err) => {
            console.log('网络出现点儿问题，稍后重试');
          });
      },
      // 设置选中
      getCheckList() {
        setDiagnoseMatch()
          .then((res) => {
            if (res.code == '000000') {
              this.checklist = res.data;
            }
          })
          .catch((err) => {
            console.log('网络出现点儿问题，稍后重试');
          });
      },
      getAdminList() {
        operatorQuery().then((res) => {
          if (res.code == '000000') {
            this.adminList = res.data;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
.operation {
  min-height: 80%;
  padding: 20px;

  .operation-title {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
  }
  .operation-content {
     padding: 20px;
    background: #ffffff;

    .checkbox-container {
      margin-top: 20px;
      .checkbox-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        .checkbox-item {
          width: 200px;
          margin-bottom: 10px;
        }
      }
    }
    .bottom-button {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
