<template>
  <section class="add_Party" :class="{isDetail:!isEdit}">
    <ai-detail>
      <ai-title slot="title" :title="detailTitle" isShowBottomBorder isShowBack @onBackClick="$emit('back')">
        <!--        <template #rightBtn v-if="$route.query.id&&!isEdit">-->
        <!--          <el-button size="small" type="primary" icon="iconfont iconEdit"-->
        <!--                     @click="$router.push({...$route,hash:'#add'})">编辑-->
        <!--          </el-button>-->
        <!--          <el-button size="small" icon="iconfont iconDelete" type="danger" plain-->
        <!--                     @click="handleDelete($route.query.id)">删除-->
        <!--          </el-button>-->
        <!--        </template>-->
      </ai-title>
      <template #content>
        <div class="detail-content" v-if="isEdit">
          <el-form :model="form" label-width="120px" ref="ruleForm" :rules="rules">
            <el-form-item label="标题" prop="title">
              <el-input size="small" v-model="form.title" clearable placeholder="请输入..." maxlength="100"
                        show-word-limit/>
            </el-form-item>
            <el-form-item label="类型" prop="style">
              <ai-select v-model="form.style" :selectList="dict.getDict('partyEducationType')" @change="handleChange"/>
            </el-form-item>
            <el-form-item label="发布组织" prop="organizationName">
              <el-input size="small" v-model="form.organizationName" clearable placeholder="请输入..." maxlength="100"
                        show-word-limit/>
            </el-form-item>
<!--            <el-form-item label="音频" prop="audioUrl" v-if="['0','1'].includes(form.style)">-->
<!--              <el-input v-model="form.audioUrl" placeholder="请输入..." size="small"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="正文" prop="content">
              <ai-editor v-model="form.content" :instance="instance"/>
            </el-form-item>
            <el-form-item label="缩略图">
              <ai-uploader
                :instance="instance"
                v-model="form.thumbUrl"
                :limit="1"
                :cropOps="cropOps"
                is-crop>
                <template slot="tips">图片比例：1.6：1</template>
              </ai-uploader>
            </el-form-item>
            <el-form-item label="发布日期" prop="publishDate" v-if="form.style==2">
              <el-date-picker
                size="small"
                v-model="form.publishDate"
                placeholder="请选择"
                type="date"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <!--详情-->
        <div class="village_detail" v-else>
          <div class="village_title">
            <h3>{{ form.title }}</h3>
            <el-row type="flex" justify="space-between">
             <el-col :span="8" style="font-size: 14px;color: #333333">
               类型：{{dict.getLabel('partyEducationType',form.style)}}
             </el-col>
             <el-col :span="8" style="font-size: 14px;color: #333333">
               发文组织：{{form.organizationName}}
             </el-col>
             <el-col :span="8" style="font-size: 14px;color: #333333">
               <span v-if="form.publishDate">发文日期：{{form.publishDate}}</span>
             </el-col>
            </el-row>
          </div>
          <img class="cover" :src="form.thumbUrl[0].url" v-if="form.thumbUrl && form.thumbUrl.length">
          <div class="village_cont" v-html="form.content"/>
        </div>
      </template>
      <template #footer v-if="isEdit">
        <el-button size="small" @click="$emit('back')">取消</el-button>
        <el-button type="primary" size="small" @click="saveAdd(0)">保存</el-button>
        <el-button type="primary" size="small" @click="saveAdd(1)">保存并发布</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
  export default {
    name: "partyAdd",
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      row: Object,
      isEdit: Boolean,
    },
    computed: {
      detailTitle() {
        return this.isEdit ? '编辑党史教育' : '党史教育详情'
      }
    },
    data() {
      return {
        form: {
          organizationName: '',
          // audioUrl: "",
          publishDate: "",
          title: '',
          style: '',
          content: '',
          thumbUrl: []
        },
        rules: {
          title: [{required: true, message: "请填写标题"}],
          style: [{required: true, message: "请选择类型", trigger: "change"}],
          organizationName: [{required: true, message: "请输入发布组织"}],
          content: [{required: true, message: "请输入正文"}],
          publishDate: [{required: true, message: "请选发布日期", trigger: "change"}],
        },
        isDetail: true,
        count: 0,
        cropOps: {
          width: "336px",
          height: "210px"
        }
      }
    },
    methods: {
      handleChange(e) {
        if (e == 1 || e == 2) {
          this.form.publishDate = "";
        }
        // if (e == 2) {
        //   this.form.audioUrl == "";
        // }
      },
      // 保存
      saveAdd(status) {
        this.$refs.ruleForm.validate(v => {
          if (v) {
            this.instance.post('/app/apppartyeducation/addOrUpdate', {
              ...this.form,
              status,
              thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{
                url: this.form.thumbUrl[0].url
              }]) : ''
            }).then((res) => {
              if (res && res.code == 0) {
                this.row?.id ? this.$message.success('修改成功') : this.$message.success('添加成功');
                this.$emit("back");
              }
            })
          }
        })
      },
      // 详情
      checkDetaiList(id) {
        id && this.instance.post('/app/apppartyeducation/queryDetailById', null, {
          params: {id}
        }).then((res) => {
          if (res?.data) {
            this.form = res.data;
            this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
          }
        })
      },
      handleDelete(ids) {
        this.$confirm('确定删除该文章吗').then(() => {
          this.instance.post('/app/apppartyhistory/delete', null, {
            params: {ids}
          }).then(res => {
            if (res?.code == 0) {
              this.isAdd = false;
              this.isDetailEdit = false;
              this.$message.success('删除成功');
            }
          })
        })
      },
    },
    created() {
      this.dict.load('partyEducationType')
      this.checkDetaiList(this.row?.id);
    },
  }
</script>

<style scoped lang="scss">
  .cover {
    display: block;
    width: 300px;
    height: 140px;
    margin: 20px auto;
  }

  .add_Party {
    height: 100%;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;

    .detail-content {
      padding-bottom: 80px;
    }

    .el-form {
      width: 760px;
      margin: 18px auto 64px;
      // overflow-x: auto;
      // overflow-y: auto;
      padding-right: 3px !important;

      .el-form-item {
        margin-bottom: 18px;
      }

      .upload-tip {
        position: absolute;
        text-align: left;
        left: 100px;
        top: 5px;

        li {
          color: #888;
          font-size: 12px;
          line-height: 14px;
        }

        b {
          color: red;
          font-size: 14px
        }
      }
    }

    .village_detail {
      margin-top: 16px;
      width: 760px;
      overflow-y: auto;
      border: 1px solid #eee;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      background: #fff;

      .village_title {
        padding: 24px;
        border-bottom: 1px solid #eee;

        h3, p {
          text-align: center;
        }
      }

      .village_file {
        display: flex;
        border-bottom: 1px solid #eee;
        padding: 8px 20px;

        span {
          width: 60px;
        }

        div {
          flex: 1;
        }

        .fileSty {
          color: #999;
          font-size: 14px;
          cursor: pointer;
          margin-bottom: 4px;
        }

        .fileSty:hover {
          color: #5088FF;
        }
      }

      .village_cont {
        flex: 1;
        padding: 30px 20px;
      }
    }

    &.isDetail {
      ::v-deep .ai-detail__content {
        background: #f3f6f9;
      }
    }
  }
</style>
