<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div class="filter-container" ref="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
                 type="primary" icon="edit">添加
      </el-button>
    </div>
    <el-table :key='tableKey' :data="list" border fit highlight-current-row
              style="width: 100%">
      <el-table-column
        type="index"
        align="center" label="序号" width="98">
      </el-table-column>
      <el-table-column width="160" align="center" label="标题">
        <template scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="类型">
        <template scope="scope">
          <span>{{scope.row.type==0?"首页":scope.row.type==1?"旅游":scope.row.type==2?"营地":scope.row.type==3?"房车":scope.row.type==4?"活动":scope.row.type==5?"新闻":scope.row.type==6?"关于欣新":scope.row.type}}</span>
        </template>
      </el-table-column>
      <el-table-column width="250" align="center" label="banner图">
        <template scope="scope">
          <img :src="scope.row.cover" style="width:100%;max-height:100px;">
        </template>
      </el-table-column>
      <el-table-column align="center" label="跳转">
        <template scope="scope">
          <span>{{scope.row.url}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150" label="操作">
        <template scope="scope">
          <el-button size="small" class="el-button el-button--text el-button--small" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button class="el-button el-button--text el-button--small" style="color:red;" size="small" @click="deleteHandler(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- banner modal弹窗 -->
    <el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="90px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <!--0-app首页,1-app旅游页；2-租车-->
        <el-form-item label="类型" prop="type">
          <el-radio class="radio" v-model="form.type" label="0">首页</el-radio>
          <el-radio class="radio" v-model="form.type" label="1">旅游</el-radio>
          <el-radio class="radio" v-model="form.type" label="2">营地</el-radio>
          <el-radio class="radio" v-model="form.type" label="3">房车</el-radio>
          <el-radio class="radio" v-model="form.type" label="4">活动</el-radio>
          <el-radio class="radio" v-model="form.type" label="5">新闻</el-radio>
          <el-radio class="radio" v-model="form.type" label="6">关于欣新</el-radio>
        </el-form-item>
        <!--BASE_API + -->
        <el-form-item label="banner图" prop="cover" :style="{display:'block'}">
          <el-upload
            class="avatar-uploader"
            :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
            :show-file-list="false"
            :headers="getHeaderWithToken"
            :on-success="handleAvatarSuccess">
            <img v-if="$utils.isString(form.cover) && !$utils.isEmpty(form.cover)" :src="form.cover" style="width:500px;max-height:300px;">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="lineHeight:100px;width:500px;height: 100px;"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          建议尺寸：1080*630
        </el-form-item>
        <el-form-item label="alt">
          <el-input v-model="form.alt" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input v-model="form.url" placeholder="请输入跳转链接"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandel">取 消</el-button>
        <el-button v-if="modalTitle=='创建'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import 'static/css/uploadImg.css';// 引入图片上传组件对话框

    import {
        formatDate
    } from 'utils/dateFormattor';

    import {
        toEast8Date,
        deepCopyDate,
        newEast8Date,
        convertDate2Str
    } from 'utils/dateUtils';

    import {
        getBannerList,
        editBanner,
        addBanner,
        delBanner
    } from 'api/tourManage';

    import rsCode from '../../utils/rsCode';

    import {mapGetters} from 'vuex';
    import {
        getToken
    } from '../../utils/auth';

    import Element1 from "../admin/menu/components/element";
    import ElRow from "element-ui/packages/row/src/row";
    import ElCol from "element-ui/packages/col/src/col";

    export default {
        name: 'tourManage',
        components: {
            ElCol,
            ElRow,
            Element1
        },
        data() {
            return {
                tableKey:0,
                modalTitle: "创建",
                BASE_API: process.env.BASE_API,
                bannerDialogVisible: false,//添加、编辑弹框
                showLoadingBody: false,
                form: {
                    title: "",
                    url: "",
                    cover:"",
                    type: "0",
                    location: "0",
                    platform: 1,
                    alt:""
                },
                listQuery: {
                    pageNo: 1,
                    pageSize: 20,
                    platform: 1
                },
                rules: {
                    title: {
                        type: 'string',
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    },
                    type:{
                        type: 'string',
                        required: true,
                        message: '请选择banner类型',
                        trigger: 'blur'
                    },
                    location:{
                        type: "string",
                        required: true,
                        message: '请选择位置类型',
                        trigger: 'blur'
                    },
                    cover: {
                        type: 'string',
                        required: true,
                        message: '请上传图片',
                    },
                },
                list: null,
                total: null,
                listLoading: true,
                inline: true,
                banner_btn_edit: false,//编辑
                banner_btn_add: false,//添加
            }
        },
        created() {
            this.getList();
            this.banner_btn_edit = true;//this.elements['tourManage:btn_edit'];
            this.banner_btn_add = true;//this.elements['tourManage:btn_add'];
        },
        computed: {
            ...mapGetters([
                'elements',
                'belong2Type'
            ]),
            getHeaderWithToken() {
                return {Authorization: getToken()};
            },
        },
        methods: {
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNo = val;
                this.getList();
            },
            /**
             * 添加
             * */
            handleCreate() {
                this.cleanForm();
                this.modalTitle = '创建';
                this.bannerDialogVisible = true;
            },
            /**
             * 操作-编辑
             * */
            handleUpdate(row) {
                this.modalTitle = '编辑';
                this.cleanForm();
                this.form = row;
                this.bannerDialogVisible = true;
            },
            /**
             * 弹框-取消
             * */
            cancelHandel(){
                this.cleanForm();
                this.bannerDialogVisible = false;
            },
            /**
             * 清空表单
             * */
            cleanForm() {
                this.form = {
                    title: "",
                    cover: "",
                    url:"",
                    type: "0",
                    location: "0",
                    platform: 1
                }
            },
            showImgDialog(drivingLicensePath) {
                this.licenceSrcUrl = this.getDrivingLicenseUrl(drivingLicensePath);
                this.dialogForm4LicenceVisible = true;
            },
            /**
             * 获取banner列表数据
             * */
            getList() {
                this.listLoading = true;
                getBannerList(this.listQuery).then(response => {
                    let totalCountRs = undefined;
                    let listRs = undefined;
                    if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
                        listRs = response.data.data;
                        response.data.data.map(function(item){
                            item.type = item.type+"";
                            item.location = item.location?item.location+"": "0";
                            item.visible2 = false;
                        });
                        totalCountRs = response.data.totalCount;
                    }
                    this.listLoading = false;
                    this.list = listRs;
                    this.total = totalCountRs;
                });
            },
            /**
             * 创建
             * */
            create(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        addBanner(this.form)
                            .then(response => {
                                if (response.status === 200) {
                                    this.bannerDialogVisible = false;
                                    this.getList();
                                    this.$notify({
                                        title: '成功',
                                        message: '创建成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                } else {
                                    this.$notify({
                                        title: '失败',
                                        message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                                        type: 'error',
                                        duration: 2000
                                    });
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 编辑-更新
             * */
            update(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        editBanner(this.form).then(response => {
                            if (response.status === 200) {
                                this.bannerDialogVisible = false;
                                this.getList();
                                this.$notify({
                                    title: '成功',
                                    message: '编辑成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.getList();
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                                    type: 'error',
                                    duration: 2000
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 上传图片
             * @param file
             * @returns {boolean}
             */
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG/GIF 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                this.showLoadingBody = true;
                return isJPG && isLt2M;
            },
            handleAvatarSuccess(res, file) {
                this.form.cover = res.data;
                this.showLoadingBody = false;
            },
            /**
             * 操作-删除
             * */
            deleteHandler(row) {
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delBanner(row.id).then(response => {
                        if (response.status === 200) {
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getList();
                        } else {
                            this.$notify({
                                title: '删除失败',
                                message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                                type: 'error',
                                duration: 2000
                            });
                        }
                    });
                })
            },
            getUrl(drivingLicensePath) {
                return process.env.BASE_API +
                    '/vehicle/vehicleInfo/download/drivingLicense?realFileRelPath=' + encodeURI(drivingLicensePath);
            },
        }
    }
</script>
