<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name" v-model="msg.Type"
            ref="Id" :options="TypeList" label="类型" :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name"
            v-model="msg.AuditState" ref="Id" :options="StateList" label="状态" :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <q-input @keyup.enter.native="changePage(1)" @clear="changePage(1)" clearable filled v-model="msg.Title"
            label="输入标题内容" maxlength="20" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" title="" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">图文素材</div>
          <q-space />


        </template>
        <template v-slot:body-cell-CoverImagePath="props">
          <q-td :props="props">
            <el-image v-if="props.row.Type==1 || props.row.Type==5" style="width: 200px;height: 100px;padding: 10px 0 ;"
              :src="props.row.CoverImagePath" fit="cover"></el-image>
            <div v-if="props.row.Type==4"
              style="width: 200px;height: 80px;display: flex;align-items: center;justify-content: center;background: #f6f7f8;">
              <img src="../../../assets/images/Noticen.png" alt="" style="width: 41px;height: 39px;">
            </div>
            <!-- <div style="width: 200px;min-height: 80px;padding: 5px;background: #f6f7f8;display: inline-block;white-space:pre-wrap"
                            v-if="props.row.Type==2" v-html="props.row.Description"></div> -->
          </q-td>
        </template>
        <template v-slot:body-cell-Title="props">
          <q-td :props="props">
            <span>{{props.row.Title}}</span>
            <div style="width: 200px;overflow: hidden ;max-height: 78px;display: inline-block;white-space:pre-wrap"
              v-if="props.row.Type==2" v-html="props.row.Description"></div>
            <div v-if="props.row.Type==5" style="width: 200px;overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical; white-space:pre-wrap">{{props.row.Description}}</div>
          </q-td>
        </template>
         <template v-slot:body-cell-RemunerationState="props">
          <q-td :props="props">
            <span v-if="props.row.RemunerationState==1">发放</span>
            <span v-else>不发放</span>
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">

            <!-- <q-btn flat size="xs" icon="iconfont icon-view" style="font-weight:400;color: #3FC4FF"
                            class="q-mr-xs" label="详情" @click="viewDetails(props.row)" /> -->
            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="修改"
              @click="goedit(props.row)" />
            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
              label="稿酬" @click="gaochou(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-fabu" style="font-weight:400;color: purple" class="q-mr-xs"
              label="发布" @click="release(props.row)" />
            
            <q-btn flat size="xs" icon="iconfont icon-lianluojilu" style="font-weight:400;color: purple" class="q-mr-xs"
              label="发布记录" @click="releaserecord(props.row)">
              <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
                <div style="padding: 10px;">
                  <el-table :data="recordDate" border>
                    <el-table-column width="100" property="PlatfromName" label="平台"></el-table-column>
                    <el-table-column width="200" property="Content" label="内容">
                      <template slot-scope="scope">
                        <div v-html="scope.row.Content"></div>
                      </template>
                    </el-table-column>
                    <el-table-column width="100" property="UpdateByName" label="操作人"></el-table-column>
                    <el-table-column width="100" property="UpdateByName" label="状态">
                      <template slot-scope="scope">
                        <div>{{scope.row.Msg_Id!=null &&scope.row.Msg_Id!=''?'已发布':'-' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column width="150" property="UpdateTime" label="操作时间"></el-table-column>
                  </el-table>
                </div>
              </q-popup-proxy>
            </q-btn>

          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <q-dialog v-model="releasedialog" persistent transition-show="scale" transition-hide="scale">
      <q-card style="width: 600px;max-width:900px;">
        <q-card-section>
          <div class="text-h6">投稿发布</div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="publishMsg.PlatformId" ref="Id"
            :options="platTypeList" label="发布平台" :dense="false" emit-value map-options />
          <div style="display: flex;align-items: center;margin: 10px 0 ;">
            展示方式：
            <q-radio v-model="publishMsg.IsPreview" val="0" label="上传不发布" v-if="publishMsg.Type==1" />
            <q-radio v-model="publishMsg.IsPreview" val="1" label="预览" @input="publishMsg.TagId=''" />
            <q-radio v-model="publishMsg.IsPreview" val="2" label="群发" @input="publishMsg.TagId=''" />
          </div>
          <div style="color: red;font-size: 12px;margin: 5px 0 10px;">
            <span v-if='publishMsg.IsPreview==0'>注：只上传到公众号平台不发布</span>
            <span v-if='publishMsg.IsPreview==1'>注：选择指定的微信号，作用于预览</span>
            <span v-if='publishMsg.IsPreview==2'>注：一天只能群发一次,标签不选择的情况,群发所有人</span>
          </div>
          <q-input v-if='publishMsg.IsPreview==1' clearable filled v-model="publishMsg.TagId" label="输入微信号"
            maxlength="30" />
          <q-select v-if='publishMsg.IsPreview==2' clearable filled stack-label option-value="id" option-label="name"
            v-model="publishMsg.TagId" :options="tagList" label="用户标签" :dense="false" emit-value map-options />
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
          <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
            @click="saveCourse" />
        </q-card-actions>
      </q-card>
    </q-dialog>
     <q-dialog v-model="isgaochouMsg" persistent transition-show="scale" transition-hide="scale">
      <q-card style="width: 600px;max-width:900px;">
        <q-card-section>
          <div class="text-h6">稿酬状态设置</div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          
          <div style="display: flex;align-items: center;margin: 10px 0 ;" v-if="gaochouMsg">
            稿酬状态：
            <q-radio v-model="gaochouMsg.RemunerationState" val="1" label="发放"  />
            <q-radio v-model="gaochouMsg.RemunerationState" val="0" label="不发放"  />
          </div>
       
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="isgaochouMsg=false" />
          <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" 
            @click="saveCourse2" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    
  </div>
</template>

<script>
  import {
    getContributeInfoTypeEnumList,
    getContributeInfoStateEnumList,
    getContributeInfoAuditedPageList,
    setContributeInfoState,
    setContributeInfoPublish,
    getContributeInfoPublishLogList,
    getGZHUserTagList,
    setRemunerationState
  } from '../../../api/teacher/contribution';
  import {
    GetContributePlatfrom, //获取平台
  } from '../../../api/system/wechat';
  export default {
    meta: {
      title: "图文管理"
    },

    data() {
      return {
        loading: false,
        releasedialog: false,
        saveCourseLoading: false,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          rowsPerPage: 15,
          AuditState: "-1", //审核状态
          Type: '-1', //类型
          Title: '', //标题
        },
        TypeList: [], //类型
        StateList: [], //状态
        data: [],
        pageCount: 0,
        columns: [{
            name: 'Id',
            label: 'Id',
            field: 'Id',
            align: 'left'
          },
          {
            name: 'TypeName',
            field: 'TypeName',
            label: '类型',
            align: 'left',
          },
          {
            name: 'CoverImagePath',
            field: 'CoverImagePath',
            label: '封面图',
            align: 'left'
          },
          {
            name: 'Title',
            field: 'Title',
            label: '标题',
            align: 'left'
          },
          {
            name: 'AuditStateName',
            field: 'AuditStateName',
            label: '审核状态',
            align: 'left'
          },
          {
            name: 'RemunerationState',
            field: 'RemunerationState',
            label: '稿酬状态',
            align: 'left'
          },
          {
            name: 'UpdateByName',
            field: 'UpdateByName',
            label: '创建者',
            align: 'left'
          },
          {
            name: 'UpdateTime',
            field: 'UpdateTime',
            label: '创建时间',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'DeptId'
          }
        ],
        TypeList2: [],
        platTypeList: [], //平台列表
        publishMsg: {
          ContributeId: 0,
          PlatformId: 1,
          IsPreview: 0,
          TagId: ''
        },
        recordDate: [],
        tagList: [],
        gaochouMsg:null,
        isgaochouMsg:false
      }
    },

    mounted() {
      this.getTypeList()
      this.getPlatForm()
      this.getStateList()
      this.getList()
      this.getGZHUserTagList() //获取公众号的用户标签
    },
    methods: {
      //获取已开放平台
      getPlatForm() {
        GetContributePlatfrom({}).then(res => {
          if (res.Code == 1) {
            this.platTypeList = res.Data;
          }
        })
      },
      getGZHUserTagList() {
        getGZHUserTagList({}).then(res => {
          if (res.Code == 1) {
            this.tagList = res.Data;
          }
        })
      },
      getTypeList() {
        getContributeInfoTypeEnumList({}).then(res => {
          if (res.Code == 1) {
            this.TypeList2 = JSON.parse(JSON.stringify(res.Data));
            this.TypeList = res.Data;
            let obj = {
              Name: '不限',
              Id: '-1',
            }
            this.TypeList.unshift(obj)
          }
        }).catch(() => {

        })
      },
      getStateList() {
        getContributeInfoStateEnumList({}).then(res => {
          if (res.Code == 1) {
            this.StateList = res.Data;
            let obj = {
              Name: '不限',
              Id: '-1',
            }
            this.StateList.unshift(obj)
          }
        }).catch(() => {

        })
      },
      changePage(e) {
        this.msg.pageIndex = e
        this.getList()
      },
      getList() {
        this.loading = true
        getContributeInfoAuditedPageList(this.msg).then(res => {
          if (res.Code == 1) {
            this.loading = false
            this.data = res.Data.PageData;
            this.pageCount = res.Data.PageCount
          }
        }).catch(() => {

        })
      },

      release(row) { //发布
        this.publishMsg.ContributeId = row.Id;
        this.publishMsg.PlatformId = 1; //默认为微信公众号
        this.publishMsg.IsPreview = '1';
        this.publishMsg.TagId = '';
        this.publishMsg.Type = row.Type;

        this.releasedialog = true
      },
      gaochou(row){//稿酬状态设置
        this.gaochouMsg = {
          ContributeId  :row.Id,
          RemunerationState:row.RemunerationState?row.RemunerationState.toString():0,
        }
        this.isgaochouMsg = true

      },
      releaserecord(row) {
        getContributeInfoPublishLogList({
          ContributeId: row.Id
        }).then(res => {
          if (res.Code == 1) {
            this.recordDate = res.Data
          }
        }).catch(() => {})
      },
      closeCourseForm() {
        this.releasedialog = false
      },
      saveCourse() { //发布投稿
        if (this.publishMsg.PlatformId == '') {
          this.$q.notify({
            type: 'negative',
            message: `请选择发布平台`,
            position: 'top'
          })
          return
        }
        if (this.publishMsg.IsPreview == 1 && this.publishMsg.TagId == '') {
          this.$q.notify({
            type: 'negative',
            message: `请输入预览的微信号`,
            position: 'top'
          })
          return
        }
        this.saveCourseLoading = true
        //推送
        setContributeInfoPublish(this.publishMsg).then(res => {
          if (res.Code == 1) {
            this.saveCourseLoading = false
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            this.getList()
            this.releasedialog = false
          }
        }).catch(() => {
          this.saveCourseLoading = false
        })

      },
      saveCourse2(){
          setRemunerationState(this.gaochouMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            this.getList()
            this.isgaochouMsg =false
          }
        }).catch(() => {
        })
      },

      goedit(row) { //编辑
        this.OpenNewUrl("/teacher/contribution/addimageText", {
          type: row.Type,
          Id: row.Id,
          isM: 1,
        });
      },
      goadd(type) { //新增

        this.OpenNewUrl("/teacher/contribution/addimageText", {
          type: type
        });
      },

    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>