<template>
    <div class="business-detail-wrap">
        <div class="business-detail">
            <Steps 
                :activeStep="step"
                :stepsArr="stepsArr"
                @changeActiveStep="changeActiveStep"
            />
            <div class="first-step-form-wrap" v-show="step===1">
                <el-form 
                    :model="firstFormData" 
                    ref="firstFormEl" 
                    label-width="120px"
                    inline
                    :rules="rules"
                    class="first-step-form"
                >
                    <div class="form-line">
                        <el-form-item label="商家名称" prop="BusinessName">
                            <el-input disabled placeholder="请输入商家名称" v-model="firstFormData.BusinessName"/>
                        </el-form-item>
                        <el-form-item label="商家ID" prop="BusinessCode">
                            <el-input disabled placeholder="请输入商家ID" v-model="firstFormData.BusinessCode"/>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="所属区域" prop="RegionType">
                            <el-radio-group v-model="firstFormData.RegionType" disabled>
                                <el-radio label="国内" border>国内</el-radio>
                                <el-radio label="海外" border>海外</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="商家地址" prop="address" v-if="firstFormData.RegionType=='国内'">
                            <el-cascader 
                                v-model="firstFormData.address"
                                :props="locationProps"
                                clearable 
                                :options="locationOptions"  
                                @change="selectRegion" 
                                placeholder="请选择客户地址" 
                            />
                        </el-form-item>
                        <el-form-item label="所属国家" prop="Nation" v-else>
                            <el-select v-model="firstFormData.Nation" placeholder="请选择所属国家" filterable style="width: 360px;">
                                <el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
                                <div style="display: flex;justify-content: space-between;">
                                    <span>{{ item.cnName }}</span>
                                    <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
                                </div>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="社会信用码" prop="CreditCode">
                            <el-input disabled placeholder="请输入社会信用码" v-model="firstFormData.CreditCode"/>
                        </el-form-item>
                        <el-form-item label="研究团队规模" prop="ResearchTeamSize">
                            <el-select 
                                v-model="firstFormData.ResearchTeamSize" 
                                placeholder="请选择研究团队规模"
                                clearable
                            >
                                <el-option
                                    v-for="item in teamSizeOpts"
                                    :key="item.val"
                                    :label="item.label"
                                    :value="item.val">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="决策人" prop="Leader">
                            <el-input placeholder="请输入决策人" v-model="firstFormData.Leader"/>
                        </el-form-item>
                        <el-form-item label="所属行业" prop="IndustryId">
                            <el-select 
                                v-model="firstFormData.IndustryId" 
                                placeholder="请选择行业" 
                                clearable
                            >
                                <el-option
                                    v-for="item in tradeArr"
                                    :key="item.IndustryId"
                                    :label="item.IndustryName"
                                    :value="item.IndustryId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="资金规模" prop="CapitalScale">
                            <el-input placeholder="请输入资金规模" v-model="firstFormData.CapitalScale"/>
                        </el-form-item>
                        <el-form-item label="用户上限" prop="UserMax">
                            <el-input type="number" placeholder="请输入用户上限" v-model="firstFormData.UserMax"/>
                        </el-form-item>
                    </div>
                    <div class="form-line">
                        <el-form-item label="所属销售" prop="SellerName">
                            <el-input disabled placeholder="请输入销售" v-model="firstFormData.SellerName"/>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="second-step-form-wrap" v-show="step===2">
                <el-button type="primary" @click="addRenewalHandle" style="margin-top: 15px;">添加续约</el-button>
                <el-table :data="recordData" border>
                    <el-table-column
                        v-for="item in tableColOpts"
                        :key="item.key"
                        :prop="item.key"
                        :label="item.label"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <span class="editsty" @click="editRenewal(scope.row)" style="padding: 0 3px;">编辑</span>
                            <span class="deletesty" @click="deleteRenewal(scope.row)" style="padding: 0 3px;">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-button type="text" @click="showRenewal=true">添加续约</el-button> -->
            </div>
        </div>
        <div class="business-other">
            <div class="btn-wrap">
                <el-button type="primary" @click="handleSaveDetail">保存</el-button>
                <el-button type="primary" plain @click="$router.push('/businessETAList')">取消</el-button>
            </div>
            <div class="time-line-wrap">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        color="#409EFF" 
                        :timestamp="activity.CreateTime">
                        <template slot="dot">
                            <div class="dot-wrap">
                                <div class="dot-inner"></div>
                            </div>
                        </template>
                        {{activity.OperationRemark}}
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>

        <!-- 添加续约 -->
        <el-dialog
            :title="renewalDiaTitle"
            :visible.sync="showRenewal"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            @closed="showRenewal=false"
            width="580px"
        >
            <AddRenewal 
                @addRenewal="handleAddRenewal"
                @close="showRenewal=false"
                :renewalForm="renewalForm"/>
        </el-dialog>
    </div>
</template>

<script>
import { customInterence , businessCustomInterence} from '@/api/api.js'
import Steps from "./components/Steps.vue";
import AddRenewal from "./components/AddRenewal";
import {locationOptions} from "@/views/custom_manage/customList/location"
import country from "@/utils/countryData"
export default {
    components: {Steps,AddRenewal},
    data() {
        this.countryData = country
        return {
            locationOptions,
            locationProps:{
                value:'name',
                children:'city',
                label:'name'
            },

            step:1,//第几步
            teamSizeOpts:[
                {
                    val:'50人及以下',
                    label:'50人及以下'
                },
                {
                    val:'200人及以下',
                    label:'200人及以下'
                },
                {
                    val:'超过200人',
                    label:'超过200人'
                }
            ],
            tradeArr:[],
            firstFormData:{
                RegionType:'',//1国内 2国外
                BusinessName:'',
                CreditCode:'',
                Address:'',
                Nation:'',
                Leader:'',
                ResearchTeamSize:'',
                CapitalScale:'',
                IndustryId:'',
                UserMax:'',
                SellerId:'',
                Province:'',
                City:''
            },
            rules:{
                Nation:[{ required: true, message: '请选择所属国家', trigger: 'change' },],
                address:[{ required: true, message: '请选择商家地址', trigger: 'change' },],
                decisionMaker:[{required: true, message: '请输入决策人', trigger: 'blur' },],
                teamSize:[{required: true, message: '请选择研究团队规模', trigger: 'change' },],
                industry:[{required: true, message: '请选择所属行业', trigger: 'change' },],
                userMax:[{required: true, message: '请输入用户上限', trigger: 'blur' },],
                saller:[{required: true, message: '请选择所属销售', trigger: 'change' },],
            },
            recordData:[],
            tableColOpts:[
                {
                    label:'运维时间',
                    key:'SigningTime'
                },{
                    label:'到期时间',
                    key:'ExpiredTime'
                },{
                    label:'到期天数',
                    key:'ExpireDay'
                }
            ],
            activities:[],
            showRenewal:false,
            renewalDiaTitle:"添加续约",
            renewalForm:{}
        }
    },
    created() {
        this.getIndustry()
        this.getBusinessDetail()
    },
    methods: {
        selectRegion(e){
            this.firstFormData.Province=e[0]
            this.firstFormData.City=e[1]
        },
        /* 根据类型获取行业 */
		getIndustry() {
			customInterence.getindustry({
				Classify:'ficc'
			}).then(res => {
				if(res.Ret === 200) {
					this.tradeArr = res.Data.List || [];
				}
			})
		},
        changeActiveStep(index){
            this.step = index + 1
        },
        // 获取商家详情
        getBusinessDetail(){
            //query id
            businessCustomInterence.getBusinessDetail({
                EtaBusinessId:Number(this.$route.query.id)
            }).then(res=>{
                if(res.Ret !== 200)return 
                this.firstFormData = res.Data||{}
                this.firstFormData.address = [res.Data.Province||'',res.Data.City||'']
            })
            //获取签约详情
            this.getTableData(Number(this.$route.query.id))
            //获取操作日志列表
            this.getTimeLineData(Number(this.$route.query.id))
        },
        // 获取签约详情
        getTableData(id){
            businessCustomInterence.getContractList({
                EtaBusinessId:id
            }).then(res=>{
                if(res.Ret !== 200) return 
                this.recordData = res.Data||[]
            })
        },

        // 获取操作日志详情
        getTimeLineData(id){
            businessCustomInterence.getTimeLineList({
                EtaBusinessId:id
            }).then(res=>{
                if(res.Ret!==200) return 
                this.activities = res.Data||[]
            })
        },
        // 保存商家
        handleSaveDetail(){
            const {EtaBusinessId,CapitalScale,
                   address,Leader,IndustryId,Nation,
                   ResearchTeamSize,UserMax} = this.firstFormData
            const IndustryName = this.tradeArr.find(item=>item.IndustryId===IndustryId).IndustryName
            businessCustomInterence.editBusiness({
                EtaBusinessId,Leader,
                IndustryName,CapitalScale,
                ResearchTeamSize,Nation,
                IndustryId:Number(IndustryId),
                UserMax:Number(UserMax),
                Province:address[0],
                City:address[1]
            }).then(res=>{
                if(res.Ret!==200) return
                this.$message.success('保存成功')
                this.getBusinessDetail()
            })
        },
        // 添加续约
        addRenewalHandle(){
            this.renewalForm={}
            this.renewalDiaTitle="添加续约"
            this.showRenewal=true
        },
        // 编辑续约
        editRenewal(row){
            this.renewalDiaTitle="编辑续约"
            this.renewalForm={
                id:row.EtaBusinessContractId,
                signDate:row.SigningTime,
                expirationDate:row.ExpiredTime
            }
            this.showRenewal=true
        },
        deleteRenewal(row){
            this.$confirm("是否确认删除该签约信息？", "提示", {
                type: "warning"
            }).then(() => {
                businessCustomInterence.
                removeContract({EtaBusinessContractId:row.EtaBusinessContractId})
                .then(res=>{
                    if(res.Ret == 200){
                        this.$message.success("删除成功")
                        this.getTableData(Number(this.$route.query.id))
                        this.getTimeLineData(Number(this.$route.query.id))
                    }
                })
            }).catch(() => {});
        },
        //添加续约-保存
        handleAddRenewal({signDate,expirationDate,id}){
            // id-商家合约ID
            let api = Number(id) ? 'editContract' : 'addNewContract'
            businessCustomInterence[api]({
                EtaBusinessId:Number(this.$route.query.id),
                EtaBusinessContractId:Number(id),
                SigningTime:signDate,
                ExpiredTime:expirationDate
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success(this.renewalDiaTitle+'成功')
                this.showRenewal=false
                this.getTableData(Number(this.$route.query.id))
                this.getTimeLineData(Number(this.$route.query.id))
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.business-detail-wrap{
    display: flex;
    background-color: #fff;
    min-width: 1100px;
    min-height: calc(100vh - 120px);
    padding:30px;
    box-sizing: border-box;
    gap:10%;
    .business-detail{
        width:70%;
        .first-step-form-wrap,.second-step-form-wrap{
            margin-top:60px;
            border-top: 1px solid #DCDCDC;
        }
        .el-form{
            .form-line{
                margin:30px 0;
                border-bottom: 1px solid #DCDCDC;
                .el-input,.el-select,.el-cascader,.el-radio-group{
                    width:360px;
                }
                .el-radio-group{
                    display: flex;
                    justify-content: space-between;
                    .el-radio{
                        width: 165px;
                        text-align: center;
                    }
                }
            }
        }
        .el-table{
            margin-top: 15px;
        }
    }
    .business-other{
        flex: 1;
        .btn-wrap{
            display: flex;
            gap:30px;
            .el-button{
                flex:1;
            }
        }
        .time-line-wrap{
            margin-top:30px;
            border:1px solid #DCDFE6;
            border-radius: 4px;
            box-sizing: border-box;
            padding: 30px;
            max-height: calc(100vh - 250px);
            overflow-y: auto;
            .dot-wrap{
                width:12px;
                height:12px;
                border:6px solid #fff;
                background-color: #3385FF;
                position: absolute;
                left:-6px;
                top:0;
                border-radius: 50%;
                .dot-inner{
                    position: absolute;
                    left:3px;
                    top:3px;
                    width:6px;
                    height: 6px;
                    border-radius: 50%;
                    background-color: #fff;
                }
            }
        }
    }
}

</style>