<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="daterangeCreateTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="素材状态" prop="materialsStatus">
        <el-select
          v-model="queryParams.materialsStatus"
          placeholder="请选择素材状态"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="素材名称" prop="materialsName">
        <el-input
          v-model="queryParams.materialsName"
          placeholder="请输入素材名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="素材来源" prop="materialsName">
        <el-select
          v-model="queryParams.materialsName"
          placeholder="请选择素材来源"
        >
          <el-option
            v-for="item in optionsly"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

      </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['manage:materials:add']"
          >新增素材</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          :disabled="multiple"
          v-hasPermi="['manage:materials:remove']"
          >批量删除</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-tabs
      v-model="queryParams.materialsType"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="图片" name="IMAGE_TEXT"></el-tab-pane>
      <el-tab-pane label="视频" name="VIDEO"></el-tab-pane>
    </el-tabs>
    <div class="bodytopxj">
      <div class="bodylist" v-for="item in materialsList" :key="item.id">
        <el-checkbox
          v-model="item.checked"
          @change="changecheck($event, item)"
        ></el-checkbox>
        <div @click.stop="viewshow(item)">
          <img
            :src="baseUrl + item.materialsFilePath"
            alt=""
            v-if="item.materialsFilePath && !item.videoCoverFilePath"
          />
          <img
            :src="baseUrl + item.videoCoverFilePath"
            alt=""
            v-if="item.videoCoverFilePath && item.materialsFilePath"
          />
          <div class="texttitle">{{ item.materialsName }}</div>
          <div class="dataliat">
            创建人/创建时间：<span>{{ item.createBy }}</span
            >/<span>{{ item.createTime }}</span>
          </div>
          <div class="dataliat">素材来源：</div>
          <!-- <div class="dataliat">标签：暂无</div> -->
          <div
            class="dataliat bq"
            v-if="
              item.indications ||
              item.drugName ||
              item.applicableDiseases ||
              item.surgicalName ||
              item.inspectionItems ||
              item.checkItems
            "
          >
            标签：
            <span v-if="item.indications">{{ item.indications }}，</span>
            <span v-if="item.drugName">{{ item.drugName }}，</span>
            <span v-if="item.applicableDiseases"
              >{{ item.applicableDiseases }}，</span
            >
            <span v-if="item.surgicalName">{{ item.surgicalName }}，</span>
            <span v-if="item.inspectionItems"
              >{{ item.inspectionItems }}，</span
            >
            <span v-if="item.checkItems">{{ item.checkItems }}，</span>
          </div>
          <div class="dataliat bq" v-else>标签：暂无</div>
        </div>

        <div class="label" @click.stop="labelchange(item)">标签管理</div>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改素材信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      v-if="open"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        :inline="true"
      >
        <el-form-item label="素材类型" prop="materialsType">
          <el-radio
            v-model="form.materialsType"
            label="IMAGE_TEXT"
            @change="radioChange('IMAGE_TEXT')"
            >图文</el-radio
          >
          <el-radio
            v-model="form.materialsType"
            label="VIDEO"
            @change="radioChange('VIDEO')"
            >视频</el-radio
          >
        </el-form-item>
        <br />
        <el-form-item label="素材名称" prop="materialsName">
          <el-input v-model="form.materialsName" placeholder="请输入素材名称" />
        </el-form-item>
        <br />

        <el-form-item
          label="素材上传"
          prop="materialsFilePath"
          v-if="form.materialsType == 'IMAGE_TEXT'"
        >
          <stationAcatar
            @imgUrl="imgUrl"
            :img="form.materialsFilePath"
            :type="'materialsCoverUrl'"
          />
        </el-form-item>
        <el-form-item
          label="视频封面"
          prop="videoCoverFilePath"
          v-if="form.materialsType == 'VIDEO'"
        >
          <stationAcatar
            @imgUrl="imgUrl3"
            :img="form.videoCoverFilePath"
            :type="'materialsCoverUrl'"
          />
        </el-form-item>

        <el-form-item
          label="视频素材上传"
          prop="materialsFilePath"
          v-if="form.materialsType == 'VIDEO'"
        >
          <trainingAvatar
            @imgUrl="imgUrl2"
            :tovideo="form.materialsFilePath"
            :type="'materialsVideoUrl'"
          />
        </el-form-item>

        <el-form-item label="素材摘要" prop="materialsAbstract">
          <el-input
            style="width: 530px"
            v-model="form.materialsAbstract"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <div style="margin: 20px; font-weight: 700; font-size: 18px">
          标签管理
        </div>

        <el-form-item label="适用症状" prop="indications">
          <el-input v-model="form.indications" placeholder="请输入适用症状" />
        </el-form-item>
        <el-form-item label="适用疾病" prop="applicableDiseases">
          <el-input
            v-model="form.applicableDiseases"
            placeholder="请输入适用疾病"
          />
        </el-form-item>
        <el-form-item label="药物名称" prop="drugName">
          <el-input v-model="form.drugName" placeholder="请输入药物名称" />
        </el-form-item>
        <el-form-item label="手术名称" prop="surgicalName">
          <el-input v-model="form.surgicalName" placeholder="请输入手术名称" />
        </el-form-item>
        <el-form-item label="检查项目" prop="checkItems">
          <el-input v-model="form.checkItems" placeholder="请输入检查项目" />
        </el-form-item>
        <el-form-item label="检验项目" prop="inspectionItems">
          <el-input
            v-model="form.inspectionItems"
            placeholder="请输入检验项目"
          />
        </el-form-item>
        <el-form-item label="人群名称" prop="crowName">
          <el-select
            v-model="form.crowName"
            placeholder="请选择"
            style="width: 206px"
            @change="crowNamechange"
          >
            <el-option
              v-for="item in optionscrowName"
              :key="item.id"
              :label="item.crowdName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 预览弹框 -->
    <el-dialog title="预览" :visible.sync="openview" width="60%">
      <div class="viewbody">
        <div class="left">
          <video
            v-if="queryParams.materialsType == 'VIDEO'"
            ref="myVideo"
            :src="baseUrl + viewform.materialsFilePath"
            controls
          ></video>
          <img
            :src="baseUrl + viewform.materialsFilePath"
            alt=""
            v-if="queryParams.materialsType == 'IMAGE_TEXT'"
          />
        </div>
        <div class="right">
          <div class="nametitle">素材名称</div>
          <div class="nameitem">{{ viewform.materialsName }}</div>
          <div class="nametitle">创建人员</div>
          <div class="nameitem">{{ viewform.createBy }}</div>
          <div class="nametitle">创建时间</div>
          <div class="nameitem">{{ viewform.createTime }}</div>
          <div class="nametitle">素材摘要</div>
          <div class="nameitem">{{ viewform.materialsAbstract }}</div>
          <div class="nametitle">素材标签</div>
          <div class="nameitem">适用症状：{{ viewform.indications }}</div>
          <div class="nameitem">药物名称：{{ viewform.drugName }}</div>
          <div class="nameitem">
            适用疾病：{{ viewform.applicableDiseases }}
          </div>
          <div class="nameitem">手术名称：{{ viewform.surgicalName }}</div>
          <div class="nameitem">检验项目：{{ viewform.inspectionItems }}</div>
          <div class="nameitem">检查项目：{{ viewform.checkItems }}</div>
          <div class="nameitem">人群：{{ viewform.crowName }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMaterials, getMaterials, delMaterials, addMaterials, updateMaterials, crowdInfo } from "@/api/manage/materials";
import stationAcatar from "../../system/stationAvatar/index.vue";
import trainingAvatar from "../../system/trainingAvatar/index.vue";

export default {
  name: "Materials",
  components: { stationAcatar, trainingAvatar },
  dicts: ['crowd_type', 'materials_type', 'video_cover_type'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      videoState: false, // 视频播放状态
      // 学时
      studyTime: {
        currentTime: 0, // 当前已学时长
        duration: 0 // 总时长
      },
      timer: {}, // 定时器
      pauseTimer: {}, // 暂停定时器
      checked: false,
      openview: false,//预览
      viewform: [],
      activeName: 'IMAGE_TEXT',
      options: [{
        value: 'ALL',
        label: '全部'
      }, {
        value: 'LISTED',
        label: '已上架'
      }, {
        value: 'NOT_LISTED',
        label: '未上架'
      }],
      // 人群
      optionscrowName: [
        // {
        //   value: '选项1',
        //   label: '黄金糕'
        // }, {
        //   value: '选项2',
        //   label: '双皮奶'
        // },

      ],
      optionsly: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectedValues: [], // 存储选中的值
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 素材信息表格数据
      materialsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 素材排序，值越小排序越靠前时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialsType: 'IMAGE_TEXT',
        materialsName: null,
        materialsStatus: null,
        createTime: null,
      },
      // 表单参数
      form: {},
      id: null,
      show:false,
      // 表单校验
      rules: {
        materialsName: [
          { required: true, message: "素材名称不能为空", trigger: "blur" },
        ],
        materialsType: [
          { required: true, message: "素材类型不能为空", trigger: "blur" },
        ],
        materialsFilePath: [
          { required: true, message: "素材上传不能为空", trigger: "blur" },
        ],
        videoCoverFilePath: [
          { required: true, message: "视频封面不能为空", trigger: "blur" },
        ],



      }
    };
  },
  created() {
    this.getList();
  },
  methods: {

    // 图片/视频
    handleClick(e) {
      this.queryParams.materialsType = e.name
      this.getList()
    },
    // 素材类型
    radioChange(e) {
      this.$refs.form.clearValidate();
      if (e == 'VIDEO') {
        if (this.title == '添加素材信息') {
          this.form.materialsFilePath = null
          this.form.videoCoverFilePath = null
        } else if (this.title == '修改素材信息') {
          getMaterials(this.id).then(response => {
            if(response.data.videoCoverFilePath){
              this.form= response.data;
            }
          });
          if (this.form.videoCoverFilePath) {
            getMaterials(this.id).then(response => {
              this.form = response.data;
            });
          }
          else if (!this.form.videoCoverFilePath) {
            this.reset()
            // this.form.videoCoverFilePath=null
            // this.form.materialsFilePath= null;
            this.form.materialsType = 'VIDEO'
          }

        }

      } else if (e == 'IMAGE_TEXT') {
        if (this.title == '添加素材信息') {
          this.form.materialsFilePath = null
          this.form.videoCoverFilePath = null
        } else if (this.title == '修改素材信息') {
          getMaterials(this.id).then(response => {
            if(!response.data.videoCoverFilePath){
            this.form= response.data;
            }
          });
          if (!this.form.videoCoverFilePath) {
            getMaterials(this.id).then(response => {
              this.form = response.data;
            });

          }
          else if (this.form.videoCoverFilePath) {
            this.reset()
            this.form.materialsType = 'IMAGE_TEXT'

          }

        }


      }

    },
    // 素材上传
    imgUrl(imgUrl) {
      this.form.materialsFilePath = imgUrl;
    },
    // 视频
    imgUrl2(imgUrl) {
      // this.form.materialsFilePath = process.env.VUE_APP_BASE_API + imgUrl;
      this.form.materialsFilePath = imgUrl;

    },

    // 视频封面
    imgUrl3(imgUrl) {
      this.form.videoCoverFilePath = imgUrl;


    },
    // 复选框点击事件
    changecheck(e, item) {
      this.ids = this.materialsList.map(item => item.checked ? item.id : undefined).filter(e => e)
      if (this.ids.length > 0) {
        this.multiple = false
      } else {
        this.multiple = true
      }

    },
    // 预览
    viewshow(item) {
      this.openview = true
      this.viewform = item

    },
    getcrowdInfo() {
      crowdInfo().then(response => {
        this.optionscrowName = response.data
      })

    },
    // 人群点击事件
    crowNamechange(e) {
      this.form.crowName = this.optionscrowName.find(f => f.id == e).crowdName
      this.form.crowdId = e


    },
    /** 查询素材信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      listMaterials(this.queryParams).then(response => {
        this.materialsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        materialsName: null,
        materialsType: "IMAGE_TEXT",
        materialsOption: 'MANUAL_UPLOAD',
        materialsFilePath: null,
        videoCoverType: null,
        videoCoverFilePath: null,
        materialsAbstract: null,
        indications: null,
        applicableDiseases: null,
        drugName: null,
        surgicalName: null,
        checkItems: null,
        inspectionItems: null,
        crowdId: null,
        crowName: null,
        materialsStatus: "0",
        materialsRemark: null,
        materialsSort: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if (this.daterangeCreateTime) {
        this.queryParams.createTimeStart = this.daterangeCreateTime[0]
        this.queryParams.createTimeEnd = this.daterangeCreateTime[1]
      }else{
        this.queryParams.createTimeStart = null
        this.queryParams.createTimeEnd = null

      }

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      console.log()
      this.daterangeCreateTime = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        materialsType: 'IMAGE_TEXT',
        materialsName: null,
        materialsStatus: null,
        createTimeStart: null,
        createTimeEnd: null,

      }
      this.resetForm("queryForm");
      // this.getList();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.getcrowdInfo()
      this.title = "添加素材信息";
    },
    /** 修改按钮操作 */
    labelchange(item) {
      this.reset();
      this.open = true;

      // const id = item.id || this.ids
      this.id = item.id
      getMaterials(this.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改素材信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMaterials(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMaterials(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.getList();
      if (this.ids.length == 0) {
        this.$modal.msgError("请先选择一条数据");
      } else {
        const ids = this.ids;
        this.$modal.confirm('是否确认删除该素材信息？').then(function () {
          return delMaterials(ids);
        }).then(() => {
          this.$modal.msgSuccess("删除成功");
          // this.ids=[];
          this.getList();

          this.multiple = true

        }).catch(() => { });

      }

    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('manage/materials/export', {
        ...this.queryParams
      }, `materials_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__inner {
  position: absolute !important;
  // top: -84px;
  left: 8px;
}
::v-deep .el-textarea__inner {
  height: 100px;
}
video {
  height: 500px;
  width: 100%;
}
.viewbody {
  width: 100%;
  height: 500px;
  // background: #409eff;
  display: flex;
  .left {
    overflow: auto;

    width: 77%;
    height: 500px;
    // background: #989992;
  }
  img {
    // height: 100%;
    // width: 100%;
  }
  .right {
    width: 20%;
    overflow: auto;
    // background: red;
    margin-left: 30px;
    .nametitle {
      font-size: 14px;
      font-weight: 600;
    }
    .nameitem {
      color: #959595;
      margin: 13px;
    }
  }
}
.bodytopxj {
  width: 100%;
  display: flex;
  white-space: wrap;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  // align-content: space-between;
  .bodylist {
    width: 19%;
    height: 221px;
    border: 2px solid #e2e3e5;
    border-radius: 10px;
    position: relative;
    // margin-bottom: 10px;
    margin: 6px;
    .texttitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;
      margin: 5px 0px 5px 10px;
    }
    //
    .dataliat {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0px 0px 5px 10px;
      font-size: 12px;
      color: #989992;
    }
    .bq {
      width: 155px;
    }
    img {
      width: 100%;
      height: 100px;
    }
    .label {
      position: absolute;
      right: 0px;
      right: 18px;
      color: #409eff;
      bottom: 8px;
      font-size: 13px;
    }
  }
}
</style>

