<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="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 slot-scope="scope">
            <span>{{ scope.row.masterFlag | setFlag }}</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 slot-scope="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>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>{{showMsg == 1 ? noDataMsg : noMobileMsg}}</p>
          </div>
        </div>
      </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="开通新建小圈权限"
        :visible.sync="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="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>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
      </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>