<template>
  <!-- 路演精华添加/编辑 -->
  <div class="add-roadshow">
    <el-card>
      <el-form :model="listForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="title">
              <el-input placeholder="请输入标题" v-model="listForm.title" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="author">
              <el-input placeholder="请输入作者" v-model="listForm.author" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="time">
              <el-date-picker v-model="listForm.time" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px" :gutter="24">
          <el-col :span="12">
            <el-form-item prop="industry">
              <el-select v-model="listForm.industry" value-key="ChartPermissionId" clearable placeholder="请选择行业" @change="industryClear" @clear="industryClear">
                <el-option v-for="item in optionsIndustry" :key="item.ChartPermissionId" :label="item.PermissionName" :value="item.ChartPermissionId"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="property">
              <el-select v-model="listForm.property" value-key="IndustrialManagementId" multiple placeholder="请选择所属产业" @focus="getPropertyList" @remove-tag="propertyClear">
                <el-option v-for="item in optionsProperty" :key="item.IndustrialManagementId" :label="item.IndustryName" :value="item.IndustrialManagementId"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="property">
              <el-select v-model="listForm.target" multiple placeholder="请选择关联标的" @focus="getTargetList">
                <el-option v-for="item in optionsTarget" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.IndustrialSubjectId"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="margin-top: 10px">
          <el-input type="textarea" :rows="4" placeholder="请输入摘要" v-model="listForm.abstract"> </el-input>
        </div>
        <div style="margin: 30px 0">
          <RichText ref="twoRich" :isText="contentValue" />
        </div>
        <div class="content-link">
          <div class="txt">报告链接：</div>
          <div class="input">
            <el-input placeholder="请输入报告链接" v-model="listForm.reportLink" />
          </div>
        </div>
      </el-form>
      <div class="more-button">
        <el-button type="primary" @click="confirm('预览')">预览</el-button>
        <el-button type="primary" @click="confirm('保存')">保存</el-button>
        <el-button v-if="isShowStatus" type="primary" @click="confirm('发布')">发布</el-button>
        <el-button type="" @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import RichText from "./richText.vue";

import { raiInterface } from "@/api/api.js";
import { async } from "@antv/x6/lib/registry/marker/main";
export default {
  name: "",
  components: { RichText },
  props: {},
  data() {
    return {
      listForm: {
        title: "", //标题
        author: "", //作者
        time: "", //时间
        industry: "", //行业
        property: [], //产业
        target: [], //标的
        abstract: "",
        reportLink: "",
      },
      property: [],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
        time: [{ required: true, message: "请输入标题", trigger: "change" }],
        industry: [{ required: true, message: "请选择行业", trigger: "change" }],
        property: [{ required: true, message: "请选择所属产业", trigger: "change" }],
        target: [{ required: true, message: "请选择关联标的", trigger: "change" }],
      },
      optionsIndustry: [],
      optionsProperty: [],
      optionsTarget: [],
      contentValue: "请输入内容",
      propertyDetai: [],
      isShowStatus: true,
      timeInterval: null,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getIndustryList();
    if (this.$route.query.id) {
      this.getDetail();
    } else {
      this.dataInit();
    }
  },
  methods: {
    // 报告的缓存处理数据
    dataInit() {
      if (sessionStorage.getItem("addRoadshowReportQY")) {
        let data = JSON.parse(sessionStorage.getItem("addRoadshowReportQY"));
        setTimeout(async () => {
          this.listForm = {
            title: data.Title, //标题
            author: data.SellerAndMobile, //作者
            time: data.PublishDate, //时间
            industry: data.ChartPermissionId, //行业
            abstract: data.Abstract,
            reportLink: data.ReportLink,
            property: data.IndustrialManagementId,
            target: data.IndustrialSubjectIdStr,
          };
          this.$refs.twoRich.value = data.Body;
          if (this.listForm.industry) {
            await this.getPropertyList();
            await this.getTargetList();
          }
        }, 200);
      }
      this.timeInterval = setInterval(() => {
        let params = {
          Abstract: this.listForm.abstract,
          Body: this.$refs.twoRich.value,
          ChartPermissionId: this.listForm.industry,
          IndustrialManagementId: this.listForm.property,
          IndustrialSubjectIdStr: this.listForm.target,
          ReportLink: this.listForm.reportLink,
          PublishDate: this.listForm.time,
          SellerAndMobile: this.listForm.author,
          Title: this.listForm.title,
        };
        sessionStorage.setItem("addRoadshowReportQY", JSON.stringify(params));
      }, 120000);
    },
    // 获取数据
    async getDetail() {
      const res = await raiInterface.roadshowEssenceDetail({ ArticleId: Number(this.$route.query.id) });
      if (res.Ret === 200) {
        this.isShowStatus = res.Data.PublishStatus == 0;
        this.listForm = {
          title: res.Data.Title, //标题
          author: res.Data.SellerAndMobile, //作者
          time: res.Data.PublishDate, //时间
          industry: res.Data.ChartPermissionId > 0 ? res.Data.ChartPermissionId : "", //行业
          abstract: res.Data.Abstract,
          reportLink: res.Data.ReportLink,
          property: res.Data.IndustrialManagementId ? res.Data.IndustrialManagementId.split(",").map((item) => Number(item)) : [],
          target: res.Data.IndustrialSubjectIdStr ? res.Data.IndustrialSubjectIdStr.split(",").map((item) => Number(item)) : [],
        };
        this.$refs.twoRich.value = res.Data.Body;
        if (this.listForm.industry) {
          await this.getPropertyList();
          await this.getTargetList();
        }
      }
    },
    //获取行业
    async getIndustryList() {
      const res = await raiInterface.chartPermissionFirstHaveIco();
      if (res.Ret === 200) {
        this.optionsIndustry = res.Data.List || [];
      }
    },
    //获取产业
    async getPropertyList() {
      const str = this.listForm.industry;
      if (!str) return;
      const res = await raiInterface.getIndustrialManagement({ ChartPermissionId: str });
      if (res.Ret === 200) {
        this.optionsProperty = res.Data.List || [];
      }
    },
    //获取标的
    async getTargetList() {
      const str = this.listForm.property.join(",");
      if (!str) return;
      const res = await raiInterface.getindustrialSubjectlistIds({ IndustrialManagementIdStr: str });
      if (res.Ret === 200) {
        this.optionsTarget = res.Data.List || [];
      }
    },
    //保存 / 发布
    confirm: _.debounce(function (type) {
      this.$refs.ruleForm.validate(async (value) => {
        if (value) {
          let params = {
            Abstract: this.listForm.abstract,
            Body: this.$refs.twoRich.value,
            ChartPermissionId: this.listForm.industry,
            IndustrialManagementId: this.listForm.property.join(","),
            IndustrialSubjectIdStr: this.listForm.target.join(","),
            ReportLink: this.listForm.reportLink,
            PublishDate: this.listForm.time,
            SellerAndMobile: this.listForm.author,
            Title: this.listForm.title,
            DoType: type == "发布" ? 1 : 0,
            ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
          };
          if (type == "预览") {
            sessionStorage.setItem("roadShowPre", JSON.stringify(params));
            let { href } = this.$router.resolve({ name: "预览路演精华" });
            window.open(href, "_blank");
          } else {
            const res = await raiInterface.roadshowEssencePreserveAndPublish(params);
            if (res.Ret === 200) {
              this.$message.success(`${type}成功!`);
              this.$refs.ruleForm.resetFields();
              clearInterval(this.timeInterval);
              sessionStorage.removeItem("addRoadshowReportQY");
              this.$router.back();
            }
          }
        }
      });
    }, 500),
    industryClear() {
      this.listForm.property = [];
      this.optionsProperty = [];
      this.listForm.target = [];
      this.optionsTarget = [];
    },
    propertyClear() {
      this.listForm.target = [];
      this.optionsTarget = [];
    },
    //取消事件
    cancel() {
      clearInterval(this.timeInterval);
      sessionStorage.removeItem("addRoadshowReportQY");
      this.$refs.ruleForm.resetFields();
      this.$router.back();
    },
  },
  // 路由离开了 清除定时器
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timeInterval);
    next();
  },
};
</script>
<style lang="scss">
.add-roadshow {
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
  .content-link {
    display: flex;
    align-items: center;
    .txt {
      width: 92px;
      color: #333333;
      font-size: 16px;
    }
    .input {
      flex: 1;
    }
  }
  .more-button {
    width: 100%;
    text-align: center;
    margin: 60px 0 80px;
    .el-button {
      height: 40px;
      padding: 0 30px;
      margin-right: 20px;
    }
  }
}
</style>
