<template>
    <div class="L-public-main yewufazhan-box">
        <div class="yewufazhanbox-left" v-loading="loading">
            <div class="yewufazhanbox-header-box">
                <div class="yewufazhan-title">文本编辑器</div>
                <el-button @click="footbtn('一键生成')">一键生成</el-button>
            </div>
            <el-form :model="addFrom" size="small" ref="importFrom" :rules="rules" class="newArticle">
                <el-row :gutter="20">
                    <el-col>
                        <el-form-item class="yewufazhanbox-input" prop="title">
                            <el-input v-model.trim="addFrom.title" placeholder="请输入报告模板标题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col>
                        <el-form-item class="yewufazhanbox-input" prop="subheading">
                            <el-input v-model.trim="addFrom.subheading" placeholder="副标题"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="content">
                            <myEditor height="480px" ref="myEditor" v-model="addFrom.content" @onFocus="onFocus" @onBlur="onBlur"></myEditor>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div class="dialog-footer">
                <el-form size="small">
                    <el-form-item class="dialog-from-item">
                        <el-button @click="footbtn('预览')" :disabled="isDisabled">预览</el-button>
                        <el-button type="primary" @click="footbtn('保存')">保存</el-button>
                        
                        <el-button type="primary" @click="footbtn('导出')" :disabled="isDisabled">导出</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="yewufazhanbox-right">
            <div class="yewufazhan-title-right">模板指标自定义选择</div>
            <div class="yewufazhanbox-right-from">
                <span>年份：</span>
                <el-date-picker v-model="nianfenvalue3" :clearable="false" value-format="yyyy" format="yyyy" @change="timeChange" type="year" placeholder="选择年">
                </el-date-picker>
            </div>
            <div class="yewufazhanbox-right-table">
                <el-table :data="tableData" border header-align="center" stripe>
                <el-table-column prop="dataName" label="数据项" width="180" align="center">
                </el-table-column>
                <el-table-column prop="years" label="统计年份" align="center">
                </el-table-column>
                <el-table-column prop="count" label="数值" align="center">
                </el-table-column>
                <el-table-column prop="shuzhi" label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- <div class="yewufazhanbox-charu" @click="charu(scope.row)">插入</div> -->
                        <el-button type="text"class="yewufazhanbox-charu" @click="charu(scope.row)" :disabled="btnDisable">插入</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
       

        </div>
        <el-dialog
            title="查看详情" 
            :visible.sync="infoVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="infoClose"
            custom-class="info-dialog"
            append-to-body
            >
            <div class="info-content">
                <div class="info-title">{{ addFrom.title }}</div>
                <div class="info-content-top">
                <div>副标题：{{ addFrom.subheading }}</div>
                </div>
                <div v-html="addFrom.content" class="info-content-content"></div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-form size="small">
                <el-form-item class="dialog-from-item">
                    <el-button size="mini" @click="infoClose">关闭</el-button>
                </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import myEditor from "@/views/components/myEditor/index.vue"
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import { blobValidate } from "@/utils/ruoyi";
import errorCode from '@/utils/errorCode'
import { templateMetrics, templateMetricsAdd, getId } from "@/api/jin_ji_hu/ServiceDevelopment/index"
import axios from 'axios'
export default {
    name: '',
    components: { myEditor },
    data() {
        return {
            VUE_APP_BASE_API:process.env.VUE_APP_BASE_API,
            nianfenvalue3: "",
            addFrom: {
                title: "",
                subheading: "",
                content: "",
            },
            rules: {
                title: [
                    { required: true, message: '请输入报告模板标题', trigger: 'blur' }
                ],
                // joinProject:[
                //   { required: true, message: '请填写政策等级', trigger: 'blur' }
                // ],
                subheading: [
                    { required: true, message: '请输入副标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ],
            },
            tableData: [],
            btnDisable:true,
            loading:false,
            title : '苏州工业园区服务业发展情况',
            subheading: "2023年4月",
            content: "<p>一、总体实力显著增强</p><p>产业规模高速增长，综合贡献明显提升。</p><p>近年来,园区服务业保持持续增长态势,截至目前,园区服务业规上企业总计 677 家。2021年,园区实现服务业增加值 1674.4亿元，占GDP 比重达 50.3%。2022年全年，实现服务业增加值1753.18亿元，占 GDP 比重49.9%。2023年1-3月，实现服务业增加值 405.95亿元，同比增加4.2%。7大服务业核算行业(①多式联运和运输代理业、②装卸报运和仓储业、③互联网和相关服务、软件信息服务业、④租赁和商务服务业、(5居民服务、修理和其他服务业、⑥文化、体育和娱乐业、⑦科学研究和技术服务业)2022年全年营股1311.71亿元，增速达22%:2023年1-3月实现营收 348.34亿元，同比增速 35%。根据苏州市新兴服务业行业分类(含金融服务、信息服务、物流服务、科技服务、商务中介服务、设计服务、人力资源服务、检验栓测认证、低碳绿色服务、现代商贸、文化消费、旅游康养等 12个类别)，2022年国区新兴服务业营收达 1488.57 亿元，较上年增长 24%。</p><p>二、产业结构持续优化</p><p>产业结构还步优化，生产性服务占主导。经过多年发展，园区服务业产业结构逐渐多样化，生产性服务业与生活性服务业基本形成7:3的格局。2022年，生产性服务业增加值达到1199.5亿元，占服务业增加值比重达68.筑。截至目前，园区生产性服务业规上企业总计 655家(含部分工业企业)。自 2019年苏州市开展全市生产恒服务业综合译价以来，园区已连续两年考评优秀。37家国区企业入选苏州市生产性服务业领军企业，占全市51%，位全市第一，并成为苏州首个实现生产性服务业9大重点领域(信息技术服务、研发设计、金融服务、检验检测认证、知识产权服务、节能环保服务、人力资源服务、现代供应蛙管理、商务服务)全度盖的区域。推动先进制造业和现代服务业深度融合发展，2022年初，园区获评江苏省两业融合深度融合试点地区。</p><p>城市活力不断提升，生活性服务显潜能。完成环金鸡湖商圈城市活力提升规划并正式发布，引导环金鸡湖商圈核心商业体差异定位、错位发展，金鸡湖景区获评第一批省级现代服务业高质量发展集聚示范区。积极引入北京及上海周边外溢资源，推动园区载体与国内优质品牌对接，加快发展“首店经济”(首店经济是指一个区域利用特有的资源优势，吸引国内外品牌在区域首次开设门店，目前国区大力推动“中国首店”“苏州首店”落户园区)。通过开展“云购金鸡湖”等活动，持续打造金鸡湖系列 IP，宣传园区特色消费场景，在后疫情时代不断激发生活性服务业发展能。</p>",
            infoVisible:false,
            isDisabled:true,
        }
    },
    watch:{
        addFrom:{
            handler(newvalue){
                if(newvalue.title && newvalue.subheading && newvalue.content) {
                    let str = this.getText(newvalue.content);
                    if(!this.isNull(str)) {
                        this.isDisabled = false;
                    }
                } else {
                    this.isDisabled = true;
                }
            },
            deep:true
        }
    },
    created() { },
    mounted() { 
        let date = new Date();
        let year = date.getFullYear();
        this.nianfenvalue3 = year + ''
        this.getList();
        this.getEditinfo();
    },
    methods: {
        getText(str){
            return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
        },
        isNull(str){
            if ( str == "" ) return true;
            var regu = "^[ ]+$";
            var re = new RegExp(regu);
            return re.test(str);
        },
        // 插入
        charu(item){
            // console.log(item);
            if(item.count != "-") {
                this.$refs.myEditor.interposition(item.count)
            }
            // 在选区插入文本 : editor.insertText('xxx')  editor.dangerouslyInsertHtml(`<h1>标题</h1><p>文本 <b>加粗</b></p>`)
        },
        // 底部按钮
        footbtn(type) {
            if (type == '预览') {
                this.infoVisible = true;
            } else if (type == '保存') {
                templateMetricsAdd(this.addFrom).then(res=>{
                    if(res.code == 200) {
                        this.$refs.importFrom.resetFields();
                        this.$message({
                            type: "success",
                            message: "新增成功!",
                        });
                    }
                })
            } else if (type == '一键生成') {
                this.$confirm("是否覆盖当前内容 ?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.loading = true;
                    setTimeout(()=>{
                        this.addFrom.title = this.title;
                        this.addFrom.subheading = this.subheading;
                        this.addFrom.content = this.content;
                        this.loading = false;
                    },2000)
                })
                .catch(() => {
                });
                
            } else if (type == '导出') {
                if(!this.isDisabled) {
                    this.$confirm("是否确认导出发展模板?", "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.loading = true;
                        axios({
                            method: 'post',
                            url: this.VUE_APP_BASE_API + "/jjh/templateMetrics/downloadTemplate",
                            data: this.addFrom,
                            responseType: 'blob',
                            headers: { 'Authorization': 'Bearer ' + getToken() }
                        }).then((res) => {
                            const isBlob = blobValidate(res.data);
                            if (isBlob) {
                                const blob = new Blob([res.data])
                                saveAs(blob, ("发展模板" + new Date().getTime() + ".docx"))
                            } else {
                                this.printErrMsg(res.data);
                            }
                        })
                        // this.download(
                        // "/jjh/templateMetrics/downloadTemplate",
                        // {...this.addFrom},
                        // "发展模板" + new Date().getTime() + ".xlsx"
                        // );
                        this.loading = false;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: "请填写内容",
                    });
                }
            }
        },
        async printErrMsg(data) {
            const resText = await data.text();
            const rspObj = JSON.parse(resText);
            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
            Message.error(errMsg);
        },
        // 查询模板指标自定义选择
        getList(){
            templateMetrics(this.nianfenvalue3).then(res=>{
                this.tableData = res.data;
            })
        },
        getEditinfo(){
            getId().then(res=>{
                this.addFrom = res.data
            })
        },
        // 选择年份变化
        timeChange(time){
            this.getList()
        },
        onFocus(){
            this.btnDisable = false;
        },
        onBlur(){
            this.btnDisable = true;
        },
        // 关闭详情
        infoClose(){
            this.infoVisible = false;
        },
    },
    computed: {}
}
</script>
<style scoped lang='scss'></style>
