<template>
    <div>
        <el-tabs type="border-card" @tab-click="tabsType">
            <el-tab-pane label="家政服务">
                <div class="app-container">
                    <el-form
                        :model="queryParams"
                        ref="queryForm"
                        :inline="true"
                        v-show="showSearch"
                    >
                        <!-- <CategoryCascader v-if="merchantId" label="视频类目" prop="videoCategoryId"/> -->
                        <!-- <el-form-item
                                    label="服务类型"
                                    prop="bizType"
                                    style="margin-left: 30px"

                                >
                                    <el-select
                                        v-model="queryParams.bizType"
                                        placeholder="请选择"
                                        size="small"
                                        @change="changeBizType"
                                    >
                                <el-option
                                    v-for="item in bizTypeList"
                                    :key="item.bizTypeName"
                                    :label="item.bizTypeName"
                                    :value="item.bizType"

                                >
                                </el-option>
                            </el-select>
                            </el-form-item>  -->
                    <el-form-item  label="视频类目">
                        <!-- <el-cascader
                            v-model="queryParams.videoCategoryId"
                            :options="categoryList"
                            :props="optionProps"
                            size="small"
                            clearable
                        ></el-cascader> -->
                         <el-select v-model="queryParams.parentId" placeholder="请选择">
                            <el-option
                            v-for="item in categoryList"
                            :key="item.categoryId"
                            :label="item.categoryName"
                            :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                        <Input label="服务人员姓名" prop="serverName" :maxlength="30" />
                        <el-form-item label="上传日期" prop="createTime">
                            <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 280px"
                                size="small"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="margin-left: 30px">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="handleQuery"
                                >搜索</el-button
                            >
                            <el-button
                                icon="el-icon-refresh"
                                size="mini"
                                @click="resetQuery"
                                >重置</el-button
                            >
                        </el-form-item>

                  <el-row :gutter="10" v-if="merchantId">
                        <el-col :span="1.5">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="handleAdd"
                                v-hasPermi="['system:user:add']"
                                style="margin-bottom: 10px;"
                                >上传视频</el-button
                            >
                        </el-col>
                  </el-row>

                    </el-form>

                    <el-row :gutter="10" class="mb8">
                        <right-toolbar
                            :showSearch.sync="showSearch"
                            @queryTable="getList"
                        ></right-toolbar>
                    </el-row>

                    <el-table
                        v-loading="loading"
                        :data="videoList"
                        :key="timer"
                        @selection-change="handleSelectionChange"
                    >

                        <el-table-column
                            label="视频ID"
                            align="center"
                            prop="videoId"
                            width="140px"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            v-if="!merchantId"
                            label="店铺名称"
                            align="center"
                            prop="merchantName"
                            width="200px"
                            show-overflow-tooltip
                        />
                         <el-table-column label="排序" type="index" />
                        <el-table-column
                            label="视频缩略图"
                            align="center"
                            prop="specificationDesc"
                            width="200px"
                            show-overflow-tooltip
                        >
                        <template slot-scope="scope">
                            <div class="video-play" >
                                <div style="color: #FF6600;">{{scope.videoFaceUrl}}</div>
                            <video-play


                                        :videoUrl="{
                                                    faceImg: scope.row.videoFaceUrl,
                                                    url: scope.row.videoUrl
                                            }"

                                    ></video-play>
                            </div>
                        </template>
                        </el-table-column>
                         <el-table-column
                            label="视频描述"
                            align="center"
                            prop="videoDesc"
                            width="140px"
                            show-overflow-tooltip
                        />
                         <el-table-column
                            label="视频类目"
                            align="center"
                            prop="videoCategoryName"
                            width="180px"
                        />
                        <el-table-column
                            label="服务人员"
                            align="center"
                            prop="serverName"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            label="上传人"
                            align="center"
                            prop="createBy"
                            width="80px"
                        />

                         <el-table-column
                            label="上传时间"
                            align="center"
                            prop="createTime"
                            width="150"
                            :formatter="formatDate"
                            show-overflow-tooltip
                        />

                         <el-table-column
                            label="最新修改时间"
                            align="center"
                            prop="updateTime"
                            width="150"
                            :formatter="formatDate"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="操作人"
                            align="center"
                            prop="updateBy"
                            width="120px"
                            show-overflow-tooltip
                        />


                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding fixed-width"
                            fixed="right"
                            width="220"
                        >
                            <template slot-scope="scope">
                                <span v-if="merchantId">
                                    <el-button type="text" v-if="scope.row.isMerchantTop ==0" @click="stick(scope.row)" >置顶</el-button>
                                    <el-button type="text"  v-if="scope.row.isMerchantTop ==1" @click="stick(scope.row)">取消置顶</el-button>
                                    <el-button type="text"   @click="videoUpdate(scope.row)" icon="el-icon-edit">编辑</el-button>
                                </span>
                                 <span v-if="!merchantId">
                                    <el-button type="text" v-if="scope.row.isOperationTop ==0" @click="stick(scope.row)" >置顶</el-button>
                                    <el-button type="text"  v-if="scope.row.isOperationTop ==1" @click="stick(scope.row)">取消置顶</el-button>
                                  </span>
                                <el-button type="text" @click="remove(scope.row)" icon="el-icon-delete">删除</el-button>

                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="total > 0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="上门维修">
                <div class="app-container">
                    <el-form
                        :model="queryParams"
                        ref="queryForm"
                        :inline="true"
                        v-show="showSearch"
                    >
                        <!-- <CategoryCascader v-if="merchantId" label="视频类目" prop="videoCategoryId"/> -->
                        <!-- <el-form-item
                                    label="服务类型"
                                    prop="bizType"
                                    style="margin-left: 30px"

                                >
                                    <el-select
                                        v-model="queryParams.bizType"
                                        placeholder="请选择"
                                        size="small"
                                        @change="changeBizType"
                                    >
                                <el-option
                                    v-for="item in bizTypeList"
                                    :key="item.bizTypeName"
                                    :label="item.bizTypeName"
                                    :value="item.bizType"

                                >
                                </el-option>
                            </el-select>
                            </el-form-item>  -->
                    <el-form-item  label="视频类目">
                        <!-- <el-cascader
                            v-model="queryParams.videoCategoryId"
                            :options="categoryList"
                            :props="optionProps"
                            size="small"
                            clearable
                        ></el-cascader>   -->
                         <el-select v-model="queryParams.parentId" placeholder="请选择">
                            <el-option
                            v-for="item in categoryList"
                            :key="item.categoryId"
                            :label="item.categoryName"
                            :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                        <Input label="服务人员姓名" prop="serverName" :maxlength="30" />
                        <el-form-item label="上传日期" prop="createTime">
                            <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 280px"
                                size="small"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="margin-left: 30px">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="handleQuery"
                                >搜索</el-button
                            >
                            <el-button
                                icon="el-icon-refresh"
                                size="mini"
                                @click="resetQuery"
                                >重置</el-button
                            >
                        </el-form-item>

                  <el-row :gutter="10" v-if="merchantId">
                        <el-col :span="1.5">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="handleAdd"
                                v-hasPermi="['system:user:add']"
                                style="margin-bottom: 10px;"
                                >上传视频</el-button
                            >
                        </el-col>
                  </el-row>

                    </el-form>

                    <el-row :gutter="10" class="mb8">
                        <right-toolbar
                            :showSearch.sync="showSearch"
                            @queryTable="getList"
                        ></right-toolbar>
                    </el-row>

                    <el-table
                        v-loading="loading"
                        :data="videoList"
                        :key="timer"
                        @selection-change="handleSelectionChange"
                    >

                        <el-table-column
                            label="视频ID"
                            align="center"
                            prop="videoId"
                            width="180px"
                            show-overflow-tooltip
                        />
                         <el-table-column
                            v-if="!merchantId"
                            label="店铺名称"
                            align="center"
                            prop="merchantName"
                            width="180px"
                            show-overflow-tooltip
                        />
                        <el-table-column label="排序" type="index" />
                        <el-table-column
                            label="视频缩略图"
                            align="center"
                            prop="specificationDesc"
                            width="220px"
                            show-overflow-tooltip
                        >
                        <template slot-scope="scope">
                            <div>{{scope.videoFaceUrl}}</div>
                            <video-play


                                        :videoUrl="{
                                                    faceImg: scope.row.videoFaceUrl,
                                                    url: scope.row.videoUrl
                                            }"

                                    ></video-play>
                        </template>
                        </el-table-column>
                         <el-table-column
                            label="视频描述"
                            align="center"
                            prop="videoDesc"
                            width="80px"
                            show-overflow-tooltip
                        />
                         <el-table-column
                            label="视频类目"
                            align="center"
                            prop="videoCategoryName"
                            width="180px"
                        />
                        <el-table-column
                            label="服务人员"
                            align="center"
                            prop="serverName"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            label="上传人"
                            align="center"
                            prop="createBy"
                            width="80px"
                        />

                         <el-table-column
                            label="上传时间"
                            align="center"
                            prop="createTime"
                            width="150"
                            :formatter="formatDate">

                         </el-table-column>

                         <el-table-column
                            label="最新修改时间"
                            align="center"
                            prop="updateTime"
                            width="150"
                            :formatter="formatDate"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="操作人"
                            align="center"
                            prop="updateBy"
                            width="120px"
                            show-overflow-tooltip
                        />


                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding fixed-width"
                            fixed="right"
                            width="220"
                        >
                            <template slot-scope="scope">
                                <span v-if="merchantId">
                                    <el-button type="text" v-if="scope.row.isMerchantTop ==0" @click="stick(scope.row)" >置顶</el-button>
                                    <el-button type="text"  v-if="scope.row.isMerchantTop ==1" @click="stick(scope.row)">取消置顶</el-button>
                                    <el-button type="text"   @click="videoUpdate(scope.row)" icon="el-icon-edit">编辑</el-button>
                                </span>
                                 <span v-if="!merchantId">
                                    <el-button type="text" v-if="scope.row.isOperationTop ==0" @click="stick(scope.row)" >置顶</el-button>
                                    <el-button type="text"  v-if="scope.row.isOperationTop ==1" @click="stick(scope.row)">取消置顶</el-button>
                                  </span>
                                <el-button type="text" @click="remove(scope.row)" icon="el-icon-delete">删除</el-button>

                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="total > 0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                    />
                </div>
            </el-tab-pane>
          </el-tabs>

        <el-dialog
            title="视频播放"
            :visible.sync="dialogPlay"
            width="50%"
            @close="closeDialog"
        >
            <video
                :src="videoUrl"
                :posters="faceImg"
                controls
                autoplay
                class="video"
                width="100%"
            ></video>
        </el-dialog>

          <!-- 添加或修改服务人员 -->
            <el-dialog
                :title="title"
                :visible.sync="videoOpen"
                width="800px"
                append-to-body
            >
                <Form ref="form" v-if="videoOpen" class="merchant-service-form" v-model="form" :inline="false" :labelWidth="'200px'" :disabled="isDetail">
                        <CategoryCascader label="视频类目" prop="videoCategoryId" required/>
                        <el-form-item
                            label="服务人员"
                            prop="categoryId"

                        >
                            <el-select
                                v-model="form.serverId"
                                placeholder="请选择"
                                size="small"
                            >
                        <el-option
                            v-for="item in serverUserList"
                            :key="item.realName"
                            :label="item.realName"
                            :value="item.serverId"
                        >
                        </el-option>
                    </el-select>
                    </el-form-item>
                        <el-form-item label="视频描述" prop="videoDesc"
                        :rules="[{ required: true, message: '请输入视频描述', trigger: 'blur' }]">
                            <el-input
                                type="textarea"
                                :rows="6"
                                maxlength="30"
                                style="width: 300px"
                                placeholder="请输入内容"
                                show-word-limit
                                v-model="form.videoDesc"
                            >
                            </el-input>
                        </el-form-item>

                        <Videos label="上传视频" prop="videoUrl" required :limit="1" :disabled="isDetail" style="position: relative;"/>
                        <div style="position:absolute; top:465px ;left:375px;">建议比例16:9，画面清晰，最大50M</div>
                        <Images label="视频封面" prop="videoFaceUrl" required :limit="1" :disabled="isDetail" :CutFlag="true" :width="1090" :height="545"/>
                        <div style="position:absolute; top:625px ;left:375px;">建议格式支持jpg，png, 图片清晰，像素不小于1090x545像素</div>
                </Form>
                <!-- <upload-video></upload-video> -->
                <div style="width: 100%; text-align:center">
                    <el-button @click="cancelUser()">返回</el-button>
                    <el-button type="primary" v-show="!isDetail" @click="add()" :loading="saving">保存</el-button>
                </div>
            </el-dialog>
    </div>
</template>

<script>

import CategoryCascader from '../service/components/CategoryCascader.vue'
import { getVideoList,getServerUserList,saveVideo,remove,editVideo } from '@/api/merchant/video'
import {categoryList} from '@/api/merchant/merchant'
import { getInfo } from "@/api/login"
import { mapGetters } from 'vuex'
import VideoPlay from "../../evaluation/videoPlay.vue"
// import UploadVideo from '@/views/merchant/service/components/UploadVideo'
export default {
    name: "order",
    components: {CategoryCascader, VideoPlay},

    props: {
        goodsId: {
            type: String
        },
        isDetail: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            timer:new Date().getTime(),
            title:"",
            // 日期范围
            dateRange: "",
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 视频主表格数据
            videoList: [],
            //视频播放弹出
            dialogPlay: false,
            //上传视频
            videoOpen:false,
            // 订单信息
            order: {},
            //上传视频信息
            form:{
                categoryId:'',
                desc:"",
                imagesUrl:"",
                url:"",
            },
             saving: false,

            // 查询参数
            queryParams: {
                bizType:1,
                pageNum: 1,
                pageSize: 10,
                videoCategoryId:[],
                parentId:'',
                memberId: null,
                merchantId: null,
                categoryId:'',
                realName:"",
                categoryName: null,
            },
            bizType:1,

            //视频分类
            bizTypeList:[
                {
                    bizTypeName:"家政",
                    bizType:1
                },
                 {
                    bizTypeName:"维修",
                    bizType:2
                }
            ],
            //视频类目
            categoryList: [],
            videoUrl:"",
            faceImg: "",
            // 表单校验
            videoOpenRules:{
                 categoryId: [
                    {
                        required: true,
                        message: "视频类目不能为空",
                        trigger: "blur",
                    },
                ],
                videoDesc: [
                    {
                        required: true,
                        message: "视频描述不能为空",
                        trigger: "blur",
                    },
                ],
            },
            //服务人员集合
            serverUserList:[],
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
            serviceList:[],
            repairList:[],

        };
    },
 computed: {
    ...mapGetters(['merchantId']),
  },
    created() {
        this.queryParams.bizType=1;
        //查询视频类目
        this.queryCategory();

        //查询列表
        this.getList();
         //查询服务人员列表
        this.getServerUList();
    },
    mounted() {},
    methods: {

         // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.orderId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        //检测选框数据改变
        changeBizType(){
            this.queryParams.videoCategoryId =[];
            this.queryParams.parentId='';
            //修改视频类目列表
            if(this.queryParams.bizType===1){
                this.categoryList=this.serviceList;
            }
            if(this.queryParams.bizType===2){
                 this.repairList = this.repairList
            }
        },
        //根据tabs设置
        tabsType(tab,event){
            if(tab.index == 0){
                this.queryParams.bizType = 1
                this.bizType=1
                this.queryParams.videoCategoryId=''
                this.queryParams.parentId=''
                this.categoryList=this.serviceList;
            }
            if(tab.index == 1){
                this.queryParams.bizType = 2
                this.bizType=2
                this.queryParams.videoCategoryId=''
                this.queryParams.parentId=''
                this.repairList = this.repairList
            }
            this.handleQuery();
            this.queryCategory();
        },
        // 查询服务类型
      async  queryCategory() {
            //根据分类查询视频类目列表
        const {data: {serviceList, repairList}} = await categoryList()
            if(this.queryParams.bizType===1){
                this.serviceList = serviceList
                this.categoryList=serviceList;
            }
            if(this.queryParams.bizType===2){
                 this.repairList = repairList
                this.categoryList=repairList;
            }
        },
        // 详情页面跳转
        // toSee(row) {
        //     this.$router.push({
                // path: "/order/groupDetail",
                //传参
                // query: { id: row.orderId },
        //     });
        // },
        //查询服务人员列表
        getServerUList(){
             getInfo().then((r) => {
                 var prom ={}

                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        prom.merchantId = r.merchant.merchantId;
                    }
                }
                 getServerUserList(prom).then((res) => {
                    if(res.code == 200 ){
                        this.serverUserList=res.data;
                    }
                });
             });
        },

        // 查询列表
        getList() {
            getInfo().then((r) => {
                 this.queryParams.bizType = this.bizType;
                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        this.queryParams.merchantId = r.merchant.merchantId;

                    }
                }
                 if (
                    this.queryParams.videoCategoryId &&
                    this.queryParams.videoCategoryId.length > 1
                ) {
                    this.queryParams.videoCategoryId =
                        this.queryParams.videoCategoryId[
                            this.queryParams.videoCategoryId.length - 1
                        ];
                }

                if(this.dateRange == null){
                    this.dateRange = ''
                }
                this.loading = true;

                const [searchBegin, searchEnd] = this.dateRange;
                let sBegin = searchBegin;
                let sEnd = searchEnd;
                if (typeof searchBegin == "undefined") {
                var start = new Date()
                        start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
                        this.dateRange = [start,new Date()]
                        sBegin = this.timeStamp2String(start)
                }
                if (typeof searchEnd == "undefined") {
                    sEnd = this.timeStamp2String(new Date())
                            this.dateRange=[sBegin,sEnd]
                }
                this.queryParams.beginTime = sBegin;
                this.queryParams.endTime = sEnd;

                // 传参调用接口
                getVideoList(
                    this.addDateRange(this.queryParams, this.dateRange)
                ).then((response) => {
                    this.videoList = response.rows;
                    this.total = response.total;
                    setTimeout(() => {this.timer=new Date().getTime();this.loading = false;}, 600)
                });
            });
        },
        // 表单重置
        reset() {
            this.dateRange = null;
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                orderIndex: null,
                memberId: null,
                merchantId: null,
                categoryId: '',
            };
            this.form ={}
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置按钮操作
        resetQuery() {
            this.reset();
            this.handleQuery();
        },
    //点击删除
    async remove(row){
      await this.$modal.confirm('是否确认删除"' + row.serverName + '"的视频数据项？')
      //调用删除接口，删除成功刷新列表
        const {code} = await remove(row.videoId)
            if (code === 200) {
                this.$message.success('删除成功')
                this.getList();
            }
        },
        //更改视频置顶状态
        stick(row){
            var form = row;
            if(this.merchantId){
                if(row.isMerchantTop==0){
                    form.isMerchantTop =1;
                }else if(row.isMerchantTop ==1){
                    form.isMerchantTop =0;
                }
            }else{
                if(row.isOperationTop==0){
                    form.isOperationTop =1;
                }else if(row.isOperationTop ==1){
                    form.isOperationTop =0;
                }
            }
            //调用接口，修改视频置顶状态
            //刷新列表
            editVideo(form).then((res) => {
                if(res.code == 200 ){
                    if(this.merchantId){
                        if(row.isMerchantTop==1){
                            this.$message.success("置顶成功");
                        }
                        if(row.isMerchantTop==0){
                            this.$message.success("取消置顶成功");
                        }
                    }else{
                          if(row.isOperationTop==1){
                            this.$message.success("置顶成功");
                        }
                        if(row.isOperationTop==0){
                            this.$message.success("取消置顶成功");
                        }
                    }


                }
            })
            this.getList();
        },
      closeDialog() {
            this.videoUrl = ""; //清空数据 关闭视频播放
        },
        // 点击上传视频按钮
        handleAdd(){
            //清空原来表单数据
            this.form={};
            this.videoOpen=true;
            this.title="上传视频"
        },
        // 点击取消
        cancelUser(){
            this.videoOpen=false;
        },
        // 点击提交
        add(){

              if (!this.form.videoDesc) {
                    this.$message.warning("视频描述不能为空");
                    return;
              }
              if (!this.form.videoUrl) {
                    this.$message.warning("视频还未上传或上传还未结束");
                    return;
              }
            if(this.form.videoId == null || this.form.videoId == ''){
              getInfo().then((r) => {
                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        this.form.merchantId = r.merchant.merchantId;
                    }
                }
                 saveVideo(this.form).then((res) => {
                    if(res.code == 200 ){
                       this.$message.success("保存成功");
                        this.videoOpen=false;
                        this.getList();
                    }
                })

             });
            }else{
                 editVideo(this.form).then((res) => {
                if(res.code == 200 ){
                    this.$message.success("修改成功");
                    this.videoOpen=false;
                    this.getList();
                }
            })
            }
        },
        // 编辑
        videoUpdate(row){
            this.title = "编辑视频";
            this.form ={};
            this.form = row;
            debugger
            this.videoOpen=true;
        },
        test(){
            debugger
            console.log(this.form);
        },
        timeStamp2String(datetime){

            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
        },
          //时间格式化
        formatDate(row, column) {
            // 获取单元格数据
            let data = row[column.property]
            let dt = new Date(data)

            var fmt='yyyy-MM-dd hh:mm';
            if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + '').substr(4 - RegExp.$1.length))
                }
                let o = {
                    'M+': dt.getMonth() + 1,
                    'd+': dt.getDate(),
                    'h+': dt.getHours(),
                    'm+': dt.getMinutes(),
                    's+': dt.getSeconds()
                }
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + ''
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
                    }
                }
                return fmt
       },
       // 左边补0函数
       padLeftZero (str) {
        return ('00' + str).substr(str.length)
        }
    }
};
</script>

<style >


.merchant-service-form.el-form--inline .el-form-item {
  width: calc(50% - 10px);
}
.merchant-service-form>.el-form-item>.el-form-item__content>.el-input,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-input-number,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-input-number>.el-input,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-select>.el-input,
.merchant-service-form>.el-form-item>.el-form-item__content>.el-cascader>.el-input {
  width: 300px;
}

.merchant-service-form.el-form--inline .coin{
    width: 500;
}

.suffix{
    font-size: 14px;
    color: #FF6600;
    line-height: 20px;
    padding-left: 20px;
}
.other-unit{
    width: 500px;
    display: inline-block;
}
.vjs-poster {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-color: #000000;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}
.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 100px;
}
.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -0.25em;
    margin-top: -1em;
}
</style>
