<template>
  <section class="organizationSetting">
    <ai-detail>
      <ai-title slot="title" title="换届设置" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
      <template slot="content">
        <ai-card title="基本信息">
          <template #content>
            <div class="tips">
              <i class="el-icon-warning"></i>
              系统将在下次换届时间开始前，对“换届提醒人”进行提醒。提醒方式包括平台消息推送、短信提醒。
            </div>
            <div class="add-form">
              <el-form ref="form" :model="form" :rules="formRules" size="small" label-width="150px">
                <el-form-item label="组织名称">{{ org.name }}</el-form-item>
                <el-form-item label="成立时间">{{ $dateFormat(org.createTime) }}</el-form-item>
                <el-form-item label="换届类型" prop="type">
                  <el-radio v-model="form.type" label="0">三年换届</el-radio>
                  <el-radio v-model="form.type" label="1">五年换届</el-radio>
                </el-form-item>
                <el-form-item label="换届提醒人" prop="userList">
                  <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
                                    :url="`/app/appparty/list?partyOrgId=${form.organizationId}`" headerTitle="党员列表"
                                    :isMultiple="true" dialogTitle="选择抄送人" @selectPerson="selectUser" class="aipersonselect">
                    <template name="option" v-slot:option="{ item }">
                      <span class="iconfont iconProlife">{{ item.name }}</span>
                    </template>
                  </ai-person-select>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </ai-card>
      </template>
      <template slot="footer" class="footer">
        <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
        <el-button class="footer-btn" type="primary" @click="confirm()">保存</el-button>
      </template>
    </ai-detail>

  </section>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "organizationSetting",
  inject: ['permissions', 'instance', 'dict'],
  data() {
    let validUser = (rule, value, callback) => {
      if (!value.length) {
        return callback(new Error('请选择换届提醒人'));
      } else {
        callback();
      }
    };
    return {
      form: {
        addOrMakeup: true,
        organizationId: '',
        organizationName: '',
        type: '0',
        userList: [],
      },
      formRules: {
        type: [{required: true, message: "请选择选举方式", trigger: "blur"}],
        organizationName: [{required: true, message: "请选择党组织", trigger: "blur"}],
        userList: [{required: true, validator: validUser, trigger: "blur"}],
      },
      chooseUserList: [],
    }
  },
  computed: {
    ...mapState(['user']),
    org: v => new v.MODEL.PartyOrg(v.$route.query.oid)
  },
  created() {
    this.form.organizationId = this.$route.query.oid
    this.getDetail()
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    getDetail() {
      const {oid: organizationId} = this.$route.query
      this.instance.post(`/app/apporganizationchangeconfig/queryDetailByOrganizationId`, null, {
        params: {organizationId}
      }).then((res) => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    selectUser(v) {
      this.form.userList = v
    },
    selectVote(e) {
      this.form.voteUsers = e
    },
    confirm() {
      // 换届设置
      this.$refs.form.validate((valid) => {
        if (valid) {
          const {id: organizationId, name: organizationName} = this.org
          this.instance.post(`/app/apporganizationchangeconfig/update`, {
            ...this.form, organizationId, organizationName
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              this.cancel(true)
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scope>
.organizationSetting {
  height: 100%;

  ::v-deep .el-date-editor .el-input {
    width: 100%;
  }

  .tips {
    width: 100%;
    border: 1px solid #f82;
    background-color: #fff3e9;
    color: #f82;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 32px;
    font-size: 13px;
  }
}
</style>
