<template>
  <el-form
    ref="formData"
    :model="formData"
    :rules="rules"
    label-width="150px"
    label-suffix="："
    class="basic-form">


    <el-form-item label="显示排行榜" class="required-label">
      <el-radio-group v-model="formData.rankShowFlag" size="small" class="required-label" @change="changeRankShow">
        <el-radio :label="0">关闭</el-radio>
        <el-radio :label="1">开启</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="最多上榜人数" class="required-label">
      <el-radio-group v-model="formData.maxQuantity" size="small" class="required-label">
        <el-radio :label="50" :disabled="styleEditFlag"></el-radio>
        <el-radio :label="100" :disabled="styleEditFlag"></el-radio>
        <el-radio :label="200" :disabled="styleEditFlag"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="榜单类型" class="required-label">
          <el-checkbox-group v-model="rankTypeList" @change="changeRankType">
            <!--<el-checkbox size="small" :label="1">本院排行</el-checkbox>-->
            <!--<el-checkbox size="small" :label="3">本市排行</el-checkbox>-->
            <!--<el-checkbox size="small" :label="5">本圈排行</el-checkbox>-->
            <el-checkbox :disabled="styleEditFlag" v-for="item in selectedRankTypeList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
    </el-form-item>
    <el-form-item label="显示规则" class="required-label">
      <el-radio-group v-model="formData.ruleShowFlag" size="small" class="required-label">
        <el-radio :label="0" :disabled="styleEditFlag">关闭</el-radio>
        <el-radio :label="1" :disabled="styleEditFlag">开启</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item label="规则跳转模块" v-if="formData.ruleShowFlag == 1" class="required-label">
      <el-col :span="18">
      <el-select filterable :disabled="styleEditFlag" v-model="formData.rankModule.name" @change="moduleChange" placeholder="请选择模块" style="width:88%">
        <el-option
          v-for="item2 in moduleArray.nameList"
          :key="item2.id"
          :label="item2.name"
          :value="item2.name">
        </el-option>
      </el-select>
      </el-col>
    </el-form-item>
    <div v-for="(i,j) in formData.rankModule.paramList2" :key="j" class="required-label" v-if="formData.ruleShowFlag == 1">
      <el-form-item label="选择参数" v-if="formData.rankModule.paramFlag == 1">
        <el-col :span="18">
        <el-select :disabled="styleEditFlag" v-model="formData.rankModule.paramList[j].value" filterable placeholder="请选择参数" style="width:88%">
          <el-option
            v-for="(item3,index3) in i"
            :key="index3"
            :label="item3.name"
            :value="item3.id + '&'+ item3.name">
          </el-option>

        </el-select>
        </el-col>
      </el-form-item>
    </div>

    <el-form-item label="不参与排行的成员">
      <div v-for="(item, index) in mobilePhonesArray" :key="index">
        <el-row>
          <el-col :span="10">
              <el-input maxlength="11"
                        size="small"
                        v-model="item.value"
                        placeholder="请输入手机号"
                        style="width:85%;"
                        type="text" :disabled="styleEditFlag"
              ></el-input>
          </el-col>
          <el-col :span="2" style="margin-top: 9px;" v-if="!styleEditFlag">
            <img
              @click="addPhone(index)"
              class="edit-img"
              src="../../assets/image/plus.png"
            />
            <img
              @click="delPhone(index)"
              v-if="index >= 1"
              class="edit-img"
              src="../../assets/image/trash.png"
            />
          </el-col>
        </el-row>
      </div>
    </el-form-item>



    <div style="margin-top: 60px;margin-left: 250px;">
      <el-button type="primary" @click="save()" center>保存</el-button>
      <!--<el-button @click="cancle()">取 消</el-button>-->
    </div>

  </el-form>
</template>
<script>
  let vm = null;
  import { openLoading, closeLoading } from "../../utils/utils";
  import { doUpload, getFilePath } from "../../utils/qiniu-util";
  import { getParamData, getModuleData, getRankConfig, saveRankConfig } from "../../utils/yqrange/yqrangeApi";
  export default {
    components: {
    },
    created() {
      vm = this;

      // const mobilePhone = localStorage.getItem("mobilePhone");
      //
      // if(mobilePhone == "13341740525" || mobilePhone == "18251938586"){
      //   this.deptFlag = true;
      // }
      // else {
      //   this.deptFlag = false;
      // }
      vm.getRank();

    },
    data() {
      let checkProjectStr = (rule, value, callback) => {
        if (value.indexOf("\\") != -1) {
          //存在
          callback(new Error("请勿输入字符“ \\ ”"));
        } else if (value.indexOf(".") != -1) {
          callback(new Error("请勿输入字符“ . ”"));
        } else {
          callback();
        }
      };
      return {
        styleEditFlag: false,// 是否可以编辑
        moduleArray: [],
        rankTypeList:[],
        mobilePhonesArray:[],
        selectedRankTypeList:[{id: "", name: ""}],
        formData: {
          circleId: this.$route.query.id,
          rankShowFlag: 0,
          maxQuantity: 50,
          orgRankFlag: 0,
          cityRankFlag: 0,
          groupRankFlag: 1,
          ruleShowFlag: 0,
          mobilePhones: [],
          rankModule: {
            linkType: 4, // 跳转类型:1 链接，4 模块， 8 无跳转
            name: "", // 模块名称
            paramFlag: 0, // 是否有参数标志1为有2为没有参数
            paramList: [
              {
                id: "",
                seqNo: '',  // 选择参数的索引值
                value: '',
                key: '', // 参数名称，默认param
                type:''  // 模块参数类型:1 int类型字符串 4String类型 8时间戳类型字符串
              }
            ],
            paramList2: [],
            type: 0 // 类型:1 列表页，4 详情页
          }
        },
        rules: {

        },
        imgMouseOver1: false,
        uploadImgMessage1: false //未上传图片，校验提示语

      }
    },

    methods: {


      getRank(){


        let req = {
          circleId: vm.formData.circleId
        };

        getRankConfig(req).then(function (res) {
          if(res.code == "000000") {
            vm.formData = res.data;
            if(vm.formData.rankShowFlag == 0){
              vm.styleEditFlag = true;
            }
            else {
              vm.styleEditFlag = false;
            }

            vm.selectedRankTypeList = new Array();
            vm.rankTypeList = new Array();

            vm.selectedRankTypeList.push({id: 1, name: "本院排行"});
            vm.selectedRankTypeList.push({id: 3, name: "本市排行"});
            vm.selectedRankTypeList.push({id: 5, name: "本圈排行"});

            if(vm.formData.orgRankFlag == 1){
              vm.rankTypeList.push(1);
            }
            // vm.rankTypeList.push(1);

            if(vm.formData.cityRankFlag == 1){
              vm.rankTypeList.push(3);
            }

            if(vm.formData.groupRankFlag == 1){
              vm.rankTypeList.push(5);
            }

            if(vm.formData.rankModule == null){
              vm.formData.rankModule = {
                linkType: 4, // 跳转类型:1 链接，4 模块， 8 无跳转
                name: "", // 模块名称
                paramFlag: 0, // 是否有参数标志1为有2为没有参数
                paramList: [
                  {
                    id: "",
                    seqNo: '',  // 选择参数的索引值
                    value: '',
                    key: '', // 参数名称，默认param
                    type:''  // 模块参数类型:1 int类型字符串 4String类型 8时间戳类型字符串
                  }
                ],
                paramList2: [],
                type: 0 // 类型:1 列表页，4 详情页
              }
            }
            if(vm.formData.mobilePhones == null || vm.formData.mobilePhones.length == 0){
              vm.formData.mobilePhones = [{}];
              vm.mobilePhonesArray = vm.formData.mobilePhones;
            }
            else {
                vm.mobilePhonesArray = new Array();
                for(let i = 0; i < vm.formData.mobilePhones.length; i++){
                  vm.mobilePhonesArray.push({value: vm.formData.mobilePhones[i]});
                }
            }

            vm.getModuleData();
          }
        }).catch(function (error) {
          vm.$message.error(error);
        });


      },





      returnTypeData(name) {
        this.$emit('returnTypeData', {
          name: name,
          val: this.formData[name]

        })
      },
      //表单校验
      submitForm() {
        let req = vm.formData;

        if(vm.mobilePhonesArray != null){
          vm.formData.mobilePhones = new Array();
          for(let i = 0; i < vm.mobilePhonesArray.length; i++){

            if(vm.formData.rankShowFlag == 1
              && vm.mobilePhonesArray[i].value != ""
              &&!vm.checkPhone(vm.mobilePhonesArray[i].value)){
              vm.$message.error("请输入正确的手机号！");
              return;
            }
            vm.formData.mobilePhones.push(vm.mobilePhonesArray[i].value);
          }
        }


        if(vm.formData.rankShowFlag == 1){

          if(!vm.checkRankTypeList()){
            return;
          }

          if(!vm.checkRankName()){
            return;
          }

          if(!vm.checkParamList()){
            return;
          }
        }

        if(vm.formData.ruleShowFlag == 0){
          vm.formData.rankModule = {
            linkType: 4, // 跳转类型:1 链接，4 模块， 8 无跳转
            name: "", // 模块名称
            paramFlag: 0, // 是否有参数标志1为有2为没有参数
            paramList: [
              {
                id: "",
                seqNo: '',  // 选择参数的索引值
                value: '',
                key: '', // 参数名称，默认param
                type:''  // 模块参数类型:1 int类型字符串 4String类型 8时间戳类型字符串
              }
            ],
            paramList2: [],
            type: 0 // 类型:1 列表页，4 详情页
          };
        }

        saveRankConfig(req).then(function (res) {
          if(res.code == "000000") {
            vm.$message.success("保存成功！");
            // vm.formData = res.data;
          }
        }).catch(function (error) {
          vm.$message.error(error);
        });
      },

      changeRankType(value){

        if(vm.rankTypeList != null){
          for(let i = 0; i < vm.rankTypeList.length; i++){
            if(vm.rankTypeList[i] == 1){
              vm.formData.orgRankFlag = 1;
            }
            if(vm.rankTypeList[i] == 3){
              vm.formData.cityRankFlag = 1;
            }

            if(vm.rankTypeList[i] == 5){
              vm.formData.groupRankFlag = 1;
            }
          }
        }

      },


      save(){
        this.submitForm();
      },

      // 获取模块下拉数据
      getModuleData() {
        getModuleData().then(function (res) {
          if(res.code == "000000") {
            vm.moduleArray = JSON.parse(JSON.stringify(res.data));
            for(let j = 0;j < vm.moduleArray.nameList.length; j++) {
              if(vm.formData.rankModule.name == vm.moduleArray.nameList[j].name){// 通过name找到对应的id
                vm.getParamData(vm.moduleArray.nameList[j].id,vm.formData.rankModule.paramFlag,j,1)
              }
            }
          }
        }).catch(function (error) {
          vm.$message.error(error);
        });
      },
      // 获取参数下拉数据
      getParamData(id,flag,index,a) {
        if(flag != 1) return; // 判断是否有参数选择
        let req = {
          id: id
        }
        getParamData(req).then(function (res) {
          if(res.code == "000000") {
            vm.paramArray = res.data.paramList;
            vm.paramConfig = res.data.config;
            // for(let i=0;i<vm.tabContent.length;i++) {
            //   if(i == index) {
            vm.formData.rankModule.paramFlag = 1
            vm.formData.rankModule.paramList2 = vm.paramArray;
            if(a == 2) { // 判断是初始化还是改变module调的获取参数接口
              vm.formData.rankModule.paramList = [];
              for(let j = 0 ;j < vm.paramArray.length; j++) {
                vm.formData.rankModule.paramList.push({
                  id: vm.paramConfig[j].id,
                  seqNo: vm.paramConfig[j].seqNo,  // 选择参数的索引值
                  value: '',
                  key: vm.paramConfig[j].paramKey,
                  type: vm.paramConfig[j].type  // 通过选择参数中获取
                  // status: 2
                })
              }
            }else{
              //for(let k = 0;k < vm.paramConfig.length; k++) {
              // vm.formData.paramList[k].seqNo = vm.paramConfig[k].seqNo
              // vm.formData.paramList[k].key = vm.paramConfig[k].paramKey
              // vm.formData.paramList[k].type = vm.paramConfig[k].type
              // vm.formData.paramList.push({
              //     seqNo: vm.paramConfig[k].seqNo,
              //     key: vm.paramConfig[k].paramKey,
              //     type: vm.paramConfig[k].type
              // })
              let arr = vm.formData.rankModule.paramList;
              vm.formData.rankModule.paramList = [];
              if(arr.length < vm.paramConfig.length) {
                for(let k = 0;k < arr.length; k++) {
                  vm.formData.rankModule.paramList.push({
                    id: vm.paramConfig[k].id,
                    seqNo: vm.paramConfig[k].seqNo,
                    key: vm.paramConfig[k].paramKey,
                    type: vm.paramConfig[k].type,
                    value: arr[k].value
                  })
                }
                for(let j = arr.length;j < vm.paramConfig.length;j++) {
                  vm.formData.rankModule.paramList.push({
                    id: vm.paramConfig[j].id,
                    seqNo: vm.paramConfig[j].seqNo,
                    key: vm.paramConfig[j].paramKey,
                    type: vm.paramConfig[j].type,
                    value: ''
                  })
                }
              }else {
                for(let k = 0;k < vm.paramConfig.length; k++) {

                  console.log("id: " + vm.paramConfig[k].id);
                  console.log("value: " + arr[k].value);
                  vm.formData.rankModule.paramList.push({
                    id: vm.paramConfig[k].id,
                    seqNo: vm.paramConfig[k].seqNo,
                    key: vm.paramConfig[k].paramKey,
                    type: vm.paramConfig[k].type,
                    value: arr[k].value
                  })
                }
              }
              // }
            }
            //     break
            //   }
            // }
          }
        }).catch(function (error) {
          vm.$message.error(error);
        })

      },
      // change链接类型
      selectLink(value) {
        // if(value == 8) {
        //   for(let k = 0; k < vm.tabContent.length; k++) {
        //     if(vm.linkIndexValue == k) {
        //       vm.formData.rankModule.name = ""
        //       vm.formData.rankModule.paramFlag = 2
        //     }
        //   }
        // }
      },

      linkIndex(index) {
        vm.linkIndexValue = index
      },
      // change模块选择数据
      moduleChange(value) {
        for(let i = 0; i < vm.moduleArray.nameList.length; i++) {
          if(value == vm.moduleArray.nameList[i].name) {
            vm.getCodeAndType(vm.moduleArray.nameList[i].code,vm.moduleArray.nameList[i].type,vm.moduleArray.nameList[i].paramFlag)
            vm.getParamData(vm.moduleArray.nameList[i].id,vm.moduleArray.nameList[i].paramFlag,vm.moduleIndexValue,2)
          }
        }
      },

      // moduleIndex(index) {
      //   vm.moduleIndexValue = index
      // },

      getCodeAndType(code,type,paramFlag) {
        // for(let i = 0; i < vm.tabContent.length; i++) {
        //   if(vm.moduleIndexValue == i) {
        vm.formData.rankModule.code = code
        vm.formData.rankModule.type = type
        vm.formData.rankModule.paramFlag = paramFlag
        //   }
        // }
      },
      addPhone(index){
        if(vm.mobilePhonesArray == null || vm.mobilePhonesArray.length == 0){
          vm.$message.error("请输入正确的手机号！");
          return;
        }
        else {
          for(let i = 0; i < vm.mobilePhonesArray.length; i++){
            if(vm.mobilePhonesArray[i] == null || vm.mobilePhonesArray[i].value == ""){
              vm.$message.error("请输入正确的手机号！");
              return;
            }
            else {
              if(!vm.checkPhone(vm.mobilePhonesArray[i].value)){
                vm.$message.error("请输入正确的手机号！");
                return;
              }
            }
          }
        }
        vm.mobilePhonesArray.push({value: ""});

      },
      delPhone(index){
        vm.mobilePhonesArray.splice(index, 1);
      },

      checkPhone(val) {
        if(!(/^1[3456789]\d{9}$/.test(val))) {
          return false;
        } else {
          return true;
        }
      },

      checkRankTypeList(){
        if(vm.rankTypeList == null || vm.rankTypeList.length == 0){
          vm.$message.error("请选择榜单类型！");
          return false;
        }
        else {
          return true;
        }
      },

      checkRankName(){
        if(vm.formData.ruleShowFlag == 1 && vm.formData.rankModule.name == ""){
          vm.$message.error("请选择规则跳转模块！");
          return false;
        }
        else {
          return true;
        }
      },
      checkParamList(){
        if(vm.formData.ruleShowFlag == 1
          && vm.formData.rankModule.name != ""
          && vm.formData.rankModule.paramFlag == 1){

          if(vm.formData.rankModule.paramList.length == 0){
            vm.$message.error("请选择参数！");
            return false;
          }
          else {
            for(let i = 0; i < vm.formData.rankModule.paramList.length; i++){
              if(vm.formData.rankModule.paramList[i].value == ""){
                vm.$message.error("请选择参数！");
                return false;
              }
            }

          }
          return true;

        }
        else {
          return true;
        }
      },
      changeRankShow(){
        if(vm.formData.rankShowFlag == 1){
          vm.styleEditFlag = false;
        }
        else {
          vm.styleEditFlag = true;
        }
      }
    }
  }
</script>

<style lang="less">

  .p-title {
    padding-left: 10px;
    margin-bottom: 15px;
  }

  .basic-item-icon {
    position: relative;

    .require {
      position: absolute;
      left: 67px;
      top: 11px;
      color: #f56c6c;
    }

    .upload-message {
      position: absolute;
      left: 160px;
      top: 105px;
      font-size: 12px;
      color: #f56c6c;
    }

    .img-delete {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 84px;
      height: 100px;
      background: #000;
      opacity: 0.7;
      z-index: 999;

      i {
        color: #fff;
        margin-top: 39px;
        margin-left: 0px;
      }
    }
  }

  .word-num {
    font-size: 12px;
    color: #999;
    padding-top: 5px;
  }

  .line {
    margin-left: 10px;
    width: 20px;
  }

  .bg-uploader {
    .bg-img {
      float: left;
      width: 84px;
      height: 100px;
    }

    .limit-text {
      float: left;
      margin-left: 10px;
      margin-top: -10px;

      p {
        font-size: 12px;
        color: #999;
        text-align: left;
      }
    }
  }

  .el-upload__tip {
    position: absolute;
    top: -6px;
    left: 130px;
  }


.required-label .el-form-item__label::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.label-type {
  width: 100%;
  margin-top: 10px;
}
</style>
