<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;
}
</style>
<style lang="scss" scoped>
.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: 1280px) {
  .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) {

// }
@media (min-width: 1920px) {
  .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;
    cursor: pointer;
  }
}

.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">
            <selectTable :projectId.sync="queryParam.projectId"></selectTable>
          </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="
          visible = true
          confirmLoading = false
        "
        >新增</a-button
      >
    </div>

    <div v-if="dataSource.length > 0">
      <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
        <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
          <div class="home-right">
            <span
              @click.stop
              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 }}
            </span>
          </div>
        </div>
      </a-checkbox-group>
      <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=""
      />
    </div>
    <a-modal title="添加素材" v-model="visible" :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="行业类型">
          <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-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import UploadToAli from '@femessage/upload-to-ali'
import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
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 BMF from 'browser-md5-file'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
import accountCheck from './accountCheck'
export default {
  name: 'YardList',
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    UploadToAli,
    accountCheck,
    selectTable,
    JTreeSelect
  },

  data() {
    return {
      projectId: '',
      inputVisible: false,
      inputValue: '',
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 12
        }
      },
      noImgUrl: require('@/assets/img/noImg.png'),
      queryParam: {},
      dataElse: [],
      ascription: {
        clipId: [], //剪辑人id
        shotId: [], //拍摄人id
        planId: [], //策划id
        planeId: [] //平面id
      },
      show: true,
      visible: false,
      visibleDetail: false,
      url: {
        list: '/ctop/dramaInfo/list'
      },
      detail: false,
      form: this.$form.createForm(this),
      tags: [],
      refuseFile: [],
      refuseReason: '',
      creativeCopywriter: '',
      customDomain: '',
      region: 'oss-cn-beijing',
      bucket: 'ctop-media',
      acceptVideo: 'video/mpeg,video/mp4',
      acceptImage: 'image/jpeg,image/jpg,image/png',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      checkArr: [],
      checkAll: false,
      showUrl: '',
      showUrlWater: '',
      materialName: '',
      materialDescribe: '',
      name: '',
      detail: null,
      add: true,
      id: '',
      role: {
        roleCode: '',
        roleName: ''
      },
      key: '0',
      mediaId: null,
      sizeType: [],
      size: 4,
      repeat: false,
      excellent: 0,
      code: ''
    }
  },
  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
    }
  },
  computed: {
    dirImg() {
      let date = new Date()
      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 'image/' + y + '-' + MM + '-' + d + '/'
    },
    dirVideo() {
      let date = new Date()
      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 'video/' + y + '-' + MM + '-' + d + '/'
    }
  },
  created() {
    this.ipagination.pageSize = 8
  },
  updated() {
    stopOtherVideo()
  },
  watch: {},
  methods: {
    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.form.resetFields()
      //   this.urlList = { url: '', md5: '', name: '' }
      //   this.watermarkUrl = { url: '', md5: '', name: '' }
      //   this.tags = []
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(function() {
        this.$refs.input.focus()
      })
    },
    onChangeCheck() {},
    ...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
    },
    handleOk() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          // 这里做逻辑处理
        } else {
          var params = { ...values }
          params.tag = this.tags.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 {
            fileEdit({
              ...params,
              status: '0'
            }).then(res => {
              this.form.resetFields()
              this.urlList = {
                url: '',
                md5: '',
                name: ''
              }
              this.watermarkUrl = {
                url: '',
                md5: '',
                name: ''
              }
              this.tags = []
              this.loadData()
              this.visible = false
              this.add = true
              for (const key in this.role) {
                if (key == 'roleCode') {
                  this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
                }
              }
            })
          }
        }
      })
    },
    getDataSource(page, pageSize) {
      this.ipagination.current = page
      this.checkArr = []
      this.checkAll = false
      this.loadData()
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
