<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="memberForm.hospitalName" placeholder="请输入机构名称"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input style="width:140px;" size="small" v-model="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 slot-scope="scope">
          <el-button @click="detel(scope.row)" type="text" size="small" style="color:red">删除</el-button>
        </template>
      </el-table-column>
      <div slot="empty">
        <div class="table-empty">
          <img src="../../assets/image/no-content1.png">
          <p>没有人员信息</p>
        </div>
      </div>
    </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"
      :visible.sync="deleteVisible"
      :close-on-click-modal="false"
      width="600px"
      center
    >
      <p style="text-align: center;">{{detelMessage}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideDeleteFrom">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="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>
        <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleErrorClose" style="margin-top: 20px;">关闭</el-button>
        </span>
      </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;">
        <span slot="footer" 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>
        </div>
      </div>


    </el-dialog>


      <el-dialog
        title="批量导入"
        :visible.sync="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>
