<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router"
import { customInterence, businessCustomInterence } from "@/api/api.js";
import Steps from "./components/Steps.vue";
import AddRenewal from "./components/AddRenewal.vue";
import { locationOptions } from "@/views/custom_manage/custom/location";
import country from "@/utils/countryData"

const route = useRoute()

const countryData = country;
const locationProps = {
    value:'name',
    children:'city',
    label:'name'
}

const teamSizeOpts = [
    {
        val:'50人及以下',
        label:'50人及以下'
    },
    {
        val:'200人及以下',
        label:'200人及以下'
    },
    {
        val:'超过200人',
        label:'超过200人'
    }
]

const tableColOpts = [
    {
        label:'签约时间',
        key:'SigningTime'
    },{
        label:'到期时间',
        key:'ExpiredTime'
    },{
        label:'到期天数',
        key:'ExpireDay'
    }
]

const rules = {
    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' },],
}

/* 根据类型获取行业 */
const tradeArr = ref([])
function getIndustry() {
  customInterence.getindustry({
    Classify:'ficc'
  }).then(res => {
    if(res.Ret === 200) {
      tradeArr.value = res.Data.List || [];
    }
  })
}
getIndustry()

const firstFormData = ref({
    RegionType:'',//1国内 2国外
    BusinessName:'',
    CreditCode:'',
    Address:'',
    Nation:'',
    Leader:'',
    ResearchTeamSize:'',
    CapitalScale:'',
    IndustryId:'',
    UserMax:'',
    SellerId:'',
})
// 获取商家详情
function getBusinessDetail(){
    //query id
    businessCustomInterence.getBusinessDetail({
        EtaBusinessId:Number(route.query.id)
    }).then(res=>{
        if(res.Ret !== 200)return 
        firstFormData.value = res.Data||{}
        firstFormData.value.address = [res.Data.Province||'',res.Data.City||'']
    })
    //获取签约详情
    getTableData(Number(route.query.id))
    //获取操作日志列表
    getTimeLineData(Number(route.query.id))
}
getBusinessDetail()


// 获取签约详情
const recordData = ref([])
function getTableData(id){
    businessCustomInterence.getContractList({
        EtaBusinessId:id
    }).then(res=>{
        if(res.Ret !== 200) return 
        recordData.value   = res.Data||[]
    })
}


// 获取操作日志详情
const activities = ref([])
function getTimeLineData(id){
    businessCustomInterence.getTimeLineList({
        EtaBusinessId:id
    }).then(res=>{
        if(res.Ret!==200) return 
        activities.value = res.Data||[]
    })
}

function selectRegion(e){
    firstFormData.value.province=e[0]
    firstFormData.value.city=e[1]
}

const step = ref(1)//第几步
function changeActiveStep(index){
    step.value = index + 1
}


</script>
<template>
  <div class="business-detail-wrap">
    <div class="business-detail">
      <Steps
        :activeStep="step"
        @changeActiveStep="changeActiveStep"
      />
      <div class="first-step-form-wrap" v-show="step === 1">
        <el-form
          :model="firstFormData"
          ref="firstFormEl"
          label-width="120px"
          inline
          :rules="rules"
          :disabled="true"
          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-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>
      </div>
    </div>
    <div class="business-other">
      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="
            $router.push({
              path: '/editETABusiness',
              query: {
                id: firstFormData.EtaBusinessId,
              },
            })
          "
          >编辑</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>

  </div>
</template>
<style scoped lang="scss">
.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: 160px;
            text-align: center;
          }
        }
      }
    }
    .el-table {
      margin-top: 30px;
    }
  }
  .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>
