<template>
  <div class="Add">
    <div class="add-content">
      <div class="top">
        <!-- <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-edit.png" /> -->
        <textarea placeholder="发布内容" :maxlength="500"></textarea>
        <div class="bottom">
          <div></div>
          <div>
            <i>6</i>
            <span>/500</span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <h2>最多上传9张</h2>
        <div class="img">
          <AiUploader v-model="form.images" :limit="9" multiple/>
        </div>
        <div class="topic">
          <h3 @click="isShow = true">#绑定话题</h3>
          <div class="choosed">
            <span>#闲置物品交易</span>
          </div>
          <p>绑定一个与您发布内容相关很高的话题，会被更多人看到哦。</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <h2>仅本社区可见</h2>
      <switch color="#2D7DFF" checked></switch>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="submit">发布服务</div>
    </div>
    <u-popup v-model="isShow" mode="bottom" hidden height="700rpx" border-radius="30">
			<div class="popup">
        <h2>请选择</h2>
        <scroll-view class="popup-list" scroll-y>
          <div v-for="(item, index) in 20" :key="index">#闲置物品交易</div>
        </scroll-view>
      </div>
		</u-popup>
  </div>
</template>
<script>
  export default {
    name: 'Add',
    appName: '发新贴',

    data () {
      return {
        form: {
          images: []
        },
        isShow: false
      }
    },

    onLoad() {
    },

    methods: {
    }
  }
</script>

<style scoped lang="scss">
  .Add {
    padding: 24px 0 130px;

    & > div {
      background: #fff;
    }

    .popup {
      height: 700px;
      border-radius: 20px 20px 0 0;

      h2 {
        height: 98px;
        line-height: 98px;
        text-align: center;
        color: #333333;
        font-size: 34px;
        font-weight: 600;
      }

      .popup-list {
        height: calc(100% - 98px);

        div {
          padding: 20px 48px;
          color: #333333;
          font-size: 30px;
        }
      }
    }

    div {
      box-sizing: border-box;
    }

    .add-content {
      margin-bottom: 24px;

      & > .top {
        padding: 32px;
        border-bottom: 1px solid #eee;

        textarea {
          width: 100%;
          height: 300px;
        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 14px;

          div {
            display: flex;
            align-items: center;
          }

          i {
            font-size: 24px;
            color: #666666;
          }

          span {
            font-size: 24px;
            color: #999999;
          }
        }
      }

      & > .bottom {
        padding: 32px 32px;

        h2 {
          margin-bottom: 16px;
          font-size: 24px;
          color: #999;
        }

        .topic {
          h3 {
            width: 134px;
            height: 52px;
            line-height: 52px;
            margin-bottom: 12px;
            text-align: center;
            border: 1px solid #999;
            border-radius: 26px;
            color: #666;
            font-size: 22px;
          }

          p {
            font-size: 20px;
            color: #999999;
          }

          .choosed {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 52px;
            padding: 0 16px;
            width: fit-content;
            margin-bottom: 12px;
            border: 1px solid #2D7DFF;
            border-radius: 26px;
            font-size: 22px;
            color: #2D7DFF;
          }
        }
      }
    }

    & > .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 98px;
      padding: 0 32px;

      h2 {
        font-size: 28px;
        color: #333333;
      }
    }
  }
</style>
