<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>
    <template v-for="(i, j) in formData.rankModule.paramList2">
      <div v-if="formData.ruleShowFlag == 1" class="required-label">
        <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>
    </template>

    <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>
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
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++) {
                if (vm.formData.mobilePhones[i] == '') {
                  continue
                }
                vm.mobilePhonesArray.push({
                  value: vm.formData.mobilePhones[i],
                })
              }
            }

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

    returnTypeData(name) {
      $emit(this, 'returnTypeData', {
        name: name,
        val: this.formData[name],
      })
    },
    //表单校验
    submitForm() {
      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.mobilePhonesArray[i].value != undefined &&
            !vm.checkPhone(vm.mobilePhonesArray[i].value)
          ) {
            vm.$message.error('请输入正确的手机号！')
            return
          } else if (
            vm.mobilePhonesArray[i].value == '' ||
            vm.mobilePhonesArray[i].value == undefined
          ) {
            continue
          }
          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 详情页
        }
      }

      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.rankTypeList != null) {
        if (vm.rankTypeList.indexOf(1) > -1) {
          vm.formData.orgRankFlag = 1
        } else {
          vm.formData.orgRankFlag = 0
        }
        if (vm.rankTypeList.indexOf(3) > -1) {
          vm.formData.cityRankFlag = 1
        } else {
          vm.formData.cityRankFlag = 0
        }
        if (vm.rankTypeList.indexOf(5) > -1) {
          vm.formData.groupRankFlag = 1
        } else {
          vm.formData.groupRankFlag = 0
        }
      }
    },

    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
      }
    },
  },
  emits: ['returnTypeData'],
}
</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>
