<template>
  <div v-loading="pageLoading" class="app-container">
    <div class="title-row">
      <span class="title-row-text">{{ $t('lead.leadDetail') }}</span>
      <el-button icon="el-icon-arrow-left" plain size="mini" @click="handleClose">{{
          $t('common.back')
        }}
      </el-button>
    </div>
    <div class="el-container">
      <el-main>
        <el-row :gutter="20" class="el-main-container row-bg" justify="space-between" type="flex">

          <el-col ref="left" :span="14" class="left">
            <div class="box-card lead-info">
              <div class="card-title-wrapper pb16">
                <img alt="" class="item-size" src="@/assets/images/account-item.png">
                <div class="card-title">{{ $t('lead.baseInfo') }}</div>
              </div>
              <el-form ref="form" :model="form" label-position="top" label-width="100px">

                <el-row :gutter="24">
                    <!--优先级-->
                    <el-col :span="12">
                      <el-form-item :label="$t('lead.priority')" prop="priority">
                        <el-radio-group v-model="form.priority" disabled>
                          <el-radio v-for="item in dict.type.lead_priority" :key="item.value" :label="item.value">{{
                              item.label
                            }}
                          </el-radio>
                        </el-radio-group>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <!--负责人-->
                    <Input v-model="form.ownerName" :label="$t('lead.owner')" disabled prop="ownerName" width="100%"/>
                  </el-col>

                  <el-col :span="12">
                    <!--所属代理商-->
                    <Input v-model="form.ownerAgentName" :label="$t('lead.agent')" disabled prop="ownerAgentName" width="100%"/>
                  </el-col>
                </el-row>

                <el-row :gutter="24">
                  <el-col :span="12">
                    <!--公司名称-->
                    <Input v-model="form.company" :label="$t('lead.company')" disabled prop="company" width="100%"/>
                  </el-col>

                  <el-col :span="12">
                    <!--公司类型-->
                    <Select v-model="form.companyType" :data="dict.type.lead_company_type" :label="$t('lead.companyType')"
                            disabled prop="companyType" width="100%"/>
                  </el-col>
                </el-row>

                <el-row :gutter="24">
                  <el-col :span="12">
                    <!--归属集团-->
                    <Input v-model.trim="form.group" :label="$t('lead.group')" disabled prop="group" width="100%"/>
                  </el-col>

                  <el-col :span="12">
                    <!--公司背景-->
                    <Input v-model="form.background" :label="$t('lead.background')" disabled prop="background"
                           width="100%"/>

                  </el-col>
                </el-row>

                <!--区域、国家-->
                <el-row :gutter="24">
                  <el-col :span="12">

                    <el-form-item :label="$t('user.area')" prop="areaId">
                      <!-- 加 :flat="true" 是为了根节点设置 isDisabled 禁用时， 子节点可选-->
                      <treeselect v-model="form.areaId" :flat="true" :options="areaTree" :noResultsText="$t('common.noResultsText')"
                                  :placeholder="$t('user.placeholder_area')" disabled>
                        <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="12">

                    <Select v-model="form.countryId" :data="countryOptions" :label="$t('lead.country')" prop="countryId"
                            disabled :label-prop="'countryName' + localLabelSuffix" width="100%" value-prop="countryId" />
                  </el-col>
                </el-row>

                <!--城市、需求类型-->
                <el-row :gutter="24">
                  <el-col :span="12">
                    <Input v-model="form.city" :label="$t('project.city')" disabled prop="city"
                           width="100%"/>
                  </el-col>
                  <!--需求类型-->
                  <el-col :span="12">
                    <Select v-model="form.requirementType" :data="dict.type.lead_requirements" :label="$t('lead.requirements')"
                            disabled prop="requirementType" width="100%"/>
                  </el-col>
                </el-row>

                <!--来源、客户类型-->
                <el-row :gutter="24">
                  <el-col :span="12">
                    <Select v-model="form.origin" :data="dict.type.lead_source" :label="$t('lead.origin')"
                            disabled prop="origin" width="100%"/>
                  </el-col>
                  <el-col :span="12">

                    <Select v-model="form.type" :data="dict.type.account_type" :label="$t('lead.leadCustomerType')"
                            disabled prop="type" width="100%"/>
                  </el-col>
                </el-row>

                <el-row :gutter="24">
                  <el-col :span="12">
                    <!--联系人-->
                    <Input v-model="form.contactPerson" :label="$t('lead.contactPerson')" disabled prop="contactPerson"
                           width="100%"/>
                  </el-col>

                  <el-col :span="12">
                    <!--职位-->
                    <Input v-model="form.jobTitle" :label="$t('lead.position')" disabled prop="jobTitle" width="100%"/>

                  </el-col>
                </el-row>

                <el-row :gutter="24">
                  <el-col :span="12">
                    <!--联系电话-->
                    <Input v-model="form.contact" :label="$t('lead.contact')" disabled prop="contact" width="100%"/>
                  </el-col>

                  <el-col :span="12">
                    <!--邮箱-->
                    <Input v-model="form.email" :label="$t('lead.email')" disabled prop="email" width="100%"/>
                  </el-col>
                </el-row>

                <!--<el-row :gutter="24">
                  &lt;!&ndash;客户名称&ndash;&gt;
                  <el-col :span="12">
                    <Input v-model="form.accountName" :label="$t('lead.customerName')" disabled prop="accountName" width="100%"/>
                  </el-col>

                  &lt;!&ndash;跟进人&ndash;&gt;
                  <el-col :span="12">
                    <Input v-model="form.follower" :label="$t('lead.follower')" disabled prop="follower" width="100%"/>
                  </el-col>
                </el-row>-->

                <el-row :gutter="24">
                  <!--地址-->
                  <el-col :span="24">
                    <Input v-model="form.address" :label="$t('lead.address')" disabled prop="address" width="100%"/>
                  </el-col>

                </el-row>

                <el-row>
                  <!--询盘信息-->
                  <el-col :span="24">
                    <Input v-model="form.requirement" :label="$t('lead.inquiryInformation')" disabled prop="requirement"
                           type="textarea" width="100%"/>
                  </el-col>

                  <!--失效原因-->
                  <el-col :span="24">
                    <Input v-model="form.invalidReason" :label="$t('lead.invalidReason')" disabled prop="invalidReason"
                           type="textarea" width="100%"/>
                  </el-col>
                </el-row>

                <!--备注-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item :label="$t('common.remark')" prop="remark">
                      <el-input v-model="form.remark" :disabled="true"
                                type="textarea"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--附件-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item :label="$t('common.annex')">
                      <FileUpload v-model="form.annex" :isShowTip="false" disabled :buttonText="$t('common.uploadFile')"/>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>

            </div>
          </el-col>

          <el-col :span="10" :style="declareRightCardH" class="right">

            <el-row class="row-bg" type="flex">
              <el-col :span="24">
                <div class="box-card">
                  <div class="card-title-wrapper pb16">
                    <img alt="" class="item-size" src="@/assets/images/account-item.png">
                    <div class="card-title">{{ $t('lead.followRecord') }}</div>
                  </div>
                  <div class="lead-follow">
                    <el-table v-loading="loading" :data="followList" height="80%" stripe border="true"
                              style="width: 100%">
                      <el-table-column align="center" label="No" type="index" width="50"/>
                      <!-- <el-table-column :label="$t('follow.followNo')" align="center" prop="followNo"
                                       show-overflow-tooltip/> -->
                      <el-table-column :label="$t('follow.followTime')" align="center" prop="followTime"
                                       show-overflow-tooltip>
                        <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 prop="followDesc" :label="$t('account.followDesc')" show-overflow-tooltip
                                     ></el-table-column>
                      <el-table-column :label="$t('common.operate')" align="center" fixed="right" width="100px">
                        <template slot-scope="{ row }">
                          <el-button icon="el-icon-view" size="mini" type="text"
                                     @click="handleViewFollow(row)">{{ $t('common.view') }}
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <pagination
                      v-show="total>0" :auto-scroll="false"
                      :limit.sync="queryParams.pageSize"
                      :page.sync="queryParams.pageNum"
                      :pager-count="5"
                      :total="total"
                      hide-on-single-page
                      @pagination="getFollowList"
                    />
                  </div>


                </div>
              </el-col>
            </el-row>


            <el-row class="row-bg" type="flex">
              <el-col :span="24">
                <div class="box-card">
                  <div class="card-title-wrapper pb16">
                    <img alt="" class="item-size" src="@/assets/images/account-item.png">
                    <div class="card-title">{{ $t('lead.history') }}</div>
                  </div>

                  <div class="lead-his">
                    <el-table :data="historyList" height="90%" stripe style="width: 100%"  border="true">
                      <el-table-column align="center" label="No" show-overflow-tooltip type="index" width="50"/>
                      <el-table-column :label="$t('common.date')" align="center" prop="createTime" width="150px">
                        <template slot-scope="{row}">
                          {{ getLocalTime(row.createTime, 'YYYY-MM-DD') }}
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('lead.history')" prop="hisContent" show-overflow-tooltip/>
                    </el-table>
                  </div>

                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-main>

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

<script>

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getFollowRecord, getHistoryByLeadId, getLead} from "@/api/business/crm/lead";
import ImageUpload from "@/components/ImageUpload/index.vue";
import {getAreaTree, getCountryByAreaId} from "@/api/common/common";
import {getLocalTime} from "@/utils/data/dataUtils"
import FollowDialog from "@/views/crmManagement/follow/FollowDialog.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import FileUpload from "@/components/FileUpload";

export default {
  name: "LeadView",
  components: {SvgIcon, FollowDialog, Treeselect, ImageUpload, FileUpload},
  dicts: ['lead_priority', 'lead_source', 'account_type', 'lead_industry',
    'crm_follow_way', 'company_type', 'lead_requirements','lead_company_type'],
  data() {
    return {
      pageLoading: false,
      areaTree: [],

      countryOptions: [],

      // 基础信息
      form: {
        annex: [],
      },

      // 跟进记录
      followList: [],

      // 履历
      historyList: [],

      limitPic: 0,

      follow: {},

      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        followType: '0',
        businessId: null
      },

      rightTableH: 0,
    };
  },
  created() {
    this.getAreaTree();
    const leadId = this.$route.params && this.$route.params.leadId;
    this.queryParams.businessId = leadId;
    this.getLeadInfo(leadId);
    this.getFollowList(leadId);
    this.getHistoryByLeadId(leadId);
  },

  updated() {
    this.$nextTick(() => {
      this.computeRightTableH();
    })
  },

  mounted() {
    // 并且监听高度变化后，重新获取高度
    window.addEventListener('resize', () => {
      this.computeRightTableH();
      // console.log('rightTableHResize', this.rightTableH)
    })
    // console.log('rightTableH', this.rightTableH)
  },

  computed: {
    declareRightCardH() {
      // 使用css 变量
      return `--rightTableH: ${this.rightTableH}`
    },

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

  },

  watch: {},

  methods: {
    computeRightTableH() {
      // 获取 class=left 的高度
      const leftHeight = document.querySelector('.left').offsetHeight;
      const titleH = document.querySelector('.card-title-wrapper').offsetHeight;
      // console.log('leftHeight', leftHeight)
      // console.log('titleH', titleH)

      // 24 是UI规定的间距 ; 40 card的padding
      this.rightTableH = (((leftHeight - 24) / 2) - titleH - 40) + 'px'
    },

    getLocalTime,

    async getLeadInfo(leadId) {
      this.reset();
      this.pageLoading = true;

      try {
        const response = await getLead(leadId);
        await this.getCountryByAreaId(response.data.areaId);

        this.form = response.data;
        this.limitPic = response.data?.tbFiles?.length || 0

      } finally {
        this.pageLoading = false;
      }
    },

    async getFollowList(leadId) {
      // const response = await getFollowRecord(leadId);
      // this.followList = response.data;
      this.loading = true;
      try {
        const response = await getFollowRecord(this.queryParams);
        this.followList = response.rows;
        this.total = response.total;
      } finally {
        this.loading = false;
      }
    },

    async getHistoryByLeadId(leadId) {
      const response = await getHistoryByLeadId(leadId);
      this.historyList = response.data;
    },


    // 查看跟进记录明细
    handleViewFollow(row) {
      let param = {
        flag: '3',
        followId: row.followId,
        leadId: null,
        accountId: null,
        projectId: this.projectId
      }
      this.$refs.followDialog.dialogItemInit(param);
    },


    // 获取地区树
    getAreaTree() {
      getAreaTree().then(response => {
        this.areaTree = response.data;
        // console.log('allAreaList', this.areaTree)
      });
    },

    // 根据地区选择国家
    async getCountryByAreaId(areaId) {
      const response = await getCountryByAreaId(areaId);
      this.countryOptions = response.data;
    },

    handleClose() {
      // const obj = {path: "/lead"};
      // this.$tab.closeOpenPage(obj);
      // this.$tab.closeAndReturn();
      this.$tab.closePage();
    },


    // 表单重置
    reset() {
      this.form = {
        leadId: null,
        leadNo: null,
        countryId: null,
        areaId: null,
        origin: null,
        contactPerson: null,
        contact: null,
        email: null,
        sector: null,
        address: null,
        company: null,
        requirement: null,
        priority: null,
        status: null,
        owner: null,
        leadTime: null,
        type: null,
        relativeAccount: null,
        relativeProject: null,
        relativeContract: null,
        unvalidReason: null,
        delFlag: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: null
      };
      this.resetForm("form");
    },

    getDictLabel(dictType, value) {
      return this.dict.type[dictType].find(item => item.value === value)?.label;
    }
  }
};
</script>


<style lang="scss" scoped>
.app-container {
  //padding: 0;
  padding: 0 0 24px 0;
  display: flex;
  flex-direction: column;
}

.title-row {
  margin: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

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

.el-header, .el-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}


.el-main {
  color: #333;
  padding: 0 24px;

  .el-main-container {
    height: 100%;

    .box-card {
      padding: 20px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      width: 100%;
      //height: var(--rightTableH);
    }

    .row-bg {
      background-color: #f9fafc;
    }

    .left {
      .lead-info {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .lead-follow {
        height: var(--rightTableH);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .lead-his {
        height: var(--rightTableH);
      }
    }
  }
}


body > .el-container {
  margin-bottom: 60px;
}

.w-100 {
  width: 100%;
}

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 5px;
}

.el-descriptions {
  font-size: 1.25rem;
}

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

.pb16 {
  padding-bottom: 16px;
}

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

.el-empty {
  padding: 0;
}

.empty-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 146px;
  height: 146px;
  background-color: #FAFBFF;
  border-radius: 10px;
  border: 1px solid #E4E7ED;

  .svg-wufujian {
    font-size: 50px;
  }
}


</style>
