<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="12">
                        <a-form-item  label="县分：">
                            <a-input  placeholder="县分"  v-model="queryParam.productRegion"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item  label="学校名称">
                            <a-input  placeholder="学校名称"  v-model="queryParam.productUniversity" ></a-input>
                        </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">
            <!--拦截器-->
            <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-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 placeholder="适用学校" v-decorator="[ 'productUniversity', {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.productMealPrice"/>
                </a-form-item>
                <div v-show="!add">
                    <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="产品情况：">
                        <div v-html="productIntroduction">
                        </div>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="资费介绍：">
                        <div v-html="productSetMealIntroduction">
                        </div>
                    </a-form-item>
                </div>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {productList,productDelete,productInsert,productUpdate} from "@/api/school-center/productAPI"
    import {cloneObject} from '@/utils/util';
    export default {
        name: "product",
        components: {
            STable,
        },
        data(){
            return {
                Formtable: this.$form.createForm(this),
                modifyvisible: false,
                add: true,
                productIntroduction:"",
                productSetMealIntroduction:'',
                queryParam: {
                     productUniversity :'', //适用学校
                     productRegion  :'',  // 区域
                     productTitle  :'',    //宽带标题
                     productState  :''  // 宽带狀態
                },
                modelData:{
                    productMealPrice:'',
                    productMeal:'',
                    productTitle:'',
                    productUniversity:'',
                    productPrice:'',
                    productRegion:'',
                    productRate:'',
                    productId:''
                },
                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);
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                }
            }
        },
        methods:{
            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){
                if(data != undefined ){
                    this.productIntroduction=data.productIntroduction,
                        this.productSetMealIntroduction=data.productSetMealIntroduction,
                        this.modelData.productMealPrice=data.productMealPrice
                    this.modelData.productId=data.productId
                    setTimeout(()=>{
                        this.Formtable.setFieldsValue({
                            "productMeal":data.productMeal,
                            "productTitle":data.productTitle,
                            "productUniversity":data.productUniversity,
                            "productPrice":data.productPrice,
                            "productRegion":data.productRegion,
                            "productRate":data.productRate,
                            productState:data.productState
                        })
                    },0)
                    this.add=false;
                }
                this.modifyvisible=true;
            },
            createfunctionOk(){
                let that = this;
                that.Formtable.validateFields(['productMeal','productTitle','productPrice','productUniversity','productRegion','productRate','productState'], {force: true}, (err, values) => {
                    if (err ) {
                        return;
                    }
                        that.modelData.productMeal=values.productMeal
                        that.modelData.productTitle=values.productTitle
                        that.modelData.productUniversity=values.productUniversity
                        that.modelData.productPrice=values.productPrice
                        that.modelData.productRegion=values.productRegion
                        that.modelData.productRate=values.productRate
                        that.modelData.productState=values.productState
                    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);
                        productUpdate({product}).then((res) => {
                            this.modifyvisible=false;
                            this.clearmodel()
                            if(res.state=="success"){
                                this.$notification.success({message: res.data, description: '', duration: 4})
                            }
                            this.search()
                        })
                    }
                })
            },
            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=''
                this.Formtable.setFieldsValue({
                    productMeal:'',
                    productTitle:'',
                    productUniversity:'',
                    productPrice:'',
                    productRegion:'',
                    productRate:'',
                    productState:'0'
                })
            }
        }
    }
</script>

<style scoped>

</style>