<template>
  <div class="container add-edit-release-audio">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      width="568px"
      :title="dlgTitle"
      :visible.sync="addEditdialogReleaseAudio"
      customClass="add-edit-video-dlg"
      :before-close="cancelHandle"
    >
      <div>
        <el-form :model="addEditAudio" :rules="rules" ref="ruleFormAudio" class="demo-ruleForm">
          <el-form-item prop="audioName">
            <div style="display: flex; justify-content: space-between">
              <el-input style="width: 75%" clearable placeholder="请上传音频" v-model="addEditAudio.audioName"></el-input>
              <el-upload class="upload-demo" action="" :show-file-list="false" :http-request="handleUploadAudio" accept="audio/*" :file-list="fileListAudio">
                <el-button type="primary" :loading="startUpload">上传音频</el-button>
              </el-upload>
              <el-progress type="circle" :percentage="percentage" width="40" style="margin-left: 10px" v-if="startUpload"></el-progress>
            </div>
          </el-form-item>
          <el-form-item prop="industryId">
            <el-select style="width: 100%" placeholder="请选择行业" v-model="addEditAudio.industryId" clearable @change="selectChangeHandle">
              <el-option
                v-for="item in chartPermissionList.filter((item) => item.PermissionName != '宏观' && item.PermissionName != '策略' && item.PermissionName != '研选订阅')"
                :label="item.PermissionName"
                :key="item.ChartPermissionId"
                :value="item.ChartPermissionId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="addEditAudio.property" multiple placeholder="请选择产业（可多选）" clearable filterable style="width: 100%" @focus="industrySelectFocus">
              <el-option :label="item.PermissionName" :value="item.ChartPermissionId" v-for="item in selectedIndustryArr" :key="item.ChartPermissionId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="cover-content" style="margin: 10px 0" v-if="this.addEditAudio.industryId && defaultImage">
        <span class="text" style="width: 46px; text-align: right">封面：</span>
        <div class="img-content">
          <img :src="defaultImage" alt="" />
          <div class="modify" @click="modifyImgHandler">修改</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmSubmit(1)">确定</el-button>
        <el-button @click="cancelHandle">取消</el-button>
      </span>
    </el-dialog>
    <modify-img-dlg :modifyImgVisible.sync="modifyImgVisible" :videoAndVoiceList.sync="videoAndVoiceList" />
  </div>
</template>

<script>
import { raiInterface, resourceVoiceupload, raiVideoApi } from "@/api/api.js";
import ModifyImgDlg from "../../components/addComopnents/modifyImgDlg.vue";
export default {
  name: "",
  components: { ModifyImgDlg },
  props: {
    addEditdialogReleaseAudio: {
      type: Boolean,
      default: false,
    },
    chartPermissionList: {
      type: Array,
      default: [],
    },
    playDetailsList: {
      default: {},
      type: Object,
    },
  },
  watch: {
    "playDetailsList.AskserieVideoId": {
      handler(newVal) {
        newVal && newVal > 0 && this.askserieVideoDetail();
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      addEditAudio: {
        audioName: "", //音频名称
        industryId: "", //行业id
        property: "", //产业名称
        audioUrl: "", //视频链接
        AudioSeconds: "", //时长
      },
      rules: {
        // audioName: [{ required: true, message: "请上传音频", trigger: "blur" }],
        industryId: [{ required: true, message: "请选择行业", trigger: "change" }],
      },
      industryArr: [],
      selectedIndustryArr: [],
      percentage: 0,
      startUpload: false, //开始上传
      fileListAudio: [],
      videoAndVoiceList: [],
      defaultImage: [],
      modifyImgVisible: false,
      defaultImage: "",
      shareImg: "",
      dlgTitle: "发布问答",
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /* 获取全部的行业 前的判断 */
    industrySelectFocus() {
      if (!this.addEditAudio.industryId) {
        this.$message.error("请先选择行业");
      }
    },
    // 行业更改
    selectChangeHandle(value) {
      this.addEditAudio.property = "";
      value ? this.getIndustry(value) : (this.selectedIndustryArr = []);
      value && this.getVideoAndImg();
    },
    /* 获取选择的行业 */
    getIndustry(industryId) {
      if (this.industryArr.length) {
        this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
        return;
      }
      raiInterface.getListIndustrial().then((res) => {
        if (res.Ret === 200) {
          this.industryArr = res.Data.List || [];
          this.selectedIndustryArr = this.industryArr.filter((item) => item.ChartPermissionId == industryId)[0].List;
        }
      });
    },
    //保存或发布
    confirmSubmit(type) {
      this.$refs.ruleFormAudio.validate(async (valid) => {
        if (valid) {
          if (!this.fileListAudio[0].url) return this.$message.error("请上传音频");
          if (!this.addEditAudio.audioName) return this.$message.error("请输入音频名称");
          let ChartPermissionName = "";
          this.chartPermissionList.forEach((item) => {
            if (item.ChartPermissionId == this.addEditAudio.industryId) {
              ChartPermissionName = item.PermissionName;
            }
          });
          const res = await raiVideoApi.askseriePreserveAndEdit({
            AskserieVideoId: this.playDetailsList.AskserieVideoId ? this.playDetailsList.AskserieVideoId : 0,
            VideoName: this.addEditAudio.audioName,
            ChartPermissionId: this.addEditAudio.industryId,
            ChartPermissionName,
            IndustrialManagementIds: this.addEditAudio.property ? this.addEditAudio.property.join(",") : "",
            VideoUrl: this.addEditAudio.audioUrl,
            VideoDuration: this.addEditAudio.AudioSeconds + "",
            BackgroundImg: this.defaultImage,
            ShareImg: this.shareImg,
          });
          if (res.Ret === 200) {
            this.$message.success("添加成功");
            this.cancelHandle();
            this.$parent.getVideoList();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 上传音频
    async handleUploadAudio(e) {
      this.startUpload = true;
      let form = new FormData();
      form.append("file", e.file);
      const res = await resourceVoiceupload(form);
      if (res.Ret === 200) {
        let obj = {
          name: res.Data.ResourceName,
          url: res.Data.ResourceUrl,
          PlaySeconds: res.Data.PlaySeconds,
        };
        this.addEditAudio.audioName = res.Data.ResourceName; //音频名称
        this.addEditAudio.audioUrl = res.Data.ResourceUrl; //视频链接
        this.addEditAudio.AudioSeconds = res.Data.PlaySeconds; //时长
        this.fileListAudio = [obj];
      }
      this.startUpload = false;
    },
    // 封面图
    async getVideoAndImg(isOne = "") {
      const res = await raiInterface.video_and_voiceImgActivityVideo({
        ChartPermissionId: this.addEditAudio.industryId,
      });
      if (res.Ret === 200) {
        isOne == "修改" ? "" : ((this.defaultImage = res.Data.List[0].ImgUrl), (this.shareImg = res.Data.List[0].ShareImg));
        this.videoAndVoiceList = res.Data.List;
      }
    },
    // 点击修改图片的弹框
    modifyImgHandler() {
      this.getVideoAndImg("修改");
      this.modifyImgVisible = true;
    },
    cancelHandle() {
      this.$refs.ruleFormAudio.resetFields();
      this.addEditAudio = {
        audioName: "", //音频名称
        industryId: "", //行业id
        property: "", //产业名称
        audioUrl: "", //视频链接
        AudioSeconds: "", //时长
      };
      this.fileListAudio = [];
      this.defaultImage = "";
      this.shareImg = "";
      this.dlgTitle = "发布问答";
      this.$emit("update:addEditdialogReleaseAudio", false);
      this.$emit("update:playDetailsList", {});
    },
    // 获取详情
    async askserieVideoDetail() {
      const res = await raiVideoApi.askserieVideoDetail({
        AskserieVideoId: this.playDetailsList.AskserieVideoId,
      });
      if (res.Ret === 200) {
        this.dlgTitle = "编辑";
        let { Detail } = res.Data;
        this.getIndustry(Detail.ChartPermissionId);
        let str = [];
        Detail.ListIndustrial &&
          Detail.ListIndustrial.forEach((item) => {
            str.push(item.IndustrialManagementId);
          });
        this.addEditAudio = {
          audioName: Detail.VideoName, //音频名称
          industryId: Detail.ChartPermissionId, //行业id
          property: str, //产业名称
          audioUrl: Detail.VideoUrl, //视频链接
          AudioSeconds: Detail.VideoDuration, //时长
        };
        this.defaultImage = Detail.BackgroundImg;
        this.shareImg = Detail.ShareImg;
        let obj = {
          name: Detail.VideoName,
          url: Detail.VideoUrl,
          PlaySeconds: Detail.VideoDuration,
        };
        this.fileListAudio = [obj];
      }
    },
  },
};
</script>
<style lang="scss">
.add-edit-release-audio {
  .add-edit-video-dlg {
    .el-input {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.add-edit-release-audio {
  display: flex;
  justify-content: space-between;
  .cover-content {
    display: flex;
    // align-items: stretch;
    // vertical-align: bottom;
    .img-content {
      position: relative;
      height: 200px;
      width: 200px;
      border: 1px solid #ccc;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .modify {
      position: absolute;
      bottom: 0;
      right: -50px;
      height: 20px;
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>
