<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird"
    ></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <el-row type="flex" class="row-bg">
        <el-col class="add-organization" v-if="showImportFlag">
          <!--<el-upload-->
          <!--class="bg-uploader"-->
          <!--action="#"-->
          <!--:show-file-list="false"-->
          <!--:before-upload="beforeUploadDoc">-->
          <i class="el-icon-document-add"></i>
          <i class="text" @click="batchImport()">批量导入</i>
          <!--</el-upload>-->
        </el-col>
        <el-col class="organization-search">
          <el-form :inline="true" :model="memberForm" class="demo-form-inline">
            <el-form-item label="机构:">
              <el-input
                style="width: 140px"
                size="small"
                v-model:value="memberForm.hospitalName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input
                style="width: 140px"
                size="small"
                v-model:value="memberForm.doctorName"
                placeholder="请输入人员姓名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="serch()"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="reset()">取消搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
        class="rim"
        ref="multipleOrganization"
        :data="activityDoctorModelList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="doctorId"
          label="医生ID"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="doctorName"
          label="人员"
          min-width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="departmentName"
          label="所属科室"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="hospitalName"
          label="所属医院"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="provinceName"
          label="所属省份"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cityName"
          label="所属城市"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="countyName"
          label="所属区县"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="townName"
          label="所属街道"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="140">
          <template v-slot="scope">
            <el-button
              @click="detel(scope.row)"
              type="text"
              size="small"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png" />
              <p>没有人员信息</p>
            </div>
          </div>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeOrganization"
          @current-change="handleCurrentOrganization"
          :current-page="memberForm.pageNum"
          :page-sizes="[10, 30, 50, 100, 200]"
          :page-size="memberForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPeople"
        ></el-pagination>
      </div>
      <!-- 删除 弹窗 -->
      <el-dialog
        title="确认删除"
        :show-close="false"
        v-model:visible="deleteVisible"
        :close-on-click-modal="false"
        width="600px"
        center
      >
        <p style="text-align: center">{{ detelMessage }}</p>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="hideDeleteFrom">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">确定</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        :title="dialogTitle"
        v-model:visible="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        @close="handleErrorClose"
        center
      >
        <!--<el-table :data="dialogErrorData" align="center">-->
        <!--<el-table-column property="rowNumber" label="行数" align="center"></el-table-column>-->
        <!--<el-table-column property="wrongData" label="错误提示" align="center"></el-table-column>-->
        <!--</el-table>-->

        <div v-if="importSuccessFlag" style="text-align: center">
          <div>
            本次成功导入<span style="color: green"
              >&nbsp;{{ importNum }}条&nbsp;</span
            >数据
          </div>
          <template v-slot:footer>
            <span class="dialog-footer">
              <el-button
                size="small"
                @click="handleErrorClose"
                style="margin-top: 20px"
                >关闭</el-button
              >
            </span>
          </template>
        </div>
        <div v-if="!importSuccessFlag" style="text-align: center">
          <div v-if="importNum == 0">数据不符合格式要求，请修正后再次导入</div>
          <div v-if="importNum != 0">
            有<span style="color: red">&nbsp;{{ importNum }}条&nbsp;</span
            >数据不符合格式要求，请修正后再次导入
          </div>
          <br />
          <div>
            <span>
              <el-button
                @click="downloadFile"
                type="text"
                size="small"
                style="color: #449284 !important"
                >下载错误数据></el-button
              >
              <!--<a @click="downloadFile">下载错误数据</a>-->
            </span>
          </div>
          <div style="margin-top: 20px">
            <template v-slot:footer>
              <span class="dialog-footer">
                <el-button
                  size="small"
                  @click="handleErrorClose"
                  style="float: left; margin-left: 130px"
                  >取 消</el-button
                >
                <el-upload
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadDoc"
                >
                  <el-button
                    type="primary"
                    size="small"
                    style="margin-left: -100px"
                    >重新导入</el-button
                  >
                </el-upload>
              </span>
            </template>
          </div>
        </div>
      </el-dialog>

      <el-dialog
        title="批量导入"
        v-model:visible="dialogImportVisible"
        width="650px"
        :close-on-click-modal="false"
        @close="handleImportClose"
        center
      >
        <div style="float: left; width: 250px">
          <span>1.下载模板，填写信息</span>
          <br />
          <div>
            <el-button
              type="primary"
              size="small"
              style="float: left; margin-top: 30px"
              @click="download1"
              >下载模板1</el-button
            >
            <span style="float: left; margin-top: 72px; margin-left: -90px"
              >填写人员明细导入</span
            >
          </div>
          <div>
            <el-button
              type="primary"
              size="small"
              style="margin-top: 30px; margin-left: 48px"
              @click="download2"
              >下载模板2</el-button
            >
            <span style="float: right; margin-top: 10px">填写人员ID导入</span>
          </div>
        </div>
        <div
          style="
            float: left;
            margin-left: 90px;
            width: 1px;
            height: 100px;
            background: #c8cbd2;
          "
        ></div>
        <div style="margin-left: 400px; height: 130px">
          <span>2.上传填写好的文件</span>
          <br />
          <el-upload
            class="bg-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeUploadDoc"
          >
            <el-button type="primary" size="small" style="margin-top: 30px"
              >上传文件</el-button
            >
          </el-upload>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '@/components/yqrange/breadcrumb-range.vue'
import { openLoading, closeLoading } from '@/utils/utils'
import { doUpload, getFilePath } from '@/utils/qiniu-util'
import {
  getActivityDocList,
  removeDoc,
  importDoc,
} from '@/utils/activitymanagement/activitymanagementApi'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  props: {
    circleId: {
      type: Number | String,
      default: 1,
    },
    roleType: {
      type: Number | String,
      default: 1,
    },
  },
  data() {
    return {
      curmbFirst: '活动管理',
      // curmbSecond: '直播管理',
      curmbThird: '', // /live-manage?id=
      jumPathThird: '/activity-management',
      administrativeValue: '',
      optionsRegion: [],
      activityDoctorModelList: [],
      totalPeople: 10,
      selectionList: [],
      memberForm: {
        hospitalName: '',
        doctorName: '',
        pageNum: 1,
        pageSize: 10,
      },
      dialogOrg: false,
      deleteVisible: false,
      detelMessage: '',
      dialogVisible: false,
      dialogErrorData: [],
      showImportFlag: true,
      dialogImportVisible: false,
      importMsg: '',
      importSuccessFlag: false,
      importNum: 0,
      dialogTitle: '',
      errorFileUrl: '',
    }
  },
  created() {
    vm = this

    this.id = this.$route.query.id
    this.name = this.$route.query.name
    this.curmbSecond = '活动成员管理-' + this.name
    this.curmbThird = this.curmbSecond
    //Idtype:1,内部 2.外部
    vm.idType = localStorage.getItem('storageIdType')

    this.init()
  },
  mounted() {},
  methods: {
    init() {
      this.memberForm.pageNum = 1
      this.memberForm.hospitalName = ''
      this.memberForm.doctorName = ''
      this.getList(1)
    },
    serch() {
      this.memberForm.pageNum = 1
      this.getList()
    },
    getList(first) {
      let req = {
        activityId: this.id,
        hospitalName: this.memberForm.hospitalName,
        doctorName: this.memberForm.doctorName,
        pageNo: this.memberForm.pageNum,
        pageSize: this.memberForm.pageSize,
      }
      openLoading(vm)
      getActivityDocList(req)
        .then((res) => {
          if (!first) {
            closeLoading(vm)
          }

          if (res.code == '000000') {
            this.activityDoctorModelList = res.data.activityDoctorModelList
            this.totalPeople = res.data.total
          } else {
            this.$message(res.message)
          }
        })
        .catch((err) => {
          this.$message.error('请求失败')
        })
    },

    //重置机构、人员查询
    reset() {
      this.memberForm.hospitalName = ''
      this.memberForm.doctorName = ''
      this.init()
    },
    //机构table修改
    handleSizeOrganization(val) {
      console.log(`每页 ${val} 条`)
      this.memberForm.pageSize = val
      this.getList()
    },
    handleCurrentOrganization(val) {
      //console.log(`当前页: ${val}`);
      this.memberForm.pageNum = val
      this.getList()
    },
    detel(item) {
      this.detelMessage = `删除后 "${item.doctorName}" 将无法看到该活动, 确定删除么?`
      this.deleteVisible = true
      this.clickItem = item
    },
    confirmDelete() {
      let params = {
        // activityDoctorRemoveReq: {
        activityId: this.id,
        removeDoctorId: this.clickItem.doctorId,
        // }
      }
      removeDoc(params)
        .then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.deleteVisible = false
          this.memberForm.pageNum = 1
          this.getList()
        })
        .catch(() => {
          this.$message.error('删除失败，请稍后重试')
        })
    },
    hideDeleteFrom() {
      this.deleteVisible = false
      this.detelMessage = ''
      this.clickItem = null
    },
    handleClose() {
      this.dialogOrg = false
    },
    // 批量导入
    beforeUploadDoc(file) {
      // // 人员数已超10000，无法导入机构
      // if(vm.totalPeople > 10000){
      //   this.$message.warning('人员数已超10000，无法导入机构');
      //   return;
      // }
      let name = file.name
      let type = name.substring(name.lastIndexOf('.') + 1)
      if (type !== 'xls' && type !== 'xlsx') {
        vm.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning',
        })
        return
      }
      openLoading(vm)

      let formData = new FormData()
      formData.append('activityId', vm.id)
      formData.append('file', file)

      // let files = new window.File();

      importDoc(formData).then((res) => {
        closeLoading(vm)

        if (res.code == '000000') {
          vm.dialogImportVisible = false

          // 导入成功
          if (res.data.status) {
            vm.dialogVisible = true
            vm.dialogTitle = '导入成功'
            vm.importSuccessFlag = true
            vm.importNum = res.data.successNum
            vm.init()
            // vm.searchOrganization();
            // vm.$emit('refreshRenYuan');
          } else {
            vm.dialogVisible = true
            vm.dialogTitle = '导入失败'
            vm.importSuccessFlag = false
            vm.importNum = res.data.failNum
            vm.errorFileUrl = res.data.file
          }
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },
    handleErrorClose() {
      this.dialogVisible = false
    },

    // 批量导入
    batchImport() {
      this.dialogImportVisible = true
    },

    handleImportClose() {
      this.dialogImportVisible = false
    },

    // 下载模板1
    download1() {
      const url =
        'https://files.yunqueyi.com/template/import_people_by_name_mobile.xlsx'
      window.location.href = url
    },
    // 下载模板2
    download2() {
      const url = 'https://files.yunqueyi.com/template/import_doctor_by_id.xlsx'
      window.location.href = url
    },
    // 下载错误数据文件
    downloadFile() {
      window.location.href = vm.errorFileUrl
    },
  },
}
</script>

<style lang="scss" scoped>
.add-organization {
  margin-left: 20px;
  line-height: 20px;
  width: 100px;
  cursor: pointer;
  padding-top: 10px;
  i {
    font-size: 18px;
    margin-right: 2px;
  }
}
.organization-search {
  flex: 1;
  margin-right: 10px;
  text-align: right;
}
</style>
