<template>
  <div class="create-push">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title"></div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="ruleForm"
      >
        <el-form-item label="协议标题" prop="title">
          <el-input v-model="ruleForm.title" maxlength="30" show-word-limit></el-input>
        </el-form-item>

      </el-form>
      <!-- <el-dialog title="推送预览" :visible.sync="dialogFormVisible">
        <div>
          <span>主题： {{ ruleForm.title }} </span>
           <p style="display: inline-block; float: right;">
            <span style="margin-left: 0px">目标对象：</span>
            <span v-if="ruleForm.isAll == 2" style="color: #449284"> {{ objNum }} </span>
            <span v-if="ruleForm.isAll == 3" style="color: #449284"> {{ userChooseCount }} </span>
            <span v-else>全部</span>
          </p>
        </div>
        
        <hr>
        <el-form :model="ruleForm" class="rule-form">
          <el-form-item label="APP推送：" >
            云鹊医
          </el-form-item>
          <el-form-item label="推送标题：" >
            {{ ruleForm.title }}
          </el-form-item>
          <el-form-item label="推送介绍：" >
            <p style="white-space: pre-line">{{ ruleForm.content }}</p>
          </el-form-item>
          <el-form-item label="页面去向：" >
            {{ ruleForm.url }}
          </el-form-item>
          <el-form-item label="系统通知：" >
            {{ ruleForm.noticeFlag | getNotice }}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="pushSend()">确 定</el-button>
        </div>
      </el-dialog> -->

    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";

let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "创建APP推送",
      ruleForm: {
        title: "",
        content: "",
      },
    };
  },
  computed: {
    // ...mapGetters(["_token"])
  },
  created() {
    vm = this;
    // vm.idType = localStorage.getItem("storageIdType");
    // console.log("idType:", vm.idType);
    
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight();
  },
  methods: {
    submitForm(formName) {
      if(this.ruleForm.isAll == 3 && this.userChooseCount == 0){
        vm.$message('请先选择用户');
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // vm.pushSend();
          if(vm.ruleForm.isAll == 2) {
            if(vm.fileName == '') {
              vm.$message('请先导入名单');
            } else {
              vm.dialogFormVisible = true;
            }
          } else {
            vm.dialogFormVisible = true;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    pushSend() {
      let req = {};
      req = this.ruleForm;
      if(req.isAll == 2 || req.isAll == 3) {
        req.key = vm.sendKey;
      }
      req.createdName = localStorage.getItem('user_name');
      // openLoading(vm);
      vm.POST("raytheon/push/send", req).then(res => {
        // closeLoading(vm);
        vm.$message(res.message);
        if(res.code == '000000') {
          vm.ruleForm = {
            appId: "yunqueyi",
            isAll: 1,
            title: "",
            content: "",
            url: "",
            noticeFlag: 2,
            pushType: '03',
          };
        }
      });
      vm.dialogFormVisible = false;
      vm.fileName = '';
      vm.sendKey = '';
    },
    download() {
      let xlsxUrl = getExcel();
      console.log('下载模板'+xlsxUrl);
        setTimeout(() => {
          window.open(xlsxUrl);
      }, 500);
    },
    beforeUpload(file) {
      // console.log(file);
      let self = this;
      const isLt = file.size / 1024 / 1024 < 10;
      if(!isLt) {
        this.$message.error("文件大小不能超过10M");
        return;
      } else {
        vm.fileName = file.name;
      }
    },
    httpRequest (options) {
      // console.log(options,options.file)
      let file = options.file
      let reader = new FileReader()
      if (file) {
          reader.readAsDataURL(file)
      }          
      reader.onload = (e) => {
        let base64Str = e.target.result.split(',')[1]
        // console.log('e的值',e);
        // let base64Str = e.target.result.substr(e.target.result.indexOf("base64,") + 7)
        // vm.POST("raytheon/excel/upload", base64Str).then(res => {
        //   console.log(res);
        // })
        openLoading(vm);
        axios({
            headers: {
              sysCode: 12,
              token: localStorage.getItem('storageToken'),
              'content-type': 'text/html'
            },
            url: getBaseUrl('raytheon/excel/upload'),
            method: 'post',
            data: base64Str,
        }).then(function (response) {
          // console.log(response);
          closeLoading(vm);
          vm.objNum = response.data.data.count;
          vm.sendKey = response.data.data.key;
          console.log('vm.objNum ',vm.objNum);
        })
      }
    },
    handleTargetChoose() {
      if( this.ruleForm.isAll == 3 ){
        // 初始化
        this.isSeeUserNumBtnClicked = false;
        this.userChooseCount = 0;  
        this.allUserCount = 0; 
        this.userChooseForm = {
          address: {
            provinceList: [],
            cityList: [],
            countyList: [],
          },
          techTitleList: [],
          hospitalLevelList: [],
        };
        this.finalChooseData = {
          provinceId: '',
          cityId: '',
          countyId: '',
          doctorTitle: [],
          hospitalLevel: [],
        };
        // 获取总数量
        this.getCurrentUserCount({ getAll: true });
      }
    },
    getCurrentUserCount(params) {
      if(!(params && params.getAll)){
        if(this.finalChooseData.provinceId == '' 
          && this.finalChooseData.cityId == '' 
          && this.finalChooseData.countyId == '' 
          && this.finalChooseData.doctorTitle.length == 0 
          && this.finalChooseData.hospitalLevel.length == 0
        ){
          this.isSeeUserNumBtnClicked = true;
          this.userChooseCount = 0;
          return;
        }
      }

      openLoading(vm, 'topIndex');
      let req = this.finalChooseData;
      vm.POST("raytheon/push/screenUserCount", req).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          if(params && params.getAll){
            this.allUserCount = res.data;
          }else{
            this.isSeeUserNumBtnClicked = true;  
            this.userChooseCount = res.data;
          }
        }else{
          vm.$message.info(res.message)
        }
      });
    },
    showUserChooseModal() {
      
      this.isUserChooseModalShow = true;

      this.getProvinceList();
      this.getTechTitleList();
      this.getHospitalLevelList();
    },
    getProvinceList() {
      let req = {};
      openLoading(vm);
      vm.GET("raytheon/constants/region", req).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          this.userChooseForm.address.provinceList = res.data.provinceList;
        }else{
          vm.$message.info(res.message)
        }
      });
    },
    getCityList(params) {
      openLoading(vm);
      vm.GET("raytheon/constants/region", params).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          this.userChooseForm.address.cityList = res.data.cityList;
        }else{
          vm.$message.info(res.message)
        }
      });
    },
    getCountyList(params) {
      openLoading(vm);
      vm.GET("raytheon/constants/region", params).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          this.userChooseForm.address.countyList = res.data.countyList;
        }else{
          vm.$message.info(res.message)
        }
      });
    },
    handleProvinceChange(id) {
      this.finalChooseData.cityId = '';
      this.finalChooseData.countyId = '';
      // 清空省，则移除市、区列表
      if( id == '' ){
          this.userChooseForm.address.cityList = [];
          this.userChooseForm.address.countyList = [];
          return;
      }
      let params = { provinceId: id };
      this.getCityList(params);
      // this.getCurrentUserCount();
    },
    handleCityChange(id) {
      this.finalChooseData.countyId = '';
      // 清空市，则移除区列表
      if( id == '' ){
          this.userChooseForm.address.countyList = [];
          return;
      }
      let params = { cityId: id };
      this.getCountyList(params);
      // this.getCurrentUserCount();
    },
    handleCountyChange() {
      // this.getCurrentUserCount();
    },
    handleDoctorTitleChange() {
      // this.getCurrentUserCount();
    },
    handleHospitalLevelChange() {
      // this.getCurrentUserCount();
    },
    getTechTitleList() {
      openLoading(vm);
      vm.GET("raytheon/constants/doctor/title", {}).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          this.userChooseForm.techTitleList = res.data;
        }else{
          vm.$message.info(res.message)
        }
      });
    },
    getHospitalLevelList() {
      openLoading(vm);
      vm.GET("raytheon/constants/hospital/level", {}).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          this.userChooseForm.hospitalLevelList = res.data;
        }else{
          vm.$message.info(res.message)
        }
      });
    },
    // 确认筛选
    handleChooseSubmit() {
      this.getCurrentUserCount();
      openLoading(vm);
      vm.sendKey = '';
      let req = this.finalChooseData;
      vm.POST("raytheon/push/screenUser", req).then(res => {
        closeLoading(vm);
        if(res.code == '000000'){
          vm.isUserChooseModalShow = false;
          vm.sendKey = res.data;
        }else{
          vm.$message.info(res.message)
        }
      });
    },

  }
};
</script>
<style lang="scss">
.topIndex{
    z-index: 10000 !important;
  }
.create-push {
  .component-content {
    margin-top: 20px;
    padding: 10px;
    background: #fff;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .ruleForm {
        width: 70%;
        margin-left: 50px;
    }
    .rule-form {
      margin-top: 20px;
      margin-left: 30px;
      .el-form-item__content {
        font-size: 12px;
      }
    }
    .update-input {
      width: 200px;
    }
    .update-item {
      /* float: left; */
      margin-right: 5px;
    }
    .el-upload__tip {
      // margin-top: -10px;
      // margin-left: 205px;
      margin-top: -40px;
      margin-left: 290px;
      cursor: pointer;
      width: 60px;
      color: #449284;
    }
    .tip-text {
      margin-top: -40px;
      margin-left: 380px;
      width: 260px;
      color: red;
    }
    .el-upload-list {
      display: none;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
    .user-select{
      display: inline-block;
      height: auto;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      .select-btn{
        display: inline-block;
        font-size: 14px;
        padding: 5px;
        border-radius: 4px;
        background: #449284 !important;
        border: 1px solid #449284 !important;
        color: #FFF;
        cursor: pointer;
      }
      .numbers{
        font-size: 14px;
        margin-left: 10px;
        display: inline-block;
        .choosed{
          color: #449284;
        }
      }
    }
    .user-choose-modal{
      .el-form-item__label{
        width: 120px;
        font-size: 14px;
      }
      .select-choose{
        width: 150px;
      }
      .block-item{
        display: block;
      }
      .user-number{
        margin: 40px auto 0;
        text-align: center;
        width: 70%;
        height:34px;
        line-height: 34px;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        .title{
          display: inline-block;
        }
        .number{
          display: inline-block;
          margin-left: 50px;
          .target-num{
            padding: 7px;
          }
          .choosed{
            color: #449284;
          }
        }
      }
      .click-refresh-tips{
        text-align: center;
        margin: 5px auto 20px;
        height: 20px;
        color: #e6a23c;
      }
      .user-choose-submit{
        margin: 0 auto;
        display: block;
      }
    }

  }
}
</style>