<template>
  <div style="padding:10px;">
    <!-- 搜索栏 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="剧本标题:" style="margin-right:50px;">
          <el-input
            v-model="queryParams.query.title"
            style="height:30px;"
            placeholder="请输入剧本标题"
          />
        </el-form-item>
        <el-form-item label="工作室:" style="margin-right:50px;">
          <el-input
            v-model="queryParams.query.studioName"
            style="height:30px;"
            placeholder="请输入工作室"
          />
        </el-form-item>
        <el-form-item label="标签:" style="margin-right:50px;">
          <el-input
            v-model="queryParams.query.labelName"
            style="height:30px;"
            placeholder="请输入标签"
          />
        </el-form-item>
      </el-form>
      <div class="search-button">
        <el-button
          size="medium"
          type="primary"
          style="height:36px;width:100px;"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="medium"
          style="margin-left:20px;height:36px;width:100px;"
          @click="refresh"
          >重置</el-button
        >
      </div>
    </div>
    <div class="add-button">
      <el-button
        size="medium"
        type="primary"
        style="height:36px;width:100px;"
        @click="handleAdd"
        >新建</el-button
      >
    </div>
    <!-- 列表 -->
    <div class="content">
      <el-table
        v-loading="loading"
        ref="singleTable"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column align="center" property="title" label="剧本标题" />
        <el-table-column align="center" property="studioName" label="工作室" />
        <el-table-column align="center" property="labelName" label="标签" />
        <el-table-column
          align="center"
          property="createTime"
          label="创建时间"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="mini">Tips维护</el-button>
            <el-button type="text" size="mini" @click="hanDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="queryList"
      />
    </div>
    <!-- 新增表单 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.Visible" width="70%">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :inline="true"
        label-width="100px"
        class="demo-ruleForm"
      >
        <h3 class="form-title">基本信息</h3>
        <el-form-item label="剧本标题:" prop="title" style="width:45%">
          <el-input v-model="ruleForm.title" style="width:300px;" />
        </el-form-item>
        <el-form-item label="工作室:" prop="studioName" style="width:45%">
          <el-input v-model="ruleForm.studioName" style="width:300px;" />
        </el-form-item>
        <el-form-item label="标签:" prop="labelName" style="width:100%">
          <el-input v-model="ruleForm.labelName" style="width:300px;" />
        </el-form-item>
        <h3 class="form-title">剧本图片</h3>
        <el-form-item label="封面">
          <!-- :action="baseUrl + 'sys/file/upload'" -->
          <!-- <el-image v-if="ruleForm.cover" style="width: 146px; height: 146px" :src="ruleForm.cover" fit="fill"> 
          </el-image> -->
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            :auto-upload="false"
            :on-change="uploadImg"
            :on-success="handleAvatar"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="其它图片" style="width:100%">
          <el-upload
            action
            class="avatar-uploader"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="changeImgs"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <h3 class="form-title">剧本简介</h3>
        <el-form-item label="简介">
          <!-- <el-input
            v-model="ruleForm.desc"
            style="width:500px"
            rows="10"
            type="textarea"
          /> -->
          <Tinymce ref="editor" v-model="ruleForm.introduction" :height="400" />
        </el-form-item>
        <h3 class="form-title">开本流程</h3>
        <el-table
          :header-cell-style="{ background: '#eee', color: '#606266' }"
          :data="ruleForm.processesList"
          border
          style="width: 90%;margin-left:30px;"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column align="center" property="title" label="流程标题">
            <template slot-scope="scope">
              <el-input v-model="ruleForm.processesList[scope.$index].title" />
            </template>
          </el-table-column>
          <el-table-column align="center" property="code" label="流程编号">
            <template slot-scope="scope">
              <el-input v-model="ruleForm.processesList[scope.$index].code" />
            </template>
          </el-table-column>
          <el-table-column align="center" property="introduction" label="简介">
            <template slot-scope="scope">
              <el-input
                v-model="ruleForm.processesList[scope.$index].introduction"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" property="sort" label="排序">
            <template slot-scope="scope">
              <el-input v-model="ruleForm.processesList[scope.$index].sort" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="Del(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:15px;">
          <el-button
            type="success"
            style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
            @click="handleAddK"
            >新建</el-button
          >
        </div>
        <h3 class="form-title">剧本资源</h3>
        <el-form-item label="图片" prop="imgUrls" style="width: 100%;">
          <el-radio-group v-model="radioImg" @change="changeImg">
            <el-radio label="1">本地上传</el-radio>
            <el-radio label="2">网易云地址</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="radioImg == 2" style="width: 100%;" class="urlTable">
          <el-table
            :data="ruleForm.radioImg"
            border
            style="width: 80%;margin-left:100px;"
          >
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column align="center" property="date" label="资源标题">
              <template slot-scope="scope">
                <el-input v-model="ruleForm.radioImg[scope.$index].title" />
              </template>
            </el-table-column>
            <el-table-column align="center" property="url" label="资源URL">
              <template slot-scope="scope">
                <el-input v-model="ruleForm.radioImg[scope.$index].url" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              property="processId"
              label="关联流程"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="ruleForm.radioImg[scope.$index].processId"
                  clearable
                  placeholder="请选择流程"
                >
                  <el-option
                    v-for="item in lcData"
                    :key="item.value"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="Del(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top:15px;">
            <el-button
              type="success"
              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
              @click="handleAddImg"
              >新建</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="音频" prop="imgUrls" style="width: 100%;">
          <el-radio-group v-model="radioMusic" @change="changeMusic">
            <el-radio label="1">本地上传</el-radio>
            <el-radio label="2">网易云地址</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="radioMusic == 2" style="width: 100%;" class="urlTable">
          <el-table
            :data="ruleForm.radioMusic"
            border
            style="width: 80%;margin-left:100px;"
          >
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column align="center" property="title" label="资源标题">
              <template slot-scope="scope">
                <el-input v-model="ruleForm.radioMusic[scope.$index].title" />
              </template>
            </el-table-column>
            <el-table-column align="center" property="url" label="资源URL">
              <template slot-scope="scope">
                <el-input v-model="ruleForm.radioMusic[scope.$index].url" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              property="processId"
              label="关联流程"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="ruleForm.radioMusic[scope.$index].processId"
                  clearable
                  placeholder="请选择流程"
                >
                  <el-option
                    v-for="item in lcData"
                    :key="item.value"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="DelMusic(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top:15px;">
            <el-button
              type="success"
              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
              @click="handleAddMusic"
              >新建</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="视频" prop="imgUrls" style="width: 100%;">
          <el-radio-group v-model="radioVideo" @change="changeVideo">
            <el-radio label="1">本地上传</el-radio>
            <el-radio label="2">网易云地址</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="radioVideo == 2" style="width: 100%;" class="urlTable">
          <el-table
            :data="ruleForm.radioVideo"
            border
            style="width: 80%;margin-left:100px;"
          >
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column align="center" property="title" label="资源标题">
              <template slot-scope="scope">
                <el-input v-model="ruleForm.radioVideo[scope.$index].title" />
              </template>
            </el-table-column>
            <el-table-column align="center" property="url" label="资源URL">
              <template slot-scope="scope">
                <el-input v-model="ruleForm.radioVideo[scope.$index].url" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              property="processId"
              label="关联流程"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="ruleForm.radioVideo[scope.$index].processId"
                  clearable
                  placeholder="请选择流程"
                >
                  <el-option
                    v-for="item in lcData"
                    :key="item.value"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="DelVideo(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top:15px;">
            <el-button
              type="success"
              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
              @click="handleAddVideo"
              >新建</el-button
            >
          </div>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.Visible = false">取 消</el-button>
        <el-button type="primary" @click="subMit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
import {
  queryJbInfo,
  addJbInfo,
  updateJbInfo,
  queryJbDetail,
  deleteJbInfo,
  queryFindList
} from "@/api/userInfoApi.js";
import { uploadFile, delFile } from "@/api/upload/upload.js";
const baseUrl = process.env.VUE_APP_BASE_API;
export default {
  components: { Tinymce },
  data() {
    return {
      baseUrl,
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        query: {
          title: undefined,
          studioName: undefined,
          labelName: undefined
        }
      },
      tableData: [],
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        labelName: [
          { required: true, message: "请输入标签名称", trigger: "blur" }
        ]
      },
      dialog: {
        title: "新增剧本",
        Visible: false
      },
      ruleForm: {
        resource: "1",
        processesList: [],
        imgUrl: "",
        data: [],
        radioImg:[],
        radioMusic:[],
        radioVideo:[],
        resourcesList:[]
      },
      dialogVisible: false,
      active: "",
      imageUrl: "",
      total: 0,
      dialogVisible: false,
      dialogImageUrl: "",
      dataImg: [],
      lcData: [],
      radioImg:"1",
      radioMusic:'1',
      radioVideo:"1"
    };
  },
  mounted() {
    this.queryList();
    this.queryFindList();
  },
  methods: {
    //获取列表
    async queryList() {
      this.loading = true;
      try {
        let res = await queryJbInfo(this.queryParams);
        console.log(res);
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      } catch (err) {
        console.log(err);
      }
    },
    //搜索
    search() {
      this.queryList();
    },
    //重置
    refresh() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 15,
        query: {
          title: undefined,
          studioName: undefined,
          labelName: undefined
        }
      };
      this.queryList();
    },
    //获取流程
    async queryFindList() {
      try {
        let res = await queryFindList({});
        // console.log(res.data, "流程列表");
        this.lcData = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //获取详情
    async queryListDetail(id) {
      try {
        let res = await queryJbDetail(id);
        console.log(res, "详情");
        this.ruleForm = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 新增
    handleAdd() {
      this.dialog.Visible = true;
      this.dialog.title = "新增剧本";
    },
    async subMit() {
      this.ruleForm.imgUrl = this.dataImg.join(",");
      this.ruleForm.resourcesList = this.ruleForm.resourcesList.concat(this.ruleForm.radioImg).concat(this.ruleForm.radioMusic).concat(this.ruleForm.radioVideo)
      console.log(this.ruleForm, "参数");
      try{
        let res = await addJbInfo(this.ruleForm)
         if (res.code == 200) {
          this.$message.success("新增成功");
          this.dialog.Visible = false
          this.queryList();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      }catch(err){
        console.log(err)
      }
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.dialog.Visible = true;
      this.dialog.title = "编辑剧本";
      this.ruleForm = row;
    },
    // 查看
    handleView(row) {
      this.queryListDetail(row.id);
    },
    // 删除
    async hanDel(row) {
      try {
        await this.$confirm("此操作将永久删除该剧本,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        let res = await deleteJbInfo(row.id);
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.queryList();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    handleAvatar(res, file, fileList) {
      console.log(res, file, "整个");
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file, "成功了吗");
    },
    //上传图片
    async uploadImg(file, fileList) {
      try {
        let formData = new FormData();
        let type = file.raw.type;
        formData.append("file", file.raw);
        formData.append("type", type);
        let res = await uploadFile(formData);
        // this.ruleForm.cover = res.data.wjUrl;
        this.$set(this.ruleForm, "cover", res.data.wjUrl);
        console.log(this.ruleForm.cover);
      } catch (err) {
        console.log(err);
      }
    },
    async changeImgs(file, fileList) {
      try {
        let formData = new FormData();
        let type = file.raw.type;
        formData.append("file", file.raw);
        formData.append("type", type);
        let res = await uploadFile(formData);
        console.log(res, 142131);
        this.dataImg.push(res.data.wjUrl);
      } catch (err) {
        console.log(err);
      }
    },
    beforeAvatarUpload(file) {
      console.log(file, 41231);
      const isJPG = file.type;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 开本流程新增
    handleAddK() {
      this.ruleForm.processesList.push({
        title: "",
        code: "",
        introduction: "",
        sort: ""
      });
    },
    // 开本流程删除
    Del(index) {
      this.ruleForm.processesList.splice(index, 1);
    },
    // 图片预览
    dialogimg(e) {
      console.log(e);
      this.dialogVisible = true;
      this.dialogImageUrl = this.ruleForm.imgUrls[e];
    },
    // 图片删除
    deldialogimg(index) {
      this.ruleForm.imgUrls.splice(index, 1);
      var img = this.ruleForm.imgUrl[index];
      // proUpdate({ wjUrl: img }).then((res) => {
      //   if (res.code == 200) {
      //     that.back();
      //   }
      // });
    },
    changeImg(val) {
      this.radioImg = val;
    },
    changeMusic(val) {
      this.radioMusic = val;
    },
    changeVideo(val) {
      this.radioVideo = val;
    },
    //新增图片资源
    handleAddImg(){
      this.ruleForm.radioImg.push({
        title: "",
        url: "",
        processId:'',
        mediaType:1,
        sourceType:this.radioImg
      });
    },
    handleAddMusic() {
      this.ruleForm.radioMusic.push({
        title: "",
        url: "",
        processId:'',
        mediaType:2,
        sourceType:this.radioMusic
      });
    },
    handleAddVideo() {
      this.ruleForm.radioVideo.push({
        title: "",
        url: "",
        processId:'',
        mediaType:3,
        sourceType:this.radioVideo
      });
    }
  }
};
</script>
<style scoped>
.content {
  background: #fff;
  margin-top: 15px;
}
.add-button {
  margin-top: 15px;
}
/deep/ .el-input__inner {
  height: 30px;
}
.search-button {
  display: flex;
}
.form-title {
  margin-left: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.urlTable /deep/ .el-form-item__content {
  width: 100%;
}
</style>
