<template>
  <div class="bodyBoxs">
    <div style="margin-bottom: 15px;width: 800px">
      <el-input placeholder="请输入活动名称" v-model="search" class="input-with-select">
        <el-button slot="prepend"
                   style="width: 120px;border-right: rgb(220,223,230) solid 1px;border-radius: 0!important;margin-right: 20px"
                   @click="showAdd">新增活动
        </el-button>
        <el-select style="width: 120px;" v-model="type" slot="prepend" placeholder="请选择">
          <el-option label="全部" value=-1></el-option>
          <el-option label="图文" value=0></el-option>
          <el-option label="视频" value=1></el-option>
          <el-option label="直播推流码" value=2></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
        <!--              <el-button slot="append" style="border-left: rgb(220,223,230) solid 1px;border-radius: 0!important;" @click="exports">导出积分日志</el-button>-->
      </el-input>

    </div>
    <div class="boxs">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        :cell-style="rowStyle"
        :header-cell-style="headerStyle"
        :row-class-name="tableRowClassName"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        ></el-table-column>
        <el-table-column
          prop="headImage"
          label="头图预览"
          width="200px">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 180px; height: 80px"
                :src="scope.row.headImage ? scope.row.headImage : ''">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="分类"
        >
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-tag v-if="scope.row.sort == '图文'" type="warning">图文</el-tag>
              <el-tag v-else-if="scope.row.sort == '视频'" type="danger">视频</el-tag>
              <el-tag v-else type="primary">直播推流码</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="study"
          label="学习次数"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="浏览次数"
        ></el-table-column>
        <el-table-column
          prop="liveStartTime"
          label="直播时间">
          <template slot-scope="scope">
            <span v-text="scope.row.liveStartTime + '-到-' +scope.row.liveEndTime"></span>
          </template>
          >
        </el-table-column>
        <el-table-column
          prop="updatedAt"
          label="更新时间"
        ></el-table-column>
        <el-table-column
          prop="updatedBy"
          label="更新人"
        ></el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-tag style="cursor: pointer" @click="roleData(scope.row)" type="success" size="mini">编辑嘉宾</el-tag>
            <el-tag style="cursor: pointer" @click="exitData(scope.row)" type="warning" size="mini">查看详细</el-tag>
            <el-tag style="cursor: pointer" @click="deleteData(scope.row)" type="danger" size="mini">删除</el-tag>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      <el-dialog
        :title="title"
        :visible.sync="showExitState"
        width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="标题">
            <el-input v-model="form.title" max="20"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.sort" placeholder="请选择活动类别" @change="selectChange">
              <el-option label="图文" value=0></el-option>
              <el-option label="视频" value=1></el-option>
              <el-option label="直播推流码" value=2></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item label="公司简介">
            <el-input type="textarea" v-model="form.company_content"></el-input>
          </el-form-item>
          <el-form-item label="直播时间">
            <div class="block">
              <el-date-picker
                v-model="form.live_start_time"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="直播地址">
            <el-input v-model="form.live_url"></el-input>
          </el-form-item>
          <el-form-item :label="label">
            <el-upload
              class="upload-demo"
              :action="url"
              :multiple="true"
              accept="jpg/png"
              :on-success="upSuccess"
              :show-file-list="true"
              :on-remove="onremove"
              :file-list="fileList"
              :limit=1
              list-type="picture">
              <el-button class="myBtn" style="background:#317caf;color:#fff">选择图片</el-button>
              <el-tag type="danger">建议使用分辨率为：309*220的图片</el-tag>
            </el-upload>
          </el-form-item>
          <el-form-item v-if="videoUpload" label="视频文件上传">
            <el-upload
              class="upload-demo"
              :action="url"
              :multiple="true"
              accept="mp4"
              :on-success="upVideoSuccess"
              :show-file-list="true"
              :on-remove="onVideoRemove"
              :file-list="fileVideoList"
              :limit=1
              list-type="text">
              <el-button class="myBtn" style="background:#317caf;color:#fff">选择视频</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item v-if="live_push_flow" label="推流地址">
            <el-input v-model="form.live_push_flow"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="showExitState = false">取 消</el-button>
                  <el-button type="primary" @click="submitExitData">确 定</el-button>
                </span>
      </el-dialog>
      <el-dialog
        title="编辑嘉宾"
        :visible.sync="showRole"
        width="80%"
        :before-close="roleHandleClose">
        <el-button size="mini" @click="addShowInvitee" type="success" style="margin-bottom: 10px;">新增嘉宾</el-button>
        <el-table
          :data="tableDataRole"
          border
          v-loading="loadingRole"
          :row-class-name="tableRowClassName"
          stripe
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
          ></el-table-column>
          <el-table-column
            prop="head"
            label="头像">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 80px;"
                  :src="scope.row.head ? scope.row.head : ''">
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="duties"
            label="职务"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="编辑">
            <template slot-scope="scope">
              <el-button style="cursor: pointer" @click="addInvitee(scope.row)" type="primary" size="mini">编辑
              </el-button>
              <el-button style="cursor: pointer" @click="deleteRole(scope.row)" type="danger" size="mini">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="showExitState = false">取 消</el-button>
                </span>
      </el-dialog>
      <el-dialog
        :title="roleTitle"
        :visible.sync="invitee"
        width="40%"
        :before-close="inviteeClose">
        <el-form ref="form" :model="addRole" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="addRole.name"></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="addRole.duties"></el-input>
          </el-form-item>
          <el-form-item label="头像上传">
            <el-upload
              class="upload-demo"
              :action="url"
              :multiple="true"
              accept="jpg/png"
              :on-success="upSuccessRole"
              :show-file-list="true"
              :on-remove="onremoveRole"
              :file-list="roleFileList"
              :limit=1
              list-type="picture">
              <el-button class="myBtn" style="background:#317caf;color:#fff">选择图片</el-button>
              <el-tag type="danger">建议使用分辨率为：200*200的图片</el-tag>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="invitee = false">取 消</el-button>
                  <el-button type="primary" @click="submitRole">确 定</el-button>
                </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {getToken} from "@/utils/auth";

  export default {
    data() {
      return {
        videoUpload: false,
        live_push_flow: false,
        label: '图片上传',
        roleTitle: '',
        url: 'https://h5.km-china.cn/index.php?s=imagesUpload',   //:cell-style="rowStyle" :header-cell-style="headerStyle"
        roleFileList: [],
        fileVideoList:[],
        tableData: [],
        tableDataRole: [],
        loading: false,
        page: 1,
        pageSize: 10,
        total: 0,
        currentPage4: 1,
        type: '-1',
        search: '',
        showExitState: false,
        title: '',
        fileList: [],
        showRole: false,
        liveActivityId: 0,
        form: {
          id: 0,
          title: '',
          head_image: '',
          sort: '',
          content: '',
          company_content: '',
          live_start_time: '',
          live_url: '',
          live_push_flow: '',
          video_url:''
        },
        addRole: {
          id: 0,
          name: '',
          duties: '',
          head: '',
          live_activity_id: 0
        },
        loadingRole: false,
        invitee: false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
      }
    },
    created() {
      this.getData()
    },
    methods: {
      selectChange(row) {
        console.log(row)
        if (row == 0) {
          this.label = '图片上传';
          this.videoUpload = false;
          this.live_push_flow = false;
        } else if (row == 1) {
          this.label = '视频封面上传';
          this.videoUpload = true;
          this.live_push_flow = false;
          this.fileVideoList = [];
        } else {
          this.label = '直播封面上传';
          this.videoUpload = false;
          this.live_push_flow = true;
        }
      },
      deleteRole(row) {
        this.$confirm('该嘉宾将删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.deleteRole({
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getData();
              this.showRole = false
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              });
            }
          }).catch((res) => {
            this.loading = false;
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          });
        });
      },
      submitRole() {
        this.loadingRole = true;
        this.$api.setRoleData({
          id: this.addRole.id,
          name: this.addRole.name,
          duties: this.addRole.duties,
          head: this.addRole.head,
          live_activity_id: this.addRole.live_activity_id
        }).then((res) => {
          this.loadingRole = false;
          if (res.code == 0) {
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.getData()
            this.showRole = false
            this.invitee = false;
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loadingRole = false;
        });
      },
      addInvitee(row) {
        console.log(row)
        this.roleTitle = '编辑嘉宾信息'
        this.invitee = true;
        this.addRole.id = row.id;
        this.addRole.name = row.name;
        this.addRole.head = row.head;
        this.addRole.duties = row.duties;
        this.addRole.live_activity_id = row.liveActivityId
        this.roleFileList = [{url: row.head}]
        console.log(this.addRole)
      },
      addShowInvitee() {
        console.log(this.form.id)
        this.roleTitle = '新增嘉宾信息'
        this.invitee = true;
        this.addRole.id = 0;
        this.addRole.name = '';
        this.addRole.head = '';
        this.addRole.duties = '';
        this.addRole.live_activity_id = this.liveActivityId
        this.roleFileList = []
      },
      roleData(row) {
        this.showRole = true;
        this.tableDataRole = row.queryActivityData
        this.liveActivityId = row.id;
      },
      onremove(res) {
        for (var i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].url == res.url) {
            this.fileList.splice(i, 1);
            console.log(this.fileList)
          }
        }
      },
      onremoveRole(res) {
        for (var i = 0; i < this.roleFileList.length; i++) {
          if (this.roleFileList[i].url == res.url) {
            this.roleFileList.splice(i, 1);
            console.log(this.roleFileList)
          }
        }
      },
      onVideoRemove(res) {
        for (var i = 0; i < this.fileVideoList.length; i++) {
          if (this.fileVideoList[i].url == res.url) {
            this.fileVideoList.splice(i, 1);
            console.log(this.fileVideoList)
          }
        }
      },
      upSuccess(e) {
        if (e.code == 0) {
          this.form.head_image = e.data.url
        } else {
          this.$message(e.message);
        }
      },
      upVideoSuccess(e){
        if (e.code == 0) {
          this.form.video_url = e.data.url
        } else {
          this.$message(e.message);
        }
      },
      upSuccessRole(e) {
        console.log(this.roleFileList)
        if (e.code == 0) {
          this.addRole.head = e.data.url
        } else {
          this.$message(e.message);
        }
      },
      rowStyle() {
        return "text-align:center;border:none;color:#727272";
      },
      headerStyle() {
        return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
      },
      exports() {
        window.location.href = 'https://h5.km-china.cn/index.php?s=admin/export&phone=' + this.search + '&type=' + this.type
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        console.log('点击了');
        this.page = val;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getData() {
        this.loading = true;
        this.$api.getActivityData({
          page: this.page,
          size: this.pageSize,
          search: this.search,
          sort: this.type
        }).then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.currentPage4 = res.data.current_page;
          } else {
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      showAdd() {
        this.title = '新增活动'
        this.showExitState = true;
        this.form.id = 0;
        this.form.title = '';
        this.fileList = [];
        this.form.head_image = '';
        this.form.sort = '';
        this.form.live_start_time = ''
        this.form.live_url = ''
        this.form.content = ''
        this.form.company_content = ''
        this.fileVideoList = [];
      },
      exitData(row) {
        console.log(row.sort)
        if (row.sort == '图文') {
          this.label = '图片上传';
          this.videoUpload = false;
          this.live_push_flow = false;

        } else if (row.sort == '视频') {
          this.label = '视频封面上传';
          this.videoUpload = true;
          this.live_push_flow = false;

        } else {
          this.label = '直播封面上传';
          this.videoUpload = false;
          this.live_push_flow = true;

        }
        this.title = '编辑活动'
        this.showExitState = true;
        this.form.id = row.id;
        this.form.title = row.title;
        this.fileList = [{url: row.headImage}];
        this.form.head_image = row.headImage;
        this.form.sort = row.sort ;
        this.form.live_start_time = [row.liveStartTime, row.liveEndTime]
        this.form.live_url = row.liveUrl
        this.form.content = row.content
        this.form.company_content = row.companyContent
        this.form.live_push_flow = row.livePushFlow
        this.form.video_url = row.videoUrl
        if (row.videoUrl != ''){
          this.fileVideoList = [{url:row.videoUrl,name:row.videoUrl,type:'mp4'}]
        }else {
          this.fileVideoList = []
        }


      },
      handleClose() {
        this.showExitState = false;
      },
      roleHandleClose() {
        this.showRole = false;
      },
      inviteeClose() {
        this.invitee = false;
      },
      submitExitData() {
        this.loading = true;


        if(isNaN(parseInt(this.form.sort))){
          if (this.form.sort == '图文') {
            this.form.sort = '0'

          } else if (this.form.sort == '视频') {
            this.form.sort = '1'

          } else {
            this.form.sort = '2'
          }
          console.log(parseInt(this.form.sort))
        }
        this.$api.setActivity({
          id: this.form.id,
          title: this.form.title,
          sort: this.form.sort,
          head_image: this.form.head_image,
          content: this.form.content,
          company_content: this.form.company_content,
          live_start_time: this.form.live_start_time,
          live_url: this.form.live_url,
          live_push_flow: this.form.live_push_flow,
          video_url:this.form.video_url
        }).then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.showExitState = false;
            this.getData();
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      handleAvatarSuccess(res) {

      },
      beforeAvatarUpload(res) {

      },
      deleteData(row) {
        this.$confirm('该活动将删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.deleteActivity({
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getData();
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              });
            }
          }).catch((res) => {
            this.loading = false;
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          });
        });
      }
    }
  }
</script>
<style scoped>
  .bodyBoxs {
    padding: 40px;
  }

  .boxs {
    width: 100%;
    background: #fff;
    border-radius: 15px;
  }

</style>
