<template>
  <el-dialog v-if="dlgVisible" 
             :visible="dlgVisible" 
             @close="handleDlgClosed"
             :close-on-click-modal="false"
             :title="'量化积分'">

    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属党组织">
            <el-input disabled v-model="partyOrgName" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="党员姓名">
            <el-input disabled v-model="partyMemberName" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input disabled v-model="mobile" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号">
            <el-input disabled v-model="idCard" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form label-width="140px" :model="form" :inline="true"
             :rules="rules" ref="ruleForm"
             class="form-wr">
      <div>
        <el-form-item label="评分周期" prop="year">
          <div class="flex-div">
            <!-- <div class="mr10">评分周期</div> -->
            <div class="mr10">
              <el-date-picker
                  v-model="form.year"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择年"
                  @change="handleYearChange">
              </el-date-picker>
            </div>
            <div class="mr10">
              <el-form-item prop="quarter">
                <el-select v-model="form.quarter" placeholder="请选择" class="input-width" clearable
                           @change="handleQuaterChange">
                  <el-option
                      v-for="item in quarterList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </div>
      <el-form-item label="基础积分分值" prop="basePoint">
        <el-input v-model="form.basePoint" type="number" placeholder="请输入" class="input-width" clearable/>
      </el-form-item>
      <el-form-item label="基础积分选项" prop="baseOptions" class="wd-wr" :style="'width:' + formItemWd">
        <el-checkbox-group v-model="form.baseOptions">
          <el-checkbox v-for="item in baseOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <div>
        <el-form-item label="民主评议积分分值" prop="reviewPoint">
          <el-input v-model="form.reviewPoint" type="number" placeholder="请输入" class="input-width"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="民主评议积分选项" prop="reviewOptions" class="wd-wr" :style="'width:' + formItemWd">
          <el-checkbox-group v-model="form.reviewOptions">
            <el-checkbox v-for="item in pyiOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="激励积分分值" prop="inspirePoint">
          <el-input v-model="form.inspirePoint" type="number" placeholder="请输入" class="input-width" clearable/>
        </el-form-item>
        <el-form-item label="激励积分选项" prop="inspireOptions" class="wd-wr" :style="'width:' + formItemWd">
          <el-checkbox-group v-model="form.inspireOptions">
            <el-checkbox v-for="item in jiliOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="警示扣分分值" prop="warnPoint">
          <el-input v-model="form.warnPoint" type="number" placeholder="请输入" class="input-width" clearable/>
        </el-form-item>
        <el-form-item label="警示扣分选项" prop="warnOptions" class="wd-wr" :style="'width:' + formItemWd">
          <el-checkbox-group v-model="form.warnOptions">
            <el-checkbox v-for="item in jinshiOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <el-row class="position">
        <el-col :span="24" align="right">
          <el-button
                  type="primary"
                  size="small"
                  @click="hadnleSubmitbase"
              >保存
            </el-button>
        </el-col>    
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  // props: {
  //   partyId: {
  //     type: String,
  //     default: ''
  //   },
  //   disabled: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  data () {
    return {
      dlgVisible: false,
      btnDisabled: false,
      partyOrgName: null,
      partyMemberName: null,
      mobile: null,
      idCard: null,
      year: '',
      quarter: '',
      form: {
        id: null,
        partyMemberId: null,
        year: '',
        quarter: '',
        basePoint: '',
        baseOptions: [],
        reviewPoint: '',
        reviewOptions: [],
        inspirePoint: '',
        inspireOptions: [],
        warnPoint: '',
        warnOptions: [],
      },
      formClear: null, // form备份
      rules: {
        year: [{ required: true, message: '年度不能为空', trigger: 'blur' }],
        quarter: [{ required: true, message: '季度不能为空', trigger: 'blur' }]
      },
      formItemWd: '500px',
      quarterList: [
        {
          label: '第一季度',
          value: '1'
        },
        {
          label: '第二季度',
          value: '2'
        },

        {
          label: '第三季度',
          value: '3'
        },
        {
          label: '第四季度',
          value: '4'
        }
      ],
      baseOptions: [
        {
          label: '参加三会一课',
          value: '1'
        },
        {
          label: '参加主题党日',
          value: '2'
        },

        {
          label: '足额缴纳党费',
          value: 3
        },
        {
          label: '积极参加学习培训',
          value: '4'
        },
        {
          label: '自觉执行党组织会议',
          value: '5'
        },
        {
          label: '严守党的政治纪律和政治规矩',
          value: '6'
        },
      ],
      jiliOptions: [
        {
          label: '发挥先锋模范作用',
          value: '1'
        },
        {
          label: '维护社会和谐稳定',
          value: '2'
        },

        {
          label: '参与社会治理',
          value: '3'
        },
        {
          label: '联系服务群众',
          value: '4'
        }
      ],
      jinshiOptions: [
        {
          label: '不服从党组织安排',
          value: '1'
        },
        {
          label: '不按时足额缴纳党费',
          value: '2'
        },

        {
          label: '无故长期脱离组织管理',
          value: '3'
        },
        {
          label: '在工作中出现不良影响',
          value: '4'
        },
        {
          label: '违反党的纪律',
          value: '5'
        }
      ],
      pyiOptions: [
        {
          label: '个人自评',
          value: '1'
        },
        {
          label: '党员互评',
          value: '2'
        },

        {
          label: '民主测评',
          value: '3'
        }
      ]
    }
  },
  watch: {
    // partyMemberId: {
    //   handler (val) {
    //     console.log('val------points', val)
    //     if (val.length > 0) {
    //       this.btnDisabled = false
    //     } else {
    //       this.btnDisabled = true
    //     }
    //   },
    //   immediate: true
    // }
  },
  mounted () {
    // const w = document.getElementsByClassName('p-wr')[0]
    // this.formItemWd = w.clientWidth - 360 + 'px'
    // console.log('www----', w)
  },
  methods: {
    /**
     * 初始化
     */
    // init (partyMemberId, partyOrgName, partyMemberName, mobile, idCard) {
    //   this.dlgVisible = true;
    //   this.partyMemberId = partyMemberId;
    //   this.partyOrgName = partyOrgName;
    //   this.partyMemberName = partyMemberName;
    //   this.mobile = mobile;
    //   this.idCard = idCard;
    // },
    initDlg (partyMemberId, partyOrgName, partyMemberName, mobile, idCard) {
      this.formClear = JSON.parse(JSON.stringify(this.form))
      this.dlgVisible = true
      this.form.partyMemberId = partyMemberId
      this.partyOrgName = partyOrgName
      this.partyMemberName = partyMemberName
      this.mobile = mobile
      this.idCard = idCard
    },

    /**
     * 对话框关闭事件
     */
    handleDlgClosed () {
      this.form = this.formClear
      this.dlgVisible = false
    },

    handleQuaterChange (val) {
      if (this.form.year) {
        this.getInfo()
      }
      this.quarter = val
    },
    handleYearChange (val) {
      this.year = val
    },
    hadnleSubmitbase () {
      if (!this.form.partyMemberId) return
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            baseOptions: this.form.baseOptions.length > 0 ? this.form.baseOptions.toString() : '',
            reviewOptions: this.form.reviewOptions.length > 0 ? this.form.reviewOptions.toString() : '',
            inspireOptions: this.form.inspireOptions.length > 0 ? this.form.inspireOptions.toString() : '',
            warnOptions: this.form.warnOptions.length > 0 ? this.form.warnOptions.toString() : ''
          }
          this.savePoints(params)
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },

    /**
     * 保存积分
     * @param form
     * @returns {Promise<void>}
     */
    async savePoints (params) {
      let url = null
      if (!this.form.id) {
        // 新增
        url = '/actual/base/party/member/point/save'
      } else {
        url = '/actual/base/party/member/point/update'
      }
      await this.$http
          .post(url, params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              this.$message.success('保存成功')

            }
          })
          .catch(err => {
            console.log('err', err)
            return this.$message.error('网络错误')
          })
    },

    async getInfo () {
      const params = {
        year: this.form.year,
        quarter: this.form.quarter,
        partyMemberId: this.form.partyMemberId
      }
      await this.$http
          .post('/actual/base/party/member/point/echoPartyMemberPoint', params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            } else {
              if (res.data.length > 0) {
                let _info = res.data[0]
                const info = {
                  ..._info,
                  baseOptions: _info.baseOptions.length > 0 ? _info.baseOptions.split(',') : [],
                  reviewOptions: _info.reviewOptions.length > 0 ? _info.reviewOptions.split(',') : [],
                  inspireOptions: _info.inspireOptions.length > 0 ? _info.inspireOptions.split(',') : [],
                  warnOptions: _info.warnOptions.length > 0 ? _info.warnOptions.split(',') : []
                }
                for (const n in info) {
                  this.form[n] = info[n]
                }
              } else {
                this.$refs['ruleForm'].resetFields()
                this.form.quarter = this.quarter
                this.form.year = this.year
              }
            }
          })
          .catch(err => {
            console.log('err', err)
            return this.$message.error('网络错误')
          })
    },

  }
}
</script>

<style lang="scss" scoped>
.flex-div {
  display: flex;
  align-items: center;
}

.mb20 {
  margin-bottom: 20px;
}

.mr10 {
  margin-right: 10px;
}

.pdl74 {
  padding-left: 74px;
}

.wd-wr {
  /deep/ .el-form-item__content {
    width: calc(100% - 140px);
  }

  /deep/ .el-checkbox {
    margin-right: 10px;
    font-weight: 400;
    // line-height: 20px;
    .el-checkbox__label {
      padding-left: 5px;
    }
  }
}

.input-width {
  width: 160px;
}
.position{
  position: relative;
  top: 15px;
}
</style>
