<template>
  <div class="circle-limit">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
    ></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title">新建小圈权限分配</div>
      <el-row
        :gutter="30"
        class="row"
        type="flex"
        style="margin-top: 10px"
        align="middle"
        justify="space-around"
      >
        <el-form
          ref="formInline"
          :model="formInline"
          label-width="75px"
          style="width: 100%"
        >
          <el-col style="width: 400px">
            <el-form-item label="手机号：">
              <el-input
                v-model:value="formInline.mobile"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="5"
            style="
              padding: 0;
              text-align: right;
              margin-right: 40px;
              float: right;
            "
          >
            <el-button type="primary" size="small" @click="searchList"
              >搜索</el-button
            >
            <el-button
              type="default"
              size="small"
              @click="resetForm"
              style="margin-left: 0"
              >取消搜索</el-button
            >
          </el-col>
        </el-form>
      </el-row>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="doctorName"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column prop="bizDepartName" label="对接部门" align="center">
          <!-- <template slot-scope="scope">
              <span>{{ scope.row.bizDepart | setDepartment }}</span>
            </template> -->
        </el-table-column>
        <el-table-column
          prop="mobileMask"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="hospitalName"
          label="所属机构"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="district"
          label="所属地区"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="masterFlag" label="建圈权限状态" align="center">
          <template v-slot="scope">
            <span>{{ $filters.setFlag(scope.row.masterFlag) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="modifiedName"
          label="最后操作"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="closeFlag(scope.row)"
              v-if="scope.row.masterFlag == 1"
              >关闭权限</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="openFlag(scope.row)"
              v-else
              >开放权限</el-button
            >
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png" />
              <p>{{ showMsg == 1 ? noDataMsg : noMobileMsg }}</p>
            </div>
          </div>
        </template>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 30, 50, 100, 200]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>

      <el-dialog
        title="开通新建小圈权限"
        v-model:visible="dialogVisible"
        width="30%"
        :before-close="dialogClose"
      >
        <div>
          <el-form
            :model="orgForm"
            :rules="rules"
            label-width="100px"
            ref="dialogForm"
          >
            <el-form-item label="对接部门" prop="org">
              <el-select v-model:value="orgForm.org" placeholder="请选择">
                <el-option
                  v-for="item in orgSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="dialogClose">取 消</el-button>
            <el-button type="primary" @click="handleClose">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { create } from 'domain'
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '系统管理',
      curmbSecond: '角色管理',
      tableData: [],
      totalRows: 0,
      formInline: {
        mobile: '',
        pageNo: 1,
        pageSize: 10,
      },
      orgForm: {
        org: '',
        openDoctorId: '',
      },
      orgSelect: [
        {
          value: 0,
          label: '铁军部',
        },
        {
          value: 1,
          label: '医疗事业部',
        },
        {
          value: 2,
          label: '商业化部',
        },
      ],
      dialogVisible: false,
      noDataMsg: '没有查询到相关结果',
      noMobileMsg: '没有查询到该手机号,请重新搜索',
      showMsg: 1,
      rules: {
        org: [
          {
            required: true,
            message: '请选择该用户对接部门',
            trigger: 'change',
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters(['_token']),
  },
  created() {
    vm = this
    vm.idType = localStorage.getItem('storageIdType')
    this.search()
  },
  // 挂载到Dom完成时
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    searchList() {
      vm.formInline.pageNo = 1
      vm.search()
    },
    search() {
      let req = {}
      req = vm.formInline
      if (vm.formInline.mobile.trim()) {
        vm.showMsg = 2
      } else {
        vm.showMsg = 1
      }
      openLoading(vm)
      vm.POST('circle/member/master/grant/list', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.tableData = res.data.grantListDtos
          vm.totalRows = res.data.total
        }
      })
    },
    resetForm() {
      vm.formInline = {
        mobile: '',
        pageNo: 1,
        pageSize: 10,
      }
      vm.search()
    },
    openFlag(row) {
      vm.orgForm.org = ''
      vm.orgForm.openDoctorId = row.doctorId
      if (row.bizDepart || row.bizDepart == 0) {
        vm.orgForm.org = row.bizDepart
        vm.canfirmFn()
      } else {
        vm.dialogVisible = true
      }
    },
    dialogClose() {
      if (this.$refs.dialogForm) {
        this.$refs.dialogForm.resetFields()
      }
      vm.dialogVisible = false
    },
    handleClose() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          vm.canfirmFn()
        }
      })
    },
    canfirmFn() {
      vm.$confirm('确认开通权限,允许用户创建小圈?')
        .then((_) => {
          openLoading(vm)
          let req = {
            bizDepart: vm.orgForm.org,
            doctorId: vm.orgForm.openDoctorId,
            type: 1,
          }
          vm.POST('circle/member/master/grant', req)
            .then((res) => {
              if (this.$refs.dialogForm) {
                this.$refs.dialogForm.resetFields()
              }
              if (res.code == '000000') {
                vm.searchList()
                vm.dialogVisible = false
              } else if (res.code == '224023') {
                this.$message.error('无法开通权限,请该用户认证后重试')
                vm.dialogVisible = false
              } else {
                this.$message.error('开通权限失败,请稍后重试')
                vm.dialogVisible = false
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((_) => {})
    },
    closeFlag(row) {
      vm.$confirm('确认关闭权限,禁止用户创建小圈？')
        .then((_) => {
          openLoading(vm)
          let req = {
            bizDepart: row.bizDepart,
            doctorId: row.doctorId,
            type: 2,
          }
          vm.POST('/circle/member/master/grant', req).then((res) => {
            if (res.code == '000000') {
              vm.searchList()
            } else {
              this.$message.error('无法关闭权限,请稍后重试')
            }
          })
        })
        .catch((_) => {})
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.search()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.formInline.pageNo = val
      this.search()
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.circle-limit {
  .component-content {
    padding: 10px;
    background: #fff;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .to-right {
      float: right;
    }
    .add-button {
      float: right;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
.el-tooltip__popper {
  max-width: 50%;
}
</style>
