<template>
  <view class="container edit_Special_Column">
    <view class="set-up-info">
      <view class="info-name info-box">
        <text class="seting-txt">编辑专栏</text>
        <input v-model="columnName" placeholder="请输入专栏名称（最多12个字）" />
        <input v-model="columnNickname" placeholder="请输入昵称（最多12个字）" />
      </view>
      <view class="set-up-lable info-box">
        <view class="top-box">
          <view class="lable-txt">
            专栏标签
            <text>（选填）</text>
          </view>
          <view v-if="columnLableList.length < 6" class="new-lable" @click="addlableShow = true">+ 新建标签</view>
        </view>
        <view class="column-lable">
          <view class="lable-item" v-for="(item, index) in columnLableList" :key="index">
            <text>{{ item }}</text>
            <van-icon name="cross" @click="deleteLablehandle(index)" />
          </view>
        </view>
      </view>
      <view class="set-up-info info-box" style="height: 480rpx">
        <view class="lable-txt"> 专栏介绍 </view>
        <u-input :maxlength="30" v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
      </view>
      <view class="my-btn" @click="infoDetermineHandler"> 保存</view>
    </view>
    <u-modal
      v-model="addlableShow"
      :show-title="false"
      show-cancel-button
      confirm-text="确定"
      cancel-text="取消"
      :content-style="{ fontSize: '32rpx' }"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
      @confirm="confirmModal"
      @cancel="cancelModal"
    >
      <view class="slot-content slot-content-text">
        <text class="add-lable-txt">新建标签</text>
        <input v-model="addLableName" placeholder="请输入标签名称（最多8个字）" />
      </view>
    </u-modal>
  </view>
</template>

<script>
import { purchaserApi, uploadurl } from "@/config/api";

export default {
  data() {
    return {
      specialList: [], // 专栏列表
      mySpecialList: [], // 专栏列表
      isAuthor: false, // 是否是作者
      authorDetail: {}, // 作者的详情信息
      tabActive: "1",
      addlableShow: false,
      columnName: "",
      columnNickname: "",
      columnIntroduce: "",
      columnLableList: [],
      addLableName: "",
      isEditInfo: true,
    };
  },
  methods: {
    // 添加标签的确认事件
    confirmModal() {
      if (!this.addLableName) return this.$util.toast("未添加标签");
      this.columnLableList.push(this.addLableName.slice(0, 8));
      this.addLableName = "";
    },
    // 添加标签的取消事件
    cancelModal() {
      this.addLableName = "";
    },
    async getAuthorDetail() {
      const res = await purchaserApi.yanxuanSpecialAuthorDetail();
      if (res.Ret === 200) {
        this.authorDetail = res.Data || {};
        this.editColumnHandler();
      }
    },
    // 信息填写完成 进入我的专栏
    async infoDetermineHandler() {
      if (this.columnName && this.columnNickname && this.columnIntroduce) {
        const res = await purchaserApi.yanxuanSpecialAuthorSave({
          SpecialName: this.columnName.slice(0, 12),
          NickName: this.columnNickname.slice(0, 12),
          Introduction: this.columnIntroduce,
          Label: this.columnLableList.join(","),
          UserId: this.authorDetail.UserId,
        });
        if (res.Ret === 200) {
          uni.navigateBack();
        }
      } else {
        let str = !this.columnName ? "专栏名称" : !this.columnNickname ? "专栏昵称" : !this.columnIntroduce ? "专栏介绍" : "";
        this.$util.toast("请输入" + str);
      }
    },
    // 删除新建标签
    deleteLablehandle(index) {
      this.columnLableList.splice(index, 1);
    },
    // 编辑专栏
    editColumnHandler() {
      this.columnName = this.authorDetail.SpecialName;
      this.columnNickname = this.authorDetail.NickName;
      this.columnIntroduce = this.authorDetail.Introduction;
      this.columnLableList = this.authorDetail.Label ? this.authorDetail.Label.split(",") : [];
      this.isEditInfo = false;
    },
  },
  onLoad() {
    this.getAuthorDetail();
  },
};
</script>

<style lang="scss" scoped>
.edit_Special_Column {
  background-color: $uni-bg-color;
  input {
    height: 72rpx;
    background-color: #f0f1f3;
    padding-left: 24rpx;
    border-radius: 12rpx;
  }
  .tab-content {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    margin-top: 1rpx;
    background-color: #fff;
    height: 96rpx;
    display: flex;
    view {
      flex: 1;
      text-align: center;
      line-height: 96rpx;
      border-bottom: 2rpx solid #e7e7e7;
    }
    .item {
      position: relative;
      .line-active {
        position: absolute;
        left: 50%;
        bottom: 0rpx;
        width: 32rpx;
        height: 6rpx;
        border-radius: 6rpx;
        background-color: #376cbb;
        transform: translateX(-50%);
      }
    }
  }
  .item-ul {
    padding: 30rpx;
    .item-li {
      padding: 0 30rpx 30rpx;
      background-color: white;
      border-radius: 16rpx;
      border-top: 10rpx solid #8fa4c4;
      margin-bottom: 20rpx;
      .item-title {
        margin-top: 20rpx;
        font-size: 34rpx;
        font-weight: 500;
      }
      .item-name-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        font-size: 28rpx;
        color: #999;
        .name {
          display: flex;
          align-items: center;
          image {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
      }
      .item-content {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }
    }
  }
  .set-up-info {
    padding: 30rpx;
    overflow: hidden;
    .info-name {
      width: 100%;
      padding: 40rpx;
      border-radius: 16rpx;
      color: #333;
      background-color: #fff;
      .seting-txt {
        text-align: center;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
      }
      .item-txt {
        margin-top: 40rpx;
        margin-bottom: 5rpx;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
      }
      input {
        margin-top: 40rpx;
      }
    }
    .set-up-lable {
      .top-box {
        display: flex;
        background-color: #fff;
        justify-content: space-between;

        .new-lable {
          color: #376cbb;
        }
      }
    }
    .lable-txt {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      display: flex;
      text {
        color: #999;
        flex-wrap: 400;
      }
    }
    .info-box {
      padding: 40rpx;
      border-radius: 16rpx;
      color: #333;
      background-color: #fff;
      margin-bottom: 30rpx;
    }
    .ipt {
      height: 300rpx;
    }
  }
  .u-input {
    margin-top: 10rpx;
    background-color: #f0f1f3;
  }
  .u-input__textarea {
    padding: 20rpx !important;
  }
  .my-btn {
    margin: 50rpx 0;
    width: 100%;
    height: 72rpx;
    padding: 18rpx 30rpx 18rpx 30rpx;
    border-radius: 9rpx;
    background: #376cbb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .add-lable-txt {
    color: #000;
    font-size: 36rpx;
    flex-wrap: 600;
    margin-bottom: 20rpx;

    width: 100%;
    text-align: center;
  }
  .column-lable {
    display: flex;
    flex-wrap: wrap;
    .lable-item {
      display: flex;
      color: #fff;
      font-size: 28rpx;
      padding: 10rpx 24rpx;
      background-color: #376cbb;
      border-radius: 153px;
      margin: 20rpx 20rpx 0 0;
      text {
        margin-right: 12rpx;
      }
    }
  }
  .slot-content-text {
    text-align: left;
  }
  .write-note-button {
    position: fixed;
    width: 100%;
    bottom: 10rpx;
    left: 0rpx;
    z-index: 99;
    display: flex;
    padding: 0 35rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .draft {
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 216rpx;
      height: 72rpx;
      color: #376cbb;
      background-color: #e5efff;
      border-radius: 9rpx;
    }
    .release {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 72rpx;
      border-radius: 9rpx;
      color: #ffff;
      background-color: #376cbb;
    }
  }
  .column-list-content {
    margin-top: 20rpx;
  }
}
</style>