<template>
    <div class="content" v-loading="loading">
        <div class="cancel-btn">
            <div class="project-title">{{ $t('project.view') }}</div>
            <el-button icon="el-icon-remove-outline" plain @click="cancel">{{ $t('common.back') }}
            </el-button>
        </div>
        <div class="card-wrapper">
            <!-- 基本信息 -->
            <div class="left-card">
                <div style="margin-bottom: 20px;">{{ $t('lead.baseInfo') }}</div>
                <el-form class="project-form" ref="form" :model="form" label-position="top">
                    <el-row>
                      <el-col :span="24">
                        <!--项目步骤进度-->
                        <el-form-item :label="$t('project.progress')" prop="progress">
                          <ProjectProgress v-model="form.progress" confirm @change="confirmProgress"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <!-- 驳回原因 -->
                    <el-form-item v-if="form.status == '02'" :label="$t('project.refuseReason')" prop="refuseReason">
                        <el-input disabled v-model="form.refuseReason" type="textarea" style="width: 100%;"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 项目名称 -->
                            <Input disabled prop="projectName" :label="$t('project.name')" width="100%"></Input>
                        </el-col>
                        <el-col :span="12">
                            <!-- 关联客户 -->
                            <!--<el-form-item :label="$t('project.relatedCustomer')" prop="accountId">-->
                            <!--    <el-select  style="width: 25vw;" v-model="form.accountId"-->
                            <!--        :placeholder="$t('common.pleaseSelect') + $t('project.relatedCustomer')">-->
                            <!--        <el-option v-for="item in accountList" :key="item.value" :label="item.label"-->
                            <!--            :value="item.value" />-->
                            <!--    </el-select>-->
                            <!--</el-form-item>-->

                            <el-form-item :label="$t('project.relatedCustomer')" prop="accountId">
                              <!--<el-input readonly class="disabled-box" value="ACC202406060006: 【小刘第六公司aaaa】" @click.native="goProjectView"></el-input>-->
                              <div class="disabled-box">
                                <span class="link-type" @click="goProjectView">
                                  {{ getProjectName() }}
                                </span>
                                <!--<el-link type="primary" :underline="false" @click="goProjectView">ACC202406060006: 【小刘第六公司aaaa】</el-link>-->
                              </div>
                            </el-form-item>


                            <!-- <Select prop="accountId" :data="accountList" :label="$t('project.relatedCustomer')"
                            :styleObj="{ width: '25vw' }"></Select> -->
                        </el-col>
                    </el-row>
                    <!-- 关联线索 -->
                    <!-- <el-form-item :label="$t('account.lead')" prop="leadIds">
                        <el-select class="lead-select" disabled v-model="form.leadIds" clearable multiple
                            collapse-tags :popper-append-to-body="false"
                            :placeholder="$t('common.pleaseSelect') + $t('account.lead')" style="width: 100%;">
                            <el-option v-for="item in myLeadList" :key="item.leadId" :label="formatLeadLabel(item)"
                                :value="item.leadId" />
                        </el-select>
                    </el-form-item> -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 区域 -->
                            <el-form-item :label="$t('project.area')" prop="areaId">
                                <treeselect class="treeselect w-100" v-model="form.areaId" disabled :noResultsText="$t('common.noResultsText')"
                                    :options="areaTree" :placeholder="$t('common.pleaseSelect') + $t('project.area')"
                                    :show-count="true" :normalizer="normalizer"></treeselect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- 国家 -->
                            <el-form-item :label="$t('project.countryId')" prop="countryId">
                                <el-select disabled v-model="form.countryId" class="w-100"
                                    :placeholder="$t('common.pleaseSelect') + $t('project.countryId')">
                                    <el-option v-for="item in countryList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <!-- <Select prop="countryId" :data="countryList" :label="$t('project.countryId')"
                            :styleObj="{ width: '25vw' }"></Select> -->
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 城市 -->
                            <Input disabled prop="city" :label="$t('project.city')" width="100%"></Input>
                        </el-col>
                        <el-col :span="12">
                            <!-- 项目类型 -->
                            <Select disabled prop="type" :data="dict.type.project_type" :label="$t('lead.segment')" width="100%"></Select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 标杆项目 -->
                            <!--<el-form-item :label="$t('project.isModel')" prop="modelFlag">-->
                            <!--    <el-select disabled style="width: 25vw;" v-model="form.modelFlag"-->
                            <!--        :placeholder="$t('common.pleaseSelect') + $t('project.isModel')">-->
                            <!--        <el-option v-for="dict in dict.type.project_flag" :key="dict.value"-->
                            <!--            :label="dict.label" :value="dict.value" />-->
                            <!--    </el-select>-->
                            <!--</el-form-item>-->
                             <Select prop="modelFlag" :data="dict.type.project_flag" :label="$t('project.isModel')" disabled width="100%"/>
                        </el-col>
                        <el-col :span="12">
                            <!-- 产品系列 -->
                            <Select disabled prop="segmentedMarket" :data="dict.type.project_market"
                                :label="$t('project.projectSegments')"></Select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 计划成交月份 -->
                            <el-form-item :label="$t('account.planDealMonth')" prop="planDealMonth">
                                <el-date-picker style="width: 100%" disabled v-model="form.planDealMonth" type="month"
                                    :placeholder="$t('common.pleaseSelect') + $t('account.planDealMonth')">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- 项目地址 -->
                            <Input disabled prop="address" :label="$t('project.address')" width="100%" showTip></Input>
                            <!-- <el-form-item :label="$t('project.address')" prop="address">
                                <el-input disabled v-model.trim="form.address" style="width: 25vw;"
                                    :placeholder="$t('common.pleaseInput') + $t('project.address')"
                                    maxlength="100"></el-input>
                            </el-form-item> -->
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 关键决策人 -->
                            <!--<el-form-item :label="$t('project.keyContactPerson')" prop="keyContactPerson">-->
                            <!--    <el-input disabled v-model.trim="form.keyContactPerson" style="width: 25vw;"-->
                            <!--        :placeholder="$t('common.pleaseInput') + $t('project.keyContactPerson')"-->
                            <!--        maxlength="100"></el-input>-->
                            <!--</el-form-item>-->
                          <Input disabled prop="keyContactPerson" :label="$t('project.keyContactPerson')" width="100%"></Input>
                        </el-col>
                        <el-col :span="12">
                            <!-- 关键决策人 职位 -->
                            <!--<el-form-item :label="$t('project.keyJobTitle')" prop="keyJobTitle">-->
                            <!--    <el-input disabled v-model.trim="form.keyJobTitle" style="width: 25vw;"-->
                            <!--        :placeholder="$t('common.pleaseInput') + $t('project.keyJobTitle')"-->
                            <!--        maxlength="100"></el-input>-->
                            <!--</el-form-item>-->
                            <Input disabled prop="keyJobTitle" :label="$t('project.keyJobTitle')" width="100%"></Input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 关键决策人 电话 -->
                            <el-form-item :label="$t('project.keyContact')" prop="keyContact">
                                <el-input disabled v-model.trim="form.keyContact"
                                    :placeholder="$t('common.pleaseInput') + $t('project.keyContact')"
                                    maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- 关键决策人 邮箱 -->
                            <el-form-item :label="$t('project.keyEmail')" prop="keyEmail">
                                <el-input disabled v-model.trim="form.keyEmail"
                                    :placeholder="$t('common.pleaseInput') + $t('project.keyEmail')"
                                    maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 联系人 -->
                            <Input disabled prop="contactPerson" :label="$t('project.contactPerson')"
                                width="100%"></Input>
                        </el-col>
                        <el-col :span="12">
                            <!-- 职位 -->
                            <el-form-item :label="$t('project.jobTitle')" prop="jobTitle">
                                <el-input disabled v-model.trim="form.jobTitle"
                                    :placeholder="$t('common.pleaseInput') + $t('project.jobTitle')"
                                    maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 电话 -->
                            <el-form-item :label="$t('project.contact')" prop="contact">
                                <el-input disabled v-model.trim="form.contact" maxlength="100"
                                    minlength="5"
                                    :placeholder="$t('common.pleaseInput') + $t('project.contact')"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- 邮箱 -->
                            <el-form-item :label="$t('user.email')" prop="email">
                                <el-input disabled v-model.trim="form.email"
                                    :placeholder="$t('common.pleaseInput') + $t('user.email')"
                                    maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <!-- 负责人 -->
                            <Select disabled prop="owner" :data="ownerList" :label="$t('agent.head')" valueProp="userId"
                                labelProp="nickName"></Select>
                        </el-col>
                        <el-col :span="12">
                          <!-- 项目交期 -->
                          <el-form-item :label="$t('project.completionYear')" prop="completionYear">
                            <el-date-picker style="width: 100%" disabled v-model="form.completionYear" type="date"
                                            :placeholder="$t('common.pleaseSelect') + $t('project.completionYear')">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 解决方案 -->
                    <el-form-item :label="$t('project.solution')" prop="solution">
                        <el-input disabled v-model.trim="form.solution" type="textarea" style="width: 100%;"
                            :placeholder="$t('common.pleaseInput') + $t('project.solution')" maxlength="250"></el-input>
                    </el-form-item>
                    <!-- 特殊需求 -->
                    <el-form-item :label="$t('project.specialRemark')" prop="specialRemark">
                        <el-input disabled v-model.trim="form.specialRemark" type="textarea" style="width: 100%;"
                            :placeholder="$t('common.pleaseInput') + $t('project.specialRemark')"
                            maxlength="250"></el-input>
                    </el-form-item>
                    <!-- 备注 -->
                    <el-form-item :label="$t('common.remark')">
                        <el-input disabled v-model="form.remark" type="textarea" style="width: 100%;" maxlength="500"
                            show-word-limit :placeholder="$t('common.pleaseInput') + $t('common.remark')"></el-input>
                    </el-form-item>
                    <!-- 延期 -->
                    <el-form-item v-if="form.status == '09'" :label="$t('project.delayRemark')" prop="delayRemark">
                        <el-input disabled v-model="form.delayRemark" type="textarea" style="width: 100%;"></el-input>
                    </el-form-item>
                    <!-- 丢单 -->
                    <el-form-item v-if="form.status == '10'" :label="$t('project.loseRemark')" prop="loseRemark">
                        <el-input disabled v-model="form.loseRemark" type="textarea" style="width: 100%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 跟进记录 -->
            <div class="right-card">
              <!-- 快捷跟进 -->
              <!-- TODO 做个组件？-->
              <div v-if="canFollow()" v-hasPermi="['business:project:follow']">
                <div class="quick-follow-up">
                  <div class="title-row">
                    <div style="margin-bottom: 20px;">{{ $t('follow.fastTrack') }}</div>
                    <el-button type="primary" size="mini" @click="handleAddFollow">{{ $t('common.add') }}</el-button>
                  </div>
                  <el-form :model="fastFollowForm" label-position="top" ref="fastFollowForm">
                    <!--<el-row :gutter="20">-->
                    <!--  <el-col :span="6">-->
                    <!--    &lt;!&ndash; 跟进方式 &ndash;&gt;-->
                    <!--    <Select prop="followWay" :data="dict.type.crm_follow_way" :label="$t('follow.followWay')" required/>-->
                    <!--  </el-col>-->
                    <!--  <el-col :span="18">-->
                    <!--    &lt;!&ndash; 跟进内容及结果 &ndash;&gt;-->
                    <!--    <Input prop="followDesc" :label="$t('follow.followDesc')" width="100%" required/>-->
                    <!--  </el-col>-->
                    <!--</el-row>-->


                    <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 prop="contactPerson"  @change="contactPersonChange"
                                required />
                      </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%"/>
                  </el-form>
                </div>

                <!-- 华丽分割 -->
                <el-divider></el-divider>
              </div>


              <div class="follow-list">
                <div style="margin-bottom: 20px;">{{ $t('account.follow') }}</div>
                <el-table :data="followList" max-height="90%" border
                          :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
                  <el-table-column label="No" type="index" width="50" align="center" />
                  <!-- <el-table-column :label="$t('follow.followNo')" prop="followNo" width="200px"></el-table-column> -->
                  <el-table-column :label="$t('follow.followTime')" prop="followTime" width="150px">
                    <template slot-scope="{row}">
                      {{ getLocalTime(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 :label="$t('follow.followDesc')" prop="followDesc" show-overflow-tooltip></el-table-column>
                  <el-table-column fixed="right" :label="$t('common.operate')" width="100" align="center">
                    <template slot-scope="{ row }">
                      <el-button size="small" type="text" @click.native.prevent="handleViewFollow(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="getFollowList" />
              </div>

            </div>
        </div>
        <FollowDialog ref="followDialog"></FollowDialog>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import FollowDialog from "@/views/crmManagement/follow/FollowDialog";
import { getProject, updateProject } from '@/api/business/crm/project'
import { getAreaTree } from "@/api/common/common";
import { getAllNationList } from "@/api/user/country";
import { listAll } from "@/api/business/crm/account";
import { getRelatedContact } from "@/api/business/crm/contact";
import { addFollow, listByTypeAndBusinessId } from '@/api/business/crm/follow'
import { getOwnerList } from "@/api/system/user";
import { getLocalTime } from "@/utils/data/dataUtils"
import ProjectProgress from '@/views/crmManagement/project/ProjectProgress.vue'
import { isEmptyObject } from '@/utils/validate'

export default {
    dicts: ['project_flag', 'project_market', 'project_type', 'project_status', 'currency_type', 'lead_industry', 'crm_follow_way'],
    components: { ProjectProgress, Treeselect, FollowDialog },
    data() {
        return {
            projectId: null,
            form: {},
            accountList: [],
            leadList: [],
            countryList: [],
            areaTree: [],
            contactList: [],
            followList: [],
            ownerList: [],
            loading: false,
            followQueryParams: {
                pageNum: 1,
                pageSize: 10
            },
            followTotal: 0,

          fastFollowForm: {
            followType: '2',
            businessId: null,
            followWay: null,
            followDesc: null,
          }
        }
    },

    computed: {
    },
    async created() {
        this.language = this.$i18n.locale;
        this.projectId = this.$route.params && this.$route.params.projectId;
        this.loading = true;
        await this.getProject();
        await this.initData();
        this.getFollowList();
        this.loading = false;
    },
    methods: {
        getLocalTime,
        async getProject() {
            await getProject(this.projectId).then(response => {
                this.form = response.data;
                if (this.form.startTime && this.form.overTime) {
                    this.$set(this.form, 'period', [this.form.startTime, this.form.overTime]);
                } else {
                    this.$set(this.form, 'period', []);
                }
                this.getRelatedContact(this.form.accountId);
            });
        },
        async initData() {
            await Promise.all([
                this.getAccountList(),
                this.getCountryList(),
                this.getAreaTree(),
                this.getOwnerList()
            ]).then(([accountList, countryList, agentTree, ownerList]) => {
                this.accountList = accountList.map(item => {
                    return {
                        value: item.accountId,
                        label: item.accountNo + ": 【" + item.accountName + "】"
                    }
                });
                this.countryList = countryList.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
                    }
                });
                this.areaTree = agentTree;
                this.ownerList = ownerList;
            });
        },
        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;
        },
        /** 查询客户所有人列表 */
        getOwnerList() {
            return getOwnerList().then(response => {
                return response.data;
            })
        },
        /** 获取地区树 */
        getAreaTree() {
            return getAreaTree().then(response => {
                return response.data;
            });
        },
        /** 查询国家列表 */
        getCountryList() {
            return getAllNationList().then(response => {
                return response.data;
            })
        },
        /** 查询客户列表 */
        getAccountList() {
            return listAll().then(response => {
                return response.rows;
            })
        },
        /** 查询联系人列表 */
        getRelatedContact(accountId) {
            getRelatedContact({ accountId: accountId }).then(response => {
                this.contactList = response.rows.map(item => {
                    return {
                        value: item.contactId,
                        label: item.contactName,
                        phone: item.phone,
                    }
                })
              // 添加项目联系人
              if (this.form.contactPerson) {
                this.contactList.push({
                  value: this.form.contactPerson,
                  label: this.form.contactPerson,
                  phone: this.form.contact
                })
              }

            })
        },
        /** 查询跟进记录列表 */
        getFollowList() {
            this.followQueryParams.businessId = this.projectId;
            this.followQueryParams.followType = '2';
            listByTypeAndBusinessId(this.followQueryParams).then(response => {
                this.followList = response.rows;
                this.followTotal = response.total;
            })
        },
        cancel() {
            // this.$tab.closeOpenPage({ path: "/project" });
            this.$tab.closePage();
        },
        /** 查看跟进记录 */
        handleViewFollow(row) {
            let param = {
                flag: '3',
                followId: row.followId,
                leadId: null,
                accountId: null,
                projectId: this.projectId
            }
            this.$refs.followDialog.dialogItemInit(param);
        },

      // 确认进度
      async confirmProgress(val) {
        // const { projectId, updateTime, progress } = this.form
        // console.log('confirmProgress:', projectId, progress, val)
        this.form.progress = val
        // { projectId, progress: val, updateTime}
        try {
          // TODO 这个更新方法太重了，考虑重写一个接口轻量化更新
          const response = await updateProject(this.form)
          if (response.code === 200) {
            this.$modal.msgSuccess(this.$t('common.editSuccess'));
            this.$store.commit('refreshProject');
          } else {
            this.$modal.msgError(response.msg);
            this.getProject();
          }
        } catch (e) {
          this.getProject()
        }
      },

      goProjectView() {
        this.$tab.openPage(this.$t('account.view'), '/account-edit/index/' + this.form.accountId, { type: 'view' });

      },

      getProjectName() {
        return this.accountList.find(item => item.value === this.form.accountId)?.label || '-'
      },

      handleAddFollow() {
        // 校验成功发送请求
        this.$refs.fastFollowForm.validate(async valid => {
          if (valid) {
            this.fastFollowForm.businessId = this.form.projectId
            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.getFollowList();
            } else {
              this.$modal.msgError(response.msg);
            }

          }
        })
      },

      contactPersonChange(res) {
        console.log('contactPerson change:::', res)
        if (!isEmptyObject(res)) {
          // 因为后端的sql xml是这样写的。。。
          this.fastFollowForm.contactPerson = res.label
          this.fastFollowForm.contact = res.phone
          this.fastFollowForm.contactPersonName = res.label
        } else {
          // allow-create
          this.fastFollowForm.contactPerson = this.fastFollowForm.contactPerson || ''
          this.fastFollowForm.contactPersonName = this.fastFollowForm.contactPersonName || this.fastFollowForm.contactPerson

        }
      },
      /** 当前项目是否可以编辑 */
      canEdit() {
        if (!this.form.permissionChar) {
          return false;
        }

        let flag = true;
        let permissionArray = this.$store.state.user.permissionChar.split(',');
        let rowPermissionArray = this.form.permissionChar.split(',');
        for (let i = 0; i < rowPermissionArray.length; i++) {
          if (!permissionArray.includes(rowPermissionArray[i])) {
            flag = false;
            break;
          }
        }
        return flag;
      },
      canFollow() {
        return this.form.status != '01' && this.form.status != '02' && this.canEdit(this.form) &&  this.$store.getters.userId == this.form.owner
      },
    }
}
</script>

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

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

::v-deep .treeselect {
    .vue-treeselect__single-value {
        color: #C0C4CC;
    }

    .vue-treeselect__control {
        border-color: #E4E7ED;
        background-color: #F5F7FA;
    }
}

.content {
    width: 100%;
    padding: 16px 1vw;

    .cancel-btn {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;

        .project-title {
            font-size: 18px;
            font-weight: bold;
        }
    }

  .card-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    & > div {
    //  flex 高度撑满
      align-self: stretch;

    }

    .left-card {
      width: 57vw;
      background-color: white;
      padding: 20px 1vw;
      box-shadow: 0px 2px 10px 0px #CED6DD;
      border-radius: 6px;
    }

    .right-card {
      margin-left: 1vw;
      width: 42vw;
      background-color: white;
      padding: 20px;
      box-shadow: 0px 2px 10px 0px #CED6DD;
      border-radius: 6px;

      display: flex;
      flex-direction: column;

      .quick-follow-up {
        //height: 100px;

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

      .follow-list {
        flex: 1;
        //height: 100%;
        //background-color: red;
      }
    }
  }

}

::v-deep .disabled-box {
  background-color: #F5F7FA;

  border-radius: 4px;
  border: 1px solid #E4E7ED;
  box-sizing: border-box;

  outline: 0;
  padding: 0 15px;


  .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    //鼠标手
    cursor: pointer;
  }
}


</style>
