const contractDownload = ()=> {
    return{
        init(){
            this.standardData = this.deepClone(this.data);
            this.onstandardViewData = this.deepClone(this.data);
            this.buystandardData = this.deepClone(this.buydata);
            this.buyonstandardViewData = this.deepClone(this.buydata);
            // CKEDITOR.replace('editor',{
            //     extraplugins:'filebrowser',
            //     height:80,
            //     width:'100%',
            //     filebrowserUploadMethod:'form',
            //     filebrowserUploadUrl:'./ckeditor_upload.php'
            // });
        },
        installfill1:'',
        installfill2:'',
        installAffix:1,
        buyfill1:'',
        buyfill2:'',
        buyAffix:1,
        css: `table { background-color: #fff; border: none; margin-top: 30px; font-family: '標楷體'; width: 600px; } table tr:nth-child(even), table tr:nth-child(odd) { background-color: #fff; } table tr { font-size: 12pt; width: 100%; } table tr h2 { font-size: 18pt; } table tr td { width: 100%; height: 100%; line-height: 2; display: flex; } table tr td.center { display: flex; justify-content: center; align-items: center; } table tr td.list { width: 100%; height: 100%; white-space: nowrap; display: flex; } table tr td.list span { width: 60px; min-height: 100%; display: block; } table tr td.list > p { display: block; text-align: justify; } table tr td.list div { max-width: calc(100% - 60px); white-space: normal; } table tr td.list div.text-justify { display: flex; width: 100%; justify-content: space-between; } table tr.date td > div { width: 100%; text-align: right; } table tr.date td > div.text-justify { display: flex; justify-content: space-between; } table td, table th { padding: 8px; }`,
        data:{
            illustrate:{
                editshow: false,
                plaintext: '茲因甲方向乙方訂購電梯，並委由乙方安裝系爭電梯，經雙方同意共同訂立本合約書，其條款如下：'
            },
            partyA:{
                editshow:false,
                plaintext:partyAcompany ,
            },
            partyAcontractno:{
                editshow:false,
                plaintext:partyAcontractno,
            },
            list:{
                plaintext: [
                    {
                        editshow:false,
                        origin:true,
                        text:`安裝產品名稱、數量及單價:<br>1、&nbsp;${people}&nbsp;人座 &nbsp;${floor}&nbsp;停站速度每分鐘&nbsp;${speed}&nbsp;公尺 交流變頻變壓電腦智能控制升降機&nbsp;${num}&nbsp;部。單價：新台幣&nbsp;${numberToChinese(totalInstallPrice)}&nbsp;元整（&nbsp;${numberWithCommas(totalInstallPrice)}&nbsp;）（含5%加值型營業稅）。`, 
                        type:'title',
                        deleted: false,
                        id:0,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'安裝產品規格：如附表一。', 
                        type:'title',
                        deleted: false,
                        id:1,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'安裝地點：'+ partyAaddress + '。' , 
                        type:'title',
                        deleted: false,
                        id:2,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:`安裝報酬：安裝勞務報酬為新台幣（以下皆同）&nbsp;${numberToChinese(totalPrice)}&nbsp;元整（${numberWithCommas(totalPrice)}&nbsp;）(含5%加值型營業稅）。`, 
                        type:'title',
                        deleted: false,
                        id:3,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text: install_pay_text,
                        type:'title',
                        deleted: false,
                        id:4,
                        input_id:'fill1',
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台__日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於__日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。', 
                        type:'title',
                        deleted: false,
                        id:5,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'交車事項：<br>一、乙方完成產品安裝後，甲方應儘速理交車事宜，不得無故或藉故拖延。如經乙方通知，甲方遲未辦理交車事宜，則於乙方催告後，即視同交車完成。<br>二、乙方試車完成後，甲方應配合提供建物使用執照及其他竣工檢查所需文件，以利乙方代甲方辦理昇降設備竣工檢查。<br>三、甲方於昇降設備竣工檢查合格及取得使用許可證後，交車事項即為完成。', 
                        type:'title',
                        deleted: false,
                        id:6,
                        input_id:null,
                    },

                    {
                        editshow:false,
                        origin:true,
                        text:'因故延期：<br>如因天災、地變及其他不可抗力之因素，或甲方未將電梯昇降路及機械室之建築工程等配合事項未於貨抵工地前七日整理完善，或甲方未將符合規格之電源於安裝前送電至機械室，或房屋建築及其他應配合相關事項未完成，致影響乙方如期安裝產品時，乙方安裝日期應依受影響日數向後延展，如因可歸責於甲方事由者亦同。', 
                        type:'title',
                        deleted: false,
                        id:7,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'工程變更：<br>甲方對本工程之規格有變更設計及增減工程數量時，應於合約訂立日後壹個月內預先以書面通知乙方且需經雙方同意，如因工程變更而致乙方成本增加時，則甲方應吸收所有增加之成本並追認給付給乙方，否則乙方依原合約之貨品規格、數量交貨，甲方亦應依原合約之貨品規格、數量給付款項。', 
                        type:'title',
                        deleted: false,
                        id:8,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'工地清理及除外事項：<br>一、本工程於貨到現場前，其工地廢料雜物及臨時設備，應由甲方清除整理，同時提供乙方放置貨品之處所。<br>二、有關建築工事回填澆灌後之清潔，應由甲方負責清理。<br>三、升降設備除外工程表所列之各項工程不包括於乙方本合約施作範圍，應由甲方負責處理。', 
                        type:'title',
                        deleted: false,
                        id:9,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'電梯保養：<br>一、乙方完工交車後，期後__個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。', 
                        type:'title',
                        deleted: false,
                        id:10,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'特約條款：<br>一、本設備器材在款項未付清前，其所有權仍歸屬乙方所有，價款付清後所有權始轉移給甲方。<br>二、如因甲方因素或建物設計上之疏忽，致影響驗收時，甲方不得以此做為逾期或拒付款之藉口。<br>三、本合約所有日數約定，均以工作天計算。', 
                        type:'title',
                        deleted: false,
                        id:11,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'終止合約權：<br>一、甲乙雙方之任一方若有違反合約之事實或發生清算或破產等信用貶落情形，致工程無法進行時，經催告而未改善者，他方得終止本合約，違約方必須賠償對方之損失。<br>二、乙方逾期交貨或甲方逾期未交付工地受領產品逾壹個月以上經他方催告仍不改善，他方得終止本合約，並請求損害賠償。', 
                        type:'title',
                        deleted: false,
                        id:12,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'合意管轄：<br>因本合約而涉訟，甲、乙方雙方同意以桃園地方法院為第一審管轄法院。催告仍不改善，他方得終止本合約，並請求損害賠償。', 
                        type:'title',
                        deleted: false,
                        id:13,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'附則：<br>本合約經甲、乙雙方簽章後立即生效，甲、乙雙方各存執正副本各壹份為憑，印花雙方各自貼付。', 
                        type:'title',
                        deleted: false,
                        id:14,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'合約附件：<br>本合約附件為本合約之一部份，與本合約具同等效力，甲乙雙方均應遵守之。', 
                        type:'title',
                        deleted: false,
                        id:15,
                        input_id:null,
                    },
                ]
            }
        },
        buydata:{
            illustrate:{
                editshow: false,
                plaintext: '茲因甲方向乙方訂購電梯，經雙方同意共同訂立本合約書，其條款如下：'
            },
            partyA:{
                editshow:false,
                plaintext:partyAcompany ,
            },
            partyAcontractno:{
                editshow:false,
                plaintext:partyAcontractno,
            },
            list:{
                plaintext: [
                    {
                        editshow:false,
                        origin:true,
                        text:`產品名稱、數量及單價：<br>1、&nbsp;${people}&nbsp;人座&nbsp;${floor}&nbsp;停站速度每分鐘&nbsp;${speed}&nbsp;公尺 交流變頻變壓電腦智能控制升降機&nbsp;${bigChineseArr[num]}&nbsp;部。單價：新台幣&nbsp;${numberToChinese(totalBuyPrice)}&nbsp;元整（&nbsp;${numberWithCommas(totalBuyPrice)}&nbsp;）（含5%加值型營業稅）。`, 
                        type:'title',
                        deleted: false,
                        id:0,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'產品規格：如附表一。', 
                        type:'title',
                        deleted: false,
                        id:1,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'交貨及安裝地點：'+ partyAaddress + '。' , 
                        type:'title',
                        deleted: false,
                        id:2,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:`產品總價:產品價金為新台幣&nbsp;${numberToChinese(totalBuyPrice)}&nbsp;元整（&nbsp;${numberWithCommas(totalBuyPrice)}&nbsp;）（含5%加值型營業稅）。`, 
                        type:'title',
                        deleted: false,
                        id:3,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text: buy_pay_text,
                        type:'title',
                        deleted: false,
                        id:4,
                        input_id:'buyfill1',
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第180日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。', 
                        type:'title',
                        deleted: false,
                        id:5,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'施工規範依據：<br>甲方或其指定工程師，於本契約簽訂後二星期內，提供組立電梯之大樓建築有關圖面，以供乙方製作電梯配置圖，乙方製妥電梯配置圖後請甲方簽認，甲方於接獲乙方提請審核之電梯配置圖後，一星期內簽認並送還乙方，乙方應於接獲甲方簽認之電梯配置圖後，安排電梯組件之生產並按預定時間內製造完成。', 
                        type:'title',
                        deleted: false,
                        id:6,
                        input_id:null,
                    },

                    {
                        editshow:false,
                        origin:true,
                        text:'因故延期：<br>一、如因天災、地變及其他不可抗力之因素，致影響乙方如期交付產品時，本合約第六條之交貨日期應依受影響日數向後延展，如因可歸責於甲方事由者亦同。<br />二、如因可歸責甲方事由致工期展延逾第六條日期時，如因物價波動致成本增加，乙方得請求物價調漲之補償，或終止合約。', 
                        type:'title',
                        deleted: false,
                        id:7,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'工程變更：<br>甲方對本工程之規格有變更設計及增減工程數量時，應於合約訂立日後壹個月內預先以書面通知乙方且需經雙方同意，如因工程變更而致乙方成本增加時，則甲方應吸收所有增加之成本並追認給付給乙方，否則乙方依原合約之貨品規格、數量交貨，甲方亦應依原合約之貨品規格、數量給付款項。', 
                        type:'title',
                        deleted: false,
                        id:8,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'工地清理及除外事項：<br>一、本工程於貨到現場前，其工地廢料雜物及臨時設備，應由甲方清除整理，同時提供乙方放置貨品之處所。<br />二、有關建築工事回填澆灌後之清潔，應由甲方負責清理。', 
                        type:'title',
                        deleted: false,
                        id:9,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'合約時效：<br>本合約及其附件自簽訂之日起，至保固期滿之日止為有效期間。', 
                        type:'title',
                        deleted: false,
                        id:10,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'特約條款：<br>一、本設備器材在款項未付清前，其所有權仍歸屬乙方所有，價款付清後所有權始轉移給甲方。<br />二、如因甲方因素或建物設計上之疏忽，致影響驗收時，甲方不得以此做為逾期或拒付款之藉口。<br />三、本合約所有日數約定，均以工作天計算。', 
                        type:'title',
                        deleted: false,
                        id:11,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'終止合約權：<br>一、甲乙雙方之任一方若有違反合約之事實或發生清算或破產等信用貶落情形，致工程無法進行時，經催告而未改善者，他方得終止本合約，違約方必須賠償對方之損失。<br />二、乙方逾期交貨或甲方逾期未交付工地受領產品逾壹個月以上經他方催告仍不改善，他方得終止本合約，並請求損害賠償。', 
                        type:'title',
                        deleted: false,
                        id:12,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'合意管轄：<br>因本合約而涉訟，甲、乙方雙方同意以桃園地方法院為第一審管轄法院。', 
                        type:'title',
                        deleted: false,
                        id:13,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'附則：<br>本合約經甲、乙雙方簽章後立即生效，甲、乙雙方各存執正本各壹份為憑。', 
                        type:'title',
                        deleted: false,
                        id:14,
                        input_id:null,
                    },
                    {
                        editshow:false,
                        origin:true,
                        text:'合約附件：<br>本合約附件為本合約之一部份，與本合約具同等效力，甲乙雙方均應遵守之，本合約附件計有：', 
                        type:'title',
                        deleted: false,
                        id:15,
                        input_id:null,
                    },
                ]
            }
        },
        fill:[],
        standardData:{},
        onstandardViewData:{},
        deepClone: function(obj) {
            let clone = Array.isArray(obj) ? [] : {};
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    if (typeof obj[key] === 'object' && obj[key] !== null) {
                        clone[key] = this.deepClone(obj[key]);
                        if(clone[key].text != undefined){
                            // clone[key].text = clone[key].text.replace(/<input\s.*?>/, '___')
                        }
                    } else {
                        clone[key] = obj[key]
                    }
                }
            }
            return clone;
        },
        modelshow: false,
        modelText: '',
        modelContent: '',
        objName: '',
        isList: false,
        actionType: 'i', //i=> insert , u=> update
        index:0,
        isInstall:true,
        chineseNumbers(number){
            const units = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
            if (number <= 10) {
                return units[number];
            } else if (number < 20) {
                return '十' + units[number - 10];
            } else if (number < 30) {
                return '二十' + units[number - 20];
            } else if (number < 40) {
                return '三十' + units[number - 30];
            } else if (number < 50) {
                return '四十' + units[number - 40];
            } else {
                return '五十';
            }
        },
        mouseover(obj, isInstall=true){
            if(isInstall){
                if(!this.onstandardViewData[obj].editshow){
                    this.onstandardViewData[obj].editshow = true
                }
            }else{
                if(!this.buyonstandardViewData[obj].editshow){
                    this.buyonstandardViewData[obj].editshow = true
                }
            }
            
        },
        mouseoverlist(idx, inInstall=true){
            if(inInstall){
                if(!this.onstandardViewData.list.plaintext[idx].editshow){
                    this.onstandardViewData.list.plaintext[idx].editshow = true
                }
            }else{
                if(!this.buyonstandardViewData.list.plaintext[idx].editshow){
                    this.buyonstandardViewData.list.plaintext[idx].editshow = true
                }
            }
            
        },
        mouseoutlist(idx){
            if(this.onstandardViewData.list.plaintext[idx].editshow){
                this.onstandardViewData.list.plaintext[idx].editshow = false
            }
            if(this.buyonstandardViewData.list.plaintext[idx].editshow){
                this.buyonstandardViewData.list.plaintext[idx].editshow = false
            }
        },
        mouseout(obj){
            if(this.onstandardViewData[obj].editshow){
                this.onstandardViewData[obj].editshow = false
            }
            if(this.buyonstandardViewData[obj].editshow){
                this.buyonstandardViewData[obj].editshow = false
            }
        },
        modelshowEditFn(text, obj, isList=false, isInstall=true){
            if(this.modelshow){
                return;
            }
            this.isInstall = isInstall
            this.actionType = 'u'
            this.modelshow = true
            this.modelText = text
            this.objName = obj
            this.isList =isList
            this.actionType = 'u'
            if(isInstall){
                if(isList){
                    this.$refs.editor.value = this.onstandardViewData.list.plaintext[obj].text
                    // CKEDITOR.instances.editor.setData(this.onstandardViewData.list.plaintext[obj].text);
                    return
                }
                if(!isList){
                    this.$refs.editor.value = this.onstandardViewData[obj].plaintext
                    // CKEDITOR.instances.editor.setData(this.onstandardViewData[obj].plaintext);
                    return
                }
            }else{
                if(isList){
                    this.$refs.editor.value = this.buyonstandardViewData.list.plaintext[obj].text
                    // CKEDITOR.instances.editor.setData(this.buyonstandardViewData.list.plaintext[obj].text);
                    return
                }
                if(!isList){
                    this.$refs.editor.value = this.buyonstandardViewData[obj].plaintext
                    // CKEDITOR.instances.editor.setData(this.buyonstandardViewData[obj].plaintext);
                    return
                }
            }
            
        },
        modelcloseFn(){
            if(this.modelshow){
                this.modelshow = false
                this.modelText = ''
                this.modelContent = ''
                this.isList = false
                this.$refs.editor.value =''
                // CKEDITOR.instances.editor.setData('')
            }
        },
        modelshowAddUpFn(idx, isInstall=true){
            this.isInstall = isInstall
            this.index = idx
            this.actionType = 'i'
            this.modelshow = true
            this.modelText = '新增一條例'
        },
        modelshowAddDownFn(idx, isInstall=true){
            this.isInstall = isInstall
            this.index = idx + 1
            this.actionType = 'i'
            this.modelshow = true
            this.modelText = '新增一條例'
        },
        updateEditor(){
            let max = 0;
            if(this.isInstall){
                this.onstandardViewData.list.plaintext.forEach(item=>{
                    if(item.id > max) {
                        max = item.id
                    }; 
                })
            }else{
                this.buyonstandardViewData.list.plaintext.forEach(item=>{
                    if(item.id > max) {
                        max = item.id
                    }; 
                })
            }
            
            max = max + 1
            if(this.actionType == 'i'){
                let newObj = {
                    editshow:false,
                    origin:false,
                    text:this.removeTrailingNewline(this.$refs.editor.value),
                    // text:this.removeTrailingNewline(this.convertHtmlToPlainText(this.$refs.editor.value)),
                    // text:this.removeTrailingNewline(this.convertHtmlToPlainText(CKEDITOR.instances.editor.getData())), 
                    type:'title',
                    deleted: false,
                    id:max,
                }
                if(this.isInstall){
                    this.data.list.plaintext.splice(this.index, 0, newObj)
                    this.onstandardViewData.list.plaintext.splice(this.index, 0, newObj)
                }else{
                    this.buydata.list.plaintext.splice(this.index, 0, newObj)
                    this.buyonstandardViewData.list.plaintext.splice(this.index, 0, newObj)
                }
                this.modelcloseFn()
                return
            }
            if(this.actionType == 'u'){
                if(this.isInstall){
                    if(this.isList){
                        // this.data.list.plaintext[this.objName].text = this.convertHtmlToPlainText(CKEDITOR.instances.editor.getData())
                        this.data.list.plaintext[this.objName].text = this.convertHtmlToPlainText(this.$refs.editor.value)
                        // this.onstandardViewData.list.plaintext[this.objName].text = this.convertHtmlToPlainText(CKEDITOR.instances.editor.getData())
                        // this.onstandardViewData.list.plaintext[this.objName].text = this.convertHtmlToPlainText(this.$refs.editor.value)
                        this.onstandardViewData.list.plaintext[this.objName].text = this.$refs.editor.value
                    }else{
                        // this.data[this.objName].plaintext = this.convertHtmlToPlainText(CKEDITOR.instances.editor.getData())
                        this.data[this.objName].plaintext = this.convertHtmlToPlainText(this.$refs.editor.value)
                        // this.onstandardViewData[this.objName].plaintext = this.convertHtmlToPlainText(CKEDITOR.instances.editor.getData())
                        // this.onstandardViewData[this.objName].plaintext = this.convertHtmlToPlainText(this.$refs.editor.value)
                        this.onstandardViewData[this.objName].plaintext = this.$refs.editor.value
                    }
                }else{
                    if(this.isList){
                        this.buydata.list.plaintext[this.objName].text = this.convertHtmlToPlainText(this.$refs.editor.value)
                        this.buyonstandardViewData.list.plaintext[this.objName].text = this.$refs.editor.value
                    }else{
                        this.buydata[this.objName].plaintext = this.convertHtmlToPlainText(this.$refs.editor.value)
                        this.buyonstandardViewData[this.objName].plaintext = this.$refs.editor.value
                    }
                }
            }
            this.modelcloseFn()
            return
        },
        deleteEditor(idx, isInstall=true){
            if(isInstall){
                if(confirm('確定要刪除嗎？')){
                    let id = this.onstandardViewData.list.plaintext[idx].id
                    this.data.list.plaintext.forEach(item=>{
                        if(item.id == id){
                            item.deleted = 1;
                        }
                    })
                    this.onstandardViewData.list.plaintext.splice(idx, 1)
                }
            }else{
                if(confirm('確定要刪除嗎？')){
                    let id = this.buyonstandardViewData.list.plaintext[idx].id
                    // this.buydata.list.plaintext[idx].deleted = 1
                    this.buydata.list.plaintext.forEach(item=>{
                        if(item.id == id){
                            if(!item.deleted){
                                item.deleted = 1;
                            }
                        }
                    })
                    this.buyonstandardViewData.list.plaintext.splice(idx, 1)
                }
            }
        },
        removeTrailingNewline(str) {
            return str.replace(/\n+$/, '');
        },
        convertHtmlToPlainText(htmlString) {
            // 創建一個新的DOMParser對象
            var parser = new DOMParser();
            
            // 使用parseFromString方法解析傳入的HTML字符串
            var doc = parser.parseFromString(htmlString, 'text/html');
            
            // 返回解析後的純文本內容
            return doc.body.textContent || '';
        },
        exportFn(type){
            const form = this.$refs.form
            const prviewType = this.$refs.form.querySelector('#prview-type');
            const list = this.$refs.form.querySelector('#prview-list');
            const standardList = this.$refs.form.querySelector('#standard-prview-list');
            const illustrate = this.$refs.form.querySelector('#illustrate');
            const standardIllustrate = this.$refs.form.querySelector('#standard-illustrate');
            const partyA = this.$refs.form.querySelector('#partyA');
            const partyAcontractno = this.$refs.form.querySelector('#partyAcontractno');
            const total_price = this.$refs.form.querySelector('#total_price');
            prviewType.value = type 
            if(type === 1){
                const standardJsonText = this.buystandardData.list.plaintext.map((item, idx)=>{
                    let text = ''
                    text = item.text.replace(/\s+/g, "")
                    this.buydata.list.plaintext[idx].text = this.buydata.list.plaintext[idx].text.replace(/\s+/g, "")

                    return {
                        text: text,
                        id: item.id
                    }
                });
                const jsonText = this.buydata.list.plaintext.map(item=>{
                    let text = ''
                    text = item.text
                    return {
                        text: text,
                        origin: item.origin ? 1 : 0,
                        deleted: item.deleted ? 1 : 0,
                        id: item.id,
                        updated: item.updated ? 1 : 0,
                    }
                });
                list.value = JSON.stringify(jsonText)
                standardList.value = JSON.stringify(standardJsonText)
                illustrate.value = this.buydata.illustrate.plaintext
                standardIllustrate.value = this.buystandardData.illustrate.plaintext
                partyA.value = this.buydata.partyA.plaintext
                partyAcontractno.value = this.buydata.partyAcontractno.plaintext
                total_price.value = totalBuyPrice
                form.submit(); 
                return;
            }
            if(type === 2){
                // list.value = JSON.stringify(this.data.list.plaintext)
                const standardJsonText = this.standardData.list.plaintext.map((item, idx)=>{
                    let text = ''
                    text = item.text.replace(/\s+/g, "")
                    if(this.data.list.plaintext[idx] !== undefined){
                        this.data.list.plaintext[idx].text = this.data.list.plaintext[idx].text.replace(/\s+/g, "")
                    }
                    return {
                        text: text,
                        id: item.id
                    }
                })
                const jsonText = this.data.list.plaintext.map(item=>{
                    let text = ''
                    item.text
                    text = item.text
                    return {
                        text: text,
                        origin: item.origin ? 1 : 0,
                        deleted: item.deleted ? 1 : 0,
                        id: item.id,
                        updated: item.updated ? 1 : 0,
                    }
                })
                list.value = JSON.stringify(jsonText)
                standardList.value = JSON.stringify(standardJsonText)
                illustrate.value = this.data.illustrate.plaintext
                standardIllustrate.value = this.standardData.illustrate.plaintext
                partyA.value = this.data.partyA.plaintext
                partyAcontractno.value = this.data.partyAcontractno.plaintext
                total_price.value = totalInstallPrice
                form.submit(); 

                return;
            }
        },
        toggleBuyStandard:true,
        toggleInstallStandard:true,
        isbuyShow:true,
        sendInstallInputFn(){
            if(this.installfill1 == ''){
                alert('請輸入安裝試車期限');
                return;
            }
            if(this.installfill2 == ''){
                alert('請輸入免費保養月數');
                return;
            }
            if(this.installfill1 < 45){
                alert('安裝試車期限不得低於45日');
                return;
            }
            if(this.installfill1 < 1){
                alert('免費保養月數不得低於1個月');
                return;
            }
            this.isInstallInputIng = false
            this.data.list.plaintext[1].text = '安裝產品規格：如附表'+ this.affixArr[Number(this.installAffix)] +'。'
            this.standardData.list.plaintext[1].text = '安裝產品規格：如附表'+ this.affixArr[Number(this.installAffix)] +'。'
            this.onstandardViewData.list.plaintext[1].text = '安裝產品規格：如附表'+ this.affixArr[Number(this.installAffix)] +'。'
            this.data.list.plaintext[5].text = '安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台&nbsp;'+this.installfill1+'&nbsp;日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於四十五日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。'
            this.standardData.list.plaintext[5].text = '安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台&nbsp;'+this.installfill1+'&nbsp;日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於四十五日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。'
            this.onstandardViewData.list.plaintext[5].text = '安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台&nbsp;'+this.installfill1+'&nbsp;日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於四十五日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。'
            this.data.list.plaintext[10].text = '電梯保養：<br>一、乙方完工交車後，期後&nbsp;'+this.installfill2+'&nbsp;個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。'
            this.standardData.list.plaintext[10].text = '電梯保養：<br>一、乙方完工交車後，期後&nbsp;'+this.installfill2+'&nbsp;個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。'
            this.onstandardViewData.list.plaintext[10].text = '電梯保養：<br>一、乙方完工交車後，期後&nbsp;'+this.installfill2+'&nbsp;個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。'
        },
        sendInstallInputKeyupFn(e){
            if(e.keyCode !== 13) return
            if(this.installfill1 == ''){
                alert('請輸入安裝試車期限');
                return;
            }
            if(this.installfill2 == ''){
                alert('請輸入免費保養月數');
                return;
            }
            if(this.installfill1 < 45){
                alert('安裝試車期限不得低於45日');
                return;
            }
            if(this.installfill1 < 1){
                alert('免費保養月數不得低於1個月');
                return;
            }
            this.isInstallInputIng = false
            this.data.list.plaintext[1].text = '安裝產品規格：如附表'+ this.affixArr[Number(this.installAffix)] +'。'
            this.standardData.list.plaintext[1].text = '安裝產品規格：如附表'+ this.affixArr[Number(this.installAffix)] +'。'
            this.onstandardViewData.list.plaintext[1].text = '安裝產品規格：如附表'+ this.affixArr[Number(this.installAffix)] +'。'
            this.data.list.plaintext[5].text = '安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台&nbsp;'+this.installfill1+'&nbsp;日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於四十五日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。'
            this.standardData.list.plaintext[5].text = '安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台&nbsp;'+this.installfill1+'&nbsp;日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於四十五日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。'
            this.onstandardViewData.list.plaintext[5].text = '安裝試車事項：<br>一、甲方應於實際出貨日期前七日，清理升降設備之建築物升降道，及完成底坑防水之處理，上述事項完成後，甲方即以書面或電話通知乙方進場安裝，乙方應於貨抵工地後每台&nbsp;'+this.installfill1+'&nbsp;日內安裝完成。<br>二、甲方接到乙方電梯安裝完成通知之日起，倘因甲方因素致無法於四十五日內交車時，甲方應付清總價款全部餘額。<br>三、如因非關乙方因素致乙方無法進場施作時，於該因素或障礙排除前，甲方應對已進場之材料或設備負保管責任及整修費用。'
            this.data.list.plaintext[10].text = '電梯保養：<br>一、乙方完工交車後，期後&nbsp;'+this.installfill2+'&nbsp;個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。'
            this.standardData.list.plaintext[10].text = '電梯保養：<br>一、乙方完工交車後，期後&nbsp;'+this.installfill2+'&nbsp;個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。'
            this.onstandardViewData.list.plaintext[10].text = '電梯保養：<br>一、乙方完工交車後，期後&nbsp;'+this.installfill2+'&nbsp;個月內應負責免費定期保養，及履行免費保固，於免費保養期間屆至後，雙方再協商嗣後保養事宜。<br>二、如因可歸責乙方因素致安裝產品有所瑕疵時，乙方應負責修復或修繕，惟非因乙方因素致有修復產品需要時，乙方仍負責修復或修繕，惟得向甲方酌收基本材料與人工費用。<br>三、另依法令規定，非經竣工檢查合格後取得使用許可證之電梯，依法不得使用。'
        },
        sendBuyInputFn(){
            if(this.buyfill1 == ''){
                alert('請輸入交貨期限');
                return;
            }
            if(this.buyfill1 < 1){
                alert('交貨期限不得低於1日');
                return;
            }
            if(buyArr[1].installment == 2){
                this.buydata.list.plaintext[4].text = this.buydata.list.plaintext[4].text.replace('____', this.buyfill2);
                this.buystandardData.list.plaintext[4].text = this.buydata.list.plaintext[4].text.replace('____', this.buyfill2);
                this.buyonstandardViewData.list.plaintext[4].text = this.buydata.list.plaintext[4].text.replace('____', this.buyfill2);
            }
            this.isBuyInputIng = false
            this.buydata.list.plaintext[1].text = '產品規格：如附表'+ this.affixArr[Number(this.buyAffix)] +'。'
            this.buystandardData.list.plaintext[1].text = '產品規格：如附表'+ this.affixArr[Number(this.buyAffix)] +'。'
            this.buyonstandardViewData.list.plaintext[1].text = '產品規格：如附表'+ this.affixArr[Number(this.buyAffix)] +'。'
            this.buydata.list.plaintext[5].text = '交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第&nbsp;'+this.buyfill1+'&nbsp;日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。'
            this.buystandardData.list.plaintext[5].text = '交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第&nbsp;'+this.buyfill1+'&nbsp;日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。'
            this.buyonstandardViewData.list.plaintext[5].text = '交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第&nbsp;'+this.buyfill1+'&nbsp;日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。'
            let buyAffixHtml = ''
            for(let i=0;i<Number(this.buyAffix);i++){
                buyAffixHtml += `<br>${numberToSmallChinese(i+1)}、附表${numberToSmallChinese(i+1)}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;1&nbsp;張` 
            }
            this.buydata.list.plaintext[15].text = this.buydata.list.plaintext[15].text + buyAffixHtml
            this.buystandardData.list.plaintext[15].text = this.buystandardData.list.plaintext[15].text + buyAffixHtml
            this.buyonstandardViewData.list.plaintext[15].text = this.buyonstandardViewData.list.plaintext[15].text + buyAffixHtml
        },
        sendBuyInputKeyupFn(e){
            if(e.keyCode !== 13) return
            if(this.buyfill1 == ''){
                alert('請輸入交貨期限');
                return;
            }
            if(this.buyfill1 < 1){
                alert('交貨期限不得低於1日');
                return;
            }
            if(buyArr[1].installment == 2){
                this.buydata.list.plaintext[4].text = this.buydata.list.plaintext[4].text.replace('____', this.buyfill2);
                this.buystandardData.list.plaintext[4].text = this.buydata.list.plaintext[4].text.replace('____', this.buyfill2);
                this.buyonstandardViewData.list.plaintext[4].text = this.buydata.list.plaintext[4].text.replace('____', this.buyfill2);
            }
            this.isBuyInputIng = false
            this.buydata.list.plaintext[1].text = '產品規格：如附表'+ this.affixArr[Number(this.buyAffix)] +'。'
            this.buystandardData.list.plaintext[1].text = '產品規格：如附表'+ this.affixArr[Number(this.buyAffix)] +'。'
            this.buyonstandardViewData.list.plaintext[1].text = '產品規格：如附表'+ this.affixArr[Number(this.buyAffix)] +'。'
            this.buydata.list.plaintext[5].text = '交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第&nbsp;'+this.buyfill1+'&nbsp;日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。'
            this.buystandardData.list.plaintext[5].text = '交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第&nbsp;'+this.buyfill1+'&nbsp;日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。'
            this.buyonstandardViewData.list.plaintext[5].text = '交貨期限及甲方配合事項：<br>乙方應於接獲甲方圖色確認第&nbsp;'+this.buyfill1+'&nbsp;日（應於合約簽訂日起兩年內），將本工程所需之全部設備、器材 運抵工地，甲方應提供適當的場所供乙方貯放設備、器材。'
            let buyAffixHtml = ''
            for(let i=0;i<Number(this.buyAffix);i++){
                buyAffixHtml += `<br>${numberToSmallChinese(i+1)}、附表${numberToSmallChinese(i+1)}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;1&nbsp;張` 
            }
            this.buydata.list.plaintext[15].text = this.buydata.list.plaintext[15].text + buyAffixHtml
            this.buystandardData.list.plaintext[15].text = this.buystandardData.list.plaintext[15].text + buyAffixHtml
            this.buyonstandardViewData.list.plaintext[15].text = this.buyonstandardViewData.list.plaintext[15].text + buyAffixHtml
        },
        affixArr:['', '一', '一、二','一、二、三', '一、二、三、四', '一、二、三、四、五'],
        isBuyInputIng:true,
        isInstallInputIng:true,
    }
};

const contractNewInput =()=> {
    return {
        init(){},
        data:{
            contractno:'',
            customer:'',
            manager:'',
            vat:'',
            case_name:'',
            linkman:'',
            lm_tel:'',
            address:'',
            salesman:'',
            qc:'',
            files:[],
        },
        step:1,
        isLoading:false,
        customize:false,
        nextStepFn(){
            if(this.data.contractno == '') return alert('合約號為必填')
            this.isLoading = true
            if(this.step == 1){
                this.getContractDate();
            }
        },
        nextStepKeyupFn(e){
            if(e.keyCode != 13) return
            if(this.step == 1){
                this.getContractDate();
                console.log(this.step);
            }
        },
        preStepFn(){
            if(this.step == 2){
                this.step = 1
            }
        },
        getContractDate(){
            axios.get('./api/getContractData.php?contracttype=m&contractno=' + this.data.contractno).then(res=>{
                if(!res.data){
                    this.step = 2
                    this.isLoading = false
                    return
                }    
                if(!this.customize){
                        console.log(res.data);
                        this.data.customer = res.data.customer
                        this.data.manager = res.data.manager
                        this.data.vat = res.data.uscc
                        this.data.case_name = res.data.case_name
                        this.data.linkman = res.data.linkman
                        this.data.lm_tel = res.data.lm_tel
                        this.data.address = res.data.address
                        this.data.salesman = res.data.salesman
                        this.data.qc = res.data.qc
                }
                this.step = 2
                this.isLoading = false
                }).catch(err=>{
                    console.error(err)
                    this.isLoading = false
                })
        },
        save(){
            this.isLoading = true
            const form = new FormData();
            form.append('contractno', this.data.contractno);
            form.append('customer', this.data.customer);
            form.append('manager', this.data.manager);
            form.append('vat', this.data.vat);
            form.append('case_name', this.data.case_name);
            form.append('linkman', this.data.linkman);
            form.append('lm_tel', this.data.lm_tel);
            form.append('address', this.data.address);
            form.append('salesman', this.data.salesman);
            form.append('qc', this.data.qc);
            form.append('contracttype', 'm');
            form.append('user_id', user_id);
            for (var i = 0; i < this.data.files.length; i++) {
                form.append('files[]', this.data.files[i]);
            }
            axios.post('./api/postNewContractData.php', form).then(res=>{
                console.log(res);
                if(res.status === 201){
                    alert('儲存成功');
                    this.step = 1
                    this.data.contractno=''
                    this.data.customer=''
                    this.data.manager=''
                    this.data.vat=''
                    this.data.case_name=''
                    this.data.linkman=''
                    this.data.lm_tel=''
                    this.data.address=''
                    this.data.salesman=''
                    this.data.qc=''
                    this.data.files=[]
                    this.customize = false

                }else{
                    alert('儲存失敗！可能為以下錯誤:\n' + res.data)
                }
                this.isLoading = false
            }).catch(error=>{
                let code = error.response.status;
                if(code == 422){
                    this.fail_arr = error.response.data
                    this.errorFn();
                }
                if(code == 500){
                    alert('儲存失敗！可能為以下錯誤:\n' + error.response.data)
                }
                
                this.isLoading = false
            })
        },
        errorFn(){
            let msg = ''
            for(let i = 0; i < this.fail_arr.length; i++){
                msg += this.fail_arr[i] + '、'
            } 
            alert(msg)
        },
        uploadFiles(e){
            this.data.files = e.target.files
        },
    }
};

const contractInput =()=> {
    return{
        init(){
            $('.contract-input-component .form .dropdown').dropdown();

            axios.get('./twzip.json').then(res=>{
                this.cities = res.data.cities
            })
        },
        cities:[],
        data:{
            contractno:'B23100060',
            total_price:'', //合約總價
            vat:'', //統一編號
            mtype:'A', //維修型態
            phone:'', //客戶電話
            email:'', //Email
            mworker:'', //保養員
            mcycle:'', //保養頻率
            salesman:'', //營業員
            contract_begin_date:'', //合約開始時間
            contract_end_date:'', //合約終止時間
            area:'', //區域
            zip:'', //郵遞區號
            address:'', //地址
            customer:'', //立約人
            partyA:'', //業務聯繫人
            partyAaddress:'', //業務聯繫人地址
            partyAphone:'', //業務聯繫人電話
            partyAemail:'', //業務聯繫人email
            files:[], //附件檔案
            num:'', //電梯數量
            disabled:false, //資料庫是否有電梯數量資料
            elevators:[], //機種、載重、人乘、樓停、樓層、速度、緯度、經度、開門方式、保養別、廠牌、竣檢日、許可證日期
        },
        customize:false,
        step:1,
        isLoading:false,
        fail_arr:[],
        nextStepFn(){
            if(this.step==1){
                if(this.data.contractno == '') return alert('請輸入合約號');
                this.isLoading = true
                this.getContractDate();
            }else if(this.step == 2){
                if(this.data.num <= 0) return alert('請填寫電梯數量！')
                if(!this.data.disabled){
                    this.createElevator();
                }
                this.step = 3
            }
        },
        nextStepKeyupFn(e){
            if(e.keyCode !== 13) return
            if(this.step==1){
                if(this.data.contractno == '') return alert('請輸入合約號');
                this.isLoading = true
                this.getContractDate();
                
            }else if(this.step == 2){
                this.step = 3
            }
        },
        createElevator(){
            for(let i=0;i<this.data.num;i++){
                this.data.elevators.push({
                    spec:'', //規格
                    weight:'', //載重
                    speed:'', //速度
                    persons:'', //人乘
                    stop:'', //樓停
                    floors:'', //樓層
                    latitude:'',  //緯度
                    longitude:'', //經度
                    elevator_brand:'', //廠牌
                    opendoor:'', //開門方式
                    maintainance:'', //保養別
                    takecertificatedate:'', //竣檢日
                    useful_date:'', //許可證有效日期
                })
            }
        },
        getContractDate(){
            axios.get('./api/getContractData.php?contracttype=b&contractno=' + this.data.contractno).then(res=>{
                if(!res.data){
                    this.step = 2
                    this.isLoading = false
                    return
                }
                if(!this.customize){
                    console.log(res.data);
                    this.data.total_price = res.data.sold_price
                    this.data.salesman = res.data.salesman
                    this.data.contract_begin_date = res.data.contract_begin_date
                    this.data.contract_end_date = res.data.contract_end_date
                    this.data.address = res.data.address
                    this.data.customer = res.data.customer
                    this.data.partyA = res.data.customer
                    this.data.partyAaddress = res.data.address
                    this.data.num = res.data.num
                    this.data.disabled = (res.data.num > 0) ? true : false;
                    this.data.elevators = res.data.elevators
                    let cityIndex = this.data.address.indexOf('市');
                    console.log(cityIndex);
                    if(cityIndex == -1) {
                        cityIndex = this.data.address.indexOf('縣');
                    }
                    if (cityIndex > 1) {
                        // 獲取''市''前面的兩個字
                        let city = this.data.address.substring(cityIndex - 2, cityIndex + 1);
                        this.data.area = city;
                    } else {
                        this.data.area = ''
                    }
                }
                this.step = 2
                this.isLoading = false
            }).catch(err=>{
                console.error(err)
                this.isLoading = false
            })
        },
        preStepFn(){
            if(this.step==2){
                if(confirm('回到上一頁會將會初始化資料，確定返回嗎？')){
                    this.step = 1
                    this.data.total_price = ''
                    this.data.salesman = ''
                    this.data.contract_begin_date = ''
                    this.data.contract_end_date = ''
                    this.data.address = ''
                    this.data.customer = ''
                    this.data.partyA = ''
                    this.data.partyAaddress = ''
                    this.step = 1
                    this.data.num = ''
                    this.data.disabled = false
                    this.data.elevators = []
                    this.data.files = []
                    this.data.vat = ''
                    this.data.mtype = ''
                    this.data.phone = ''
                    this.data.email = ''
                    this.data.mworker = ''
                    this.data.mcycle = ''
                    this.data.area = ''
                    this.data.zip = ''
                    this.data.partyAphone = ''
                    this.data.partyAemail = ''
                    return;
                }
            }else if(this.step == 3){
                this.step = 2
            }
        },
        save(){
            this.isLoading = true
            const form = new FormData();
            form.append('contractno', this.data.contractno);
            form.append('total_price', this.data.total_price);
            form.append('vat', this.data.vat);
            form.append('mtype', this.data.mtype);
            form.append('phone', this.data.phone);
            form.append('email', this.data.email);
            form.append('mworker', this.data.mworker);
            form.append('mcycle', this.data.mcycle);
            form.append('salesman', this.data.salesman);
            form.append('contract_begin_date', this.data.contract_begin_date);
            form.append('contract_end_date', this.data.contract_end_date);
            form.append('address', this.data.address);
            form.append('area', this.data.area);
            form.append('customer', this.data.customer);
            form.append('partyA', this.data.partyA);
            form.append('partyAaddress', this.data.partyAaddress);
            form.append('partyAphone', this.data.partyAphone);
            form.append('partyAemail', this.data.partyAemail);
            form.append('user_id', user_id);
            form.append('user_name', user_name);
            form.append('num', this.data.num);
            form.append('elevators', JSON.stringify(this.data.elevators));
            form.append('contracttype', 'b');

            // 如果有附件檔案，可以逐一加入
            for (var i = 0; i < this.data.files.length; i++) {
                form.append('files[]', this.data.files[i]);
            }
            axios.post('./api/postContractData.php', form).then(res=>{
                console.log(res.status);
                if(res.status === 200){
                    alert('儲存成功');
                    this.step = 1
                    this.data.total_price = ''
                    this.data.salesman = ''
                    this.data.contract_begin_date = ''
                    this.data.contract_end_date = ''
                    this.data.address = ''
                    this.data.customer = ''
                    this.data.partyA = ''
                    this.data.partyAaddress = ''
                    this.step = 1
                    this.data.num = ''
                    this.data.disabled = false
                    this.data.elevators = []
                    this.data.files = []
                    this.data.vat = ''
                    this.data.mtype = ''
                    this.data.phone = ''
                    this.data.email = ''
                    this.data.mworker = ''
                    this.data.mcycle = ''
                    this.data.area = ''
                    this.data.zip = ''
                    this.data.partyAphone = ''
                    this.data.partyAemail = ''
                }
                this.isLoading = false
            }).catch(error=>{
                let code = error.response.status;
                if(code == 422){
                    this.fail_arr = error.response.data
                    this.errorFn();
                }
                if(code == 500){
                    alert('儲存失敗！可能為以下錯誤:\n' + error.response.data)
                }
                
                this.isLoading = false
            })
        },
        errorFn(){
            let msg = ''
            for(let i = 0; i < this.fail_arr.length; i++){
                msg += this.fail_arr[i] + '、'
            } 
            alert(msg)
        },
        uploadFiles(e){
            this.data.files = e.target.files
        },
    }

};

const contractNewApply = ()=>{
    return {
        step:1,
        isLoading:false,
        data:{
            vol_no: contractno,
            salesman: salesman,
            apply_date: apply_date,
            apply_type:'A',
            case_name: case_name,
            company: company,
            manager: manager,
            vat: vat,
            total_price: price_total,
            price_a:'',
            price_b:'',
            address: address,
            workdeadline_a:30, //完工期限: 幾天內安裝完成，預設30
            workdeadline_b:7, //完工期限: 幾天內整理完善，預設7
            regulations:10, //附則
            freedeadline:18, //免保期限(月)
            tradeaddress:'', //交貨地點
            tradedeadline: 90, //交貨期限
        }
    }
}