<template>
  <!-- 视图素材 -->
  <div calss="app-container">
    <el-button
      type="primary"
      @click="dialogCreateinfo = true"
      style="margin-bottom: 20px"
      >上传通用素材</el-button
    >
    <div class="content">
      <el-form class="content-flex" :inline="true">
        <el-form-item label="关联应用选择:">
          <el-select
            v-model="appId"
            placeholder="关联应用"
            filterable
            clearable
          >
            <el-option
              v-for="item in selectApps"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="素材分类">
          <el-select
            v-model="FormGetList.materialCategory"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in options2"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="素材来源">
          <el-select
            v-model="selCondition.materialSource"
            placeholder="请选择来源"
            @change="selMaterSourChange"
            multiple
            filterable
            clearable
          >
            <el-option
              v-for="item in materialSource"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="handlePersonVisible" class="fosno" label="编导">
          <el-select
            v-model="jobClassify.director"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in directorOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="handlePersonVisible" class="fosno" label="摄影">
          <el-select
            v-model="jobClassify.cameraman"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in photographOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="handlePersonVisible" class="fosno" label="剪辑">
          <el-select
            v-model="jobClassify.editor"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in editingOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="素材ID">
          <el-input
            v-model="selCondition.id"
            placeholder="请输入ID..."
          ></el-input>
        </el-form-item>
        <el-form-item label="入库时间:">
          <el-date-picker
            type="daterange"
            range-separator="-"
            :picker-options="pickerOptions2"
            v-model="dateTime"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <!-- 素材操作 -->
      <el-checkbox
        :indeterminate="isIndeterminated"
        v-model="checkAll"
        @change="handleCheckAllChange"
        class="left25"
        >全选当前筛选项</el-checkbox
      >
      <el-button
        type="primary"
        @click="fetchData()"
        style="margin-left: 25px"
      >查询</el-button
      >
      <el-button
        type="primary"
        @click="createMaterial"
        >创建素材组</el-button
      >
      <el-button class="left25" type="danger" @click="materialDel"
      >删除</el-button
      >
      <el-checkbox-group v-model="selectedAllList" class="Materia">
        <el-checkbox
          v-for="(item, index) in newGetList"
          ref="elCheckbox"
          id="MateriaCheck"
          class="MateriaCheck"
          :key="index"
          :label="item.id"
          @change="handleCheckedCitiesChange(item, index)"
        >
          <div class="Materiallist">
            <!-- id复制 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="点击复制ID"
              placement="top-start"
            >
              <el-link :underline="false" @click.stop="copyID(item)">
                ID:{{ item.id }}<i class="el-icon-copy-document"></i>
              </el-link>
            </el-tooltip>
            <input
              :id="item.id"
              type="text"
              value=""
              style="
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                z-index: -10;
                opacity: 0;
              "
            />

            <!-- 素材预览 -->
            <div @click="Preview(item, index)">
              <el-image
                class="Materiallist2"
                v-if="item.resType === 1"
                :src="item.url"
                fit="scale-down"
              ></el-image>

              <el-image
                class="Materiallist2"
                v-if="item.resType === 2"
                :src="item.optionCovers[5]"
                fit="scale-down"
              ></el-image>
              <i v-if="item.resType === 2" class="el-icon-video-play"></i>
            </div>
            <!-- 素材标签 -->
            <template v-for="(itm, idx) in materialSource">
              <div
                v-if="item.source == itm.value"
                :key="idx"
                class="material_label"
              >
                {{ itm.label }}
              </div>
            </template>
            <p class="Materiallist_text font_spacing">{{ item.datadate }}</p>
            <div class="MateriallistApplication">
              <p class="Materiallist_text font_overflow">
                {{ item.materialName }}
              </p>
            </div>
          </div>
        </el-checkbox>
      </el-checkbox-group>

      <!-- 分页 -->
      <el-pagination
        background
        :total="total"
        :page-size="size"
        :current-page="page"
        style="text-align: right; margin-top: 20px"
        layout="total, prev, pager, next, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>

    <!-- 图片预览弹窗-->
    <el-dialog
      :visible.sync="dialogFormImage"
      top="2vh"
      width="60%"
      title="图片预览"
      class="spacing"
      @close="closeStateDialog"
      center
    >
      <el-image
        :preview-src-list="srcImage"
        style="width: 600px; height: 600px"
        :src="previewImg"
      ></el-image>
      <!-- 外采和自拍素材 含有按钮 -->
      <template v-if="materialSourceDialog == 5 || materialSourceDialog == 6">
        <br />
        <el-button
          type="primary"
          style="width: 100%"
          @click="uploadRelatedMaterials"
          >上传素材</el-button
        >
      </template>
    </el-dialog>

    <!-- 素材详情抽屉 -->
    <el-drawer
      :visible.sync="dialogFormVideo"
      @close="closeVideoDialog"
      center
      :show-close="false"
    >
      <div>
        <video
          :src="Video"
          ref="videoRef"
          controls
          preload
          style="width: 35%"
        ></video>
      </div>
      <el-button type="primary" class="back" @click="dialogFormVideo = false"
        >返回</el-button
      >

      <div class="material-introduce col-start-start">
        <div>素材ID：{{ materialDetail.id }}</div>
        <div>素材名称：{{ materialDetail.materialName }}</div>
        <div>素材分类：{{ materialDetail.materialCategory }}</div>
        <div>入库时间：{{ materialDetail.createdAt }}</div>
        <div>投放时间：{{ materialDetail.updatedAt }}</div>
        <div>URL：{{ materialDetail.url }}</div>
        <el-button @click="download_video">下载</el-button>
      </div>
      <!-- 外采和自拍素材 含有按钮 -->
      <template v-if="materialSourceDialog == 5 || materialSourceDialog == 6">
        <br />
        <el-button
          type="primary"
          style="width: 35%"
          @click="uploadRelatedMaterials"
          >上传混剪素材</el-button
        >
      </template>
    </el-drawer>

    <!-- 上传素材弹窗 -->
    <el-dialog
      :visible.sync="dialogCreateinfo"
      :title="
        materialSourceDialog == 5 || materialSourceDialog == 6
          ? '上传混剪素材'
          : '上传通用素材'
      "
      top="2vh"
      @close="closeStateDialog"
      center
    >
      <el-form>
        <el-form-item :label-width="formLabelWidth" class="fosno">
          <el-button type="text" class="Bulletframe_text">
            上传通用素材
          </el-button>
          <el-form-item
            :label-width="formLabelWidth"
            class="fosno"
            label="素材分类"
          >
            <el-select
              v-model="formLabelAlign.materialCategory"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options2"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            class="fosno"
            label="关联应用"
          >
            <el-select
              v-model="formLabelAlign.appId"
              placeholder="关联应用"
              filterable
              clearable
              :disabled="materialSourceDialog == 5 || materialSourceDialog == 6"
            >
              <el-option
                v-for="item in selectApps"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            class="fosno"
            label="素材来源"
          >
            <!-- 上传混剪时的死数据 -->
            <template
              v-if="materialSourceDialog == 5 || materialSourceDialog == 6"
            >
              <el-select v-model="formLabelAlign.source" disabled>
                <el-option label="混剪素材" :value="7"> </el-option>
              </el-select>
            </template>
            <!-- 正常上传的数据 -->
            <el-select
              v-else
              v-model="formLabelAlign.source"
              placeholder="请选择来源"
              filterable
              clearable
            >
              <el-option
                v-for="item in uploadMaterialSource"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            label="素材定价"
            class="fosno"
            v-if="!(materialSourceDialog == 5 || materialSourceDialog == 6)"
          >
            <el-input-number
              style="width: 223px"
              v-model="formLabelAlign.price"
              :precision="2"
              :step="100"
              :min="0"
              placeholder="请输入定价"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            label="素材描述"
            class="fosno"
          >
            <el-input
              v-model="formLabelAlign.materialName"
              style="width: 223px"
              placeholder="请输入描述..."
            ></el-input>
          </el-form-item>

          <!-- 编导、摄影、剪辑 -->
          <el-form-item
            v-if="formLabelAlign.source == 6"
            class="fosno"
            label="编导"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="formLabelAlign.director"
              filterable
              placeholder="请选择"
            >
              <template v-for="(item, index) in directorOptions">
                <el-option
                  v-if="item.value"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="formLabelAlign.source == 6"
            class="fosno"
            label="摄影"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="formLabelAlign.cameraman"
              filterable
              placeholder="请选择"
            >
              <template v-for="(item, index) in photographOptions">
                <el-option
                  v-if="item.value"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="formLabelAlign.source == 6 || formLabelAlign.source == 7"
            class="fosno"
            label="剪辑"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="formLabelAlign.editor"
              filterable
              placeholder="请选择"
            >
              <template v-for="(item, index) in editingOptions">
                <el-option
                  v-if="item.value"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="originIdVisable"
            :label-width="formLabelWidth"
            label="原始素材ID"
            class="fosno"
          >
            <el-input
              v-model="formLabelAlign.originId"
              style="width: 223px"
              disabled
            ></el-input>
          </el-form-item>

          <el-row
            style="
              width: 500px;
              height: 360px;
              overflow-y: scroll;
              border: 1px solid #cccccc;
            "
          >
            <el-upload
              multiple
              action
              ref="upload"
              :auto-upload="true"
              :show-file-list="true"
              :http-request="uploadMulFile"
              :on-remove="handleRemove"
              :on-preview="handleCusPreview"
              list-type="picture"
              :limit="100"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateinfo = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpload">确定上传</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogImgVisible">
      <img width="100%" :src="dialogImgUrl" alt="" />
    </el-dialog>

    <el-dialog :visible.sync="dialogVideoVisible">
      <video width="100%" :src="dialogVideoUrl" alt="" autoplay></video>
    </el-dialog>

    <!-- 子组件弹窗 -->
    <create-material-group
      :dialogFormVideo="childDialogStatus"
      @closeDialog="closeDialog"
      @ensureMaterial="ensureMaterial"
      @deleteMaterial="deleteMaterial"
      :items="items"
    />
  </div>
</template>

<script>
import {
  getEnums,
  getBusinlist,
  getBusindel,
  getUpload,
  getbusinUpload,
  getSelectApps,
} from "@/api/cloud";
import ossClient from "@/utils/ossClient";
import md5 from "md5";

/* 创建素材组组件引入 */
import CreateMaterialGroup from "./childComponents/CreateMaterialGroup";
import download from "downloadjs"
export default {
  data() {
    return {
      /* 筛选条件 - 编导、 */
      directorOptions: [
        { name: "全部", value: "" },
        { name: "高照雨", value: 5027 },
        { name: "王俨", value: 5031 },
      ],
      photographOptions: [
        { name: "全部", value: "" },
        { name: "赵军伟", value: 5029 },
      ],
      editingOptions: [
        { name: "全部", value: "" },
        { name: "孙劲", value: 5025 },
        { name: "张昭", value: 5028 },
        { name: "刘江垚", value: 5035 },
        { name: "成小鹏", value: 5053 },
        { name: "韦欣", value: 5064 },
      ],
      jobClassify: {
        director: "",
        cameraman: "",
        editor: "",
      },
      appId: "",
      selectApps: [],
      dialogVideoUrl: "",
      dialogImgUrl: "",
      dialogVideoVisible: false,
      dialogImgVisible: false,
      newGetList: [],
      childDialogStatus: false, // 子组件弹框状态
      materialSource: null, //素材来源
      uploadMaterialSource: null, //上传时的素材来源列表
      selCondition: {
        materialSource: [],
        id: null,
      }, //查询素材的筛选条件
      /* 分页 */
      total: null,
      page: 1,
      size: 50,
      options: [],
      options1: [],
      options2: [],
      appCate: [],
      CleaningState: [
        { name: "已清洗", value: 1 },
        { name: "未清洗", value: 0 },
      ],
      activeName1: "firsts",
      dialogFormVideo: false,
      dialogFormImage: false,
      materialSourceDialog: null, //弹窗素材来源
      originIdVisable: false, //上传时是否显示原始id，看是否是弹窗过来的参数
      previewImg: "",
      srcImage: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      Video: "",
      checkAll: false,
      FormGetList: {
        ifClean: "",
        materialCategory: "",
        appCategory: "",
        startTime: null,
        endTime: null,
      },
      checkedStatus: false, // 控制点击预览时复选框的状态
      items: [],
      /* 日期选择*/
      taskForm: {
        startTime: null,
        endTime: null,
      },
      isIndeterminated: false,
      selectedAllList: [],
      selectedAll: false,
      dialogCreateinfo: false,
      formLabelWidth: "120px",

      /* 弹框传递的参数 */
      formLabelAlign: {
        materialCategory: "",
        appId: "",
        materialName: "",
        url: "",
        source: null,
        price: null,
        originId: null,
        director: "",
        cameraman: "",
        editor: "",
      },
      /* 连接oss 的参数 */
      uploadConf: {
        region: null,
        accessKeyId: null,
        accessKeySecret: null,
        bucket: null,
        // stsToken: null,
      },
      fileList: [
        // {uid:"fileid",url:"cloudUrl"}
      ],

      uploadMaterialurl: "",
      pickerOptions2: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const start = new Date();
              picker.$emit("pick", [start, start]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, start]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      handlePersonVisible: false, //显示编导啥的

      materialDetail: {}, // 某个素材详情
    };
  },
  components: {
    CreateMaterialGroup,
  },
  created() {
    this.APIGetEnums();
    this.APIGetBusinlist();
    this.APIgetSelectApps();
    this.initOssInfo();
  },
  mounted() {
    // alert('内容')
  },
  methods: {
    APIgetSelectApps() {
      const params = {
        platformId: 5,
        menuCode: "game.Overview,android",
      };
      getSelectApps(params).then((res) => {
        // console.log("创意素材组下的下拉列表", res);
        this.selectApps = res.result.data;
        // console.log(this.selectApps);
      });
    },
    closeVideoDialog() {
      this.$refs.videoRef.pause();
      this.closeStateDialog(); // 关闭视频弹窗时清除数据
    },
    /* 关闭表单后 恢复状态，清除外采、自拍素材新增残留参数 */
    closeStateDialog() {
      if (this.dialogFormVideo == false && this.dialogFormImage == false) {
        this.materialSourceDialog = null; // 只有当图片和视频弹窗不存在时 清除素材来源的数据
      }
      this.originIdVisable = false;
      this.fileList = [];
      this.formLabelAlign = {
        materialCategory: "",
        appId: "",
        materialName: "",
        url: "",
        source: null,
        price: null,
        originId: null,
        director: "",
        cameraman: "",
        editor: "",
      };
      this.$refs.upload.clearFiles();
    },

    // 下载
    download_video() {
      download(this.materialDetail.url);
    },
    /* 获取公共参数*/
    APIGetEnums() {
      getEnums().then((res) => {
        console.log("tongyong", res);
        this.options = res.result.data.fetchApps;
        this.options1 = res.result.data.categorys;
        this.appCate = res.result.data.categorys;
        this.options2 = res.result.data.materialType;
        this.materialSource = res.result.data.materialSource; //素材来源
        //获取指定的来源分类 分别是 外采 自拍 其他
        this.uploadMaterialSource = res.result.data.materialSource.filter(
          (itm) => {
            return (
              itm.value == 5 ||
              itm.value == 6 ||
              itm.value == 8 ||
              itm.value == 7
            );
          }
        );
      });
    },

    /* 获取原始素材库列表*/
    APIGetBusinlist() {
      const params = {
        appId: this.appId,
        appCategory: this.FormGetList.appCategory,
        materialCategory: this.FormGetList.materialCategory,
        endDate: this.taskForm.endTime,
        startDate: this.taskForm.startTime,
        resType: "",
        source: this.selCondition.materialSource.join(","),
        id: this.selCondition.id,
        page: this.page,
        size: this.size,
        director: this.jobClassify.director,
        cameraman: this.jobClassify.cameraman,
        editor: this.jobClassify.editor,
      };

      //自拍素材获取
      getBusinlist(params).then((res) => {
        this.newGetList = res.result.data.content;
        this.total = res.result.data.total;
      });
    },

    /* 修改素材来源 */
    selMaterSourChange(selList) {
      if (selList.indexOf(6) !== -1) {
        //包含自拍素材
        this.handlePersonVisible = true;
      } else {
        //不包含自拍素材
        this.handlePersonVisible = false;
        this.jobClassify = {
          director: "",
          cameraman: "",
          editor: "",
        };
      }
    },

    /* 外采、自拍素材的上传按钮弹窗控制 */
    uploadRelatedMaterials() {
      //暂停播放
      this.$refs.videoRef.pause();
      //是否显示orginId框，即添加参数
      this.originIdVisable = true;
      //上传页面显示
      this.dialogCreateinfo = true;
    },

    /* 点击拷贝ID */
    copyID(item) {
      //获取点击的值
      var clickContent = item.id;
      //获取要赋值的input的元素
      var inputElement = document.getElementById(item.id);
      //给input框赋值
      inputElement.value = clickContent;
      //选中input框的内容
      inputElement.select();
      // 执行浏览器复制命令
      document.execCommand("Copy", false);
      this.$message.success("素材ID复制成功！");
    },

    /* 点击预览 */
    Preview(item, index) {
      /* 点击预览是 不要被选中复选框 */
      if (this.selectedAllList.indexOf(item.id) === -1) {
        this.checkedStatus = true;
      } else {
        this.checkedStatus = false;
      }

      if (item.resType === 1) {
        this.srcImage = [];
        this.previewImg = item.url;
        this.dialogFormImage = true;
        this.srcImage.push(item.url);
      } else if (item.resType === 2) {
        this.dialogFormVideo = true;
        this.Video = item.url;
      }

      this.materialDetail = item;

      //素材来源 决定是否有按钮
      this.materialSourceDialog = item.source;
      //素材原始id
      this.formLabelAlign.originId = item.id;
      this.formLabelAlign.materialCategory = item.materialCategory;
      this.formLabelAlign.appId = item.appId;
      this.formLabelAlign.source = 7;
    },

    /* 分页 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`, this.val);
      this.page = val;
      this.APIGetBusinlist();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.APIGetBusinlist();
    },

    /* 全选框 */
    handleCheckAllChange(val) {
      console.log(val);
      if (this.checkAll) {
        this.newGetList.forEach((item) => {
          this.selectedAllList.push(item.id);
          console.log(this.selectedAllList);
        });
      } else {
        this.selectedAllList = [];
      }
    },

    /* 单选框 */
    handleCheckedCitiesChange(item, index) {
      if (this.checkedStatus) {
        this.selectedAllList.pop();
        this.checkedStatus = false;
      }
    },

    /* 查询 */
    fetchData() {
      this.page = 1; //点击查询回归到第一页
      this.APIGetBusinlist();
      // console.log(this.taskForm.endTime, this.taskForm.startTime)
    },

    /* 删除 */
    materialDel() {
      let params = {
        ids: this.selectedAllList.toString(),
      };
      getBusindel(params).then((res) => {
        console.log(res);
        if (res.status === 200) {
          this.$confirm("是否删除素材?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.APIGetBusinlist();
              this.checkedCities = [];
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        } else {
          this.$message({
            message: "请选择要删除的素材",
            type: "warning",
          });
        }
      });
    },

    //初始化从后端获取到 TST账户对OSS进行操作  在created初始化
    initOssInfo() {
      //获取阿里云token  这里是后台返回来的数据 暂时使用死数据
      const aliyun = {
        // "你的Region  注意 这个只要 空间名 不要 http:// 和 .aliyunoss.com !!",
        Region: "oss-cn-beijing",
        AccessKeyId: "LTAI5tJzo2DiQxQqh9EipDNh",
        AccessKeySecret: "JnduhWY5Tr5VfuFHgDOv9XjqYx1mDg",
        Bucket: "zx-material-new",
        //"你的SecurityToken"
        // SecurityToken: null,
      };
      const {
        Region,
        AccessKeyId,
        AccessKeySecret,
        Bucket,
        // SecurityToken,
      } = aliyun;
      //初始化连接oss参数
      this.uploadConf.region = Region;
      this.uploadConf.accessKeyId = AccessKeyId;
      this.uploadConf.accessKeySecret = AccessKeySecret;
      this.uploadConf.bucket = Bucket;
      // this.uploadConf.stsToken = SecurityToken;
    },

    //上传到阿里云OSS
    uploadMulFile(uploader) {
      // console.log("文件信息", uploader);
      //获取到文件的信息内容
      let file = uploader.file;
      //获取文件类型 和 上传文件的日期
      let fileType = file.name.split(".").pop();
      if (file.name.split(".").length === 1) {
        fileType = "jpg";
      }
      let curTime = new Date();
      //定义上传到云端的路径和文件名字
      let upFilePath =
        "ad_putin_materials" +
        "/" +
        curTime.getFullYear() +
        "/" +
        (curTime.getMonth() + 1) +
        "/" +
        curTime.getDate() +
        "/" +
        md5(file.name + Date.now()) +
        "." +
        fileType;
      //分片上传配置，回显进度以及上传总进度重置，分片大小，超时设置
      let optionsFile = {
        progress: function (p) {
          uploader.onProgress({ percent: Math.floor(p * 10000) / 100 });
        },
        partSize: 1000 * 1024, //设置分片大小 小于1m 1024*1024
        timeout: 36000000, //设置超时时间 - 10小时
      };
      //实例化上传对象
      let client = ossClient(this.uploadConf);
      /* 分片上传 显示上传进度 */
      const that = this;
      //测试地址替换为 "test/" +upFilePath
      client
        .multipartUpload(upFilePath, file, optionsFile)
        .then((res) => {
          //解析url并替换前缀可访问
          let strUrl = res.res.requestUrls[0].split("?")[0];
          strUrl = strUrl.replace(
            "http://zx-material-new.oss-cn-beijing.aliyuncs.com",
            "https://cdn.zhangxingames.com"
          );
          that.fileList = [...that.fileList, { uid: file.uid, url: strUrl }];
          uploader.onSuccess(); //上传成功(打钩的小图标)
          client = null;
        })
        .catch((err) => {
          that.$message.warning(`上传终止，提示：${err}`);
          console.log(err);
          if (client.isCancel()) {
            uploader.onError();
          }
        });
    },

    //移除  已经添加的url，不删除oss文件，因为当天命名不唯一可能覆盖文件，所以不删除
    handleRemove(file) {
      this.$refs.upload.abort(); //取消上传
      this.fileList = this.fileList.filter((itm) => itm.uid !== file.uid);
      this.$message({ message: "成功移除" + file.name, type: "success" });
    },

    //点击预览已上传素材
    handleCusPreview(file) {
      let check = file.name.indexOf("mp4");
      // console.log("预览上传", file, file.name, check);
      if (check > 0) {
        //预览视频
        this.dialogVideoVisible = true;
        this.dialogVideoUrl = file.url;
      } else {
        this.dialogImgVisible = true;
        this.dialogImgUrl = file.url;
      }
    },

    /* 上传到素材库 */
    confirmUpload() {
      let temp = this.formLabelAlign;
      if (
        temp.materialCategory === "" ||
        temp.appId === "" ||
        temp.materialName === "" ||
        temp.source === null ||
        temp.price === null
      ) {
        this.$message.error("请填写完整的参数！");
        return;
      }

      //将上传的url拼接
      this.fileList.forEach((itm) => {
        temp.url += itm.url + ",";
      });
      //截取多余的逗号
      temp.url = temp.url.substr(0, temp.url.length - 1);
      let params = { ...temp };

      getbusinUpload(params)
        .then((res) => {
          // console.log(res);
          //参数重置
          this.originIdVisable = false;
          this.dialogCreateinfo = false;
          this.fileList = [];
          this.formLabelAlign = {
            materialCategory: "",
            appId: "",
            materialName: "",
            url: "",
            source: null,
            price: null,
            originId: null,
            director: "",
            cameraman: "",
            editor: "",
          };
          this.APIGetBusinlist();
          this.$refs.upload.clearFiles();
        })
        .catch((err) => {
          this.$message.error(`请求出错，错误：${err}`);
          console.log(err);
        });
    },

    /* 创建素材组弹窗控制 */
    createMaterial() {
      this.childDialogStatus = true; // 显示弹窗

      /* 先拿到被选中的素材 */
      this.items = [];
      console.log(11111, this.newGetList);
      this.newGetList.forEach((item) => {
        this.selectedAllList.forEach((ids) => {
          if (ids === item.id) {
            this.items.push(item);
          }
        });
      });
    },

    /* 接收子组件传过来的方法 */
    closeDialog() {
      this.childDialogStatus = false;
    },

    ensureMaterial(checkedMaterial) {
      checkedMaterial.forEach((i) => {
        this.items.push(i);
      });
    },

    deleteMaterial(index) {
      this.items.splice(index, 1);
    },
    handleEnsureMaterial(newItems) {
      this.selectedMaterials = [...this.selectedMaterials, ...newItems];
    },
  },
  computed: {
    /* 监听日期 */
    dateTime: {
      get() {
        if (this.taskForm.startTime && this.taskForm.endTime) {
          return [this.taskForm.startTime, this.taskForm.endTime];
        } else {
          return [];
        }
      },
      set(v) {
        if (v !== null) {
          this.taskForm.startTime = v[0];
          this.taskForm.endTime = v[1];
        } else {
          this.taskForm.startTime = "";
          this.taskForm.endTime = "";
        }
      },
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.Materia {
  overflow: hidden;
}

.Materiallist {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #eeeeee;
}

.Materiallist2 {
  width: 264px;
  height: 141px;
}

.Materiallist .Materiallist_text {
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.MateriallistApplication {
  display: flex;
  justify-items: center;
  align-items: center;
}
.MateriallistApplication .MateriallistApplication_img {
  width: 40px;
  height: 40px;
  margin-right: 6px;
}
.font_overflow {
  overflow: hidden;
  text-overflow: ellipsis; // 超出显示
  display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。
  -webkit-line-clamp: 1; // 用来限制在一个块元素显示的文本的行数
  -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
}
.Subscript {
  position: absolute;
  z-index: 999;
  font-size: 14px;
  background: #ccc;
  border-radius: 10px;
  padding: 2px 10px;
  left: 0;
  top: 0;
}

.el-icon-video-play {
  font-size: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -50px;
  color: #ffffff;
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  margin-bottom: 10px;
}

.material-introduce {
  position: absolute;
  right: 5%;
  top: 50px;
  width: 55%;
  color: #000;
}

.material-introduce > div {
  margin-bottom: 10px;
}
</style>

<style>
.MateriaCheck {
  margin: 20px;
}

#MateriaCheck .el-checkbox__input {
  position: absolute;
  right: 10%;
  top: 5%;
}

#MateriaCheck .el-checkbox__label {
  padding-left: 0;
}

/* 三角形之父 */
.material_label {
  float: right;
  padding: 10px;
  margin: 10px -10px 0 0px;
  position: relative;
  color: whitesmoke;
  font-size: 8px;
  text-align: right;
}

/* 画个三角形 */
.material_label::after {
  content: "";
  width: 0;
  position: absolute;
  border-right: 90px solid rgba(64, 158, 255, 1);
  border-top: 70px solid transparent;
  top: -30px;
  left: -21px;
  z-index: -1;
}

.left25 {
  margin-left: 25px;
}

.el-drawer {
  padding-left: 2px;
}
</style>
