<style>
#material-card .ant-tabs-tab {
  border: 1px solid gainsboro !important;
}

#material-card .ant-tabs-top-bar {
  position: relative;
  z-index: 100;
}

#material-card .ant-badge-count {
  top: -10px;
}

.detail .ant-form-item {
  margin-bottom: 10px !important;
}
.role-item .ant-form-item {
  margin-bottom: 0;
}
.ant-list-item {
  align-items: flex-start;
}
#only-des .ant-list-item-content-single {
  justify-content: center;
}
#only-des .ant-comment-content-author {
  justify-content: center;
}
.ant-comment-content-author > a,
.ant-comment-content-author > span {
  display: contents;
}
</style>
<style lang="scss" scoped>
.script-style span {
  display: block;
}
.home-item {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .home-item {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(50% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
  }
}

/*>=1024的设备*/

// @media (min-width: 1100px) {
//     .checkbox_item_container {
//         width:70%
//     }
// } /*>=1100的设备*/
@media (min-width: 1650px) {
  .home-item {
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e4;
    width: calc(25% - 10px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    position: relative;
    z-index: 99;
  }
}

/*>=1280的设备*/

// @media (min-width: 1366px) {
// }

// @media (min-width: 1440px) {
// }

// @media (min-width: 1680px) {

// }

.actor-photo-list {
  display: flex;
  padding-left: 0;

  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;

    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}

.home-card {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;

  .home-right {
    width: 100%;
  }

  .bg:after {
    content: '';
    width: 110%;
    height: 110%;
    position: absolute;
    left: -5%;
    top: -5%;
    background: inherit;
    filter: blur(10px);
    z-index: 2;
  }
}

.bh {
  height: 60px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

a {
  font-size: 14px;
}
</style>
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item label="剧本名称">
              <a-input placeholder="请输入剧本名称" v-model="queryParam.dramaName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <!-- <div> -->

    <!-- 操作按钮区域 -->

    <div class="table-operator" style="position:relative;z-index:100">
      <a-button type="primary" icon="plus" @click="addScript">新增</a-button>
    </div>

    <div v-if="dataSource.length > 0">
      <div class="home-card">
        <div class="home-item" v-for="(items, index) in dataSource" :key="index">
          <div class="home-right" @click="showDetail(items)">
            <span
              style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
            >
              {{ items.dramaName }}
            </span>
            <div style="display:flex;justify-content:space-between;width:100%;position:relative">
              <span>类型:{{ items.category }}</span>
              <!-- <span>题材:未设置</span>
              <span>时代:未设置</span> -->
            </div>
            <div class="bh">
              创作者：{{ items.userName }}<br />
              {{ items.introduction }}
            </div>
            <!-- <div class="bh">大纲：无</div>
            <div class="bh">字数：0  </div> -->
            <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
              {{ items.createTime }}
              <a style="float:right;" @click.stop="writeScript(items)"> 编写剧本</a>
              <a style="float:right;margin-right:15px" @click.stop="editScript(items)"> 基础信息修改</a>
            </span>
          </div>
        </div>
      </div>
      <a-pagination
        size="small"
        :showTotal="ipagination.showTotal"
        style="float:right"
        v-if="dataSource.length > 0"
        showQuickJumper
        :pageSize.sync="ipagination.pageSize"
        :total="ipagination.total"
        v-model="ipagination.current"
        @change="getDataSource"
      />
    </div>
    <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
        <img
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
        alt="" v-if="!loading"/>
        <img
        v-else
        src="./loading.gif"
        />
    </div>
    <a-modal
      :title="add ? '添加素材' : '修改'"
      v-model="visible"
      @cancel="close"
      @afterClose="close"
      :maskClosable="false"
      :width="800"
    >
      <template slot="footer">
        <a-button key="back" @click="close">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">
          确定
        </a-button>
      </template>
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剧本名称">
          <a-input v-decorator="['dramaName', { rules: [{ required: true, message: '请输入剧本名称' }] }]" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="场景">
          <a-input v-decorator="['scnece', { rules: [{ required: true, message: '请输入场景' }] }]" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="时长">
          <a-input v-decorator="['timeLong']" addonAfter="秒" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频类型">
          <a-select v-decorator="['videoType', { rules: [{ required: true, message: '请选择视频类型' }] }]">
            <a-select-option value="horizontal">横版</a-select-option>
            <a-select-option value="vertical">竖版</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="演员">
          <!-- <a-select mode="multiple" v-decorator="['actorId', { rules: [{ required: true, message: '请选择演员' }] }]">
            <a-select-option v-for="(item, index) of actorList" :key="index" :value="item.id + ''">{{
              item.name
            }}</a-select-option>
          </a-select> -->
          <a-input v-decorator="['actorId']" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="卖点">
          <a-input v-decorator="['usp', { rules: [{ required: true, message: '请输入卖点' }] }]" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="服装备注">
          <a-input v-decorator="['actorRemark']" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄要求">
          <a-input v-decorator="['shootReq']" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="封面文案">
          <a-input v-decorator="['coverText']" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑备注">
          <a-input v-decorator="['clipRemark']" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="行业类型">
          <j-tree-select
            ref="treeSelect"
            placeholder="请选择行业"
            v-decorator="['category', { rules: [{ required: true, message: '请选择行业' }] }]"
            dict="sys_category,name,id"
            pidField="pid"
            pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76"
          >
          </j-tree-select>
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 18 }
          }"
          label="标签"
        >
          <template v-for="(tag, index) in tags">
            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
              <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </a-tag>
            </a-tooltip>
            <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <a-input
            v-if="inputVisible"
            ref="input"
            type="text"
            size="small"
            :style="{ width: '78px' }"
            :value="inputValue"
            @change="handleInputChange"
            @blur="handleInputConfirm"
            @keyup.enter="handleInputConfirm"
          />
          <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
            <a-icon type="plus" /> New Tag
          </a-tag>
        </a-form-item>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="{
            xs: { span: 24 },
            sm: { span: 12 }
          }"
          label="描述"
        >
          <a-textarea
            placeholder="请输入描述"
            v-decorator="[
              'introduction' // 给表单赋值或拉取表单时，该input对应的key
            ]"
            :autosize="{ minRows: 3, maxRows: 10 }"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否公用">
          <a-radio-group
            v-decorator="[
              'nonpublic',
              { initialValue: 0 } // 给表单赋值或拉取表单时，该input对应的key
            ]"
          >
            <a-radio-button :value="0">
              是
            </a-radio-button>
            <a-radio-button :value="1">
              否
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title="脚本内容" v-model="visibleScript" :maskClosable="false" :width="900" class="role-item">
      <template slot="footer">
        <a-button key="back" @click="closeScript">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOkScript">
          确定
        </a-button>
      </template>
      <a-list v-if="comments.length" :dataSource="comments" itemLayout="horizontal">
        <a-list-item slot="renderItem" slot-scope="item, index" v-if="item.author == '情节描述'" id="only-des">
          <a-comment :author="item.author">
            <p slot="content">
              <span v-if="item.plainSeq">顺序类型：{{ item.plainSeq | plainSeqName }}</span
              ><br />
              <span v-if="item.content">描述：{{ item.content }}</span
              ><br />
              <span v-if="item.scene" style="margin-right:15px">镜头：{{ item.scene }}</span
              ><br />
              <span v-if="item.picContent" style="margin-right:15px">画面内容：{{ item.picContent }}</span
              ><br />
              <span v-if="item.clipRemark">剪辑备注：{{ item.clipRemark }}</span>
            </p>
          </a-comment>
          <a slot="actions" @click="editAction(item, index)">修改</a>
          <a-divider type="vertical" />
          <a slot="actions" @click="deleteAction(item, index)">删除</a>
        </a-list-item>
        <a-list-item slot="renderItem" slot-scope="item" v-else>
          <a-comment :avatar="item.avatar">
            <p slot="author">
              <span v-if="item.plainSeq">顺序类型：{{ item.plainSeq | plainSeqName }}</span
              ><br />
              <span v-if="item.scene" style="margin-right:15px">镜头：{{ item.scene }}</span
              ><br />
              <span v-if="item.picContent" style="margin-right:15px">画面内容：{{ item.picContent }}</span
              ><br />
              <span v-if="item.clipRemark">剪辑备注：{{ item.clipRemark }}</span>
            </p>
            <span slot="content">
              {{ item.author }}：
              {{ item.content }}
            </span>
          </a-comment>
          <a slot="actions" @click="editAction(item, index)">修改</a>
          <a-divider type="vertical" />
          <a slot="actions" @click="deleteAction(item, index)">删除</a>
        </a-list-item>
      </a-list>
      <a-comment>
        <div slot="avatar">
          <a-cascader v-model="author" :options="options" @change="getAuthor" :defaultValue="['scence']" />
        </div>

        <div slot="content" v-if="!repeat">
          <a-form-item
            label="排序"
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
            v-if="scriptEdit"
          >
            <a-input v-model="rank"></a-input>
          </a-form-item>
          <a-form-item
            label="顺序类型"
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
          >
            <a-select v-model="plainSeq" style="width:100%">
              <a-select-option :value="1">前3s,创意引入,包袱</a-select-option>
              <a-select-option :value="2">产品卖点罗列、录屏</a-select-option>
              <a-select-option :value="3">反转</a-select-option>
              <a-select-option :value="4">尾帧：引导下载,落版海报</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="镜头"
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
          >
            <a-input v-model="scene"></a-input>
          </a-form-item>
          <a-form-item
            label="画面内容"
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
          >
            <a-input v-model="picContent"></a-input>
          </a-form-item>
          <a-form-item
            label="描述"
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
          >
            <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
          </a-form-item>
          <a-form-item
            label="剪辑备注"
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
          >
            <a-input v-model="clipRemark"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
              添加对话
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
      <a-form :form="formRole" v-if="repeat" :hideRequiredMark="true">
        <a-row :gutter="24" style="border-bottom:1px solid #f2f2f2">
          <a-col :span="6">
            <a-form-item
              :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapper-col="{ xs: { span: 24 }, sm: { span: 18 } }"
              label="姓名"
            >
              <a-input
                placeholder="请输入姓名"
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '请输入姓名!' }] } // 给表单赋值或拉取表单时，该input对应的key
                ]"
              />
            </a-form-item>
            <a-form-item
              :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
              :wrapper-col="{ xs: { span: 24 }, sm: { span: 18 } }"
              label="性别"
            >
              <a-select
                v-decorator="[
                  'sex' // 给表单赋值或拉取表单时，该input对应的key
                ]"
              >
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="18">
            <a-form-item
              :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
              :wrapper-col="{ xs: { span: 24 }, sm: { span: 17 } }"
              label="角色描述"
            >
              <a-textarea
                placeholder="请输入描述"
                v-decorator="[
                  'introduction' // 给表单赋值或拉取表单时，该input对应的key
                ]"
                :autosize="{ minRows: 3, maxRows: 10 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="handleOkRole">
              添加角色
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <a-modal title="内容展示" v-model="visibleScriptShow" :footer="null" :width="800" class="role-item">
      <div id="printTest" v-if="inforDetail">
        <a-button v-print="'#printTest'" type="primary" style="float: right;">
          打印
        </a-button>
        <h3 style="text-align:center">{{ inforDetail.dramaName }}</h3>

        <a-row>
          <a-col :span="8" v-if="inforDetail.category">类型：{{ inforDetail.category }}</a-col>
          <a-col :span="8" v-if="inforDetail.userName">创作者：{{ inforDetail.userName }}</a-col>
          <a-col :span="8" v-if="inforDetail.usp"> 卖点：{{ inforDetail.usp }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="8" v-if="inforDetail.scnece">场景：{{ inforDetail.scnece }}</a-col>
          <a-col :span="8" v-if="inforDetail.videoType">
            视频类型：{{ inforDetail.videoType == 'horizontal' ? '横板' : '竖版' }}</a-col
          >
          <a-col :span="8" v-if="inforDetail.timeLong"> 时长：{{ inforDetail.timeLong }}秒</a-col>
        </a-row>
        <a-row v-if="inforDetail.actorId">
          <a-col :span="24"
            >演员：<span style="margin-right:15px">
              {{ inforDetail.actorId }}
            </span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8" v-if="inforDetail.actorRemark">服装备注：{{ inforDetail.actorRemark }}</a-col>
          <a-col :span="16" v-if="inforDetail.shootReq">拍摄要求：{{ inforDetail.shootReq }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="24" v-if="inforDetail.coverText"> 封面文案：{{ inforDetail.coverText }}</a-col>
        </a-row>
        <a-row style="margin-bottom:15px">
          <a-col :span="24" v-if="inforDetail.clipRemark"> 剪辑备注：{{ inforDetail.clipRemark }}</a-col>
        </a-row>
        <div v-if="one.length > 0" style="border-bottom:1px solid black">
          <h3 style="text-align:center">前3s,创意引入,包袱</h3>
          <P
            v-for="(item, index) of one"
            :key="index"
            class="script-style"
            style="font-size:16px;"
          >
            <span v-if="item.scene" style="margin-right:15px;">镜头:{{ item.scene }}</span>
            <span v-if="item.picContent" style="margin-right:15px;">画面内容:{{ item.picContent }}</span>
            <span v-if="item.clipRemark">剪辑备注:{{ item.clipRemark }} </span>
            <span style="display:inline-block;margin-top:5px;font-weight:700">{{
              item.author == '情节描述' ? '' : item.author + ':'
            }}</span>
            {{ item.author == '情节描述' ? '【' + item.content + '】' : item.content }}
          </P>
        </div>
        <div v-if="two.length > 0">
          <h5 style="text-align:center">产品卖点罗列、录屏</h5>
        </div>
        <div v-if="three.length > 0">
          <h5 style="text-align:center">反转</h5>
        </div>
        <div v-if="four.length > 0">
          <h5 style="text-align:center">引导下载,落版海报</h5>
        </div>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import UploadToAli from '@femessage/upload-to-ali'
import { getAction, postAction, postFile, deleteAction } from '@/api/manage'
import qs from 'qs'
import { mapGetters } from 'vuex'
import moment from 'moment'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import selectTable from '@/views/modules/Statistics/components/selecTable.vue'

import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
export default {
  name: 'YardList',
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    UploadToAli,
    selectTable,
    JTreeSelect
  },

  data() {
    return {
      author: ['scence'],
      comments: [],
      roleList: [],
      actorList: [],
      submitting: false,
      value: '',
      rank: '',
      scriptEdit: null,
      scene: '',
      clipRemark: '',
      picContent: '',
      projectId: '',
      plainSeq: '1',
      inputVisible: false,
      visibleScript: false,
      visibleScriptShow: false,
      visibleRole: false,
      inputValue: '',
      options: [
        {
          value: 'scence',
          label: '情节描述'
        },
        {
          value: 'taici',
          label: '台词',
          children: []
        },
        {
          value: 'createRole',
          label: '新建角色'
        }
      ],
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 12
        }
      },
      noImgUrl: require('@/assets/img/noImg.png'),
      queryParam: {},
      dataElse: [],
      show: true,
      visible: false,
      visibleDetail: false,
      url: {
        list: '/ctop/dramaInfo/list'
      },
      detail: false,
      form: this.$form.createForm(this),
      formRole: this.$form.createForm(this),
      listData: [],
      tags: [],
      name: '',
      detail: null,
      add: true,
      id: '',
      key: '0',
      mediaId: null,
      sizeType: [],
      size: 4,
      repeat: false,
      excellent: 0,
      code: '',
      dramaId: null,
      inforDetail: null,
      one: [],
      two: [],
      three: [],
      four: []
    }
  },
  filters: {
    getDate(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    },
    plainSeqName(value) {
      var data = {
        1: '前3s,创意引入,包袱',
        2: '产品卖点罗列、录屏',
        3: '反转',
        4: '尾帧：引导下载,落版海报'
      }
      return data[value]
    }
  },
  computed: {},
  created() {
    this.ipagination.pageSize = 8
    this.getActor()
  },
  watch: {},
  methods: {
    actorName(actorId) {
      var data = this.actorList.filter(item => {
        return item.id == actorId
      })
      return data[0].name
    },
    addScript() {
      this.visible = true
      this.confirmLoading = false
      this.form.resetFields()
      this.tags = []
      this.getActor()
    },
    deleteAction(item, index) {
      postAction('/ctop/dramaItemInfo/delete', { id: item.id }).then(res => {
        if (res.success) {
          this.comments.splice(index, 1)
        }
      })
    },
    editAction(item, index) {
      console.log(item, index)
      this.scriptEdit = item.id
      this.plainSeq = item.plainSeq
      this.rank = item.rank
      this.scene = item.scene
      this.value = item.line
      this.clipRemark = item.clipRemark
      this.picContent = item.picContent
      this.author = item.type == 1 ? ['scence'] : ['taici', item.roleId]

      //   line: this.value,
      //     scene: this.scene,
      //     clipRemark: this.clipRemark,
      //     picContent: this.picContent,
      //     type: this.author[0] == 'scence' ? 1 : 2,
      //     roleId: this.author[0] == 'scence' ? null : this.author[1]

      //   postAction('/ctop/dramaItemInfo/edit', { id: item.id }).then(res => {
      //     if (res.success) {
      //       this.comments.splice(index, 1)
      //     }
      //   })
    },
    getActor() {
      getAction('/ctop/actor/list', { column: 'createTime', order: 'desc', pageNo: 1, pageSize: 1000 }).then(res => {
        console.log(res)
        if (res.success) {
          this.actorList = res.result.records
        }
      })
    },
    showDetail(item) {
      this.visibleScriptShow = true
      this.inforDetail = item
      getAction('/ctop/dramaInfo/detail', { dramaId: item.id }).then(res => {
        console.log(res)
        if (res.success) {
          this.comments = res.itemInfos.map(v => {
            return {
              ...v,
              author: v.type == 1 ? '情节描述' : v.roleName,
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: v.line,
              edit: false
            }
          })
          this.one = this.comments.filter(v => {
            return v.plainSeq == 1
          })
          this.two = this.comments.filter(v => {
            return v.plainSeq == 2
          })
          this.three = this.comments.filter(v => {
            return v.plainSeq == 3
          })
          this.four = this.comments.filter(v => {
            return v.plainSeq == 4
          })
          this.roleList = res.roleInfos
          this.options = [
            {
              value: 'scence',
              label: '情节描述'
            },
            {
              value: 'taici',
              label: '台词',
              children: res.roleInfos.map(item => {
                return {
                  value: item.id,
                  label: item.name
                }
              })
            },
            {
              value: 'createRole',
              label: '新建角色'
            }
          ]
        }
      })
    },
    getAuthor(e) {
      console.log(e)
      if (e[0] == 'createRole') {
        // this.author = []
        this.repeat = true
      } else {
        this.repeat = false
      }
    },
    handleSubmit() {
      if (!this.value) {
        return
      }

      this.submitting = true
      if (this.scriptEdit) {
        postAction('/ctop/dramaItemInfo/edit', {
          id: this.scriptEdit,
          line: this.value,
          scene: this.scene,
          clipRemark: this.clipRemark,
          picContent: this.picContent,
          type: this.author[0] == 'scence' ? 1 : 2,
          rank: this.rank,
          plainSeq: this.plainSeq,
          roleId: this.author[0] == 'scence' ? null : this.author[1]
        }).then(res => {
          if (res.success) {
            this.scriptEdit = null
            this.submitting = false
            this.value = ''
            this.scene = ''
            this.clipRemark = ''
            this.picContent = ''

            this.getDetailList(this.dramaId)
          }
        })
      } else {
        postAction('/ctop/dramaItemInfo/add', {
          dramaId: this.dramaId,
          line: this.value,
          scene: this.scene,
          clipRemark: this.clipRemark,
          picContent: this.picContent,
          plainSeq: this.plainSeq,
          type: this.author[0] == 'scence' ? 1 : 2,
          roleId: this.author[0] == 'scence' ? null : this.author[1]
        }).then(res => {
          console.log(res)
          this.submitting = false
          if (res.success) {
            this.comments = [
              ...this.comments,
              {
                author:
                  this.author[0] == 'scence'
                    ? '情节描述'
                    : this.roleList.filter(v => {
                        return v.id == this.author[1]
                      })[0].name,
                avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                content: this.value,
                scene: this.scene,
                clipRemark: this.clipRemark,
                picContent: this.picContent,
                datetime: moment().fromNow(),
                edit: false
              }
            ]
            this.value = ''
            this.scene = ''
            this.clipRemark = ''
            this.picContent = ''
          } else {
            this.$message.error('添加失败')
          }
        })
      }
      //   setTimeout(() => {

      //   }, 1000)
    },
    handleChange(e) {
      this.value = e.target.value
    },
    writeScript(item) {
      this.visibleScript = true
      this.dramaId = item.id
      //   this.author = 'scence'
      this.getDetailList(item.id)
    },
    getDetailList(id) {
      getAction('/ctop/dramaInfo/detail', { dramaId: id }).then(res => {
        console.log(res)
        if (res.success) {
          this.comments = res.itemInfos.map(v => {
            return {
              ...v,
              author: v.type == '1' ? '情节描述' : v.roleName,
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: v.line,
              scene: v.scene,
              clipRemark: v.clipRemark,
              picContent: v.picContent,
              edit: false
            }
          })
          this.roleList = res.roleInfos
          this.options = [
            {
              value: 'scence',
              label: '情节描述'
            },
            {
              value: 'taici',
              label: '台词',
              children: res.roleInfos.map(item => {
                return {
                  value: item.id,
                  label: item.name
                }
              })
            },
            {
              value: 'createRole',
              label: '新建角色'
            }
          ]
        }
      })
    },
    getRoleList() {
      getAction('/ctop/dramaInfo/detail', { dramaId: this.dramaId }).then(res => {
        if (res.success) {
          this.roleList = res.roleInfos
          this.options = [
            {
              value: 'scence',
              label: '情节描述'
            },
            {
              value: 'taici',
              label: '台词',
              children: res.roleInfos.map(item => {
                return {
                  value: item.id,
                  label: item.name
                }
              })
            },
            {
              value: 'createRole',
              label: '新建角色'
            }
          ]
        }
      })
    },

    handleOkRole() {
      this.formRole.validateFieldsAndScroll((err, values) => {
        if (err) {
          // 这里做逻辑处理
        } else {
          var params = { ...values, dramaId: this.dramaId }
          postAction('/ctop/dramaRoleInfo/add', params).then(res => {
            if (res.success) {
              this.getRoleList()
            }
          })
          //   this.listData.push({ name: values.name, sex: values.sex, introduction: values.introduction })
          this.formRole.resetFields()
        }
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: ''
      })
    },
    close() {
      this.scriptEdit = null
      this.submitting = false
      this.value = ''
      this.scene = ''
      this.clipRemark = ''
      this.picContent = ''
      this.visible = false
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(function() {
        this.$refs.input.focus()
      })
    },
    onChange() {},
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    searchRe() {
      this.queryParam.projectId = ''
      if (this.queryParam.createTime) {
        this.queryParam.createTime = ''
      }
      this.loadData(1)
    },
    handleClose(removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag)
      this.tags = tags
    },

    handleInputChange(e) {
      this.inputValue = e.target.value
    },
    handleOkScript() {
      this.visibleScript = false
    },
    closeScript() {
      this.visibleScript = false
      this.comments = []
    },
    editScript(item) {
      //   this.getActor()
      this.visible = true
      this.add = false
      this.id = item.id
      this.$nextTick(() => {
        this.form.setFieldsValue({
          actorId: item.actorId,
          actorRemark: item.actorRemark,
          category: item.category,
          clipRemark: item.clipRemark,
          coverText: item.coverText,
          dramaName: item.dramaName,
          introduction: item.introduction,
          nonpublic: item.nonpublic,
          scnece: item.scnece,
          shootReq: item.shootReq,
          usp: item.usp,
          videoType: item.videoType,
          timeLong: item.timeLong
        })
      })
      this.tags = item.tag.split(',')
    },
    handleOk() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          // 这里做逻辑处理
        } else {
          var params = { ...values }
          params.tag = this.tags.join()
        //   params.actorId = params.actorId.join()
          if (this.add) {
            postAction('/ctop/dramaInfo/add', params).then(res => {
              if (res.success) {
                this.form.resetFields()
                this.tags = []
                this.loadData()
                this.visible = false
                this.add = true
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            params.id = this.id
            postAction('/ctop/dramaInfo/edit', params).then(res => {
              if (res.success) {
                this.form.resetFields()
                this.tags = []
                this.loadData()
                this.visible = false
                this.add = true
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }
      })
    },
    getDataSource(page, pageSize) {
      this.ipagination.current = page
      this.loadData()
    },
    getData(className) {
      return this.form.getFieldValue(className)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
