<template>
    <div class="layout">
        <div class="content">
            <ty-main :data="pagePreviewData"></ty-main>
          <!--  <ty-main ></ty-main >-->
            <!--<div>{{pageData}}</div>-->
       <!--     <button @click="open()">fafadfa</button>-->
        </div>
    </div>
</template>

<script>
    /**
     *@author           lijie
     *@date             2018/11/30 9:35
     *@Copyright       天源迪科信息技术股份有限公司
     *@Description
     */
    export default {
        name: "pagePreview",
        data() {
            return {
                pageData: {
                    "page": {
                        "title": "填写资料",
                        "maxSteps": 5,
                        "fullModel": {
                            "advType": 0,
                            "isOut": 0,
                            "shopArea": 1,
                            "shopAreaDesc": "",
                            "applyName": "1",
                            "applyCustomerName": "1",
                            "address": "1",
                            "legalMan": "1",
                            "legalManTelPhone": "11111111111",
                            "contactMan": "a",
                            "telPhone": "11111111111",
                            "datetime": [],
                            "length": 1,
                            "width": 1,
                            "amount": 1,
                            "accessoryGroupId": "1",
                            "setAddress": "1",
                            "setContent": "1",
                            "material": "1",
                            "remark": "1",
                            "customerFullName": "",
                            "bankCount": "",
                            "bankNanme": "",
                            "templateCache": {
                                "validators": [],
                                "linkageCode0": "B7FBBB59ED85456489F7CF5AD8ED0D29",
                                "linkageCode1": "45821172D6B74C89A252262410C3AF94",
                                "advList": [
                                    {
                                        "label": "楼体(立面)广告",
                                        "value": 1,
                                        "feeType": "楼体(立面)广告",
                                        "feeExpression": "%s*%s*%s*%s|width,length,feeScale,amount",
                                        "feeScale": 110,
                                        "feeUnit": "元/平方米(年)"
                                    },
                                    {
                                        "label": "电子显示屏广告",
                                        "value": 0,
                                        "feeType": "电子显示屏广告",
                                        "feeExpression": "%s*%s|feeScale,amount",
                                        "feeScale": 7000,
                                        "feeUnit": "元/年"
                                    }
                                ],
                                "tipAdvData": {
                                    "amount": 0,
                                    "width": 0,
                                    "height": 0,
                                    "feeExpression": "",
                                    "feeType": "",
                                    "feeScale": 0,
                                    "feeUnit": "元/年"
                                }
                            }
                        }
                    },
                    "elements": [
                        {
                            "type": "box",
                            "data": [
                                {
                                    "type": "steps",
                                    "data": {
                                        "current": 0,
                                        "steps": [
                                            {
                                                "title": "填写资料"
                                            },
                                            {
                                                "title": "上传附件"
                                            },
                                            {
                                                "title": "提交审核"
                                            },
                                            {
                                                "title": "支付缴费"
                                            },
                                            {
                                                "title": "已办结"
                                            }
                                        ]
                                    }
                                },
                                {
                                    "type": "title",
                                    "data": {
                                        "title": "情形选择"
                                    }
                                },
                                {
                                    "type": "form-radio",
                                    "data": {
                                        "extend": {
                                            "span": 17,
                                            "eventType": "advTipUpdate",
                                            "linkageChangeValue": [
                                                {
                                                    "originKey": "advType",
                                                    "changeKey": "isOut",
                                                    "values": [
                                                        {
                                                            "dependValue": 0,
                                                            "changeValue": false
                                                        },
                                                        {
                                                            "dependValue": 1,
                                                            "changeValue": true
                                                        }
                                                    ]
                                                },
                                                {
                                                    "originKey": "advType",
                                                    "changeKey": "isOut",
                                                    "isValue": true,
                                                    "values": [
                                                        {
                                                            "dependValue": 0,
                                                            "changeValue": 0
                                                        }
                                                    ]
                                                },
                                                {
                                                    "originKey": "shopArea",
                                                    "changeKey": "shopAreaDesc",
                                                    "isValue": true,
                                                    "values": [
                                                        {
                                                            "dependValue": 1,
                                                            "changeValue": "300平米以上"
                                                        },
                                                        {
                                                            "dependValue": 0,
                                                            "changeValue": "300平米以下"
                                                        }
                                                    ]
                                                }
                                            ]
                                        },
                                        "items": [
                                            {
                                                "label": "广告类型",
                                                "prop": "advType",
                                                "isShow": true,
                                                "exact": [
                                                    {
                                                        "type": "lookup-fee"
                                                    }
                                                ],
                                                "options": [
                                                    {
                                                        "name": "楼体（立面）广告",
                                                        "value": 1
                                                    },
                                                    {
                                                        "name": "电子显示屏广告",
                                                        "value": 0
                                                    }
                                                ]
                                            },
                                            {
                                                "label": "外立面改造",
                                                "prop": "isOut",
                                                "isShow": true,
                                                "options": [
                                                    {
                                                        "name": "有外立面改造",
                                                        "value": 1
                                                    },
                                                    {
                                                        "name": "无外立面改造",
                                                        "value": 0
                                                    }
                                                ]
                                            },
                                            {
                                                "label": "商铺面积",
                                                "prop": "shopArea",
                                                "isShow": true,
                                                "options": [
                                                    {
                                                        "name": "300平米以上",
                                                        "isSelected": true,
                                                        "value": 1
                                                    },
                                                    {
                                                        "name": "300平米下",
                                                        "isSelected": false,
                                                        "value": 0
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                },
                                {
                                    "type": "title",
                                    "data": {
                                        "title": "广告基本信息"
                                    }
                                },
                                {
                                    "type": "form",
                                    "data": {
                                        "validator": true,
                                        "rules": {
                                            "legalManTelPhone": [
                                                {
                                                    "required": true,
                                                    "message": "法定代表人电话不能为空"
                                                },
                                                {
                                                    "type": "mobilePhone"
                                                },
                                                {
                                                    "type": "mobilePhone",
                                                    "trigger": "blur"
                                                }
                                            ],
                                            "contactMan": [
                                                {
                                                    "required": true,
                                                    "type": "userName"
                                                },
                                                {
                                                    "type": "userName",
                                                    "trigger": "blur"
                                                }
                                            ],
                                            "telPhone": [
                                                {
                                                    "required": true,
                                                    "message": "联系人电话不能为空"
                                                },
                                                {
                                                    "type": "mobilePhone"
                                                },
                                                {
                                                    "type": "mobilePhone",
                                                    "trigger": "blur"
                                                }
                                            ],
                                            "length": [
                                                {
                                                    "required": true,
                                                    "type": "number",
                                                    "dot": "dot"
                                                }
                                            ],
                                            "width": [
                                                {
                                                    "required": true,
                                                    "type": "number",
                                                    "dot": "dot"
                                                }
                                            ],
                                            "amount": [
                                                {
                                                    "required": true,
                                                    "type": "number"
                                                }
                                            ],
                                            "datetime": [
                                                {
                                                    "required": true,
                                                    "type": "daterange",
                                                    "range": 1,
                                                    "unit": "年",
                                                    "message": "广告设置起始时间不得超过一年！"
                                                }
                                            ],
                                            "setAddress": [
                                                {
                                                    "required": true,
                                                    "message": "地点不能为空"
                                                }
                                            ],
                                            "setContent": [
                                                {
                                                    "required": true,
                                                    "message": "不能为空"
                                                }
                                            ],
                                            "material": [
                                                {
                                                    "required": true,
                                                    "message": "不能为空"
                                                }
                                            ]
                                        },
                                        "extend": {
                                            "span": 17
                                        },
                                        "items": [
                                            {
                                                "type": "label",
                                                "label": "企业名称",
                                                "prop": "applyName",
                                                "extend": {
                                                    "linkageChangeValue": [
                                                        {
                                                            "type": "out",
                                                            "changeKey": "customerFullName",
                                                            "noChangeExist": true,
                                                            "values": [
                                                                {
                                                                    "changeParam": "applyName"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                }
                                            },
                                            {
                                                "type": "label",
                                                "label": "企业地址",
                                                "prop": "address"
                                            },
                                            {
                                                "type": "label",
                                                "label": "法定代表人",
                                                "prop": "legalMan"
                                            },
                                            {
                                                "type": "input",
                                                "label": "法定代表人联系电话",
                                                "prop": "legalManTelPhone",
                                                "extend": {
                                                    "placeholder": "请输入",
                                                    "itemWidth": 320
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "联系人",
                                                "prop": "contactMan",
                                                "extend": {
                                                    "placeholder": "请输入联系人姓名，例如：张三",
                                                    "itemWidth": 320
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "联系人电话",
                                                "prop": "telPhone",
                                                "extend": {
                                                    "placeholder": "请输入联系人电话，例如：13xxxxxxxxx",
                                                    "itemWidth": 320
                                                }
                                            },
                                            {
                                                "type": "date-picker",
                                                "label": "设置时间",
                                                "prop": "datetime",
                                                "extend": {
                                                    "type": "daterange",
                                                    "itemWidth": 320,
                                                    "options": {
                                                        "disabledDate": "beforeToday"
                                                    }
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "长度(单位:米)",
                                                "prop": "length",
                                                "extend": {
                                                    "placeholder": "请输入",
                                                    "maxlength": 10,
                                                    "eventType": "advTipUpdate",
                                                    "itemWidth": 320
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "宽度(单位:米)",
                                                "prop": "width",
                                                "extend": {
                                                    "placeholder": "请输入",
                                                    "maxlength": 10,
                                                    "eventType": "advTipUpdate",
                                                    "itemWidth": 320
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "数量(单位:处)",
                                                "prop": "amount",
                                                "extend": {
                                                    "placeholder": "请输入",
                                                    "min": 1,
                                                    "eventType": "advTipUpdate",
                                                    "itemWidth": 80
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "设置地点",
                                                "prop": "setAddress",
                                                "extend": {
                                                    "placeholder": "输入广告地点，例如：陕西省西安市高新区xx街道xx号",
                                                    "itemWidth": 322
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "设置内容",
                                                "prop": "setContent",
                                                "extend": {
                                                    "placeholder": "按照户外广告上的内容如实填写（汉字、字母、logo等），例如：条形滚动屏",
                                                    "type": "textarea",
                                                    "rows": 3,
                                                    "itemWidth": 600
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "工艺材料",
                                                "prop": "material",
                                                "extend": {
                                                    "placeholder": "户外广告材质（向制作单位咨询），例如：LED灯",
                                                    "itemWidth": 322
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "备注",
                                                "prop": "remark",
                                                "extend": {
                                                    "placeholder": "请输入",
                                                    "type": "textarea",
                                                    "rows": 3,
                                                    "itemWidth": 600
                                                },
                                                "excat": [
                                                    {
                                                        "type": "tip-adv",
                                                        "data": {
                                                            "model": "templateCache.tipAdvData",
                                                            "eventType": "advTipUpdate",
                                                            "title": "温馨提示"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                },
                                {
                                    "type": "title",
                                    "data": {
                                        "title": "缴费证明单据"
                                    }
                                },
                                {
                                    "type": "form",
                                    "data": {
                                        "validator": true,
                                        "rules": {
                                            "customerFullName": [
                                                {
                                                    "required": true,
                                                    "message": "缴款人全称不能全为空"
                                                }
                                            ],
                                            "bankCount": [
                                                {
                                                    "required": true,
                                                    "message": "银行账户不能为空"
                                                },
                                                {
                                                    "type": "bankCard",
                                                    "message": "银行账户格式不正确"
                                                },
                                                {
                                                    "type": "bankCard",
                                                    "message": "银行账户格式不正确",
                                                    "trigger": "blur"
                                                }
                                            ],
                                            "bankNanme": [
                                                {
                                                    "required": true,
                                                    "message": "开户银行不能为空"
                                                }
                                            ]
                                        },
                                        "extend": {
                                            "span": 17
                                        },
                                        "items": [
                                            {
                                                "type": "input",
                                                "label": "缴款人全称",
                                                "prop": "customerFullName",
                                                "extend": {
                                                    "placeholder": "请输入缴款人全称",
                                                    "itemWidth": 322
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "银行账户",
                                                "prop": "bankCount",
                                                "extend": {
                                                    "placeholder": "请输入银行账户",
                                                    "itemWidth": 322
                                                }
                                            },
                                            {
                                                "type": "input",
                                                "label": "开户银行",
                                                "prop": "bankNanme",
                                                "extend": {
                                                    "placeholder": "请输入开户银行",
                                                    "itemWidth": 322
                                                }
                                            }
                                        ]
                                    }
                                }
                            ]
                        },
                        {
                            "type": "btns-oprator",
                            "data": {
                                "buttons": [
                                    {
                                        "label": "办事指南",
                                        "type": "success",
                                        "click": "guideClick"
                                    },
                                    {
                                        "label": "下一步",
                                        "type": "error",
                                        "click": "nextStepClick"
                                    },
                                    {
                                        "label": "保存",
                                        "type": "warning",
                                        "click": "saveClick"
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        },
        methods:{
            open(){
                alert(1);
            }
        },
        computed:{
            pagePreviewData(){
                return this.$store.state.viewport.pagePriviewData;
            }
        }
    }
</script>

<style scoped lang="less">
  .attachment-wrap .attachment {
    height: 60px;
    line-height: 0px;
    overflow: hidden;
    border-bottom: 1px dashed #e9eaec;
  }
    .layout{
        background-color: #F5F7F9;
    }
    .content{
        margin:0 auto;
        width: 1234px;
    }
</style>
