<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">
        <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" v-if="formData.rankShowFlag == 1">
      <el-radio-group v-model="formData.maxQuantity" size="small" class="required-label">
        <el-radio :label="50">50</el-radio>
        <el-radio :label="100">100</el-radio>
        <el-radio :label="200">200</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="榜单类型" class="required-label" v-if="formData.rankShowFlag == 1">
          <el-checkbox-group v-model.array="formData.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 v-for="item in formData.selectedRankTypeList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
    </el-form-item>
    <el-form-item label="显示规则" class="required-label" v-if="formData.rankShowFlag == 1">
      <el-radio-group v-model="formData.ruleShowFlag" size="small" class="required-label">
        <el-radio :label="0">关闭</el-radio>
        <el-radio :label="1">开启</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item label="规则跳转模块" v-if="formData.rankShowFlag == 1 && formData.ruleShowFlag == 1" class="required-label">
      <el-select @focus="moduleIndex(index)" filterable 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-form-item>
    <div v-for="(i,j) in formData.rankModule.paramList2" :key="j" class="required-label" v-if="formData.rankShowFlag == 1 && formData.ruleShowFlag == 1">
      <el-form-item label="选择参数" v-if="formData.rankModule.paramFlag == 1">
        <el-select 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-form-item>
    </div>

    <el-form-item label="不参与排行的成员" v-if="formData.rankShowFlag == 1">
      <div v-for="(item, index) in formData.mobilePhones" :key="index">
        <el-row>
          <el-col :span="10">
            <el-form-item label="手机号" label-width="80px">
              <el-input maxlength="11"
                        size="small"
                        v-model="item.phone"
                        placeholder="请输入手机号"
                        style="width:85%;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <img
              @click="addGuest(index)"
              class="edit-img"
              src="../../assets/image/plus.png"
            />
            <img
              @click="delGuest(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";
  import Cropper from '@/components/common/cropper.vue'
  export default {
    name: "baseinfo",
    components: {
      Cropper
    },
    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 {
        showCropper: false,
        moduleArray: [],
        formData: {
          circleId: this.$route.query.id,
          rankShowFlag: 0,
          maxQuantity: 50,
          rankTypeList:[],
          selectedRankTypeList:[{id: "", name: ""}],
          orgRankFlag: 0,
          cityRankFlag: 0,
          groupRankFlag: 0,
          ruleShowFlag: 0,
          mobilePhones: [],
          rankModule: {
            linkType: 8, // 跳转类型:1 链接，4 模块， 8 无跳转
            name: "", // 模块名称
            paramFlag: 0, // 是否有参数标志1为有2为没有参数
            paramList: [
              {
                id: "",
                seqNo: '',  // 选择参数的索引值
                value: '',
                key: '', // 参数名称，默认param
                type:''  // 模块参数类型:1 int类型字符串 4String类型 8时间戳类型字符串
              }
            ],
            paramList2: [],
            type: 0 // 类型:1 列表页，4 详情页
          }
        },
        linkSelect: [], // 连接类型数组
        currentOption: {
          offset_x: 120,
          offset_y: 185,
          width: 160,
          height: 120,
          cvWidth: 1000,
          cvHeight: 800,
          uploadType: 1,
          cropDialogWidth: '900px',
          cropBoxResizable: true,
          minCropBoxWidth: 100,
          minCropBoxHeight: 100,
          aspectRatio: 16/9
        },
        slide2: {
          oriUrl: '', // 原图
        },
        rules: {
          name: [
            { required: true, message: "请输入圈子名称", trigger: "blur" },
            {
              min: 2,
              max: 14,
              message: "输入长度为2-14的内容，可包含中英文、数字及特殊符号",
              trigger: "blur"
            },
            { validator: checkProjectStr, trigger: "blur" }
          ],
          introduce: [
            { required: true, message: "请输入圈子介绍", trigger: "blur" },
            {
              min: 2,
              max: 40,
              message: "输入长度为2-40的内容，可包含中英文、数字及特殊符号",
              trigger: "blur"
            },
            { validator: checkProjectStr, trigger: "blur" }
          ],
          headUrl: [
            { required: true, message: "请选择圈子头像", trigger: "blur" }
          ],
          dynamicFlag: [
            { required: true, message: "请选择内容发布权限", trigger: "blur" },
          ],
          type: [
            { required: true, message: "请选择圈子类型", trigger: "blur" },
          ],
          deptId: [
            { required: true, message: "请选择对接部门", trigger: "blur" }
          ]
        },
        imgMouseOver1: false,
        uploadImgMessage1: false,//未上传图片，校验提示语
        contentList: [
          {
            value: 1,
            label: '所有人可发布'
          }, {
            value: 2,
            label: '管理员可发布'
          },
        ],
        deptList: [
          {
            value: 1,
            label: '铁军部'
          }, {
            value: 2,
            label: '医疗事业部'
          },{
            value: 3,
            label: '商业化部'
          },
        ],
        deptFlag: false,
        shareFlag: false
      }
    },

    methods: {


      getRank(){


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

        getRankConfig(req).then(function (res) {
          if(res.code == "000000") {
            vm.formData = res.data;

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

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

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

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

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

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

            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;

        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.formData.rankTypeList != null){
          for(let i = 0; i < vm.formData.rankTypeList.length; i++){
            if(vm.formData.rankTypeList[i] == 1){
              vm.formData.orgRankFlag = 1;
            }
            if(vm.formData.rankTypeList[i] == 3){
              vm.formData.cityRankFlag = 1;
            }

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

      },


      save(){
        this.submitForm();
      },
      cancle(){
        const _this = this;
        setTimeout(function () {
          _this.$router.go(-1)
        }, 100);
      },

      // 获取模块下拉数据
      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
        //   }
        // }
      }

    }
  }
</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>
