<template>
  <div class="w" :style="{height:num + 'px'}">
    <div class="img-box">
      <img class="img" :src="imgUrl.tg" v-if="state == 0" />
      <img class="img" :src="imgUrl.btg" v-if="state == 1" />
      <img class="img" :src="imgUrl.shz" v-if="state == 2" />
      <img class="img" :src="imgUrl.zxz" v-if="state == 3" />
    </div>
    <form>
      <div class="items" v-if="!zhuangtai">
        <h3>基本信息</h3>
        <!-- start -->
        <div class="item">
          <label for>社会组织名称:</label>
          <input class="input0" type="text" value="劳动组织" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>社会组织类型:</label>
          <select class="input1" name id>
            <option value>劳动</option>
            <option value>团体</option>
          </select>
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>流动党员数量:</label>
          <input class="input0" type="text" value="20" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>已有党员数量:</label>
          <input class="input0" type="text" value="20" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>从业人员总数:</label>
          <input class="input0" type="text" value="20" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>党组织名称:</label>
          <input class="input0" type="text" value="劳动组织" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>是否建立党组织:</label>
          <label class="label" for>
            <input type="radio" name="q" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="q" />&nbsp;&nbsp;否
          </label>
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>是否建立“功能型”党组织:</label>
          <label class="label" for>
            <input type="radio" name="q" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="q" />&nbsp;&nbsp;否
          </label>
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>登记管理机关:</label>
          <input class="input2" type="text" value="劳动管理机关" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>业务主管单位:</label>
          <input class="input2" type="text" value="劳动管理机关" />
        </div>
        <!-- end -->
        <!-- start -->
        <div class="item">
          <label for>隶属的上一级党组织名称:</label>
          <input class="input2" type="text" value="劳动组织" />
        </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" value />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>性别:</label>
            <label class="label" for>
              <input type="radio" name="sex" />&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="radio" name="sex" />&nbsp;&nbsp;女
            </label>
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>年龄:</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>行政职务:</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>近三年参加上级党组织培训次数:</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
        </div>
        <div style="margin-top:60px;">
          <h3>党组织信息</h3>
          <!-- start -->
          <div class="it">
            <label for>近三年发展党员数:</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>是否建立群团组织:</label>
            <label class="label" for>
              <input type="radio" name="zz" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="radio" name="zz" />&nbsp;&nbsp;否
            </label>
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>专职党务工作者人数:</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>是否选派党建工作指导员:</label>
            <label class="label" for>
              <input type="radio" name="zd" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="radio" name="zd" />&nbsp;&nbsp;否
            </label>
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>党组织年度活动经费(万元):</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
          <!-- start -->
          <div class="it">
            <label for>党组织年度活动场所面积(平米):</label>
            <input class="input0" type="text" value />
          </div>
          <!-- end -->
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      imgUrl: {
        tg: require('../../../static/img/tg.png'),
        btg: require('../../../static/img/btg.png'),
        shz: require('../../../static/img/shz.png'),
        zxz: require('../../../static/img/zxz.png'),
        xa: require('../../../static/img/xa.png')
      },
      state: 0,
      zhuangtai: false,
      num: 1050
    }
  },
  computed: {},
  watch: {
    num (newValue, oldValue) {
      this.$emit('listenToChildExen', this.num)
    }
  },
  methods: {
    anNui () {
      this.zhuangtai = !this.zhuangtai
      this.num = 1073
    },
    sendMsgToParent () {
      this.$emit('listenToChildExen', this.num)
    }
  },
  created () {},
  mounted () {
    this.sendMsgToParent()
  }
}
</script>

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

  .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;
      }
    }

    .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>
