<template>
<div class="main-content" :style='{"minHeight":"calc(100vh - 200px)","padding":"0px 5%","margin":"0 auto","color":"#666","background":"none","width":"calc(100% - 0px)","fontSize":"14px","height":"100%"}'>
    <!-- 列表页 -->
    <template v-if="showFlag">
        <el-form class="center-form-pv" :style='{"padding":"20px 20px 0","boxShadow":"0 2px 3px 0px rgba(100,100,100,.05)","margin":"0 0 0px","borderColor":"#f6f6f6","display":"flex","justifyContent":"center","minHeight":"100px","overflow":"hidden","borderRadius":"4px 4px 0 0","flexWrap":"wrap","background":"#fff","borderWidth":"2px 2px 0","fontSize":"inherit","borderStyle":"solid"}' :inline="true" :model="searchForm">
            <el-row :style='{"padding":"0px","boxShadow":"0 0px 0px 0px rgba(115,108,203,.23)","margin":"0 0px 0px 0","borderRadius":"0px","alignItems":"center","background":"none","display":"flex","width":"auto","fontSize":"inherit","justifyContent":"flex-end","order":"2"}'>

                                <div :style='{"margin":"0 10px 0 0","fontSize":"inherit","display":"inline-block"}'>
                                    <label :style='{"margin":"0 10px 0 0","color":"inherit","display":"inline-block","lineHeight":"34px","fontSize":"inherit","fontWeight":"500","height":"34px"}'
                                           class="item-label">路线名称</label>
                                    <el-input v-model="searchForm.luxianmingcheng"
                                              placeholder="路线名称"
                                              @keydown.enter.native="search()" clearable></el-input>
                                </div>

                                <div :style='{"margin":"0 10px 0 0","fontSize":"inherit","display":"inline-block"}'>
                                    <label :style='{"margin":"0 10px 0 0","color":"inherit","display":"inline-block","lineHeight":"34px","fontSize":"inherit","fontWeight":"500","height":"34px"}'
                                           class="item-label">路线起点</label>
                                    <el-input v-model="searchForm.luxianqidian"
                                              placeholder="路线起点"
                                              @keydown.enter.native="search()" clearable></el-input>
                                </div>

                                <div :style='{"margin":"0 10px 0 0","fontSize":"inherit","display":"inline-block"}'>
                                    <label :style='{"margin":"0 10px 0 0","color":"inherit","display":"inline-block","lineHeight":"34px","fontSize":"inherit","fontWeight":"500","height":"34px"}'
                                           class="item-label">路线终点</label>
                                    <el-input v-model="searchForm.luxianzhongdian"
                                              placeholder="路线终点"
                                              @keydown.enter.native="search()" clearable></el-input>
                                </div>

                <el-button class="search" type="success" @click="search()">
                        <span class="icon iconfont icon-xihuan"
                              :style='{"margin":"0 2px","fontSize":"18px","color":"#00acc1","display":"inline-block","height":"auto"}'></span>
                    查询
                </el-button>
            </el-row>

            <el-row class="actions" :style='{"boxShadow":"0 0px 0px 0px rgba(115,108,203,.23)","padding":"0 20px 0 0","margin":"0px 0 0px","color":"#333","alignItems":"center","textAlign":"left","display":"flex","borderRadius":"0px","flexWrap":"wrap","background":"none","flex":"1","width":"auto","fontSize":"inherit","order":"1"}'>
                <el-button class="add" v-if="isAuth('luxianxinxi','新增')" type="success"
                           @click="addOrUpdateHandler()">
                        <span class="icon iconfont icon-tianjia1"
                              :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
                    添加
                </el-button>
                <el-button class="del" v-if="isAuth('luxianxinxi','删除')"
                           :disabled="dataListSelections.length?false:true" type="danger" @click="deleteHandler()">
                        <span class="icon iconfont icon-shanchu9"
                              :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
                    删除
                </el-button>

                <el-button class="btn18" v-if="isAuth('luxianxinxi','支付')"
                           :disabled="dataListSelections.length?false:true" type="success" @click="payBatch()">
                        <span class="icon iconfont icon-xihuan"
                              :style='{"color":"inherit","margin":"0 2px","fontSize":"inherit"}'></span>
                    批量支付
                </el-button>

                <el-button class="btn18" v-if="isAuth('luxianxinxi','审核')"
                           :disabled="dataListSelections.length?false:true" type="success" @click="shBatchDialog()">
                    <span class="icon iconfont icon-shenhe2"
                          :style='{"color":"inherit","margin":"0 2px","fontSize":"inherit"}'></span>
                    审核
                </el-button>






            </el-row>
        </el-form>
        <div :style='{"padding":"20px","borderColor":"#f6f6f6","margin":"0 0 0px","borderRadius":"0 0 4px 4px","background":"rgba(255,255,255,1)","borderWidth":"0 2px 2px","width":"100%","borderStyle":"solid"}'>
            <el-table class="tables"
                      :stripe='true'
                      :style='{"padding":"0","borderColor":"#eee","color":"inherit","borderRadius":"0px","borderWidth":"0px 0px 0 0px","background":"none","width":"100%","fontSize":"inherit","borderStyle":"solid"}'
                      :border='true'
                      v-if="isAuth('luxianxinxi','查看')"
                      :data="dataList"
                      v-loading="dataListLoading"
                      @selection-change="selectionChangeHandler">
                <el-table-column :resizable='false' type="selection" align="center" width="50"></el-table-column>
                <el-table-column :resizable='false' :sortable='false' label="序号" type="index" width="50"/>






                                <el-table-column :resizable='true' :sortable='true'
                                                 prop="luxianmingcheng"
                                                 label="路线名称">
                                    <template slot-scope="scope">
                                        {{scope.row.luxianmingcheng}}
                                    </template>
                                </el-table-column>


                                <el-table-column :resizable='true' :sortable='true'
                                                 prop="luxianqidian"
                                                 label="路线起点">
                                    <template slot-scope="scope">
                                        {{scope.row.luxianqidian}}
                                    </template>
                                </el-table-column>


                                <el-table-column :resizable='true' :sortable='true'
                                                 prop="luxianzhongdian"
                                                 label="路线终点">
                                    <template slot-scope="scope">
                                        {{scope.row.luxianzhongdian}}
                                    </template>
                                </el-table-column>


                                <el-table-column :resizable='true' :sortable='true'
                                                 prop="daoluqingkuang"
                                                 label="道路情况">
                                    <template slot-scope="scope">
                                        {{scope.row.daoluqingkuang}}
                                    </template>
                                </el-table-column>


                                <el-table-column :resizable='true' :sortable='true'
                                                 prop="yichangwenti"
                                                 label="异常问题">
                                    <template slot-scope="scope">
                                        {{scope.row.yichangwenti}}
                                    </template>
                                </el-table-column>


                                <el-table-column :resizable='true' :sortable='true'
                                                 prop="yujixingshishizhang"
                                                 label="预计行驶时长">
                                    <template slot-scope="scope">
                                        {{scope.row.yujixingshishizhang}}
                                    </template>
                                </el-table-column>




                <el-table-column width="300" label="操作">
                    <template slot-scope="scope">
                        <el-button class="view" v-if=" isAuth('luxianxinxi','查看')" type="success"
                                   @click="addOrUpdateHandler(scope.row.id,'info')">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 0 0 4px","fontSize":"inherit","color":"inherit","display":"none","height":"auto"}'></span>
                            查看
                        </el-button>
                        <el-button class="edit" v-if=" isAuth('luxianxinxi','修改') " type="success"
                                   @click="addOrUpdateHandler(scope.row.id)">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 0 0 4px","fontSize":"inherit","color":"inherit","display":"none","height":"auto"}'></span>
                            修改
                        </el-button>


                        <el-button class="view" v-if="isAuth('luxianxinxi','查看评论')" type="success"
                                   @click="disscussListHandler(scope.row.id)">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 0 0 4px","fontSize":"inherit","color":"inherit","display":"none","height":"auto"}'></span>
                            查看评论
                        </el-button>


                        <el-button class="del" v-if="isAuth('luxianxinxi','删除') " type="primary"
                                   @click="deleteHandler(scope.row.id )">
                                <span class="icon iconfont "
                                      :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                background
                :page-sizes="[10, 50, 100, 200]"
                :page-size="pageSize"
                :layout="layouts.join()"
                :total="totalPage"
                prev-text="< "
                next-text="> "
                :hide-on-single-page="false"
                :style='{"border":"0px solid #dee2e6","padding":"10px 0","margin":"10px 0 0","whiteSpace":"nowrap","color":"inherit","textAlign":"center","background":"none","width":"100%","fontSize":"inherit","fontWeight":"500"}'
        ></el-pagination>
    </template>

    <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>






    <el-dialog :title="this.batchIds.length>1?'批量审核':'审核'" :visible.sync="sfshBatchVisiable" width="50%">
        <el-form ref="shBatchForm" :model="shBatchForm" :rules="shRules" label-width="80px">
            <el-form-item label="审核状态" prop="sfsh">
                <el-select v-model="shBatchForm.sfsh" placeholder="审核状态">
                    <el-option label="通过" value="是"></el-option>
                    <el-option label="不通过" value="否"></el-option>
                    <el-option label="待审核" value="待审核"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="shhf">
                <el-input type="textarea" :rows="8" v-model="shBatchForm.shhf"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
				<el-button @click="sfshBatchVisiable=false">取 消</el-button>
				<el-button type="primary" @click="shBatchHandler">确 定</el-button>
			</span>
    </el-dialog>


    <el-dialog title="预览图" :visible.sync="previewVisible" width="50%">
        <img :src="previewImg" alt="" style="width: 100%;">
    </el-dialog>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import axios from 'axios'
    import AddOrUpdate from "./add-or-update";


    export default {
        data() {
            return {






                //导出excel
                json_fields: {
                },


                searchForm: {
                    key: ""
                },
                form: {},
                sfshBatchVisiable: false,
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                batchIds: [],
                shRules: {
                    sfsh: [{required: true, message: '审核状态不能为空', trigger: 'blur'},],
                    shhf: [{required: true, message: '审核回复不能为空', trigger: 'blur'},],
                },
                shBatchForm: {
                    sfsh: '',
                    shhf: ''
                },
                dataListLoading: false,

                dataListSelections: [],
                showFlag: true,
                addOrUpdateFlag: false,
                layouts: ["total", "prev", "pager", "next", "sizes", "jumper"],
                previewImg: '',
                previewVisible: false,
            };
        },
        created() {
            this.init();
            this.getDataList();
            this.contentStyleChange()
        },
        mounted() {
        },
        filters: {
            htmlfilter: function (val) {
                return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
            }
        },
        computed: {
            tablename() {
                return this.$storage.get('sessionTable')
            },
        },
        components: {
            AddOrUpdate,
        },
        methods: {
            imgPreView(url) {
                this.previewImg = url
                this.previewVisible = true
            },
            linkOthers(url) {
                window.open(url);//打开一个新的标签页
            },
            contentStyleChange() {
                this.contentPageStyleChange()
            },
            //批量审核窗口
            shBatchDialog() {
                for (let x in this.dataListSelections) {
                    if (this.dataListSelections[x].sfsh && this.dataListSelections[x].sfsh != '待审核') {
                        this.$message.error('存在已审核数据，不能批量审核');
                        this.batchIds = []
                        return false
                    }
                    this.batchIds.push(this.dataListSelections[x].id)
                }
                this.sfshBatchVisiable = true

            },
//批量审核
            shBatchHandler() {
                this.$refs["shBatchForm"].validate(valid => {
                    if (valid) {
                        this.$confirm(`是否${this.batchIds.length>1?'一键审核':'审核'}选中数据?`, "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            this.$http({
                                url: "luxianxinxi/shBatch?sfsh=" + this.shBatchForm.sfsh + "&shhf=" + this.shBatchForm.shhf,
                                method: "post",
                                data: this.batchIds
                            }).then(({data}) => {
                                if (data && data.code === 0) {
                                    this.$message({
                                        message: "操作成功",
                                        type: "success",
                                        duration: 1500,
                                        onClose: () => {
                                            this.getDataList();
                                            this.sfshBatchVisiable = false
                                            this.batchIds = []
                                        }
                                    });
                                } else {
                                    this.$message.error(data.msg);
                                }
                            });
                        });
                    }
                })
            },









            payHandler(row) {
                if (row.sfsh != '是') {
                    this.$message({
                        message: "请审核通过后再操作",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                        }
                    });
                    return false
                }
                this.$storage.set('paytable', 'luxianxinxi');
                this.$storage.set('payObject', row);
                this.$router.push('pay');
            },
            // 批量支付
            payBatch() {
                for (let x in this.dataListSelections) {
                    if (this.dataListSelections[x].sfsh != '是') {
                        this.$message.error('所选订单存在未审核订单')
                        return false
                    }
                    if (this.dataListSelections[x].ispay == '已支付') {
                        this.$message.error('所选订单存在已支付订单')
                        return false
                    }
                }
                this.$confirm('是否支付所选订单？').then(_ => {
                    let arr = JSON.parse(JSON.stringify(this.dataListSelections))
                    for (let i in arr) {
                        arr[i].ispay = '已支付'
                        this.$http({
                            url: 'luxianxinxi/update',
                            method: "post",
                            data: arr[i]
                        }).then(res => {

                        })
                    }
                    this.$message({
                        message: "支付成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            this.getDataList()
                        }
                    });
                }).catch(_ => {
                });
            },
            // 分页
            contentPageStyleChange() {
                let arr = []

                // if(this.contents.pageTotal) arr.push('total')
                // if(this.contents.pageSizes) arr.push('sizes')
                // if(this.contents.pagePrevNext){
                //   arr.push('prev')
                //   if(this.contents.pagePager) arr.push('pager')
                //   arr.push('next')
                // }
                // if(this.contents.pageJumper) arr.push('jumper')
                // this.layouts = arr.join()
                // this.contents.pageEachNum = 10
            },


            init() {


            },
            search() {
                this.pageIndex = 1;
                this.getDataList();
            },


            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let params = {
                    page: this.pageIndex,
                    limit: this.pageSize,
                    sort: 'id',
                    order: 'desc',
                }



                            if (this.searchForm.luxianmingcheng != '' && this.searchForm.luxianmingcheng != undefined) {
                                params['luxianmingcheng'] = '%' + this.searchForm.luxianmingcheng + '%'
                            }


                            if (this.searchForm.luxianqidian != '' && this.searchForm.luxianqidian != undefined) {
                                params['luxianqidian'] = '%' + this.searchForm.luxianqidian + '%'
                            }


                            if (this.searchForm.luxianzhongdian != '' && this.searchForm.luxianzhongdian != undefined) {
                                params['luxianzhongdian'] = '%' + this.searchForm.luxianzhongdian + '%'
                            }






                let user = JSON.parse(this.$storage.getObj('userForm'))
                console.log(user)
                this.$http({
                    url: "luxianxinxi/page",
                    method: "get",
                    params: params
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.list;
                        this.totalPage = data.data.total;
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            // 多选
            selectionChangeHandler(val) {
                this.dataListSelections = val;
            },
            // 添加/修改
            addOrUpdateHandler(id, type) {
                this.showFlag = false;
                this.addOrUpdateFlag = true;
                this.crossAddOrUpdateFlag = false;
                if (type != 'info') {
                    type = 'else';
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, type);
                });
            },
            // 查看评论
            disscussListHandler(id, type) {
                this.$router.push({path: '/discussluxianxinxi', query: {refid: id}});
            },
            // 下载
            download(file) {
                let arr = file.replace(new RegExp('upload/', "g"), "")
                axios.get(this.$base.url + 'file/download?fileName=' + arr, {
                    headers: {
                        token: this.$storage.get('Token')
                    },
                    responseType: "blob"
                }).then(({
                             data
                         }) => {
                    const binaryData = [];
                    binaryData.push(data);
                    const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
                        type: 'application/pdf;chartset=UTF-8'
                    }))
                    const a = document.createElement('a')
                    a.href = objectUrl
                    a.download = arr
                    // a.click()
                    // 下面这个写法兼容火狐
                    a.dispatchEvent(new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window
                    }))
                    window.URL.revokeObjectURL(data)
                }, err => {
                    axios.get((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] : '') + this.$base.name + '/file/download?fileName=' + arr, {
                        headers: {
                            token: this.$storage.get('Token')
                        },
                        responseType: "blob"
                    }).then(({
                                 data
                             }) => {
                        const binaryData = [];
                        binaryData.push(data);
                        const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
                            type: 'application/pdf;chartset=UTF-8'
                        }))
                        const a = document.createElement('a')
                        a.href = objectUrl
                        a.download = arr
                        // a.click()
                        // 下面这个写法兼容火狐
                        a.dispatchEvent(new MouseEvent('click', {
                            bubbles: true,
                            cancelable: true,
                            view: window
                        }))
                        window.URL.revokeObjectURL(data)
                    })
                })
            },
            // 预览
            preClick(file) {
                if (!file) {
                    return false
                }
                window.open((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] + this.$base.name + '/' + file : this.$base.url + file))
            },
                luxianxinxistatusChange(e, row) {
                if (row.status == 0) {
                    row.passwordwrongnum = 0
                }
                this.$http({
                    url: 'luxianxinxi/update',
                    method: 'post',
                    data: row
                }).then(res => {
                    if (row.status == 1) {
                        this.$message.error('该用户已锁定')
                    } else {
                        this.$message.success('该用户已解除锁定')
                    }
                })
            },


            // 删除
            async deleteHandler(id) {
                var ids = id ? [Number(id)] : this.dataListSelections.map(item => {
                    return Number(item.id);
                });
                var delStr = "批量删除"
                delStr = id ? "删除" : "批量删除"
                await this.$confirm(`确定进行[` + delStr + `]操作?`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async () => {
                    await this.$http({
                        url: "luxianxinxi/delete",
                        method: "post",
                        data: ids
                    }).then(async ({data}) => {
                        if (data && data.code === 0) {

                            for (let x in ids) {
                                await this.$http.get('storeup/list', {
                                    params: {
                                        page: 1,
                                        limit: 100,
                                        refid: ids[x],
                                        tablename: 'luxianxinxi'
                                    }
                                }).then(async obj => {
                                    if (obj.data && obj.data.code == 0) {
                                        if (obj.data.data.list.length) {
                                            let arr = []
                                            for (let i in obj.data.data.list) {
                                                arr.push(obj.data.data.list[i].id)
                                            }
                                            await this.$http.post('storeup/delete', arr).then(() => {
                                            })
                                        }
                                    }
                                })
                            }
                            this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.search();
                                }
                            });

                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                });
            },


        }
    }
</script>
<style lang="scss" scoped>


.center-form-pv {
	  .el-date-editor.el-input {
	    width: auto;
	  }
	}
	
	.el-input {
	  width: auto;
	}
	
	// form
	.center-form-pv .el-input /deep/ .el-input__inner {
				border: 2px solid #f6f6f6;
				border-radius: 4px;
				padding: 0 12px;
				outline: none;
				color: inherit;
				background: #fff;
				width: 170px;
				font-size: 16px;
				height: 34px;
			}
	
	.center-form-pv .el-select /deep/ .el-input__inner {
				border: 2px solid #f6f6f6;
				border-radius: 4px;
				padding: 0 10px;
				box-shadow: 0 0 0px rgba(64, 158, 255, .5);
				outline: none;
				color: inherit;
				background: #fff;
				width: 170px;
				font-size: 16px;
				height: 34px;
			}
	
	.center-form-pv .el-date-editor /deep/ .el-input__inner {
				border: 2px solid #f6f6f6;
				border-radius: 4px;
				padding: 0 10px 0 30px;
				box-shadow: 0 0 0px rgba(64, 158, 255, .5);
				outline: none;
				color: inherit;
				background: #fff;
				width: 170px;
				font-size: 16px;
				height: 34px;
			}
	
	.center-form-pv .search {
				border: 2px solid #00acc120;
				cursor: pointer;
				border-radius: 4px;
				padding: 0 10px 0 4px;
				outline: none;
				color: #00acc1;
				background: none;
				width: auto;
				font-size: 16px;
				line-height: 30px;
				height: auto;
			}
	
	.center-form-pv .search:hover {
				opacity: 0.8;
			}
	
	.center-form-pv .actions .add {
				border: 0px solid #eee;
				cursor: pointer;
				border-radius: 4px;
				padding: 0 10px;
				margin: 4px 2px 2px;
				outline: none;
				color: #fff;
				background: #00acc1;
				width: auto;
				font-size: inherit;
				min-width: 66px;
				height: 36px;
			}
	
	.center-form-pv .actions .add:hover {
				opacity: 0.8;
			}
	
	.center-form-pv .actions .del {
				border: 0px solid rgba(244,100,130,.3);
				cursor: pointer;
				padding: 0 10px;
				margin: 4px 2px 2px;
				color: #fff;
				font-size: inherit;
				border-radius: 3px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: #00acc1;
				width: auto;
				min-width: 66px;
				height: 36px;
			}
	
	.center-form-pv .actions .del:hover {
				opacity: 0.8;
			}
	
	.center-form-pv .actions .statis {
				border: 0px solid rgba(244,100,130,.3);
				cursor: pointer;
				padding: 0 10px;
				margin: 4px 2px 2px;
				color: #fff;
				font-size: inherit;
				border-radius: 3px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: #00acc1;
				width: auto;
				min-width: 66px;
				height: 36px;
			}
	
	.center-form-pv .actions .statis:hover {
				opacity: 0.8;
			}
	
	.center-form-pv .actions .btn18 {
				border: 0px solid rgba(244,100,130,.3);
				cursor: pointer;
				border-radius: 4px;
				padding: 0 10px;
				margin: 4px 2px 2px;
				outline: none;
				color: #fff;
				background: #00acc1;
				width: auto;
				font-size: inherit;
				min-width: 66px;
				height: 36px;
			}
	
	.center-form-pv .actions .btn18:hover {
				opacity: 0.8;
			}
	
	// table
	.el-table /deep/ .el-table__header-wrapper thead {
				color: inherit;
				background: rgba(254,169,34,0);
				width: 100%;
			}
	
	.el-table /deep/ .el-table__header-wrapper thead tr {
				background: none;
			}
	
	.el-table /deep/ .el-table__header-wrapper thead tr th {
				padding: 6px 0;
				background: none;
				border-color: #dee2e6;
				border-width: 1px 0px 2px 0;
				border-style: solid;
				text-align: left;
			}

	.el-table /deep/ .el-table__header-wrapper thead tr th .cell {
				padding: 0 10px;
				word-wrap: normal;
				color: #8e99a2;
				white-space: normal;
				font-weight: 600;
				display: inline-block;
				vertical-align: middle;
				font-size: 14px;
				line-height: 24px;
				text-overflow: ellipsis;
				word-break: break-all;
				width: 100%;
				position: relative;
			}

	
	.el-table /deep/ .el-table__body-wrapper tbody {
				padding: 0;
				width: 100%;
			}

	.el-table /deep/ .el-table__body-wrapper tbody tr {
				background: none;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td {
				padding: 4px 0 0;
				color: #8e99a2;
				background: #fff;
				font-size: inherit;
				border-color: #dee2e6;
				border-width: 0 0px 1px 0px;
				border-style: solid;
				text-align: left;
			}
	
		
	.el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
				padding: 4px 0 0;
				color: #8e99a2;
				background: #fff;
				border-color: #dee2e6;
				border-width: 0 0px 1px 0px;
				border-style: solid;
				text-align: left;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td {
				padding: 4px 0 0;
				color: #8e99a2;
				background: #fff;
				font-size: inherit;
				border-color: #dee2e6;
				border-width: 0 0px 1px 0px;
				border-style: solid;
				text-align: left;
			}

	.el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
				padding: 0 10px;
				overflow: hidden;
				color: inherit;
				word-break: break-all;
				white-space: normal;
				line-height: 24px;
				text-overflow: ellipsis;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .view {
				cursor: pointer;
				padding: 0px 10px;
				margin: 0 2px 5px 0;
				color: #fff;
				font-size: inherit;
				border-color: #fff;
				line-height: 26px;
				border-radius: 4px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: #00acc1;
				width: auto;
				border-width: 0px;
				border-style: solid;
				min-width: 55px;
				height: auto;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .view:hover {
				border-color: #23b7e5;
				border-width: 0px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .add {
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .add:hover {
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .edit {
				cursor: pointer;
				padding: 0 10px;
				margin: 0 2px 5px 0;
				color: #fff;
				font-size: inherit;
				border-color: #fff;
				line-height: 26px;
				border-radius: 4px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: #00acc1;
				width: auto;
				border-width: 0px;
				border-style: solid;
				min-width: 55px;
				height: auto;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .edit:hover {
				border-color: #45B6B0;
				border-width: 0px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .del {
				cursor: pointer;
				padding: 0 10px;
				margin: 0 2px 5px 0;
				color: #fff;
				font-size: inherit;
				border-color: #fff;
				line-height: 26px;
				border-radius: 4px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: #4b88e4;
				width: auto;
				border-width: 0px;
				border-style: solid;
				min-width: 55px;
				height: auto;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .del:hover {
				border-color: #d9534f;
				border-width: 0px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8 {
				cursor: pointer;
				padding: 0 10px;
				margin: 0 2px 5px 0;
				color: #fff;
				font-size: inherit;
				border-color: #fff;
				line-height: 26px;
				border-radius: 4px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: #4b88e4;
				width: auto;
				border-width: 0px;
				border-style: solid;
				min-width: 55px;
				height: auto;
			}
	
	.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8:hover {
				border-color: #666;
				border-width: 0px;
				opacity: 0.8;
				border-style: solid;
			}
	
	// pagination
	.main-content .el-pagination /deep/ .el-pagination__total {
				margin: 0 10px 0 0;
				color: inherit;
				font-weight: 400;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
				line-height: 28px;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .btn-prev {
				border: 1px solid #dee2e6;
				border-radius: 2px;
				padding: 0 5px;
				margin: 0 2px;
				color: inherit;
				background: none;
				display: inline-block;
				vertical-align: top;
				font-size: 18px;
				line-height: 28px;
				min-width: 35px;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .btn-next {
				border: 1px solid #dee2e6;
				border-radius: 2px;
				padding: 0 5px;
				margin: 0 2px;
				color: inherit;
				background: none;
				display: inline-block;
				vertical-align: top;
				font-size: 18px;
				line-height: 28px;
				min-width: 35px;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .btn-prev:disabled {
				border: 1px solid #dee2e6;
				cursor: not-allowed;
				border-radius: 2px;
				padding: 0 5px;
				margin: 0 2px;
				color: #999;
				background: none;
				display: inline-block;
				vertical-align: top;
				font-size: 18px;
				line-height: 28px;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .btn-next:disabled {
				border: 1px solid #dee2e6;
				cursor: not-allowed;
				border-radius: 2px;
				padding: 0 5px;
				margin: 0 2px;
				color: #999;
				background: none;
				display: inline-block;
				vertical-align: top;
				font-size: 18px;
				line-height: 28px;
				height: 28px;
			}

	.main-content .el-pagination /deep/ .el-pager {
				padding: 0;
				margin: 0;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
			}

	.main-content .el-pagination /deep/ .el-pager .number {
				cursor: pointer;
				border: 1px solid #dee2e6;
				padding: 0 4px;
				margin: 0 2px;
				color: inherit;
				background: none;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
				line-height: 28px;
				text-align: center;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pager .number:hover {
				cursor: pointer;
				border-radius: 4px;
				padding: 0 4px;
				margin: 0 5px;
				color: #333;
				background: #e9ecef;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
				line-height: 28px;
				text-align: center;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pager .number.active {
				cursor: default;
				border: 1px solid #dee2e6;
				padding: 0 4px;
				margin: 0 2px;
				color: #333;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
				line-height: 28px;
				border-radius: 4px;
				background: #e9ecef;
				text-align: center;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__sizes {
				color: inherit;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
				line-height: 28px;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
				margin: 0 5px;
				color: inherit;
				width: 100px;
				font-size: inherit;
				position: relative;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
				border: 0px solid #ddd;
				cursor: pointer;
				padding: 0 25px 0 8px;
				color: inherit;
				display: inline-block;
				font-size: inherit;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: none;
				width: 100%;
				text-align: center;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
				top: 0;
				position: absolute;
				right: 0;
				height: 100%;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
				cursor: pointer;
				color: #C0C4CC;
				width: 25px;
				font-size: 14px;
				line-height: 28px;
				text-align: center;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__jump {
				margin: 0 0 0 24px;
				color: inherit;
				display: inline-block;
				vertical-align: top;
				font-size: inherit;
				line-height: 28px;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__jump .el-input {
				border-radius: 3px;
				padding: 0 2px;
				margin: 0 2px;
				color: inherit;
				display: inline-block;
				width: 50px;
				font-size: inherit;
				line-height: 18px;
				position: relative;
				text-align: center;
				height: 28px;
			}
	
	.main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
				border: 1px solid #eee;
				cursor: pointer;
				padding: 0 0px;
				color: inherit;
				display: inline-block;
				font-size: inherit;
				line-height: 24px;
				border-radius: 3px;
				outline: 0;
				background: #fff;
				width: auto;
				text-align: center;
				height: 24px;
			}
	
	// list one
	.one .list1-view {
				cursor: pointer;
				padding: 0 8px 0 0px;
				margin: 0px 5px 5px 0;
				color: #23b7e5;
				font-size: inherit;
				border-color: #fff;
				line-height: 24px;
				border-radius: 20px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: none;
				width: auto;
				border-width: 1px;
				border-style: double;
				min-width: 40px;
				height: 24px;
			}
	
	.one .list1-view:hover {
				border-color: #23b7e5;
				border-width: 1px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.one .list1-edit {
				cursor: pointer;
				padding: 0 8px 0 0px;
				margin: 0px 5px 5px 0;
				color: #45B6B0;
				font-size: inherit;
				border-color: #fff;
				line-height: 24px;
				border-radius: 20px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: none;
				width: auto;
				border-width: 1px;
				border-style: double;
				min-width: 40px;
				height: 24px;
			}
	
	.one .list1-edit:hover {
				border-color: #45B6B0;
				border-width: 1px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.one .list1-del {
				cursor: pointer;
				padding: 0 8px 0 0px;
				margin: 0px 5px 5px 0;
				color: #d9534f;
				font-size: inherit;
				border-color: #fff;
				line-height: 24px;
				border-radius: 20px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: none;
				width: auto;
				border-width: 1px;
				border-style: solid;
				min-width: 40px;
				height: 24px;
			}
	
	.one .list1-del:hover {
				border-color: #d9534f;
				border-width: 1px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.one .list1-btn8 {
				cursor: pointer;
				padding: 0 8px 0 0px;
				margin: 0px 5px 5px 0;
				color: #333;
				font-size: inherit;
				border-color: #fff;
				line-height: 24px;
				border-radius: 20px;
				box-shadow: inset 0px 0px 0px 0px rgba(244,100,130,.3);
				outline: none;
				background: none;
				width: auto;
				border-width: 1px;
				border-style: solid;
				min-width: 40px;
				height: 24px;
			}
	
	.one .list1-btn8:hover {
				border-color: #333;
				border-width: 1px;
				opacity: 0.8;
				border-style: solid;
			}
	
	.main-content .el-table .el-switch {
				display: inline-flex;
				vertical-align: middle;
				line-height: 30px;
				position: relative;
				align-items: center;
				height: 30px;
			}
	.main-content .el-table .el-switch /deep/ .el-switch__label--left {
				cursor: pointer;
				margin: 0 10px 0 0;
				color: #333;
				font-weight: 500;
				display: inline-block;
				vertical-align: middle;
				font-size: 16px;
				transition: .2s;
				height: 30px;
			}
	.main-content .el-table .el-switch /deep/ .el-switch__label--right {
				cursor: pointer;
				margin: 0 0 0 10px;
				color: #333;
				font-weight: 500;
				display: inline-block;
				vertical-align: middle;
				font-size: 16px;
				transition: .2s;
				height: 30px;
			}
	.main-content .el-table .el-switch /deep/ .el-switch__core {
				border: 1px solid #ceddee;
				cursor: pointer;
				border-radius: 15px;
				margin: 0;
				outline: 0;
				background: #ceddee;
				display: inline-block;
				width: 50px;
				box-sizing: border-box;
				transition: border-color .3s,background-color .3s;
				height: 24px;
			}
	.main-content .el-table .el-switch /deep/ .el-switch__core::after {
				border-radius: 100%;
				top: 1px;
				left: 1px;
				background: #fff;
				width: 20px;
				position: absolute;
				transition: all .3s;
				height: 20px;
			}
	.main-content .el-table .el-switch.is-checked /deep/ .el-switch__core::after {
				margin: 0 0 0 -27px;
				left: 100%;
			}
	
	.main-content .el-table .el-rate /deep/ .el-rate__item {
				cursor: pointer;
				display: inline-block;
				vertical-align: middle;
				font-size: 0;
				position: relative;
			}
	.main-content .el-table .el-rate /deep/ .el-rate__item .el-rate__icon {
				margin: 0 3px;
				color: #c0c4cc;
				display: inline-block;
				font-size: 18px;
				position: relative;
				transition: .3s;
			}


</style>
