<template>
  <div class="account-container" v-loading="loading">
    <div class="top">
      <div class="account-title">{{ accountTitle }}</div>
      <div class="button-group">
        <el-button v-if="type != 'view'" type="primary" icon="el-icon-circle-check" @click="submitForm"
                   :loading="submitLoading">{{ $t('common.confirm') }}
        </el-button>
        <el-button v-if="type != 'view'" @click="cancel" icon="el-icon-remove-outline">
          {{ $t('common.cancel') }}
        </el-button>
        <el-button v-if="type == 'view'" icon="el-icon-arrow-left" plain size="mini" @click="cancel">
          {{ $t('common.back') }}
        </el-button>
      </div>
    </div>


    <!-- 客户选择 -->
    <div class="account-select">
      <div v-if="type != 'add' && accounts.length > 0" class="select-box">
        <div class="select-item" v-for="(item, index) in accounts" :key="index"
             @click="selectAccount(item, index)" :class="{ 'selected': selectedIndex == index }">
          {{ item.agentName == 'common.head' ? $t(item.agentName) : item.agentName }}
        </div>
      </div>
      <el-button v-if="type === 'view' && accounts && accounts.length > 0" icon="el-icon-remove-outline" type="primary" size="mini" @click="cancelMerge">
        {{ $t('account.unmerge') }}
      </el-button>
    </div>
    <!-- 关联项目 -->
    <div class="content" style="margin-bottom: 20px" v-if="type == 'view' && !$route.query.historyId">
      <div class="card" style="width: 100%">
        <div class="flex-center-left mb16">
          <!--              <img class="item-size" src="../../../assets/images/account-item.png" alt="">-->
          <!--              <div class="card-title">{{ $t('account.project') }}</div>-->
          <span>{{ $t('account.project') }}</span>
        </div>
        <el-table :data="projectList" max-height="280px" border
                  :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
          <el-table-column prop="projectNo" :label="$t('project.no')" width="200px"></el-table-column>
          <el-table-column prop="projectName" :label="$t('project.name')" width="250px"></el-table-column>
          <!--设备总数-->
          <Column :label="$t('project.deviceTotal')" prop="deviceTotal"/>

          <!--币种-->
          <Column :label="$t('project.currency')" prop="currencyId"
                  searchType="select" :searchDict="dict.type.currency_type"/>

          <!--总价-->
          <Column :label="$t('project.priceTotal')" prop="priceTotal" align="right">
            <template #default="{ row }">
              <!--保留两位小数-->
              <span>{{ toDecimal2(row.priceTotal ? numFormat(row.priceTotal.toFixed(2)) : '-') }}</span>
            </template>
          </Column>
          <el-table-column prop="type" :label="$t('lead.segment')" width="200px">
            <template slot-scope="scope">
              <span>{{ formatDict(scope.row.type, dict.type.project_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="contactPerson" :label="$t('common.contactPerson')"
                           width="200px"></el-table-column>
          <el-table-column prop="contact" :label="$t('common.contact')" width="200px"></el-table-column>
          <el-table-column prop="createByName" :label="$t('common.createBy')"
                           width="200px"></el-table-column>
          <el-table-column prop="createTime" :label="$t('common.createTime')"
                           width="200px"></el-table-column>
          <el-table-column :label="$t('common.operate')" width="100px" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view"
                         @click="handleViewProject(scope.row)">{{ $t('common.view') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :auto-scroll="false" :total="projectTotal" :page.sync="projectQueryParams.pageNum"
                    :limit.sync="projectQueryParams.pageSize" @pagination="getProjectListByAccount"/>
      </div>
<!--            <el-button v-if="type === 'view' && accounts && accounts.length > 0" icon="el-icon-remove-outline" plain size="mini" @click="cancelMerge" style="width: 5%">-->
<!--              {{ $t('account.unmerge') }}</el-button>-->
    </div>

    <div class="content">
      <!-- 左半边卡片 -->
      <!-- 客户基本信息 ----新增 -->
      <div v-if="type != 'view'" class="card card-base" :class="{ 'card-full': type != 'view' || $route.query.historyId }">
        <div class="flex-center-left mb16">
          <img class="item-size" src="../../../assets/images/account-item.png" alt="">
          <div class="card-title">{{ $t('account.baseInfo') }}</div>
        </div>
        <el-form class="account-form" ref="form" :model="form" :rules="type != 'view' ? rules : {}"
                 label-position="top">
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 区域 -->
              <el-form-item :label="$t('user.area')" prop="areaId">
                <!--<treeselect :class="{ 'treeselect': disableFlag }" v-model="form.areaId"-->
                <!--    :style="disableFlag ? { width: '16vw' } : { width: '80%' }"-->
                <!--    :options="areaTree" :placeholder="$t('common.pleaseSelect') + $t('user.area')"-->
                <!--    :show-count="true" :disabled="disableFlag" :normalizer="normalizer"-->
                <!--    @select="selectArea" @input="areaChange" />-->

                <treeselect v-model="form.areaId" :flat="true" :options="areaTree" :noResultsText="$t('common.noResultsText')"
                            :placeholder="$t('common.pleaseSelect') + $t('user.area')"
                            :style="disableFlag ? { width: '16vw' } : { width: '80%' }"
                            :show-count="true" class="w-100" :disabled="disableFlag"
                            @input="areaChange" @select="selectArea">
                  <div slot="option-label" slot-scope="{ node }" style="white-space: nowrap; font-size: 14px">
                    {{ node.raw['label' + localLabelSuffix] ? node.raw['label' + localLabelSuffix] : "" }}
                  </div>
                  <div slot="value-label" slot-scope="{ node }">
                    {{ node.raw['label' + localLabelSuffix] ? node.raw['label' + localLabelSuffix] : "" }}
                  </div>
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 国家 -->
              <Select :disabled="disableFlag" prop="countryId" :data="nationList"
                      :label="$t('account.country')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!--&lt;!&ndash; 客户类型 &ndash;&gt;-->
              <!--<Select :disabled="disableFlag" prop="type" :data="dict.type.account_type"-->
              <!--    :label="$t('account.type')" :required="!disableFlag"-->
              <!--    :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>-->

              <!--城市-->
              <Input :disabled="disableFlag" prop="city" :label="$t('project.city')" 
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="30"></Input>

            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 跟进状态 -->
              <Select :disabled="disableFlag" prop="status" :data="dict.type.account_status"
                      :label="$t('account.status')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!-- 公司名称 -->
              <Input :disabled="disableFlag" prop="accountName" :label="$t('account.accountName')"
                     :width="disableFlag ? '16vw' : '80%'" :required="!disableFlag" :maxlength="100"></Input>
            </el-col>

            <el-col :span="8">
              <!-- 客户等级 -->
              <Select :disabled="disableFlag" prop="level" :data="dict.type.account_level"
                      :label="$t('account.level')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 公司类型 -->
              <Select :disabled="disableFlag" prop="companyType" :data="dict.type.company_type"
                      :label="$t('account.companyType')" 
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!-- 公司地址 -->
              <Input :disabled="disableFlag" prop="address" :label="$t('account.address')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="100"></Input>
            </el-col>
            <el-col :span="8">
              <!-- 公司网址 -->
              <Input :disabled="disableFlag" prop="companyWebsite" :label="$t('company.website')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="100"></Input>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 公司背景 -->
              <Input :disabled="disableFlag" prop="background" :label="$t('company.background')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="250"></Input>
            </el-col>
            <el-col :span="8">
              <!-- 归属集团 -->
              <Input :disabled="disableFlag" prop="accountGroup" :label="$t('account.group')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="100"></Input>
            </el-col>
            <el-col :span="8">
              <!-- 项目类型 -->
              <Select :disabled="disableFlag" prop="segment" :data="dict.type.project_type"
                      :label="$t('lead.segment')"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>

          </el-row>
          <el-row :gutter="20">

            <el-col :span="8">
              <!-- 产品意向 -->
              <Select :disabled="disableFlag" prop="intentionalProduct"
                      :data="dict.type.intentional_product" :label="$t('account.intentionalProduct')"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!-- 首次合作年份 -->
              <el-form-item :label="$t('project.beginYear')" prop="beginYear">
                <el-date-picker :disabled="disableFlag" v-model="form.beginYear" type="year"
                                :placeholder="$t('common.pleaseSelect') + $t('project.beginYear')"
                                :style="disableFlag ? { width: '16vw' } : { width: '80%' }">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 负责人 -->
              <Select :disabled="disableFlag" prop="owner" :data="areaOwnerList" :label="$t('agent.head')"
                      valueProp="userId" labelProp="nickName" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 代理商 -->
              <Select :disabled="disableFlag" prop="ownerAgent" :data="agentList" :label="$t('lead.agent')"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }" @clear="agentChange" @change="agentChange"
                      valueProp="agentId" labelProp="agentName" :required="!disableFlag"></Select>
            </el-col>
            <el-col :span="16" v-if="type != 'view'">
              <!-- 关联线索 -->
              <PageSelect class="lead-select" :label="$t('account.lead')" prop="leadIds" width="90%"
                          :list="listByCurUser" :pageSize="10" valueProp="leadId" labelProp="leadNo"
                          :formatLabel="formatLeadLabel" multiple :visibleGetData="true" idName="leadId"
                          :defaultParams="{ relativeAccount: accountId ? accountId : null, language: $i18n.locale }"
                          :defaultData="defaultData" ref="pageSelect" @change="resetDefaultData"/>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16" v-if="type != 'view'">
              <!-- 备注 -->
              <Input :disabled="disableFlag" prop="remark" :label="$t('common.remark')" width="90%"
                     :maxlength="500" type="textarea"></Input>
            </el-col>
          </el-row>


          <el-form-item :label="$t('account.file')" prop="fileList">
            <FileUpload :class="{ 'upload': disableFlag }" v-model="form.fileList" :isShowTip="false"
                        :fileType="fileType" :disabled="disableFlag" :buttonText="$t('common.uploadFile')">
            </FileUpload>
          </el-form-item>
        </el-form>

        <el-divider></el-divider>

        <!-- 添加联系人 -->
        <div :class="{ 'contact-box': type != 'view' }">
          <div class="flex-center-left mb16">
            <img class="item-size" src="../../../assets/images/account-item.png" alt="">
            <div class="card-title">{{ $t('account.contact') }}</div>
          </div>
          <div v-if="type != 'view'" class="mb16">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLine">
              {{ $t('account.addLine') }}
            </el-button>
            <el-button size="mini" plain icon="el-icon-delete" @click="deleteLine"
                       :disabled="deleteDisabled">
              {{ $t('account.deleteLine') }}
            </el-button>
          </div>
          <el-table :data="contactList" @selection-change="handleSelectionChange" max-height="280px" border ref="contactTabRef"
                    :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
            <el-table-column v-if="type != 'view'" type="selection" width="55"></el-table-column>
            <el-table-column prop="contactName" :label="$t('contact.name')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.contactName" :disabled="type == 'view'"
                          maxlength="30"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="phone" :label="$t('contact.phone')" width="200px">
              <template slot-scope="{ row }">
                <el-input v-model="row.phone" :disabled="type == 'view'" @input="checkSame(row.phone, 'phone')" :class="{'apply-shake': row.shake_phone}"
                          maxlength="30"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" :label="$t('contact.address')" width="200px">
              <template slot-scope="{ row }">
                <el-input v-model="row.address" :disabled="type == 'view'" @input="checkSame(row.address, 'address')" :class="{'apply-shake': row.shake_address}"
                          maxlength="100"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="email" :label="$t('contact.email')" width="200px">
              <template slot-scope="{ row }">
                <el-input v-model="row.email" :disabled="type == 'view'" @input="checkSame(row.email, 'email')" :class="{'apply-shake': row.shake_email}"
                          maxlength="50"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="jobTitle" :label="$t('contact.job')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.jobTitle" :disabled="type == 'view'"
                          maxlength="100"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="birthday" :label="$t('contact.birthday')" width="200px">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.birthday" type="date" :disabled="type == 'view'">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="horoscope" :label="$t('contact.horoscope')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.horoscope" :disabled="type == 'view'"
                          maxlength="20"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="maritalStatus" :label="$t('contact.maritalStatus')" width="200px">
              <template slot-scope="scope">
                <el-select :disabled="type == 'view'" v-model="scope.row.maritalStatus" clearable>
                  <el-option v-for="dict in dict.type.marital_status" :key="dict.value"
                             :label="dict.label" :value="dict.value"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="hobbies" :label="$t('contact.hobbies')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.hobbies" :disabled="type == 'view'"
                          maxlength="100"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 客户基本信息---查看 -->
      <custom-collapse v-else class="card base-info left" :title="$t('account.baseInfo')" :min-height="700">
        <el-form class="account-form" ref="form" :model="form" :rules="type != 'view' ? rules : {}"
                 label-position="top">
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 区域 -->
              <el-form-item :label="$t('user.area')" prop="areaId">
                <!--<treeselect :class="{ 'treeselect': disableFlag }" v-model="form.areaId"-->
                <!--    :style="disableFlag ? { width: '16vw' } : { width: '80%' }"-->
                <!--    :options="areaTree" :placeholder="$t('common.pleaseSelect') + $t('user.area')"-->
                <!--    :show-count="true" :disabled="disableFlag" :normalizer="normalizer"-->
                <!--    @select="selectArea" @input="areaChange" />-->

                <treeselect v-model="form.areaId" :flat="true" :options="areaTree" :noResultsText="$t('common.noResultsText')"
                            :placeholder="$t('common.pleaseSelect') + $t('user.area')"
                            :style="disableFlag ? { width: '16vw' } : { width: '80%' }"
                            :show-count="true" class="w-100" :disabled="disableFlag"
                            @input="areaChange" @select="selectArea">
                  <div slot="option-label" slot-scope="{ node }" style="white-space: nowrap; font-size: 14px">
                    {{ node.raw['label' + localLabelSuffix] ? node.raw['label' + localLabelSuffix] : "" }}
                  </div>
                  <div slot="value-label" slot-scope="{ node }">
                    {{ node.raw['label' + localLabelSuffix] ? node.raw['label' + localLabelSuffix] : "" }}
                  </div>
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 国家 -->
              <Select :disabled="disableFlag" prop="countryId" :data="nationList"
                      :label="$t('account.country')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!--&lt;!&ndash; 客户类型 &ndash;&gt;-->
              <!--<Select :disabled="disableFlag" prop="type" :data="dict.type.account_type"-->
              <!--    :label="$t('account.type')" :required="!disableFlag"-->
              <!--    :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>-->

              <!--城市-->
              <Input :disabled="disableFlag" prop="city" :label="$t('project.city')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="30"></Input>

            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 跟进状态 -->
              <Select :disabled="disableFlag" prop="status" :data="dict.type.account_status"
                      :label="$t('account.status')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!-- 公司名称 -->
              <Input :disabled="disableFlag" prop="accountName" :label="$t('account.accountName')"
                     :width="disableFlag ? '16vw' : '80%'" :required="!disableFlag" :maxlength="100"></Input>
            </el-col>

            <el-col :span="8">
              <!-- 客户级别 -->
              <Select :disabled="disableFlag" prop="level" :data="dict.type.account_level"
                      :label="$t('account.level')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 公司类型 -->
              <Select :disabled="disableFlag" prop="companyType" :data="dict.type.company_type"
                      :label="$t('account.companyType')" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>
            <el-col :span="8">
              <!-- 公司地址 -->
              <Input :disabled="disableFlag" prop="address" :label="$t('account.address')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="100"></Input>
            </el-col>
            <el-col :span="8">
              <!-- 公司网址 -->
              <Input :disabled="disableFlag" prop="companyWebsite" :label="$t('company.website')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="100"></Input>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 公司背景 -->
              <Input :disabled="disableFlag" prop="background" :label="$t('company.background')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="250"></Input>
            </el-col>
            <el-col :span="8">
              <!-- 归属集团 -->
              <Input :disabled="disableFlag" prop="accountGroup" :label="$t('account.group')"
                     :width="disableFlag ? '16vw' : '80%'" :maxlength="100"></Input>
            </el-col>
            <el-col :span="8">
              <!-- 项目类型 -->
              <Select :disabled="disableFlag" prop="segment" :data="dict.type.project_type"
                      :label="$t('lead.segment')"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 产品意向 -->
              <Select :disabled="disableFlag" prop="intentionalProduct"
                      :data="dict.type.intentional_product" :label="$t('account.intentionalProduct')"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>

            <el-col :span="8">
              <!-- 首次合作年份 -->
              <el-form-item :label="$t('project.beginYear')" prop="beginYear">
                <el-date-picker :disabled="disableFlag" v-model="form.beginYear" type="year"
                                :placeholder="$t('common.pleaseSelect') + $t('project.beginYear')"
                                :style="disableFlag ? { width: '16vw' } : { width: '80%' }">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 负责人 -->
              <Select :disabled="disableFlag" prop="owner" :data="ownerList" :label="$t('agent.head')"
                      valueProp="userId" labelProp="nickName" :required="!disableFlag"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"></Select>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 代理商 -->
              <Select :disabled="disableFlag" prop="ownerAgent" :data="agentList" :label="$t('lead.agent')"
                      :styleObj="disableFlag ? { width: '16vw' } : { width: '80%' }"
                      valueProp="agentId" labelProp="agentName" :required="!disableFlag"></Select>
            </el-col>
            <el-col :span="16" v-if="type != 'view'">
              <!-- 关联线索 -->
              <PageSelect class="lead-select" :label="$t('account.lead')" prop="leadIds" width="90%"
                          :list="listByCurUser" :pageSize="10" valueProp="leadId" labelProp="leadNo"
                          :formatLabel="formatLeadLabel" multiple :visibleGetData="true" idName="leadId"
                          :defaultParams="{ relativeAccount: accountId ? accountId : null, language: $i18n.locale }"
                          :defaultData="defaultData" ref="pageSelect" @change="resetDefaultData"/>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="16" v-if="type != 'view'">
              <!-- 备注 -->
              <Input :disabled="disableFlag" prop="remark" :label="$t('common.remark')" width="90%"
                     :maxlength="500" type="textarea"></Input>
            </el-col>
          </el-row>


          <el-form-item :label="$t('account.file')" prop="fileList">
            <FileUpload :class="{ 'upload': disableFlag }" v-model="form.fileList" :isShowTip="false"
                        :fileType="fileType" :disabled="disableFlag" :buttonText="$t('common.uploadFile')">
            </FileUpload>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <!-- 添加联系人 -->
        <div :class="{ 'contact-box': type != 'view' }">
          <div class="flex-center-left mb16">
            <img class="item-size" src="../../../assets/images/account-item.png" alt="">
            <div class="card-title">{{ $t('account.contact') }}</div>
          </div>
          <div v-if="type != 'view'" class="mb16">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLine">
              {{ $t('account.addLine') }}
            </el-button>
            <el-button size="mini" plain icon="el-icon-delete" @click="deleteLine"
                       :disabled="deleteDisabled">
              {{ $t('account.deleteLine') }}
            </el-button>
          </div>
          <el-table :data="contactList" @selection-change="handleSelectionChange" max-height="280px" border
                    :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
            <el-table-column v-if="type != 'view'" type="selection" width="55"></el-table-column>
            <el-table-column prop="contactName" :label="$t('contact.name')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.contactName" :disabled="type == 'view'"
                          maxlength="30"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="phone" :label="$t('contact.phone')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.phone" :disabled="type == 'view'"
                          maxlength="30"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" :label="$t('contact.address')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.address" :disabled="type == 'view'"
                          maxlength="100"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="email" :label="$t('contact.email')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.email" :disabled="type == 'view'"
                          maxlength="50"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="jobTitle" :label="$t('contact.job')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.jobTitle" :disabled="type == 'view'"
                          maxlength="100"></el-input>
              </template>
            </el-table-column>
                        <el-table-column prop="birthday" :label="$t('contact.birthday')" width="290px">
              <template slot-scope="scope">
                                <el-date-picker style="width: 100%" v-model="scope.row.birthday" type="date" :disabled="type == 'view'" @change="item=>getXZ(item,scope.row)">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="horoscope" :label="$t('contact.horoscope')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.horoscope" :disabled="type == 'view'"
                          maxlength="20"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="maritalStatus" :label="$t('contact.maritalStatus')" width="200px">
              <template slot-scope="scope">
                <el-select :disabled="type == 'view'" v-model="scope.row.maritalStatus" clearable>
                  <el-option v-for="dict in dict.type.marital_status" :key="dict.value"
                             :label="dict.label" :value="dict.value"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="hobbies" :label="$t('contact.hobbies')" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.hobbies" :disabled="type == 'view'"
                          maxlength="100"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </custom-collapse>

      <!-- 右半边卡片 -->
      <div class="ml20" v-if="type == 'view' && !$route.query.historyId">
        <div class="card card-mini follow-list mb16" v-hasPermi="['business:account:follow']" v-if="hasPermission()">
          <!-- 快速跟进 -->
          <div class="title-row">
            <div class="flex-center-left mb16">
              <img alt="" class="item-size" src="../../../assets/images/account-item.png">
              <div class="card-title">{{ $t('follow.fastTrack') }}</div>
            </div>
            <el-button size="mini" type="primary" @click="handleAddFollow">{{ $t('common.add') }}</el-button>
          </div>
          <el-form ref="fastFollowForm" :model="fastFollowForm" label-position="top">
            <el-row :gutter="20">
              <el-col :span="8">
                <!-- 跟进方式 -->
                <Select :data="dict.type.crm_follow_way" :label="$t('follow.followWay')" prop="followWay"
                        required/>
              </el-col>
              <el-col :span="8">
                <!--联系人-->
                <Select :data="contactList" :label="$t('follow.contactPerson')" clearable allow-create
                        filterable label-prop="contactName" prop="contactPerson" @change="contactPersonChange"
                        required value-prop="contactId"/>
              </el-col>
              <el-col :span="8">
                <!--联系方式-->
                <Input :label="$t('common.contact')" prop="contact" required width="100%"/>
              </el-col>
            </el-row>
            <!-- 跟进内容及结果 -->
            <!--                  <Input :label="$t('follow.followDesc')" prop="followDesc" required width="100%"/>-->
            <Input type="textarea" prop="followDesc" :label="$t('follow.followDesc')" required width="100%" :rows="2"
                   :maxlength="500"/>
          </el-form>
        </div>

        <!-- 跟进记录 -->
        <div class="card card-mini">
          <div class="flex-center-left mb16">
            <!--                    <img class="item-size" src="../../../assets/images/account-item.png" alt="">-->
            <!--                    <div class="card-title">{{ $t('account.follow') }}</div>-->
            <span>{{ $t('account.follow') }}</span>
          </div>
          <el-table :data="followList" max-height="280px" border
                    :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
            <el-table-column align="center" label="No" type="index" width="50"/>

            <!-- <el-table-column prop="followNo" :label="$t('follow.no')" width="200px"></el-table-column> -->
            <el-table-column prop="followTime" :label="$t('follow.time')" width="100px">
              <template slot-scope="scope">
                {{ getLocalTime(scope.row.followTime, 'YYYY-MM-DD') }}
              </template>
            </el-table-column>
            <el-table-column prop="contactPerson" :label="$t('common.contactPerson')" show-overflow-tooltip
                             width="120px"></el-table-column>
            <el-table-column prop="contact" :label="$t('common.contact')" width="120px" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="createByName" :label="$t('account.followPerson')" show-overflow-tooltip
                             width="120px"></el-table-column> -->
            <el-table-column prop="followDesc" :label="$t('account.followDesc')" show-overflow-tooltip
            ></el-table-column>
            <!-- <el-table-column prop="createTime" :label="$t('common.createTime')"
                width="200px"></el-table-column> -->
            <el-table-column :label="$t('common.operate')" width="100px" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view"
                           @click="handleViewFollow(scope.row)">{{ $t('common.view') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination :auto-scroll="false" :total="followTotal" :page.sync="followQueryParams.pageNum"
                      :limit.sync="followQueryParams.pageSize" @pagination="getFollowListByAccount"/>

        </div>
        <!-- 关联线索 -->
        <div class="card card-mini mt16" v-if="leadList&&leadList.length>0">
          <div class="flex-center-left mb16">
            <!--                        <img class="item-size" src="../../../assets/images/account-item.png" alt="">-->
            <!--                        <div class="card-title">{{ $t('account.lead') }}</div>-->
            <span>{{ $t('account.lead') }}</span>
          </div>
          <el-table :data="leadList" max-height="280px" border
                    :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
            <el-table-column prop="leadNo" :label="$t('lead.leadNo')" width="200px"></el-table-column>
            <el-table-column prop="areaName" :label="$t('lead.area')" width="200px"></el-table-column>
            <el-table-column prop="company" :label="$t('lead.company')" width="200px"></el-table-column>
            <el-table-column prop="origin" :label="$t('lead.origin')" width="200px">
              <template slot-scope="scope">
                <span>{{ formatDict(scope.row.origin, dict.type.lead_source) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="contactPerson" :label="$t('common.contactPerson')"
                             width="200px"></el-table-column>
            <el-table-column prop="contact" :label="$t('common.contact')" width="200px"></el-table-column>
            <el-table-column prop="createByName" :label="$t('common.createBy')"
                             width="200px"></el-table-column>
            <el-table-column prop="createTime" :label="$t('common.createTime')"
                             width="200px"></el-table-column>
            <el-table-column :label="$t('common.operate')" width="100px" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view"
                           @click="handleViewLead(scope.row)">{{ $t('common.view') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination :auto-scroll="false" :total="leadTotal" :page.sync="leadQueryParams.pageNum"
                      :limit.sync="leadQueryParams.pageSize" @pagination="getLeadListByAccount"/>
        </div>


      </div>
    </div>
    <!-- 线索选择器 -->
    <el-dialog :title="$t('lead.select')" :visible.sync="leadOpen" width="1000px" :before-close="closeLead"
               append-to-body :close-on-click-modal="false">
      <card-table :modalData="leadOption" :searchParams="selectLeadParams" @pagination="getMyLeadList"
                  :loading="leadLoading" :tableSearch="true" @columnSearch="handleLeadQuery" @resetList="resetLeadQuery">
        <template #default="{ list }">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column label="No." type="index" width="50" align="center"/>
          <!--线索编号-->
          <Column :label="$t('lead.leadNo')" :showSearch="true" prop="leadNo" width="200"/>
          <!--公司-->
          <Column :label="$t('lead.company')" :showSearch="true" prop="company" width="200"/>
          <!--行业-->
          <Column :label="$t('lead.sector')" :searchDict="dict.type.lead_industry" :showSearch="true"
                  prop="sector" searchType="select" selectMore width="200"/>
          <!--联系人-->
          <Column :label="$t('lead.contactPerson')" :showSearch="true" prop="contactPerson" width="200"/>
          <!--联系方式-->
          <!-- <Column :label="$t('lead.contact')" :showSearch="true" prop="contact" width="200" /> -->
          <Column :label="$t('common.operate')" :min-width="250" fixed="right" :showSearch="true"
                  searchType="operate">
            <template #default="{ row }">
              <el-button size="mini" type="text" icon="el-icon-plus" @click="addLead(row)">{{
                  $t('common.addNew')
                }}
              </el-button>
            </template>
          </Column>
        </template>
      </card-table>
      <div style="margin-top: 24px;font-size: 16px;">{{ $t('lead.selected') }}</div>
      <el-table style="margin-top: 20px;" :data="selectLeadList" max-height="300px" border
                :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
        <el-table-column label="No." type="index" width="50" align="center"/>
        <el-table-column prop="leadNo" :label="$t('lead.leadNo')" width="200px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="company" :label="$t('lead.company')" width="200px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="sector" :label="$t('lead.sector')" width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ formatDict(scope.row.sector, dict.type.lead_industry) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contactPerson" :label="$t('lead.contactPerson')" width="200px"
                         show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="contact" :label="$t('lead.contact')" width="200px"></el-table-column> -->
        <el-table-column :label="$t('common.operate')" width="150px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteLead(scope.row)">
              {{ $t('common.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-circle-check" @click="confirmSelect">{{
            $t('common.confirm')
          }}
        </el-button>
        <el-button @click="closeLead" icon="el-icon-remove-outline">{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>
    <FollowDialog ref="followDialog"></FollowDialog>

    <!-- 客户合并对话框 -->
    <el-dialog :title="$t('account.merge')" :visible.sync="open" width="850px" append-to-body
               :close-on-click-modal="false">
      <el-table :data="mergeList" max-height="400px" border
                :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
        <el-table-column type="index" label="No" width="50" align="center"></el-table-column>
        <el-table-column prop="accountId" :label="$t('account.account')">
          <template slot-scope="scope">
            <el-select style="width: 500px;" v-model="scope.row.accountId" filterable disabled
                       :placeholder="$t('common.pleaseSelect') + $t('account.account')">
              <el-option v-for="item in accountOptions" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.operate')" width="200px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteRow(scope.row)">
              {{ $t('common.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-circle-check" @click="submit">
          {{ $t('common.confirm') }}
        </el-button>
        <el-button @click="open = false;" icon="el-icon-remove-outline">{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getAreaTreeByUser} from "@/api/common/common";
import {
  getAccount,
  addAccount,
  updateAccount,
  listAll,
  cancelMergeAccount
} from '@/api/business/crm/account'
import {getHistory} from "@/api/business/crm/accountHistory";
import {getAllNationList} from "@/api/user/country";
import {getRelatedContact, getSameContactLib} from '@/api/business/crm/contact'
import {selectProjectListByAccount} from "@/api/business/crm/project";
import {addFollow, selectFollowListByAccount} from '@/api/business/crm/follow'
import {getOwnerList, getAllOwnerList, getAreaOwnerList} from "@/api/system/user";
import {allList, delLead, listByCurUser, selectLeadListByAccount} from '@/api/business/crm/lead'
import {getCountryByAreaId} from "@/api/system/user";
import FileUpload from "@/components/FileUpload";
import {getLocalTime} from "@/utils/data/dataUtils"
import FollowDialog from "@/views/crmManagement/follow/FollowDialog";
import CommonSelect from "../../../components/element/form/items/CommonSelect";
import PageSelect from "../../../components/element/form/items/PageSelect";
import { getAgent, selectByOwner } from '@/api/user/agent'
import {isEmptyObject} from '@/utils/validate'
import {trimFormListFields} from '@/utils/ruoyi'
import CustomCollapse from '../../components/CustomCollapse'
import Column from '../../../components/element/table/Column'

export default {
  name: "accountEdit",
  dicts: ['account_status', 'account_level', 'account_type', 'intentional_product', 'lead_source',
    'lead_industry', 'marital_status', 'project_type', 'company_type', 'crm_follow_way', 'currency_type'],
  components: {Column, CustomCollapse, PageSelect, CommonSelect, FileUpload, Treeselect, FollowDialog},
  data() {
    return {
      // 是否第一次进入编辑
      isFirstEdit: false,
      accountId: null,
      type: '',
      form: {
        fileList: [],
        leadIds: []
      },
      rules: {
        areaId: [
          {required: true, message: this.$t('common.pleaseSelect') + this.$t('user.area'), trigger: "change"}
        ],
      },
      nationList: [],
      areaList: [],
      contactList: [],
      contactShowList: [],
      leadList: [],
      myLeadList: [],
      projectList: [],
      followList: [],
      ownerList: [],
      areaOwnerList: [],
      multipleSelection: [],
      deleteDisabled: true,
      fileType: ["jpg", "png", "jpeg", "doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf"],
      leadQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      leadTotal: 0,
      projectQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      projectTotal: 0,
      followQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      followTotal: 0,
      selectedIndex: 0,
      accounts: [],
      accountTitle: '',
      areaTree: [],
      disableFlag: false,
      language: null,
      loading: false,
      submitLoading: false,
      leadLoading: false,
      leadOpen: false,
      leadOption: [],
      selectLeadParams: {
        pageNum: 1,
        pageSize: 10,
      },
      selectLeadList: [],
      defaultData: [],

      agentList: [],
      fastFollowForm: {
        followType: '1',
        followWay: null,
        followDesc: null,
        contactPerson: null,
      },

      mergeList: [],
      open: false,
      accountOptions: [],

      // 需要二次确认
      needSecondaryConfirm: 0,
    };
  },

  computed: {
    localLabelSuffix() {
      return localStorage.getItem('labelSuffix') || '';
    }
  },

  async created() {
    this.permissionChar = this.$store.state.user.permissionChar
    this.language = this.$i18n.locale;
    this.initType();
    this.accountId = this.$route.params && this.$route.params.accountId;
    this.leadQueryParams.pageNum = 1;
    this.projectQueryParams.pageNum = 1;
    this.followQueryParams.pageNum = 1;
    this.loading = true;
    try {
      this.getAreaTree();
      await this.getAgentListByOwner();

      if (this.type != 'add') {
        if (this.$route.query.historyId) {
          getHistory(this.$route.query.historyId).then(response => {
            this.form = response.data;
            this.contactList = response.data.contactList;
            if (this.form.fileList && this.form.fileList.length > 0) {
              this.form.fileList = this.form.fileList.map(item => {
                return {
                  // name: item.realFileName,
                  name: item.serverFileName,
                  url: item.filePath
                }
              })
            } else {
              this.form.fileList = [];
            }
          })
        } else {

          if (this.type == 'view') {
            this.getAccount(true);
          } else {
            this.getAccount(false);
          }
          this.getRelatedContact();
        }
        if (this.type == 'view') {
          this.getAllOwnerList();
          if (!this.$route.query.historyId) {
            this.getLeadListByAccount();
            this.getProjectListByAccount();
            this.getFollowListByAccount();
          }
        } else {
          this.getOwnerList();
        }
      } else {
        this.getOwnerList();
        // 状态设置默认值
        this.$set(this.form, 'type', '');
        this.$set(this.form, 'origin', '');
        this.$set(this.form, 'sector', '');
        // this.$set(this.form, 'countryId', '');
        this.$set(this.form, 'level', '1');
        this.$set(this.form, 'status', '1');
        this.$set(this.form, 'orderStatus', '0');
        let userId = this.$store.state.user.id;
        // this.$set(this.form, 'owner', userId == 1 ? null : userId);

        // this.$refs.form.clearValidate();
        if (this.$route.query.leadIds) {
          let leadIds = this.$route.query.leadIds;
          allList({leadIds: leadIds}).then(response => {
            let leadData = response.data[0]
            this.$set(this.form, 'accountName', leadData.company);
            this.$set(this.form, 'type', leadData.type);
            this.$set(this.form, 'countryId', leadData.countryId);
            if (leadData.sector) {
              this.$set(this.form, 'sector', leadData.sector);
            }
            this.$set(this.form, 'areaId', leadData.areaId);
            this.$set(this.form, 'email', leadData.email);
            this.$set(this.form, 'phone', leadData.contact);
            this.$set(this.form, 'address', leadData.address);
            this.$set(this.form, 'origin', leadData.origin);
            // 公司类型
            this.$set(this.form, 'companyType', leadData.companyType);
            // 公司背景
            this.$set(this.form, 'background', leadData.background);
            // 所属集团
            this.$set(this.form, 'accountGroup', leadData.group);
            // 产品意向
            this.$set(this.form, 'intentionalProduct', leadData.intentionalProduct);
            // 项目类型
            this.$set(this.form, 'segment', leadData.segment);
            // 联系人
            this.contactList.push({
              contactName: leadData.contactPerson,
              phone: leadData.contact,
              email: leadData.email,
              jobTitle: leadData.jobTitle,
            });

            this.myLeadList = response.data.map(item => {
              return {
                value: item.leadId,
                label: item.leadNo
                  + ': 【' + (item.areaName || '') + '】'
                  + ' 【' + (item.company || '') + '】'
                  + ' 【' + (item.contactPerson || '') + '】'
                // + ' 【' + (this.formatDict(item.sector, this.dict.type.lead_industry) || '') + '】'
              };
            });
            this.defaultData = response.data
            this.$refs.pageSelect.data = this.defaultData
            this.$refs.pageSelect.resSet()
          });
          if (leadIds) {
            this.$set(this.form, 'leadIds', leadIds.map(item => Number(item)))
          }
        }
      }
    } finally {
      this.loading = false;
    }
  },
  activated() {
    this.initType();
    const obj = Object.assign({}, this.$route, {title: this.accountTitle})
    this.$tab.updatePage(obj);
  },
  methods: {

        getXZ(date,row){
          console.log(date)
          let month = date.getMonth()+1
          let day = date.getDate();
          console.log(month)
          console.log(day)
          let constellations = ["摩羯座", "水瓶座", "双鱼座", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座"];
          let dayBounds = [20, 19, 21, 20, 21, 22, 23, 23, 23, 24, 23, 22];
          if (day < dayBounds[month - 1]) {
            month = month - 1;
          }
          console.log(month)
          if (month >= 0) {
            row.horoscope = constellations[month];
            return
          }
          row.horoscope =  constellations[11];
        },

    listByCurUser,
    formatLeadLabel(leadNo, item) {
      return item.leadNo
        + ': 【' + (item.areaName || '') + '】'
        + ' 【' + (item.company || '') + '】'
        + ' 【' + (item.contactPerson || '') + '】'
      // + ' 【' + (this.formatDict(item.sector, this.dict.type.lead_industry) || '') + '】'
    },

    getLocalTime,
    selectAccount(item, index) {
      // 如果切换客户
      if (this.selectedIndex != index) {
        this.selectedIndex = index;
        this.accountId = item.accountId;
        this.getAccount(false);
        this.getRelatedContact();
        if (this.type == 'view' && !this.$route.query.data) {
          this.getLeadListByAccount();
          this.getProjectListByAccount();
          this.getFollowListByAccount();
        }
        // 只有主客户可以编辑
        if (this.type == 'edit') {
          if (index != 0) {
            this.$set(this, 'disableFlag', true);
          } else {
            this.$set(this, 'disableFlag', true);
          }
        }
      }
    },
    // 打开线索选择器
    async openlead() {
      this.selectLeadList = [];
      this.leadOpen = true;
      await this.getMyLeadList();
      if (this.form.leadIds) {
        this.form.leadIds.forEach(leadId => {
          let lead = this.leadOption.find(x => x.leadId == leadId);
          this.selectLeadList.push({
            leadId: lead.leadId,
            leadNo: lead.leadNo,
            areaId: lead.areaId,
            areaName: lead.areaName,
            company: lead.company,
            contactPerson: lead.contactPerson,
            // contact: lead.contact,
            sector: lead.sector
          });
        })
      }
    },
    // 关闭线索选择器
    closeLead() {
      this.leadOpen = false;
    },
    // 添加线索
    addLead(row) {
      // 去重
      if (this.selectLeadList.some(item => item.leadId == row.leadId)) {
        return;
      }
      this.selectLeadList.push({
        leadId: row.leadId,
        leadNo: row.leadNo,
        areaId: row.areaId,
        areaName: row.areaName,
        company: row.company,
        contactPerson: row.contactPerson,
        // contact: row.contact,
        sector: row.sector
      })
    },
    // 删除线索
    deleteLead(row) {
      this.selectLeadList = this.selectLeadList.filter(item => item.leadId != row.leadId)
    },
    // 线索确认选择
    confirmSelect() {
      if (this.selectLeadList.length > 0) {
        this.$set(this.form, 'leadIds', this.selectLeadList.map(item => item.leadId));
        this.myLeadList = this.selectLeadList.map(item => {
          return {
            value: item.leadId,
            label: item.leadNo
              + ': 【' + (item.areaName || '') + '】'
              + ' 【' + (item.company || '') + '】'
              + ' 【' + (item.contactPerson || '') + '】'
              + ' 【' + (this.formatDict(item.sector, this.dict.type.lead_industry) || '') + '】'
          };
        });
      } else {
        this.$set(this.form, 'leadIds', null);
      }
      this.leadOpen = false;
    },
    handleLeadQuery() {
      this.selectLeadParams.pageNum = 1;
      this.getMyLeadList();
    },
    resetLeadQuery() {
      this.$set(this.selectLeadParams, "pageNum", 1);
      this.$set(this.selectLeadParams, "pageSize", 10);
      this.$set(this.selectLeadParams, "leadNo", null);
      this.$set(this.selectLeadParams, "contactPerson", null);
      this.$set(this.selectLeadParams, "sector", null);
      this.$set(this.selectLeadParams, "company", null);
      this.getMyLeadList();
    },
    initType() {
      this.type = this.$route.query && this.$route.query.type;
      switch (this.type) {
        case 'add':
          this.accountTitle = this.$t('account.add');
          break;
        case 'edit':
          this.accountTitle = this.$t('account.edit');
          this.isFirstEdit = true
          break;
        case 'view':
          this.accountTitle = this.$t('account.view');
          this.isFirstEdit = true
          break;
      }
      //20240819 暂时性去除必填项
      this.disableFlag = this.type == 'view';
    },
    // 区域发生变化
    async areaChange(val) {

      if (val) {
        await this.getCountryByAreaId(val)
        this.getOwnerListByAreaId(val)
      } else {
        // this.nationList = []
        this.$set(this.form, "countryId", null);
      }

    },
    // 根据区域获取负责人
    getOwnerListByAreaId(x) {
      let param = {areaId: x}
      getAreaOwnerList(param).then(response => {
        this.areaOwnerList = response.data;
        console.log("isFirstEdit ", this.isFirstEdit)
        // 编辑客户第一次进来，不联动负责人
        if (this.isFirstEdit) {
          this.isFirstEdit = false
        } else {
          let userId = this.$store.state.user.userInfo.userId;
          console.log("是否包含用户", this.areaOwnerList.some(a => a.userId == userId))
          if (this.areaOwnerList.some(a => a.userId == userId)) {
            this.$set(this.form, "owner", userId);
          } else {
            this.$set(this.form, "owner", null);
          }
        }
      });
    },
    async selectArea(val) {
      // this.$set(this.form, "countryId", null);
      this.$nextTick(() => {
        // 表单重新校验区域
        this.$refs['form'].validateField(['areaId']);
      })


    },
    async getCountryByAreaId(areaId) {
      const agentId = this.form.ownerAgent
      if (!agentId || agentId <= 0) {
        if (this.form.areaId) {
          const resp = await getCountryByAreaId(this.form.areaId)
          this.nationList = resp.data
        }
      } else {
        const response = await getAgent(agentId)
        this.nationList = response.data?.countryList || []
      }

      this.nationList = this.nationList.map(item => {
        let label = '';
        switch (this.language) {
          case 'chinese':
            label = item.countryName
            break;
          case 'english':
            label = item.countryNameUS
            break;
          case 'russia':
            label = item.countryNameRU
            break;
          case 'spanish':
            label = item.countryNameES
            break;
        }
        return {
          value: item.countryId,
          label: label
        }
      });
      // 如果只有一个国家，就直接选中
      if (this.nationList.length === 1) {
        this.form.countryId = this.nationList[0].value
      }
    },
    // 获取地区树
    getAreaTree() {
      getAreaTreeByUser().then(response => {
        this.areaTree = response.data;

        // 如果只有一个区域：列表中只有一个且没有子节点，则直接选中
        if (this.areaTree.length === 1 && (!this.areaTree[0].children || this.areaTree[0].children?.length === 0)) {
          this.form.areaId = this.areaTree[0].id
          this.getCountryByAreaId(this.areaTree[0].id)
        }
      });
    },
    normalizer(node) {
      switch (this.language) {
        case 'chinese':
          return {
            label: node.label,
          };
        case 'english':
          return {
            label: node.labelES,
          };
        case 'russia':
          return {
            label: node.labelRU,
          };
        case 'spanish':
          return {
            label: node.labelUS,
          };
      }
    },
    /** 获取字典数据匹配的值 */
    formatDict(value, dictData) {
      return dictData.find(dict => dict.value == value)?.label;
    },
    /** 查询客户可选线索列表 */
    async getMyLeadList() {
      this.leadLoading = true;
      this.selectLeadParams.language = this.language;
      if (this.accountId && this.accountId != 0) {
        this.selectLeadParams.relativeAccount = this.accountId;
      }
      await listByCurUser(this.selectLeadParams).then(response => {
        this.leadOption = response.rows;
        this.selectLeadParams.total = response.total;
      });
      this.leadLoading = false;
    },
    /** 查询客户所有人列表 */
    getOwnerList() {

      if (this.$store.getters.roles.includes('sales_director')) {
        getAllOwnerList({onlySalesRole: true}).then(res => {
          this.ownerList = res.data;
        })
      } else {
        getOwnerList({onlySalesRole: true}).then(res => {
          this.ownerList = res.data;
        })
      }

    },
    getAllOwnerList() {
      getAllOwnerList({onlySalesRole: true}).then(response => {
        this.ownerList = response.data;
      })
    },
    /** 获取所有国家列表 */
    getNationList() {
      getAllNationList().then(response => {
        this.nationList = response.data.map(item => {
          let label = '';
          switch (this.language) {
            case 'chinese':
              label = item.countryName
              break;
            case 'english':
              label = item.countryNameUS
              break;
            case 'russia':
              label = item.countryNameRU
              break;
            case 'spanish':
              label = item.countryNameES
              break;
          }
          return {
            value: item.countryId,
            label: label
          }
        });
      })
    },
    /** 查询客户关联线索 */
    getLeadListByAccount() {
      this.leadQueryParams.relativeAccount = this.accountId
      this.leadQueryParams.language = this.language;
      selectLeadListByAccount(this.leadQueryParams).then(response => {
        this.leadList = response.rows;
        this.leadTotal = response.total;
      })
    },
    /** 查询客户关联项目 */
    getProjectListByAccount() {
      this.projectQueryParams.accountId = this.accountId
      selectProjectListByAccount(this.projectQueryParams).then(response => {
        this.projectList = response.rows;
        this.projectTotal = response.total;
      })
    },
    /** 查询客户关联跟进记录 */
    getFollowListByAccount() {
      this.followQueryParams.businessId = this.accountId;
      selectFollowListByAccount(this.followQueryParams).then(response => {
        this.followList = response.rows;
        this.followTotal = response.total;
      })
    },
    /** 查询相关联系人 */
    getRelatedContact() {
      getRelatedContact({accountId: this.accountId}).then(response => {
        this.contactList = response.rows;
        this.contactList.forEach((contact, index) => {
          contact.index = index;
        });

      })
    },
    /** 多选联系人 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.deleteDisabled = this.multipleSelection.length === 0;
    },
    /** 新增联系人 */
    addLine() {
      this.contactList.push({
        index: this.contactList.length,
                accountId: this.accountId,
                horoscope:'',
                birthday:""
      })
    },
    /** 删除联系人 */
    deleteLine() {
      this.multipleSelection.forEach(account => {
        this.contactList = this.contactList.filter(item => {
          return item.index !== account.index;
        });
      });
      for (let i = 0; i < this.contactList.length; i++) {
        this.contactList[i].index = i;
      }
    },
    /** 返回上个页面 */
    cancel() {
      this.$tab.closePage();
    },
    /** 查询客户详情 */
    async getAccount(flag) {
      if (this.accountId != 0) {
        await getAccount(this.accountId).then(response => {
          this.form = response.data;
          // 处理线索
          if (this.form.leadList.length > 0) {
            // this.myLeadList = this.form.leadList.map(item => {
            //     return {
            //         value: item.leadId,
            //         label: item.leadNo
            //             + ': 【' + (item.areaName || '') + '】'
            //             + ' 【' + (item.company || '') + '】'
            //             + ' 【' + (item.contactPerson || '') + '】'
            //             + ' 【' + (this.formatDict(item.sector, this.dict.type.lead_industry) || '') + '】'
            //     };
            // });

            this.defaultData = JSON.parse(JSON.stringify(this.form.leadList));
            setTimeout(() => {
              this.$refs.pageSelect.data = this.defaultData
              this.$refs.pageSelect.resSet()
            }, 0)
          }
          if (flag) {
            this.accounts = response.data.accounts || []
            if (this.accounts.length > 0) {
              this.accounts.unshift({
                accountId: this.accountId,
                agentName: this.form.agentName
              })
            }
          }
          if (this.form.fileList && this.form.fileList.length > 0) {
            this.form.fileList = this.form.fileList.map(item => {
              return {
                // name: item.realFileName,
                name: item.serverFileName,
                url: item.filePath
              }
            })
          } else {
            this.form.fileList = [];
          }
        });
      }
    },
    /** 提交按钮 */
    submitForm: async function () {
      // 检验联系人姓名必填，联系方式/邮箱 两者必有其一
      if (this.contactList && this.contactList.length > 0) {
        trimFormListFields(this.contactList, ['contactName', 'phone', 'address', 'email', 'jobTitle', 'horoscope', 'hobbies'])
        let flag = false;
        this.contactList.forEach(item => {
          if (!item.contactName || (!item.phone && !item.email)) {
            flag = true;
            return;
          }
        });
        if (flag) {
          this.$modal.msgError(this.$t('account.contactRequired'));
          return;
        }
      }

      // 校验当前用户的联系人是否重复，强制校验，不可提交
      const isSameContact = this.checkSameSubmit()
      if (isSameContact) {
        // // 平滑滚动到联系人tab
        // this.$refs.contactTabRef.$el.scrollIntoView({behavior: 'smooth'});
        this.$modal.msgError(this.$t('account.existSameContact'));
        return
      }

      this.$refs["form"].validate(async valid => {
        if (valid) {

          // 校验联系人库是否有重复，非强制，可提交
          const isSameContactLib = await this.checkSameContactLib()
          if (isSameContactLib) {
            return
          }

          this.submitLoading = true;
          let account = Object.assign({}, this.form);
          account.contactList = this.contactList;
          // 处理附件
          if (Array.isArray(account.fileList)) {
            account.file = ''
          } else {
            account.file = account.fileList
          }
          delete account.fileList
          delete account.accounts
          if (this.accountId != 0) {
            account.accountId = this.accountId
            this.$prompt(this.$t('project.modifyRemarkNote'), this.$t('common.tips'), {
              confirmButtonText: this.$t('common.confirm'),
              cancelButtonText: this.$t('common.cancel'),
              inputPattern: /^(?=.{1,500}$).*/,
              inputErrorMessage: this.$t('project.modifyRemarkNotEmpty')
            }).then(({ value }) => {
              account.modifyRemark = value;
              updateAccount(account).then(response => {
                if (response.code == 200) {
                  this.$modal.msgSuccess(this.$t('common.editSuccess'));
                  this.$tab.closeOpenPage({path: "/account"});
                  this.$store.commit('getAccountList');
                } else {
                  this.$modal.msgError(response.msg);
                }
              }).catch(() => {
              });
            }).catch(() => {
              this.submitLoading = false;
            });
          } else {
            account.accountId = null
            addAccount(account).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess(this.$t('common.addSuccess'));
                if (this.$route.query.leadIds) {
                  this.$tab.closeOpenPage({path: "/lead"});
                  this.$store.commit('refreshLead');
                } else {
                  this.$tab.closeOpenPage({path: "/account"});
                  this.$store.commit('getAccountList');
                }
              } else {
                this.$modal.msgError(response.msg);
              }
            }).catch(() => {
            });
          }
          this.submitLoading = false;
        }
      });
    },
    handleViewLead(row) {
      this.$tab.openPage(this.$t('lead.detail'), '/crmManagement/lead-view/index/' + row.leadId);
    },
    handleViewProject(row) {
      this.$tab.openPage(this.$t('project.view'), '/project-view/' + row.projectId);
    },
    handleViewFollow(row) {
      let param = {
        flag: '3',
        followId: row.followId,
        leadId: null,
        accountId: null,
        projectId: this.projectId
      }
      this.$refs.followDialog.dialogItemInit(param);
    },
    resetDefaultData(row) {
      this.defaultData = row
      if (!row || row.length === 0) {
        this.$refs.form && this.$refs.form.resetFields()
        this.contactList = []
        return
      }

      this.$nextTick(() => {
        // 区域
        this.$set(this.form, 'areaId', row[0].areaId);
        // 国家
        this.$set(this.form, 'countryId', row[0].countryId);
        // 公司类型
        this.$set(this.form, 'companyType', row[0].companyType);
        // 公司背景
        this.$set(this.form, 'background', row[0].background);
        // 所属集团
        this.$set(this.form, 'accountGroup', row[0].group);
        // 产品意向
        this.$set(this.form, 'intentionalProduct', row[0].intentionalProduct);
        // 项目类型
        this.$set(this.form, 'segment', row[0].segment);
        // 联系人
        this.contactList.push({
          contactName: row[0].contactPerson,
          phone: row[0].contact,
          email: row[0].email,
          jobTitle: row[0].jobTitle,
        });
      })


      // this.$forceUpdate()
    },

    getAgentListByOwner() {
      return selectByOwner(this.$store.getters.userId).then(res => {
        this.agentList = res.data;
        // 默认选中第一个
        if (!this.form.ownerAgent && this.agentList.length > 0) {
          this.form.ownerAgent = this.agentList[0].agentId;
          this.getCountryByAreaId()
        }
      })
    },

    agentChange() {
      console.log('this.form.ownerAgent:', this.form.ownerAgent)
      this.getCountryByAreaId()
    },


    contactPersonChange(res) {
      // console.log('contactPerson change:::', res)
      if (!isEmptyObject(res)) {
        this.fastFollowForm.contactPerson = res.contactName
        this.fastFollowForm.contact = res.phone
        this.fastFollowForm.contactPersonName = res.contactName
      } else {
        // allow-create
        this.fastFollowForm.contactPerson = this.fastFollowForm.contactPerson || ''
        this.fastFollowForm.contactPersonName = this.fastFollowForm.contactPersonName || this.fastFollowForm.contactPerson

      }
    },

    handleAddFollow() {
      // 校验成功发送请求
      // console.log('fast:', this.fastFollowForm)
      this.$refs.fastFollowForm.validate(async valid => {
        if (valid) {
          this.fastFollowForm.businessId = this.form.accountId;
          this.fastFollowForm.followTime = new Date();

          const response = await addFollow(this.fastFollowForm);
          if (response.code === 200) {
            this.$modal.msgSuccess(this.$t('common.addSuccess'));
            this.$refs.fastFollowForm.resetFields();
            this.getFollowListByAccount();
          } else {
            this.$modal.msgError(response.msg);
          }

        }
      })
    },

    /** 判断是否有权限 */
    hasPermission() {
      return this.$store.getters.roles.includes('sales_director') || this.form.owner === this.$store.getters.userId;
    },

    cancelMerge() {
      console.log('accounts:', this.accounts)
      // this.mergeList = { ...this.accounts }
      // // for (let [index, merge] of this.mergeList) {
      // //   merge.index = index + 1
      // // }
      // for (let i = 0; i < this.mergeList.length; i++) {
      //   this.mergeList[i].index = i + 1;
      // }
      this.mergeList = []
      const ids = this.accounts.map(item => Number(item.accountId))

      for (let i = 0; i < ids.length; i++) {
        this.mergeList.push({index: i + 1, accountId: ids[i]})
      }

      listAll({ids, language: this.language}).then(response => {
        this.accountOptions = response.rows.map(item => {
          return {
            value: item.accountId,
            label: item.accountNo + ':' + '【' + item.accountName + ' - ' + item.areaName + ' - ' + item.countryName + '】'
          };
        });
      });
      this.open = true;
    },

    /** 删除行 */
    deleteRow(row) {
      this.mergeList = this.mergeList.filter(item => item.index != row.index);
      for (let i = 0; i < this.mergeList.length; i++) {
        this.mergeList[i].index = i + 1;
      }
      // 如果只剩下一个，就全部清空
      if (this.mergeList.length === 1) {
        this.mergeList = []
      }
    },

    submit() {
      let accountList = Object.assign([], this.mergeList);
      // if (accountList.length < 2) {
      //   this.$modal.msgError(this.$t("account.mergeNumberMsg"));
      //   return;
      // }
      if (accountList.findIndex(item => !item.accountId) > -1) {
        this.$modal.msgError(this.$t("account.mergeRequiredMsg"));
        return;
      }
      // 判断是否有重复客户
      let accountIdArray = accountList.map(item => item.accountId);
      if (new Set(accountIdArray).size !== accountIdArray.length) {
        this.$modal.msgError(this.$t("account.mergeDuplicateMsg"));
        return;
      }
      cancelMergeAccount({tcAccountList: accountList, accountId: this.accountId}).then(response => {
        this.$modal.msgSuccess(this.$t('common.editSuccess'));
        this.open = false;
        // this.getAccount()
        // 刷新页面
        this.$tab.refreshPage();
        if (this.$route.meta.link) {
          this.$store.dispatch('tagsView/delIframeView', this.$route)
        }
      });
    },

    // 校验联系方式是否存在
    checkSame(fieldV, fieldN) {
      // this.needSecondaryConfirm = 0
      if (!fieldV) {
        return
      }

      if (this.contactList && this.contactList.length > 0) {
        const sameItems = this.contactList.filter(item => item[fieldN] === fieldV)
        if (sameItems.length > 1) {
          sameItems.forEach(item => {
            // item['shake_' + fieldN] = true
            this.$set(item, 'shake_' + fieldN, true)
          })
          setTimeout(() => {
            sameItems.forEach(item => {
              // item['shake_' + fieldN] = false
              this.$set(item, 'shake_' + fieldN, false)
            })
          }, 820)
        }
      }
    },
    /* checkSameSubmit2() {
      // 校验 重复联系人
      const samePhone = new Set()
      const sameAddress = new Set()
      const sameEmail = new Set()
      for (let contact of this.contactList) {
        this.contactList.forEach(item => {
          if (contact.index !== item.index) {
            if (contact.phone === item.phone) {
              samePhone.add(item)
            }
            if (contact.address === item.address) {
              sameAddress.add(item)
            }
            if (contact.email === item.email) {
              sameEmail.add(item)
            }
          }
        })
      }
      console.log('samePhone:', samePhone, sameAddress, sameEmail)
      if (samePhone.size > 1) {
        for (let phone of samePhone) {
          phone.shake_phone = true
        }
        setTimeout(() => {
          for (let phone of samePhone) {
            phone.shake_phone = false
          }
        }, 820)
      }
      if (sameAddress.size > 1) {
        for (let address of sameAddress) {
          address.shake_address = true
        }
        setTimeout(() => {
          for (let address of sameAddress) {
            address.shake_address = false
          }
        }, 820)
      }
      if (sameEmail.size > 1) {
        for (let email of sameEmail) {
          email.shake_email = true
        }
        setTimeout(() => {
          for (let email of sameEmail) {
            email.shake_email = false
          }
        }, 820)
      }
      return samePhone.size > 1 || sameAddress.size > 1 || sameEmail.size > 1
    }, */


    checkSameSubmit() {
      const samePhone = new Map();
      const sameAddress = new Map();
      const sameEmail = new Map();

      // 分组联系人信息
      this.contactList.forEach(contact => {
        if (contact.phone) {
          if (!samePhone.has(contact.phone)) {
            samePhone.set(contact.phone, []);
          }
          samePhone.get(contact.phone).push(contact);
        }

        if (contact.address) {
          if (!sameAddress.has(contact.address)) {
            sameAddress.set(contact.address, []);
          }
          sameAddress.get(contact.address).push(contact);
        }

        if (contact.email) {
          if (!sameEmail.has(contact.email)) {
            sameEmail.set(contact.email, []);
          }
          sameEmail.get(contact.email).push(contact);
        }
      });
      let that = this

      // 处理重复项
      const handleShake = (sameItems, shakeKey) => {
        sameItems.forEach(contacts => {
          if (contacts.length > 1) {
            contacts.forEach(contact => {
              // contact[shakeKey] = true;
              that.$set(contact, shakeKey, true);
            });
            setTimeout(() => {
              contacts.forEach(contact => {
                // contact[shakeKey] = false;
                that.$set(contact, shakeKey, false);
              });
            }, 820);
          }
        });
      };

      const hasDuplicates =
        Array.from(samePhone.values()).some(contacts => contacts.length > 1) ||
        Array.from(sameAddress.values()).some(contacts => contacts.length > 1) ||
        Array.from(sameEmail.values()).some(contacts => contacts.length > 1);

      if (hasDuplicates) {
        // 平滑滚动到联系人tab
        this.$refs.contactTabRef.$el.scrollIntoView({behavior: 'smooth'});

        handleShake(samePhone, 'shake_phone');
        handleShake(sameAddress, 'shake_address');
        handleShake(sameEmail, 'shake_email');
      }
      return hasDuplicates;
    },

    async checkSameContactLib() {
      // 数据库查询其他库是否存在重复联系人
      // this.needSecondaryConfirm++
      // if (this.needSecondaryConfirm === 2) {
      //   this.needSecondaryConfirm = 0
      //   return false
      // }
      try {
        // 处理重复项
        const handleShake = (rows, shakeKey) => {
          rows.forEach(contact => {
            this.$set(contact, shakeKey, true);
          });
          setTimeout(() => {
            rows.forEach(contact => {
              this.$set(contact, shakeKey, false);
            });
          }, 820);
        };


        const response  = await getSameContactLib(this.contactList)
        if (response.code === 200 && response.data && response.data.exist) {
          // const {samePhone, sameAddress, sameEmail} = response.data
          // 平滑滚动到联系人tab
          this.$refs.contactTabRef.$el.scrollIntoView({behavior: 'smooth'});
          const samePhone = response.data.samePhone
          const sameAddress = response.data.sameAddress
          const sameEmail = response.data.sameEmail
          const sameContact = response.data.sameContact
          if (samePhone && samePhone.length > 0) {
            const phoneRows = this.contactList.filter(contact => samePhone.includes(contact.phone))
            handleShake(phoneRows, 'shake_phone');
          }
          if (sameAddress && sameAddress.length > 0) {
            const addressRows = this.contactList.filter(contact => sameAddress.includes(contact.address))
            handleShake(addressRows, 'shake_address');
          }
          if (sameEmail && sameEmail.length > 0) {
            const emailRows = this.contactList.filter(contact => sameEmail.includes(contact.email))
            handleShake(emailRows, 'shake_email');
          }

          if (sameContact && sameContact.length > 0) {
            // let content = ''
            // for (let contact of sameContact) {
            //   content += this.$t('account.contactExistsConfirmation', [contact.contactName, contact.accountName]) + '</br>'
            // }
            const contacts = sameContact.map(contact => contact.contactName).join(',')
            // 去重
            const accounts = Array.from(new Set(sameContact.map(contact => contact.accountName))).join(',')

            try {
              await this.$modal.confirm(this.$t('account.contactExistsConfirmation', [contacts, accounts]))
              return false
            } catch (e) {
              return true
            } finally {
            }
          }

          return true

          // try {
          //   await this.$modal.confirm(`联系人${}已存在其他客户【xxxxx】联系人中，是否确认提交?`)
          //   return false
          // } catch (e) {
          //   return true
          // } finally {
          // }
        } else {
          return false
        }
      } finally {

      }
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .account-form .el-form-item--medium .el-form-item__label {
    line-height: 12px;
}

::v-deep .el-form-item {
  margin-bottom: 20px;
}

::v-deep .upload-file-list .ele-upload-list__item-content {
  width: 500px;
}

::v-deep .upload {
  .upload-file-uploader {
    height: 0;
  }
}

::v-deep .el-link.el-link--default {
  padding-left: 15px;
}

//::v-deep .treeselect {
//    .vue-treeselect__single-value {
//        color: #C0C4CC;
//    }
//
//    .vue-treeselect__control {
//        border-color: #E4E7ED;
//        background-color: #F5F7FA;
//    }
//}

.account-container {
  padding: 16px 1vw;

  .account-title {
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
  }

  .input-width {
    width: 48vw;
  }

  .mt16 {
    margin-top: 16px;
  }

  .mb16 {
    margin-bottom: 16px;
  }

  .ml20 {
    margin-left: 1vw;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .button-group {
    display: flex;
  }

  .contact-box {
    margin-bottom: 50px;
  }

  .max-width {
    max-width: 20vw;
  }

  .flex-center-left {
    display: flex;
    align-items: center;
    justify-content: left;
  }

  .account-select {
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .select-box {
      display: flex;

      .select-item {
        cursor: pointer;
        margin-right: 10px;
        padding: 10px 20px;
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 18px;
        color: #3C485B;
        line-height: 21px;
        border: 1px solid transparent;
      }

      .selected {
        border-radius: 6px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 0px #CED6DD;
        color: #D31017;
        border: 1px solid #D31017;
      }
    }
  }


  .content {
    width: 100%;
    display: flex;

    & > div {
      align-self: stretch;
    }

    .card {
      background: #FFFFFF;
      box-shadow: 0px 2px 10px 0px #CED6DD;
      border-radius: 6px;
      padding: 20px;
    }

    .card-title {
      font-family: Arial, Arial;
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
    }

    .card-base {
      width: 53.5vw;
    }

    .card-height {
      max-height: 1292px;
    }

    .card-mini {
      width: 43vw;
      max-height: 430px;
    }

    .card-full {
      width: 97.6vw;
    }

    .follow-list {
      .title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .item-size {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}


::v-deep .apply-shake .el-input__inner {
  //border-color: #F56C6C !important;
  border-color: var(--current-color) !important;
}

</style>
