<template>
  <div class="w" :style="{ height: num + 'px' }">
    <div class="img-box" v-if="is_value">
      <img class="img" :src="imgUrl.tg" v-if="bgData.examine == 1" />
      <img class="img" :src="imgUrl.btg" v-if="bgData.examine == 2" />
      <img class="img" :src="imgUrl.dsh" v-if="bgData.examine == 0" />
    </div>
    <form
      v-if="is_value"
      action
      method
      enctype="multipart/form-data"
      onsubmit="return false"
    >
      <div class="items" v-if="!zhuangtai">
        <h3>基本信息</h3>
        <!-- start -->
        <div class="item">
          <label for>社会组织名称:</label>
          <input class="input0" type="text" :value="name" disabled />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>社会组织类型:</label>
          <select class="input1" name="type" disabled>
            <option :value="bgData.type">{{ bgData.type }}</option>
          </select>
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>流动党员数量:</label>
          <input
            class="input0"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.flow_party_person"
          />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>已有党员数量:</label>
          <input
            class="input0"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.party_person"
          />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>从业人员总数:</label>
          <input
            class="input0"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.work_person"
          />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>党组织名称:</label>
          <input
            class="input0"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.party_name"
          />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>是否建立党组织:</label>
          <label class="label" for>
            <input
              type="radio"
              name="is_reg_party"
              v-model="bgData.is_reg_party"
              value="1"
              :disabled="bgData.examine === 0"
            />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
            <input
              type="radio"
              name="is_reg_party"
              v-model="bgData.is_reg_party"
              value="2"
              :disabled="bgData.examine === 0"
            />&nbsp;&nbsp;否
          </label>
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>是否建立“功能型”党组织:</label>
          <label class="label" for>
            <input
              type="radio"
              :disabled="bgData.examine === 0"
              value="1"
              name="is_reg_fun_party"
              v-model="bgData.is_reg_fun_party"
            />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
            <input
              type="radio"
              :disabled="bgData.examine === 0"
              name="is_reg_fun_party"
              v-model="bgData.is_reg_fun_party"
              value="2"
            />
            &nbsp;&nbsp;否
          </label>
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>登记管理机关:</label>
          <input
            class="input2"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.reg_manage"
          />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>业务主管单位:</label>
          <input
            class="input2"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.supervisor"
          />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>隶属的上一级党组织名称:</label>
          <input
            class="input2"
            type="text"
            :disabled="bgData.examine === 0"
            v-model="bgData.party_pname"
          />
        </div>
        <!-- end -->
        <div class="btn" @click="anNui()">下一页</div>
      </div>
      <div class="items" v-if="zhuangtai">
        <div>
          <h3>党组织书记情况</h3>
          <!-- start -->
          <div class="it">
            <label for>姓名:</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.sec_name"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>性别:</label>
            <label class="label" for>
              <input
                type="radio"
                name="sec_sex"
                v-model="bgData.sec_sex"
                value="1"
                :disabled="bgData.examine === 0"
              />&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
              <input
                type="radio"
                name="sec_sex"
                :disabled="bgData.examine === 0"
                v-model="bgData.sec_sex"
                value="0"
              />
              &nbsp;&nbsp;女
            </label>
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>年龄:</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.sec_age"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>行政职务:</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.sec_job"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>近三年参加上级党组织培训次数:</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.sec_study"
            />
          </div>
          <!-- end -->
        </div>
        <div style="margin-top:60px;">
          <h3>党组织信息</h3>
          <!-- start -->
          <div class="it">
            <label for>近三年发展党员数:</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.near_party_person"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>是否建立群团组织:</label>
            <label class="label" for>
              <input
                type="radio"
                name="is_reg_group"
                v-model="bgData.is_reg_group"
                :disabled="bgData.examine === 0"
                value="1"
              />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
              <input
                type="radio"
                name="is_reg_group"
                v-model="bgData.is_reg_group"
                :disabled="bgData.examine === 0"
                value="2"
              />
              &nbsp;&nbsp;否
            </label>
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>专职党务工作者人数:</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.major_party_person"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>是否选派党建工作指导员:</label>
            <label class="label" for>
              <input
                type="radio"
                name="is_choice_instructor"
                :disabled="bgData.examine === 0"
                v-model="bgData.is_choice_instructor"
                value="1"
              />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
              <input
                type="radio"
                name="is_choice_instructor"
                v-model="bgData.is_choice_instructor"
                :disabled="bgData.examine === 0"
                value="2"
              />
              &nbsp;&nbsp;否
            </label>
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>党组织年度活动经费(万元):</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.year_money"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>党组织年度活动场所面积(平米):</label>
            <input
              class="input0"
              type="text"
              :disabled="bgData.examine === 0"
              v-model="bgData.active_year"
            />
          </div>
          <!-- end -->
          <!-- start -->
          <div id="btn">
            <button type="button" v-if="bgData.examine !== 0" @click="anNui()">
              上一页
            </button>
            <button type="submit" v-if="bgData.examine !== 0" @click="submit()">
              重新提交
            </button>
          </div>
          <!-- end -->
        </div>
      </div>
    </form>
    <div class="img-g" v-if="!is_value" @click="$jump('applyFor')">
      <!-- <div class="img-bx">
        <img :src="imgUrl.wjx" alt />
        <span>申请成为党组织</span>
      </div>-->
      <img :src="imgUrl.apple" alt />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      imgUrl: {
        tg: require('../../../static/img/tg.png'),
        btg: require('../../../static/img/btg.png'),
        dsh: require('../../../static/img/dsh.png'),
        xa: require('../../../static/img/xa.png'),
        wjx: require('../../../static/img/wjx.png'),
        apple: require('../../../static/img/apple.png')
      },
      state: 0,
      zhuangtai: false,
      num: 1050,
      bgData: [],
      is_value: Boolean,
      name: '',
      typeVal: []
    }
  },
  computed: {},
  watch: {
    num (newValue, oldValue) {
      this.$emit('listenToChildExen', this.num)
    }
  },
  methods: {
    submit () {
      for (var key of Object.keys(this.bgData)) {
        if (this.bgData[key] === '') {
          alert('以上所有内容都不可为空呦！')
          return
        }
      }

      let _this = this
      for (var list in _this.typeVal) {
        if (_this.typeVal[list] === _this.bgData.type) {
          _this.bgData.type = list
        }
      }

      this.$http({
        method: 'post',
        url: 'v1/user/resubmit',
        data: {
          object: _this.bgData
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            alert(res.data.message)
            _this.$router.go(1)
          } else {
            alert(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getData () {
      let sid = sessionStorage.id
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/user/get-info',
        params: {
          sid: sid
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data === null) {
              _this.is_value = false
            } else {
              _this.is_value = true
            }
            _this.bgData = res.data.data
          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getType () {
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/user/get-society-type',
        data: {}
      })
        .then(res => {
          _this.typeVal = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    anNui () {
      if (this.zhuangtai) {
        this.num = 1050
        this.zhuangtai = !this.zhuangtai
      } else {
        this.num = 1200
        this.zhuangtai = !this.zhuangtai
      }
    },
    sendMsgToParent () {
      this.$emit('listenToChildExen', this.num)
    }
  },
  created () {
    this.name = sessionStorage.name
    this.getData()
    this.getType()
  },
  mounted () {
    this.sendMsgToParent()
  }
}
</script>

<style lang="scss" scoped>
.w {
  width: 934px;
  background-color: #ffffff;
  padding: 35px 30px 0px;
  box-sizing: border-box;
  position: relative;

  .img-g {
    width: 100%;
    /*
    display: flex;
    justify-content: flex-end;
    */
    cursor: pointer;
    text-align: center;
    /*
    .img-bx {
      width: 131px;
      height: 27px;
      background-image: linear-gradient(35deg, #f82747 0%, #fe5b2c 100%);
      border-radius: 25px;
      text-align: center;
      line-height: 27px;
      position: relative;

      img {
        width: 15px;
        height: 15px;
        position: absolute;
        left: -5%;
        top: 24%;
      }

      span {
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #fbfffb;
        text-shadow: 2px 4px 7px rgba(175, 14, 39, 0.83);
      }
    }
    */
  }

  .items {
    width: 100%;

    label input[type='radio'] {
      width: 17px;
      height: 17px;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      margin: 0;
      cursor: pointer;
    }
    label input[type='radio']:after {
      width: 17px;
      height: 17px;
      display: block;
      content: '';
      background: url('../../../static/img/wxz.png') no-repeat;
      background-size: 100% 100%;
    }

    label input[type='radio']:checked:after {
      background: url('../../../static/img/xz.png') no-repeat;
    }

    h3 {
      width: 874px;
      height: 37px;
      padding-left: 29px;
      box-sizing: border-box;
      font-family: 'MicrosoftYaHei';
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
      border-bottom: 1px solid #dedede;
      margin-bottom: 60px;
    }

    .btn {
      width: 230px;
      height: 63px;
      background-color: #e60012;
      border-radius: 5px;
      margin: 60px auto 0px;
      text-align: center;
      line-height: 63px;
      font-family: 'MicrosoftYaHei';
      font-size: 26px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }

    .item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 24px;

      .label {
        display: inline-block;
        width: 386px;
        height: 43px;
        margin-left: 30px;
        text-align: left;
      }

      label {
        width: 197px;
        height: 43px;
        font-family: 'MicrosoftYaHei';
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 43px;
        text-align: right;
        letter-spacing: 0px;
        color: #333333;
      }
      .input0 {
        margin-left: 30px;
        width: 386px;
        height: 43px;
        background-color: #ffffff;
        border: solid 1px #c7c7c7;
        font-family: 'MicrosoftYaHei';
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        outline: none;
      }

      .input1 {
        margin-left: 30px;
        /* 清除默认的箭头样式 */
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        /* 右侧添加小箭头的背景图 */
        background: url('../../../static/img/xa.png') 360px center no-repeat;
        background-size: 14px 8px;
        width: 386px;
        height: 43px;
        background-color: #ffffff;
        border: solid 1px #c7c7c7;
        font-family: 'MicrosoftYaHei';
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        outline: none;
      }

      .input2 {
        margin-left: 30px;
        width: 647px;
        height: 43px;
        background-color: #ffffff;
        border: solid 1px #c7c7c7;
        font-family: 'MicrosoftYaHei';
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        outline: none;
      }
    }

    #btn {
      margin: 60px auto 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 500px;

      button[type='submit'] {
        width: 230px;
        height: 63px;
        background-color: #e60012;
        border-radius: 5px;
        outline: none;
        border: 0;
        font-family: 'MicrosoftYaHei';
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        color: #ffffff;
      }

      button[type='button'] {
        width: 230px;
        height: 63px;
        background-color: #ff9800;
        border-radius: 5px;
        outline: none;
        border: 0;
        font-family: 'MicrosoftYaHei';
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }

    .it {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        display: inline-block;
        width: 386px;
        height: 43px;
        margin-left: 30px;
        text-align: left;
      }

      label {
        width: 229px;
        height: 43px;
        font-family: 'MicrosoftYaHei';
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 43px;
        text-align: right;
        letter-spacing: 0px;
        color: #333333;
      }

      .input0 {
        margin-left: 30px;
        width: 386px;
        height: 43px;
        background-color: #ffffff;
        border: solid 1px #c7c7c7;
        font-family: 'MicrosoftYaHei';
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        outline: none;
      }
    }
  }

  .img-box {
    width: 158px;
    height: 121px;
    opacity: 0.5;
    position: absolute;
    right: 0%;
    top: 0%;
    img {
      width: 158px;
      height: 121px;
    }
  }
}
</style>
