<template>
  <ai-detail class="Add">
    <template slot="title">
      <ai-title :title="params.id ? '编辑轮播图片' : '添加轮播图片'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
        <ai-card title="基本信息">
          <template #content>
            <!-- 首页封面 -->
            <el-form-item label="首页封面" prop="imgUrl">
              <ai-uploader v-model="dialogInfo.imgUrl" :instance="instance" :limit="1"></ai-uploader>
            </el-form-item>
            <!-- 活动名称 -->
            <el-form-item label="标题" prop="title">
              <el-input placeholder="请输入标题" :maxlength="30" show-word-limit v-model="dialogInfo.title"></el-input>
            </el-form-item>
            <!-- 连接类型 -->
            <el-form-item label="链接类型" prop="type">
              <ai-select v-model="dialogInfo.type" placeholder="请选择链接类型"
                        :selectList="$dict.getDict('bannerType')"></ai-select>
            </el-form-item>

            <el-form-item label="内容" prop="rtf" v-if="dialogInfo.type == 3">
              <ai-editor v-model="dialogInfo.rtf" :instance="instance" />
            </el-form-item>

            <!-- 链接 -->
            <el-form-item label="链接" prop="linkUrl" v-else>
              <el-input placeholder="请输入链接" v-model="dialogInfo.linkUrl"></el-input>
            </el-form-item>
          </template>
        </ai-card>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm()">确认</el-button>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'Add',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  data() {
    return {
      dialogInfo: {
        id: '',
        title: '',
        imgUrl: [],
        type: '',
        linkUrl: '',
      },
      formRules: {
        imgUrl: [{required: true, message: '请添加图片', trigger: 'change'}],
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        type: [{required: true, trigger: 'change', message: '请选择链接类型'}],
        rtf: [{ required: true, trigger: 'blur', message: '请输入内容' }]
      },
    }
  },

  created() {
    if (this.params && this.params.id) {
      this.getInfo()
    }
  },

  methods: {
    getInfo() {
      this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
        if (res.data) {
          this.dialogInfo = res.data
          this.dialogInfo.imgUrl = [{url: res.data.imgUrl}]
        }
      })
    },

    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appbanner/addOrUpdate`, {
            ...this.dialogInfo,
            imgUrl: this.dialogInfo.imgUrl[0].url,
          }).then(res => {
            if (res?.code == 0) {
              this.$message.success(this.params.id ? '编辑成功' : '新增成功')
              this.cancel(true)
            }
          })
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    }
  }
}
</script>

<style lang="scss">
// .el-tooltip__popper.is-dark {
//   max-width: 240px;
// }

// .AppAnnounceAdd {
//   .ai-detail__content {
//     .ai-detail__content--wrapper {
//       position: relative;
//       max-width: 100%;
//       margin: 0;
//       height: 100%;
//       overflow: hidden;
//     }
//   }

//   .ai-form {
//     textarea {
//       border-radius: 4px 4px 0 0!important;
//     }
//   }

//   * {
//     box-sizing: border-box;
//   }

//   .add {
//     display: flex;
//     flex-direction: column;
//     padding: 14px 16px;
//     background: #F9F9F9;
//     border-radius: 0px 0px 4px 4px;
//     border: 1px solid #D0D4DC;
//     border-top: none;

//     .add-item {
//       display: flex;
//       align-items: center;
//       line-height: 1;
//       cursor: pointer;

//       &:hover {
//         opacity: 0.6;
//       }

//       img {
//         width: 20px;
//         height: 20px;
//         margin-right: 2px;
//       }

//       span {
//         color: #222;
//         font-size: 14px;
//       }
//     }

//     .fileList {
//       margin-bottom: 12px;

//       .add-item {
//         justify-content: space-between;
//         margin-bottom: 8px;

//         .left {
//           display: flex;
//           align-items: center;
//         }

//         i {
//           font-size: 14px;
//           cursor: pointer;
//           font-style: normal;
//           color: red;

//           &:hover {
//             opacity: 0.6;
//           }
//         }

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

//   .AppAnnounceDetail-container {
//     display: flex;
//     position: relative;
//     height: 100%;
//     padding: 0 20px;
//     overflow: auto;
//     overflow: overlay;

//     .left {
//       flex: 1;
//       margin-right: 20px;
//     }

//     .right {
//       position: sticky;
//       top: 0;
//     }

//     .AppAnnounceDetail-select {
//       display: flex;
//       align-items: center;
//       min-height: 32px;
//       line-height: 1;
//       background: #F5F5F5;
//       border-radius: 4px;
//       border: 1px solid #D0D4DC;
//       cursor: pointer;
//       overflow: hidden;
//       transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

//       &:hover {
//         border-color: #26f;
//       }

//       & > i {
//         flex: 1;
//         height: 100%;
//         line-height: 32px;
//         padding: 0 12px;
//         color: #888888;
//         font-size: 14px;
//         font-style: normal;
//         border-right: 1px solid #D0D4DC;
//         background: #fff;
//       }

//       .AppAnnounceDetail-select__input {
//         position: absolute;
//         left: 0;
//         top: 0;
//         z-index: -1;
//         opacity: 0;
//         height: 100%;
//       }

//       .select-right {
//         height: 100%;
//         padding: 0 12px;
//         color: #222222;
//         font-size: 12px;
//         cursor: pointer;
//         transition: all ease 0.3s;

//         &:hover {
//           opacity: 0.5;
//         }
//       }

//       .select-left {
//         display: flex;
//         flex-wrap: wrap;
//         flex: 1;
//         padding: 5px 0 0px 12px;
//         border-right: 1px solid #D0D4DC;
//         border-radius: 4px 0 0 4px;
//         background: #fff;

//         em {
//           height: 22px;
//           line-height: 22px;
//           margin: 0 4px 5px 0;
//           color: #222222;
//           font-size: 12px;
//           font-style: normal;
//         }

//         span {
//           height: 22px;
//           line-height: 22px;
//           margin: 0 4px 5px 0;
//           padding: 0 8px;
//           font-size: 12px;
//           color: #222222;
//           background: #F3F4F7;
//           border-radius: 2px;
//           border: 1px solid #D0D4DC;
//         }
//       }
//     }
//   }

//   .tips {
//     display: flex;
//     align-items: center;
//     font-size: 14px;
//     color: #222222;

//     span {
//       margin: 0 3px;
//       color: #2266FF;
//     }

//     i {
//       color: #8899bb;
//     }

//     em {
//       line-height: 20px;
//       margin-top: 8px;
//       color: #888888;
//       font-size: 12px;
//       font-style: normal;
//     }
//   }
// }
</style>
