<!--
  -    Copyright (c) 2018-2025, linshenxs All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: linshenxs
  -->
<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                       :page.sync="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="handleDel">
                <template slot="menuLeft">
                    <el-button
                            v-if="permissions.admin_tsktaskapply_export"
                            class="filter-item"
                            plain
                            type="primary"
                            size="small"
                            icon="el-icon-download"
                            @click="exportExcel">导出
                    </el-button>
                </template>
                <template slot-scope="{type,row,size,index}" slot="menu">
                  <el-button  :size="size" :type="type" v-if="row['applyStatus']==0" @click="auditNow(row, index)">立即审核</el-button>
                  <el-button  :size="size" :type="type" v-if="row['applyStatus']!=0" @click="viewDetails(row, index)" >查看详情</el-button>
                </template>

              <template slot-scope="{type,row,size,index}" slot="durationForm">
                <avue-select  :disabled="row['applyStatus']!=0" v-model="row['duration']" placeholder="请选择任务时长" type="tree" :dic="allDropDownBox['duration']['list']" @change="initEndTime(row)"></avue-select>
              </template>
              <template slot-scope="{type,row,size,index}" slot="startTimeForm">
                <avue-date  :disabled="row['applyStatus']!=0" v-model="row['startTime']" type="datetime" format="yyyy-MM-dd hh:mm" value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择任务开始时间"  @change="initEndTime(row)" ></avue-date>
              </template>

              <template slot-scope="{type,row,size,index}" slot="peopleNumForm">
                <avue-select :disabled="row['applyStatus']!=0" v-model="row['peopleNum']" placeholder="请选择任务人数" type="tree" :dic="allDropDownBox['peopleNum']['list']" @change="initGiftNumOrSpeakNum(row)"></avue-select>
              </template>

              <template slot-scope="{type,row,size,index}" slot="speakNumForm">
                <div >
                  <div style="margin-left: 15px;font-size:13px">{{ row['speakNum'] }}</div>
                  <ul style="margin-left: -10px" v-if="row['applyStatus']!=0">
                    <li v-for="item in row['speakList']"  :key="item.content" style="list-style: decimal"> {{ item.content }}</li>
                  </ul>

                  <div  style="margin-left: -10px" v-if="row['applyStatus']==0">
                    <div v-for="item in row['speakList']">
                      <el-row>
                        <el-col :span="8">
                          <avue-input v-model="item.content" placeholder="请输入任务时长" ></avue-input>
                        </el-col>
                        <el-col :span="16">
                          <el-row>
                            <el-col :span="8">
                              <el-button type="success" @click="isTemplateShow(item)">从模板选择</el-button>
                            </el-col>
                            <el-col :span="8" v-if="item.isShow"  >
                              <avue-select  value="" placeholder="请选择内容" type="tree" :dic="templateDic" @change="templateChange($event,item)"></avue-select>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                </div>
              </template>

              <template slot-scope="{type,row,size,index}" slot="payACurrencyForm">
                <el-row v-if="row['applyStatus']==0">
                  <el-col :span="8">
                    <avue-input v-model="row['payACurrency']" placeholder="请输入支付A币"  ></avue-input>
                  </el-col>
                  <el-col :span="16">
                    <el-row>
                      <el-col :span="8">
                        <span>A币</span>
                      </el-col>
                      <el-col :span="8"   >
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <div v-if="row['applyStatus']!=0">
                  {{row['payACurrency']}} A币
                </div>
              </template>

              <template slot-scope="{type,row,size,index}" slot="applyStatusForm">
                <el-radio-group v-model="applyStatus" v-if="row['applyStatus']==0">
                  <el-radio :label="1">同意</el-radio>
                  <el-radio :label="2">拒绝</el-radio>
                </el-radio-group>
                <div v-if="row['applyStatus']!=0">
                  <avue-input v-model="allDropDownBox['applyStatus'][row['applyStatus']]"  ></avue-input>
                </div>
              </template>
            </avue-crud>
        </basic-container>
    </div>
</template>

<script>
import {
  fetchList,
  queryDropDownBoxList,
  getObj,
  addObj,
  putObj,
  delObj
} from '@/api/admin/tsktaskapply'
    import {tableOption} from '@/const/crud/admin/tsktaskapply'
    import {mapGetters} from 'vuex'
import {formatDate} from "element-ui/src/utils/date-util";
import {searchTimeFormatter} from "@/util/common";

    export default {
        name: 'tsktaskapply',
        data() {
          return {
            searchForm: {},
            tableData: [],
            applyStatus: 1,
            allDropDownBox: {},
            templateValue:"",
            templateDic:[
              {
                label:'自定义',
                value:"自定义"
              },
              {
                label:'任务员自定义',
                value:'任务员自定义'
              },
              {
                label:'小姐姐人美心善，散花',
                value:'小姐姐人美心善，散花'
              },
              {
                label:'主播唱歌真好听，打赏打赏',
                value:'主播唱歌真好听，打赏打赏'
              },
            ],
            page: {
              total: 0, // 总页数
              currentPage: 1, // 当前页数
              pageSize: 20 // 每页显示多少条
            },
            tableLoading: false,
            tableOption: tableOption
          }
        },
        computed: {
            ...mapGetters(['permissions']),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permissions.admin_tsktaskapply_add, false),
                    delBtn: this.vaildData(this.permissions.admin_tsktaskapply_del, false),
                    editBtn: this.vaildData(this.permissions.admin_tsktaskapply_edit, false)
                };
            }
        },
      methods: {
        // 列表查询
        getList(page, params) {
            params = searchTimeFormatter(params,'createTime');
            this.tableLoading = true
            fetchList(Object.assign({
                current: page.currentPage,
                size: page.pageSize
            }, params, this.searchForm )).then(response => {
                this.tableData = response.data.data.records
                this.page.total = response.data.data.total
                this.tableLoading = false
            }).catch(() => {
                this.tableLoading=false
            })
        },
        //查看详情
        viewDetails(row, index){
          queryDropDownBoxList("queryAllDropDownBoxList").then(response => {
            this.allDropDownBox=response.data
            getObj(row.id).then(response => {
              this.$refs.crud.rowView(response.data.data, index)
            }).catch(() => {
              this.$message.error('查看详情失败')
            });
          }).catch(() => {
            this.$message.error('加载失败')
          });
        },
        //立即审核
        auditNow(row, index){
          queryDropDownBoxList("queryAllDropDownBoxList").then(response => {
            console.log(response.data)
            this.allDropDownBox=response.data
            getObj(row.id).then(response => {
              this.$refs.crud.rowEdit(response.data.data, index)
            }).catch(() => {
              this.$message.error('查看详情失败')
            });
          }).catch(() => {
            this.$message.error('加载失败')
          });

        },
        //初始化结束时间
        initEndTime(row){
          if(row['duration']!=null&&row['startTime']!=null){
            let startTime = Date.parse(row['startTime']+":00"); // 获取当前时间，也是 毫秒级别的
            startTime=startTime+row['duration']*60*1000;
            row['endTime'] = formatDate(new Date(startTime),"yyyy-MM-dd HH:mm:ss");
          }
        },
        //初始化礼物数量和发言数量
        initGiftNumOrSpeakNum(row){
          row['giftNum']=row['peopleNum'];
          row['speakNum']=row['peopleNum'];
        },
        //初始化支付A币
        // initPayACurrencyForm(row){
        //   // if(row['applyStatus']!=0){
        //     row['payACurrency']=row['payACurrency']+" A币"
        //   // }
        // },
        isTemplateShow(item){
          if(item.isShow){
            item.isShow=false;
          }else{
            item.isShow=true;
          }
        },
        templateChange(e,item){
          if(e==null||e==""){
            return ;
          }
          item.content=e;
        },
        // 删除
        handleDel: function (row, index) {
            this.$confirm('是否确认删除ID为' + row.id, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                return delObj(row.id)
            }).then(data => {
                this.$message.success('删除成功')
                this.getList(this.page)
            })
        },
        // 更新
        handleUpdate: function (row, index, done,loading) {
            row.applyStatus=this.applyStatus;
            putObj(row).then(data => {
                this.$message.success('修改成功')
                done()
                this.getList(this.page)
            }).catch(() => {
                loading();
            });
        },
        // 保存
        handleSave: function (row, done,loading) {
            addObj(row).then(data => {
                this.$message.success('添加成功')
                done()
                this.getList(this.page)
            }).catch(() => {
                loading();
            });
        },
        // 每页条数改变事件
        sizeChange(pageSize){
            this.page.pageSize = pageSize
        },
        // 当前页发生改变事件
        currentChange(current){
            this.page.currentPage = current
        },
        // 查询事件
        searchChange(form, done) {
            this.searchForm = form
            this.page.currentPage = 1
            this.getList(this.page, form)
            done()
        },
        // 刷新事件
        refreshChange() {
            this.getList(this.page)
        },
        //  导出excel
        exportExcel() {
            this.downBlobFile('/admin/tskTaskApply/export',this.searchForm, 'tsktaskapply.xlsx')
        }
        }
    }
</script>
