<template>
  <div class="info-show" v-loading="loadingState">
    <el-tabs v-model="activeName" type="card" style="margin-top: 20px">
      <!-- 自投 -->
      <el-tab-pane label="自投" name="self">
        <div class="middle-interval"></div>
        <!-- 筛选 -->
        <el-form inline class="filter" label-width="80px">
          <!-- 选择应用 -->
          <el-form-item label="素材应用">
            <el-select
              v-if="this.selectApps[1]"
              v-model="pkg"
              placeholder="请选择"
              @change="appChange"
              filterable
            >
              <el-option-group
                v-for="group in selectApps"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="(item, index) in group.options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>

          <!-- 投放日期 -->
          <el-form-item label="投放日期">
            <el-date-picker
              v-model="dataDate"
              @change="test"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="起始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>

          <!-- 素材来源 -->
          <el-form-item label="素材来源">
            <el-select
              v-model="checkedVideo"
              placeholder="全部"
              filterable
              multiple
              clearable
              size="medium"
              @change="materialTypeChange"
            >
              <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 label="出价范围">
            <el-input
              v-model="biddenRange[0]"
              style="width: 60px"
              placeholder="请输入内容"
            ></el-input>
            ~
            <el-input
              v-model="biddenRange[1]"
              style="width: 60px"
              placeholder="请输入内容"
            ></el-input>
          </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="">
            <el-button type="primary" @click="dataFilter">筛选</el-button>
          </el-form-item>
        </el-form>

        <div class="middle-interval"></div>

        <!-- 数据统计 -->
        <count-data :countData="countData" />

        <!-- 表格信息展示 -->
        <div class="table-info" v-if="!superPage">
          <div class="export">
            <!-- 导出组件 -->
            <export-excel
              v-if="fileData !== [] && fileData.length > 0"
              :list="fileData"
              :tHeader="tHeader"
              :tValue="tValue"
              :filename="
                filename.appName + '_' + dataDate[0] + '至' + dataDate[1]
              "
            />
          </div>

          <!-- 创建为新的素材组 -->
          <div class="creat-material" v-show="income && income.length > 0">
            <el-button style="margin-left: 80px" @click="createMaterial"
              >创建素材组</el-button
            >
          </div>

          <!-- 表格子组件 -->
          <table-info
            :income="income"
            @detailClick="detailClick"
            @playVideo="playVideo"
            @getSelectRow="getSelectRow"
          />

          <!-- 分页 -->
          <el-pagination
            v-show="totalNums > 0"
            background
            :total="totalNums"
            :page-size="size"
            :current-page="requestPage"
            style="text-align: right; margin-bottom: 5px"
            layout="total, prev, pager, next, sizes"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            @prev-click="prevPageData"
            @next-click="nextPageData"
          ></el-pagination>
        </div>

        <!-- 全部信息展示组件 -->
        <super-page
          v-if="superPage"
          :checkedVideo="checkedVideo"
          :jobClassify="jobClassify"
          ref="superPage"
        />
      </el-tab-pane>

      <!-- 代投 -->
      <el-tab-pane label="代投" name="agent">
        <!-- 代投子组件 -->
        <agent-putin
          v-if="this.selectApps[1]"
          :pickerOptions="pickerOptions"
          :getTime="getTime"
          :selectApps="selectApps[1].options"
          @palyVideoAgent="palyVideoAgent"
          @detailAgentClick="detailAgentClick"
        ></agent-putin>
      </el-tab-pane>
    </el-tabs>

    <!-- 详情抽屉 -->
    <el-drawer
      :visible.sync="drawer"
      ref="elDrawer"
      direction="rtl"
      :with-header="false"
    >
      <el-button type="primary" @click="backClick">〈 返回 </el-button>
      <span class="materialInfo">素材详情</span>
      <!-- 基本信息展示 -->
      <h4 class="base-info-title">基本信息</h4>
      <div class="base-info-content">
        <table class="table-content">
          <tr>
            <td>预览：</td>
            <td>
              <div
                class="video-bgc video-bgc-down"
                @click="playVideo(detailInfo)"
              >
                <i class="el-icon-video-play"></i>
              </div>
            </td>
          </tr>
          <tr class="materialID">
            <td>素材ID：</td>
            <td>{{ detailInfo.video_id }}</td>
          </tr>
          <tr>
            <td>素材名称：</td>
            <td>{{ detailBaseInfo.material_name }}</td>
          </tr>
          <tr>
            <td>所属应用：</td>
            <td>{{ detailBaseInfo.appName }}</td>
          </tr>
          <tr>
            <td>素材来源：</td>
            <td>{{ detailBaseInfo.source }}</td>
          </tr>
          <tr>
            <td>素材类型：</td>
            <td>{{ detailBaseInfo.material_category }}</td>
          </tr>
          <tr>
            <td>入库时间：</td>
            <td>{{ detailBaseInfo.create_date }}</td>
          </tr>
          <tr>
            <td>开始投放时间：</td>
            <td>{{ detailBaseInfo.min_start_date }}</td>
          </tr>
          <tr>
            <td>URL：</td>
            <td>{{ detailBaseInfo.video_id }}</td>
          </tr>
        </table>
      </div>

      <!-- 折线图 -->
      <line-chart
        ref="lineChart"
        :dateData="dataDate"
        :videoId="detailInfo.video_id"
      />

      <div>
        <h4 class="id-title">投放账户&创意ID</h4>
        <div class="id-info">
          <el-table
            :data="allId"
            style="width: 88%"
            border
            class="id-info-tabel"
          >
            <el-table-column
              label="账户ID"
              prop="advertiser_id"
              align="center"
            ></el-table-column>
            <el-table-column
              label="计划ID"
              prop="plan_id"
              align="center"
            ></el-table-column>
            <el-table-column
              label="创意ID"
              prop="creative_id"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <!-- id分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, sizes"
          style="text-align: right; margin-top: 20px"
          :total="idTotal"
          :page-sizes="pageSize"
          :current-page="idPage"
          @current-change="handleCurrentChangeID"
          @size-change="handleSizeChangeID"
          @prev-click="prevPageDataID"
          @next-click="nextPageDataID"
        >
        </el-pagination>
      </div>
    </el-drawer>

    <!-- 视频弹窗 -->
    <el-dialog
      :visible.sync="dialogFormVideo"
      class="spacing"
      @opened="openVideo"
      @close="closeVideoDialog"
    >
      <video
        :src="videoUrl"
        ref="videoRef"
        controls
        preload
        width="600"
        height="600"
        autoplay
      ></video>
    </el-dialog>

    <!-- 创建素材组 弹窗 -->
    <add-material-group
      v-if="showDialog"
      @closeDialog="closeDialog"
      :selectMaterial="selectMaterial"
      :pkg="filename.appName"
    />
  </div>
</template>

<script>
/* 数据获取 */
import { getBusinIncome, getSelectApps, getEnums } from "@/api/cloud";

import headerValue from "./childComponents/tHeader"; // 导出文件表头和值

/* 子组件引入 */
import TableInfo from "./childComponents/TableInfo";
import AgentPutin from "./childComponents/AgentPutin";
import ExportExcel from "./childComponents/ExportExcel";
import AddMaterialGroup from "./childComponents/AddMaterialGroup";
import CountData from "./childComponents/CountData";
import SuperPage from "./childComponents/SuperPage";
import LineChart from "./childComponents/LineChart";

export default {
  components: {
    TableInfo,
    AgentPutin,
    ExportExcel,
    AddMaterialGroup,
    CountData,
    SuperPage,
    LineChart,
  },

  data() {
    return {
      tHeader: headerValue.tHeader,
      tValue: headerValue.tValue,
      filename: {
        appName: "",
      },
      fileData: [],
      activeName: "self", // tab绑定值
      pickerOptions: this.$store.state.pickerOptions,
      loadingState: true,
      income: [], // 初始化的收入详细数据
      biddenRange: [1, 1.5],
      selectApps: [],
      dialogVisible: false, // 弹框控制
      drawer: false, // 控制详情抽屉的打开
      detailInfo: {}, // 保存当前详情数据
      videoUrl: "", // 视频地址
      dialogFormVideo: false, // 视频播放控制
      requestPage: 1, // 请求数据页数
      /* 分页 请求数据 */
      total: null,
      size: 50, // 默认请求50条数据
      totalNums: 0, // 获取素材总条数
      /*******************/
      /* 时间 */
      dataDate: "", // 得到的是一个数组 起始时间-结束月份
      endDateRequest: "2020-11-26", // 请求投放日期的数据
      startDateRequest: "2020-06-26",
      /********/
      pkg: "com.zxhl.location",
      detailBaseInfo: {}, // 详情的基本信息
      /* 投放账户&创意ID */
      allId: [], // 获取投放账户&创意ID
      idPage: 1,
      idSize: 3,
      idTotal: 10,
      pageSize: [3, 5],
      videoSrc: "1,2,3,5,6,7,8",
      checkedVideo: [], // 复选框绑定 当选中某个复选框时 该复选框绑定的label会添加到这里面
      detailInfoID: "", // 当点击详情时 保存当前id 用来分页请求数据
      materialSource: [], // 初始化素材来源
      /* 筛选条件 - 编导、 */
      directorOptions: [
        { name: "全部", value: "#ALL#" },
        { name: "高照雨", value: 5027 },
        { name: "王俨", value: 5031 },
      ],
      photographOptions: [
        { name: "全部", value: "#ALL#" },
        { name: "赵军伟", value: 5029 },
      ],
      editingOptions: [
        { name: "全部", value: "#ALL#" },
        { name: "孙劲", value: 5025 },
        { name: "张昭", value: 5028 },
        { name: "刘江垚", value: 5035 },
      ],
      jobClassify: {
        director: "#ALL#",
        cameraman: "#ALL#",
        editor: "#ALL#",
      },
      /***********/
      showDialog: false, // 控制添加素材组弹窗
      selectMaterial: [], // 选中的素材
      handlePersonVisible: false, // 控制人员显示
      countData: {}, // 统计的数据
      historyPkg: [], // 历史选择包

      superPage: false,
    };
  },

  watch: {
    pkg(val) {
      if (val == "#ALL#") {
        this.superPage = true;
      } else {
        this.superPage = false;
      }
    },
    checkedVideo(val) {
      if (!val.find((item) => item == 6)) {
        this.jobClassify = {
          director: "#ALL#",
          cameraman: "#ALL#",
          editor: "#ALL#",
        };
      }
    },
  },

  created() {
    this.historyPkg = this.getHistory();
    /* 获取数据 */
    this.getIncomeData(); // 获取展示信息数据
    this.getTotalNums(); // 获取素材从条数
    this.APIgetSelectApps(); // 获取selectApps
    this.APIGetEnums(); // 全局参数获取
  },

  mounted() {
    /* 进入页面时默认为最近一天的数据 */
    this.dataDate = [this.getTime(), this.getTime()];
    this.dataFilter();
    /**************/
  },

  computed: {
    idTotalNums() {
      if (this.allId) {
        return this.allId[0].count_size;
      } else {
        return 0;
      }
    },
  },
  methods: {
    /* 参数过滤 */
    paramsFilter: function (params) {
      if (this.handlePersonVisible) {
        if (this.jobClassify.director != "#ALL#") {
          params.director = parseInt(this.jobClassify.director);
        } else {
          delete params.director;
        }

        if (this.jobClassify.cameraman != "#ALL#") {
          params.cameraman = parseInt(this.jobClassify.cameraman);
        } else {
          delete params.cameraman;
        }

        if (this.jobClassify.editor != "#ALL#") {
          params.editor = parseInt(this.jobClassify.editor);
        } else {
          delete params.editor;
        }
      } else {
        // return params
      }
    },

    /* 获取表格信息 */
    getIncomeData() {
      console.log("dataDate", this.dataDate);
      this.startDateRequest = this.dataDate[0];
      this.endDateRequest = this.dataDate[1];
      this.loadingState = true;
      let params = {
        pkg: this.pkg,
        startDate: this.startDateRequest,
        endDate: this.endDateRequest,
        sqlId: 1021,
        uploadStartDate: "2020-05-01",
        uploadEndDate: "2020-11-26",
        page: this.requestPage,
        size: this.size,
        videoSrc: this.videoSrc,
        minBid: this.biddenRange[0],
        maxBid: this.biddenRange[1],
      };

      this.paramsFilter(params); // 人员查询条件过滤

      getBusinIncome(params).then((res) => {
        this.income = res.result.data;
        this.loadingState = false;
      });
    },

    /* 请求全局公共参数 主要是获取素材来源 */
    APIGetEnums() {
      getEnums().then((res) => {
        this.materialSource = res.result.data.materialSource; //素材来源
      });
    },

    /* 获取总共数据条数 */
    getTotalNums() {
      let params = {
        pkg: this.pkg,
        startDate: this.startDateRequest,
        endDate: this.endDateRequest,
        sqlId: 1024,
        uploadStartDate: "2020-05-01",
        uploadEndDate: "2020-11-26",
        videoSrc: this.videoSrc,
        minBid: this.biddenRange[0],
        maxBid: this.biddenRange[1],
      };

      this.paramsFilter(params); // 人员查询条件过滤
      getBusinIncome(params).then((res) => {
        this.totalNums = res.result.data[0].total_size;
      });
    },

    /* 获取selectApps */
    APIgetSelectApps() {
      const params = {
        platformId: 4,
        menuCode: "putin.apps",
      };
      getSelectApps(params).then((res) => {
        this.selectApps = [
          {
            label: "历史记录",
            options: this.historyPkg,
          },
          { label: "应用", options: res.result.data },
        ];
        let apps = this.selectApps[1].options ? this.selectApps[1].options : [];
        for (let i = 0; i < apps.length; i++) {
          if (this.pkg == apps[i].value) {
            this.filename.appName = apps[i].label;
            break;
          }
        }
        this.selectApps[1].options.unshift({ label: "全部", value: "#ALL#" });
      });
    },

    /* 获取详情基本信息 */
    getDetailInfo(videoId) {
      const params = {
        sqlId: 1026,
        videoId,
      };
      getBusinIncome(params).then((res) => {
        /* 保存详情基本信息 */
        this.detailBaseInfo = res.result.data[0];
        /* 原详情数据中的素材来源是数字 这时候把这个数字转换一下就行了 */
        this.materialSource.forEach((item) => {
          if (item.value == this.detailBaseInfo.source) {
            this.detailBaseInfo.source = item.label;
          }
        });
      });
    },

    /* 获取代投详情基本信息 */
    getAgentDetailInfo(videoId) {
      const params = {
        sqlId: 1108,
        videoId,
      };
      getBusinIncome(params).then((res) => {
        console.log("详情基本信息", res);
        /* 保存详情基本信息 */
        this.detailBaseInfo = res.result.data[0];
        /* 原详情数据中的素材来源是数字 这时候把这个数字转换一下就行了 */
        this.materialSource.forEach((item) => {
          if (item.value == this.detailBaseInfo.source) {
            this.detailBaseInfo.source = item.label;
          }
        });
      });
    },

    /* 获取投放账户&创意ID */
    getAllId(page, size, videoId) {
      const params = {
        sqlId: 1027,
        videoId,
        page,
        size,
      };
      getBusinIncome(params).then((res) => {
        this.allId = res.result.data;
        console.log("id", this.allId);
        this.idTotal = this.allId[0].count_size;
      });
    },

    /* 统计数据 */
    getCountData() {
      this.startDateRequest = this.dataDate[0];
      this.endDateRequest = this.dataDate[1];
      this.loadingState = true;
      let params = {
        pkg: this.pkg,
        startDate: this.startDateRequest,
        endDate: this.endDateRequest,
        sqlId: 1305,
        uploadStartDate: "2020-05-01",
        uploadEndDate: "2020-11-26",
        page: this.requestPage,
        size: this.size,
        videoSrc: this.videoSrc,
        minBid: this.biddenRange[0],
        maxBid: this.biddenRange[1],
      };

      getBusinIncome(params).then((res) => {
        this.countData = res.result.data[0];
      });
    },

    /********************/

    /* 点击详情按钮时 保存当前点击行数据 */
    detailClick(row) {
      this.drawer = true; // 打开抽屉
      this.detailInfo = row; // 保存当前数据
      this.detailInfoID = this.detailInfo.video_id;
      /* 请求数据 */
      this.getDetailInfo(this.detailInfo.video_id); // 请求基本详情信息
      this.getAllId(this.idPage, this.idSize, this.detailInfoID); // 请求需要展示的id

      // 执行折线图数据请求
      this.$nextTick(() => {
        this.$refs.lineChart.init();
      });
    },

    /* 点击代投详情按钮 */
    detailAgentClick(row) {
      this.drawer = true; // 打开抽屉
      this.detailInfo = row; // 保存当前数据
      this.detailInfoID = this.detailInfo.video_id;
      /* 请求数据 */
      this.getAgentDetailInfo(this.detailInfo.video_id); // 请求基本详情信息
      this.getAllId(this.idPage, this.idSize, this.detailInfoID); // 请求需要展示的id
    },

    backClick() {
      this.drawer = false;
    },

    /* 播放视频 */
    playVideo(row) {
      this.dialogFormVideo = true;
      this.videoUrl = row.video_url;
    },

    palyVideoAgent(row) {
      this.dialogFormVideo = true;
      this.videoUrl = row.video_url;
    },

    openVideo() {
      if (("openVideo", this.$refs.videoRef.paused)) {
        this.$refs.videoRef.play();
      }
    },

    closeVideoDialog() {
      this.$refs.videoRef.pause();
    },
    /********************/

    /* 分页 */
    // 当页面改变时触发
    handleCurrentChange(val) {
      this.requestPage = val;
      this.getIncomeData();
      console.log("aaa", val);
    },
    // 当每页条数发生改变时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getIncomeData();
    },
    prevPageData() {
      this.requestPage--;
    },
    nextPageData() {
      this.total++;
      this.requestPage++;
    },

    /* 详情弹框分页 */
    // 当页面改变时触发
    handleCurrentChangeID(val) {
      this.idPage = val;
      this.getAllId(this.idPage, this.idSize, this.detailInfoID);
    },
    // 当每页条数发生改变时触发
    handleSizeChangeID(val) {
      this.idSize = val;
      this.getAllId(this.idPage, this.idSize, this.detailInfoID);
    },
    prevPageDataID() {
      this.idPage--;
    },
    nextPageDataID() {
      this.idPage++;
    },
    /********************/

    /* 详情抽屉关闭 */
    backClick() {
      this.$refs.elDrawer.hide();
    },

    /* 筛选 */
    dataFilter() {
      // 一级页面super-page
      if (this.superPage) {
        this.$nextTick(() => {
          this.$refs.superPage._fetchCommonTable();
        });
      } else {
        this.loadingState = true;

        /* 出价范围强制类型转换 因为表单输入的值为字符型 */
        this.biddenRange = [
          parseFloat(this.biddenRange[0]),
          parseFloat(this.biddenRange[1]),
        ];

        /* 按照筛选条件重新请求数据 */
        this.getIncomeData(); // 获取展示信息数据

        this.exportFunc(); // 导出表格
        this.getCountData();
      }
    },

    /* 导出表格 请求数据 */
    exportFunc() {
      /* 使用promise 先拿到总共数据条数 再获取全部数据 */
      let params = {
        pkg: this.pkg,
        startDate: this.startDateRequest,
        endDate: this.endDateRequest,
        sqlId: 1024,
        uploadStartDate: "2020-05-01",
        uploadEndDate: "2020-11-26",
        videoSrc: this.videoSrc,
        minBid: this.biddenRange[0],
        maxBid: this.biddenRange[1],
      };

      this.paramsFilter(params); // 人员查询条件过滤
      getBusinIncome(params)
        .then((res) => {
          this.totalNums = res.result.data[0].total_size;
          /* 导出表所需要的全部信息 */
          let params = {
            pkg: this.pkg,
            startDate: this.startDateRequest,
            endDate: this.endDateRequest,
            sqlId: 1021,
            uploadStartDate: "2020-05-01",
            uploadEndDate: "2020-11-26",
            page: 1,
            size: this.totalNums,
            videoSrc: this.videoSrc,
            minBid: this.biddenRange[0],
            maxBid: this.biddenRange[1],
          };

          this.paramsFilter(params); // 人员查询条件过滤
          return getBusinIncome(params);
        })
        .then((res) => {
          this.fileData = res.result.data; // 处理数据
        });
    },

    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      if (day < 10) {
        day = "0" + day;
      }
      if (month < 10) {
        month = "0" + month;
      }
      return year + "-" + month + "-" + day;
    },

    /* 当选择的素材类型改变 做处理 */
    materialTypeChange() {
      if (this.checkedVideo && this.checkedVideo.length > 0) {
        this.checkedVideo.forEach((item) => {
          if (item == 6) {
            this.handlePersonVisible = true;
          }
        });
        this.videoSrc = this.checkedVideo.join(",");
      } else {
        this.videoSrc = "1,2,3,5,6,7,8";
        this.handlePersonVisible = false;
      }
    },

    getSelectRow(row) {
      /* 拿到了选中的数组信息row */
      this.selectMaterial = row;
    },

    /* 接收子组件传过来的方法 */

    /* 关闭弹窗 */
    closeDialog() {
      this.showDialog = false;
    },
    /**********/

    /* 创建素材组 */
    createMaterial() {
      // 先确定是否选中了素材
      if (this.selectMaterial && this.selectMaterial.length > 0) {
        this.showDialog = true;
      } else {
        this.$message.error("请您先选择素材！");
      }
    },

    appChange(checkApp) {
      let apps = this.selectApps[1].options;
      for (let i = 0; i < apps.length; i++) {
        if (this.pkg == apps[i].value) {
          this.filename.appName = apps[i].label;
          /* 将当前选择的app放入历史记录中 */
          this.setHistory(apps[i]);
          break;
        }
      }
    },

    /* 创建历史记录 */
    setHistory(pkgItem) {
      if (this.historyPkg && this.historyPkg.length > 0) {
        for (let i = 0; i < this.historyPkg.length; i++) {
          if (this.historyPkg[i].value == pkgItem.value) {
            return;
          }
        }
      }
      if (this.historyPkg && this.historyPkg.length > 4) {
        this.historyPkg.pop();
      }
      this.historyPkg.unshift(pkgItem);

      window.localStorage.setItem("history", JSON.stringify(this.historyPkg));
    },

    /* 获取历史记录 */
    getHistory() {
      let history = JSON.parse(window.localStorage.getItem("history"));
      if (history && history.length > 0) {
        return history;
      } else {
        return [];
      }
    },

    test() {
      console.log("change", this.dataDate);
    },
  },
};
</script>

<style>
.el-form-item__content {
  padding: 0 !important;
}

.el-drawer__body {
  overflow-y: auto;
  /* overflow-x: auto; */
}
</style>

<style scoped>
.filter,
.table-info {
  position: relative;
  background-color: #fff;
  padding-top: 20px;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.export {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}

.creat-material {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.middle-interval {
  height: 10px;
  background-color: #f2f2f2;
}

.info-show {
  padding: 0 25px;
}

.id-info-tabel {
  margin: 15px auto 0;
}

.materialInfo {
  margin-left: 25px;
}

.base-info-title,
.id-title {
  color: #000;
  margin-top: 25px;
  margin-left: 25px;
}

.base-info-content {
  padding-left: 20px;
}

.table-content tr td:nth-child(1) {
  text-align: right;
  width: 100px;
}

.table-content tr {
  height: 35px;
}

.table-content tr:nth-child(1) {
  height: 60px;
}

.video-bgc {
  position: relative;
  width: 95px;
  height: 52px;
  background: #000;
}

.video-bgc-down {
  position: relative;
  top: 15px;
}

.el-icon-video-play {
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}
</style>