<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="3" :sm="6">
                        <a-form-item label="县分">
                            <a-select v-model="queryParam.productRegion" @change="getSchoolNames">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in subNames" :key="d.value" :value="d.value">{{d.text}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="10">
                        <a-form-item label="学校">
                            <a-select v-model="queryParam.productUniversity">
                                <a-select-option key="">--全部--</a-select-option>
                                <a-select-option v-for="d in schoolNames" :key="d.value" :value="d.value">{{d.text}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                        <a-button @click="search()" type="primary">查询</a-button>
                        <a-divider type="vertical"/>
                        <a-button @click="modifyfunction()" type="primary">添加</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <!--列表-->
        <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling"
                 :locale="emptyText">
            <!--拦截器-->
            <template slot="productLastUpdateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <!--拦截器-->
            <template slot="productCreateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="text" slot-scope="text">
                <p style="white-space: pre-line;">{{text}}</p>
            </template>
            <template slot="productState" slot-scope="text">
                <span v-if="text=='0'">正常</span>
                <span v-else>下架</span>
            </template>
            <template slot="operation" slot-scope="text,record">
                <span>
                  <a @click="modifyfunction(record)">修改</a>
                  <a-divider type="vertical"/>
                  <a-popconfirm title="是否要删除此行？" @confirm="remove(record.productId)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
            </template>
        </s-table>
        <!----弹框-->
        <a-modal :title="add ?'添加宽带': '编辑宽带'" :visible="modifyvisible" @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">
            <a-drawer
                    title="适用学校详情"
                    placement="right"
                    :closable="false"
                    @close="visibleT = false"
                    :visible="visibleT"
                    width=" 40%"
            >
                <p><span>学校名称：{{chouti.universityName}}</span></p>
                <p><span>县分：{{chouti.universityRegion}}</span></p>
                <p><span>装机地址：{{chouti.universityInstalledAddress}}</span></p>
                <p><span>外线方式：{{chouti.universityExteriorLines}}</span></p>
                <p><span>揽装工号：{{chouti.universityPackageNumber}}</span></p>
                <p><span>地址ID：{{chouti.universityInstalledAddressId}}</span></p>
                <p><span>用户类型：{{chouti.universityUserType}}</span></p>
                <p><span>月租类型：{{chouti.universityMonthlyRentType}}</span></p>
                <p><span>收费模式：{{chouti.universityChargeMode}}</span></p>
                <p><span>计费属性：{{chouti.universityChargingAttribute}}</span></p>
                <p><span>学校联系号码：{{chouti.universityContactPhone}}</span></p>
            </a-drawer>
            <a-drawer
                    title="正则校检详情"
                    placement="right"
                    :closable="false"
                    @close="visibleT2 = false"
                    :visible="visibleT2"
                    width=" 40%"
            >
                <p><span>正则名称：{{regular.name}}</span></p>
                <p><span>正则表达示：{{regular.regular}}</span></p>
                <p><span>错误提示：{{regular.tips}}</span></p>
                <p><span>输入框默认提示：{{regular.placeholder}}</span></p>
            </a-drawer>

            <a-form :form="Formtable">
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="宽带标题：">
                    <a-input placeholder="宽带标题"
                             v-decorator="[ 'productTitle', {rules: [{ required: true, message: '宽带标题不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="区域：">
                    <a-input placeholder="区域"
                             v-decorator="[ 'productRegion', {rules: [{ required: true, message: '区域不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="单宽资费：">
                    <a-input placeholder="单宽资费"
                             v-decorator="[ 'productPrice', {rules: [{required: true, message: '资费不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="单宽宽带速率：">
                    <a-input placeholder="单宽宽带速率"
                             v-decorator="[ 'productMeal', {rules: [{ required: true, message: '宽带速率不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="单宽包年包月情况：">
                    <a-input placeholder="单宽包年包月情况"
                             v-decorator="[ 'productRate', {rules: [{ required: true, message: '包年包月情况不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>


                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="融合资费：">
                    <a-input :rows="10" v-model="modelData.productRhPrice"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="融合包年包月情况：">
                    <a-input :rows="10" v-model="modelData.productRhRate"/>
                </a-form-item>

                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="适用学校：">
                    <a-select v-model="universityName" style="width: 330px">
                        <a-select-option @click="universitySchoolName('请选择')" value="请选择">请选择</a-select-option>
                        <a-select-option @click="universitySchoolName(item)" v-for="item in universitySchool" :value="item.universityId">
                            {{item.universityName}}
                        </a-select-option>
                    </a-select>
                    <a @click="visibleT = true">详情</a>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="套餐情况：">
                    <a-input :rows="10" v-model="modelData.productMealPrice"/>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="正则验证名：">
                    <a-select v-model="regularName" style="width: 330px">
                        <a-select-option @click="regularsName('请选择')" value="请选择">请选择</a-select-option>
                        <a-select-option @click="regularsName(item)" v-for="item in regulars" :value="item.regularId">{{item.regularName}}</a-select-option>
                    </a-select>
                </a-form-item>
                <div>
                    <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="状态">
                        <a-select placeholder="状态" v-decorator="[ 'productState']">
                            <a-select-option key="0">正常</a-select-option>
                            <a-select-option key="1">下架</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="产品情况：">
                        <mavon-editor @save="saveProductIntroduction" ref="editor_a" v-model="productIntroduction" :xssOptions="{}"></mavon-editor>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="单宽资费介绍：">
                        <mavon-editor @save="saveProductSetMealIntroduction" ref="editor_b" v-model="productSetMealIntroduction" :xssOptions="{}"></mavon-editor>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="融合资费介绍：">
                        <mavon-editor @save="saveProductRf2" ref="editor_c" v-model="productRf2" :xssOptions="{}"></mavon-editor>
                    </a-form-item>
                </div>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {mavonEditor} from "mavon-editor";
    import "mavon-editor/dist/css/index.css";
    import {
        productList,
        productDelete,
        productInsert,
        productUpdate,
        universitySchool
    } from "@/api/school-center/productAPI"
    import {cloneObject} from '@/utils/util';
    import {getSchoolNames, initSubstName} from "../../../api/school-center/louZhang/louZhangManagerAPI";

    export default {
        name: "product",
        components: {
            STable, mavonEditor,
        },
        data() {
            return {
                universityId: true,
                universityName: '',
                regularName: '请选择',
                visibleT: false,
                visibleT2: false,
                chouti: {},
                regular: {},
                universitySchool: [],
                regulars: [],
                emptyText: {emptyText: '暂无数据'},
                Formtable: this.$form.createForm(this),
                modifyvisible: false,
                add: true,
                productIntroduction: "",
                productSetMealIntroduction: "",
                productRf2:"",
                subNames: [],
                schoolNames: [],
                queryParam: {
                    productUniversity: '', //适用学校
                    productRegion: '',  // 区域
                    productTitle: '',    //宽带标题
                    productState: ''  // 宽带狀態
                },
                modelData: {
                    productId: '',
                    universityId: '',
                    productMealPrice: '',
                    productMeal: '',
                    productTitle: '',
                    productUniversity: '',
                    productPrice: '',
                    productRegion: '',
                    productRate: '',
                    productIntroduction:'',
                    productSetMealIntroduction:'',
                    productRf2:'',
                    productIntroductionPic2: '',
                    productRhPrice:'',
                    productRhRate:''
                },
                columns: [
                    {dataIndex: 'productTitle', width: 200, title: '宽带标题 '},
                    {dataIndex: 'productUniversity', width: 250, title: '学校'},
                    {dataIndex: 'productPrice', width: 80, title: '资费 '},
                    {dataIndex: 'productRegion', width: 80, title: '县分'},
                    {dataIndex: 'productCreater', width: 80, title: '创建人 '},
                    {
                        dataIndex: 'productLastUpdateTime',
                        width: 200,
                        title: '更新时间 ',
                        scopedSlots: {customRender: 'productLastUpdateTime'}
                    },
                    {
                        dataIndex: 'productCreateTime',
                        width: 200,
                        title: '创建时间 ',
                        scopedSlots: {customRender: 'productCreateTime'}
                    },
                    {dataIndex: 'productState', width: 80, title: '状态 ', scopedSlots: {customRender: 'productState'}},
                    {dataIndex: 'productMealPrice', width: 200, title: '套餐情况 ', scopedSlots: {customRender: 'text'}},
                    {dataIndex: 'productRate', width: 120, title: '包年包月情况 '},
                    {dataIndex: 'productMeal', width: 80, title: '宽带速率 '},
                    /*  {dataIndex: 'productIntroduction', width: 200, title: '产品情况 ', scopedSlots: {customRender: 'text'}},
                      {dataIndex: 'productSetMealIntroduction', width: 200, title: '资费介绍 ', scopedSlots: {customRender: 'text'}},*/
                    {
                        dataIndex: 'operation',
                        width: 120,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)
                    //表示
                    return productList(Object.assign(params, obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.$message.error("查询失败！", 5);
                            this.emptyText.emptyText = '查询失败！'
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            this.regulars = res.data.regulars;
                            data = {
                                data: res.data.page.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.page.total
                            }
                        }
                        return data
                    })
                }
            }
        },
        methods: {
            saveProductIntroduction(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中

                console.log("markdown内容:" + markdown);
                //alert("html内容:" + html);
                this.productIntroduction = html
            },
            saveProductSetMealIntroduction(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中
                console.log("markdown内容:" + markdown);
                this.productSetMealIntroduction = html
                //alert("html内容:" + html);
            },
            saveProductRf2(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中
                console.log("markdown内容:" + markdown);
                this.productRf2 = html
                //alert("html内容:" + html);
            },
            universitySchoolName(item) {
                if (item == '请选择') {
                    this.modelData.universityId = ''
                } else {
                    this.modelData.productUniversity = item.universityName
                    this.modelData.universityId = item.universityId
                    this.chouti = item
                }
            },
            regularsName(item) {
                if (item == '请选择') {
                    this.modelData.productIntroductionPic2 = ''
                } else {
                    this.modelData.productIntroductionPic2 = item.id
                    this.name = item.name
                    this.regular = item
                }
            },
             HTMLEncode(text) {
             let temp = document.createElement("div");
              temp.innerHTML = text;
             let output = temp.innerText || temp.textContent;
             temp = null;
             return output;
           },
            search() {
                this.$refs.table.refresh({search: true})
            },
            remove(id) {
                productDelete(id).then((res) => {
                    if (res.state == "success") {
                        this.$notification.success({message: res.data, description: '', duration: 4})
                    }
                    this.$refs.table.refresh({search: true})
                })
            },
            modifyfunction(data) {
                console.log(data);
                universitySchool().then(res => {
                    this.universitySchool = res.data;
                    if (data != undefined) {
                      res.data.forEach(value => {
                        if (data.universityId == value.universityId) {
                          this.chouti = value
                        }
                      })
                    }
                })
                if (data != undefined) {
                    this.productIntroduction = data.productIntroduction == null ? "":data.productIntroduction.replace(/&lt/g, '<').replace(/&gt/g, '>')
                    this.productSetMealIntroduction = data.productSetMealIntroduction == null ? "":data.productSetMealIntroduction.replace(/&lt/g, '<').replace(/&gt/g, '>')
                    this.productRf2 = data.productRf2 == null ? "":data.productRf2.replace(/&lt/g, '<').replace(/&gt/g, '>')
                    this.modelData.productMealPrice = data.productMealPrice
                    this.modelData.productUniversity = data.productUniversity
                    this.modelData.productRhPrice=data.productRhPrice
                    this.modelData.productRhRate=data.productRhRate
                    this.universityName = data.productUniversity
                    for (var i = 0; i < this.regulars.length; i++) {
                        if (data.productIntroductionPic2 == this.regulars[i].regularId + '') {
                            this.regularName = this.regulars[i].regularName
                            this.modelData.productIntroductionPic2 = this.regulars[i].regularId
                        }
                    }
                    this.modelData.universityId = data.universityId
                    this.modelData.productId = data.productId
                    setTimeout(() => {
                        this.Formtable.setFieldsValue({
                            "productMeal": data.productMeal,
                            "productTitle": data.productTitle,
                            "productPrice": data.productPrice,
                            "productRegion": data.productRegion,
                            "productRate": data.productRate,
                            "productState": data.productState
                        })
                    }, 0)
                    this.add = false;
                } else {
                    this.universityName = '请选择'
                    this.regularName = "请选择";
                }
                this.productIntroduction=this.HTMLEncode(this.productIntroduction)
                this.productSetMealIntroduction=this.HTMLEncode(this.productSetMealIntroduction);
                this.productRf2=this.HTMLEncode(this.productRf2)
                this.modifyvisible = true;
            },
            createfunctionOk() {
                if (this.modelData.universityId == '' || this.modelData.universityId == undefined || this.modelData.productUniversity == '请选择') {
                    this.$notification.error({message: '请选择适用学校', duration: 4})
                    return
                }
                let that = this;
                that.Formtable.validateFields(
                    [
                        'productMeal', 'productTitle', 'productPrice', 'productRegion', 'productRate',
                        'productState', "productIntroduction", "productSetMealIntroduction", "productRf2"
                    ], {force: true}, (err, values) => {
                        if (err) {
                            return;
                        }
                        that.modelData.productMeal = values.productMeal
                        that.modelData.productTitle = values.productTitle
                        that.modelData.productPrice = values.productPrice
                        that.modelData.productRegion = values.productRegion
                        that.modelData.productRate = values.productRate
                        that.modelData.productState = values.productState
                        that.modelData.productIntroduction = this.$refs.editor_a.d_render;
                        that.modelData.productSetMealIntroduction = this.$refs.editor_b.d_render;
                        that.modelData.productRf2 = this.$refs.editor_c.d_render;
                        if (this.add) {
                            let obj = that.modelData;
                            delete obj.productId
                            let product = JSON.stringify(obj);
                            productInsert({product}).then((res) => {
                                this.modifyvisible = false;
                                this.clearmodel()
                                if (res.state == "success") {
                                    this.$notification.success({message: res.data, description: '', duration: 4})
                                }
                                this.search()
                            })
                        } else {
                            let obj = that.modelData;
                            let product = JSON.stringify(obj);
                            console.log(product)
                            productUpdate({product}).then((res) => {
                                this.modifyvisible = false;
                                this.clearmodel()
                                if (res.state == "success") {
                                    this.$notification.success({message: res.data, description: '', duration: 4})
                                }
                                this.search()
                            })
                        }
                        this.modelData.productId = ''
                    })
            },
            createfunctionCancel() {
                this.modifyvisible = false;
                this.clearmodel()
                this.add = true;
            },
            //清除弹窗信息
            clearmodel() {
                this.add = true
                let that = this;
                that.modelData.productMealPrice = ''
                that.modelData.productId = ''
                that.modelData.productIntroduction = ''
                that.modelData.productSetMealIntroduction = ''
                that.modelData.productUniversity = ''
                that.modelData.universityId = ''
                that.modelData.productIntroductionPic2 = ''
                that.productIntroduction = ''
                that.productSetMealIntroduction= ''
                that.productRf2=''
                this.Formtable.setFieldsValue({
                    productMeal: '',
                    productTitle: '',
                    productPrice: '',
                    productRegion: '',
                    productRate: '',
                    productState: '0'
                })
            },
            getSchoolNames() {
                this.schoolNames = []
                this.queryParam.productUniversity = ''
                getSchoolNames({"substName": this.queryParam.productRegion}).then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.schoolName === 'null')
                                return;
                            this.schoolNames.push({
                                value: r.schoolName,
                                text: r.schoolName
                            })
                        })
                    }
                })
            },
            initSubstName() {
                initSubstName().then((res) => {
                    if (res.state == "success") {
                        const result = res.data
                        result.forEach((r) => {
                            if (r.subName === 'null')
                                return;
                            this.subNames.push({
                                value: r.subName,
                                text: r.subName
                            })
                        })
                    }
                })
            }
        },
        mounted() {
            this.initSubstName();
            this.getSchoolNames();
        }
    }
</script>

<style scoped>

</style>