<template>
  <div class="common-wrap-cnt">
    <div class="header_top">
      <el-button type="primary" size="small" @click="goViewDetail">客户视图详情</el-button>
    </div>
    <div class="header">
      <div class="header_left">
        <img src="../../../../assets/images/profile.png" class="tp">
        <el-button type="primary" size="small" class="header_btn" disabled>营销建档</el-button>
        <el-button type="primary" size="small" class="header_btn" disabled>纠错</el-button>
      </div>
      <div class="header_right">
        <!-- 个人 -->
        <el-form ref="profileForm" :model="basePersonForm" v-if="this.detailType == '0'">
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="客户号：">
                <span>{{ basePersonForm.custId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户内码：">
                <span>{{ basePersonForm.custIsn }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名：">
                <span>{{ basePersonForm.custName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别：">
                <span>{{ basePersonForm.custGender }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="年龄：">
                <span>{{ basePersonForm.custAge }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历：">
                <span>{{ basePersonForm.custEdu }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证件号：">
                <span>{{ basePersonForm.custIdc }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号：">
                <span>{{ basePersonForm.custPhone }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="住宅地址：">
                <span :title="basePersonForm.custLocation" class="ccyc">{{ basePersonForm.custLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位地址：">
                <span :title="basePersonForm.jobLocation" class="ccyc">{{ basePersonForm.jobLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="户籍地址：">
                <span :title="basePersonForm.registerLocation" class="ccyc">{{ basePersonForm.registerLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="婚姻状况：">
                <span>{{ basePersonForm.isMarried }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="从事行业：">
                <span>{{ belongBusiStr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年收入：">
                <span>{{ basePersonForm.custSalary }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 商户 -->
        <el-form ref="profileForm" :model="baseCommerForm" v-if="this.detailType == '1'">
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="客户号：">
                <span>{{ baseCommerForm.custId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户内码：">
                <span>{{ baseCommerForm.custIsn }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户名称：">
                <span>{{ baseCommerForm.custName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营者姓名：">
                <span>{{ baseCommerForm.lpName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="性别：">
                <span>{{ baseCommerForm.custGender }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄：">
                <span>{{ baseCommerForm.custAge }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营状态：">
                <span v-if="baseCommerForm.status == '1'">正常</span>
                <span v-if="baseCommerForm.status == '2'">特殊</span>
                <span v-if="baseCommerForm.status == '3'">其他</span>
                <span v-if="baseCommerForm.status == '4'">黑名单客户</span>
                <span v-if="baseCommerForm.status == '5'">灰名单</span>
                <span v-if="baseCommerForm.status == '6'">未知</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营者手机号">
                <span>{{ baseCommerForm.custPhone }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="商户注册地址：">
                <span :title="baseCommerForm.registerLocation" class="ccyc">{{ baseCommerForm.registerLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户经营地址：">
                <span :title="baseCommerForm.custLocation" class="ccyc">{{ baseCommerForm.custLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="统信码：">
                <span>{{ baseCommerForm.socialCreditCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行业名称：">
                <span>{{ comIndustryStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="24">
              <el-form-item label="行业范围：">
                <span >{{ baseCommerForm.businessScope }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 企业 -->
        <el-form ref="profileForm" :model="baseFirmForm" v-if="this.detailType == '2'">
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="客户号：">
                <span>{{ baseFirmForm.custId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户内码：">
                <span>{{ baseFirmForm.custIsn }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称：">
                <span>{{ baseFirmForm.custName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="法人代表姓名：">
                <span>{{ baseFirmForm.lpName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="性别：">
                <span>{{ baseFirmForm.custGender }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄：">
                <span>{{ baseFirmForm.custAge }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营状态：">
                <span v-if="baseFirmForm.status == '1'">正常</span>
                <span v-if="baseFirmForm.status == '2'">特殊</span>
                <span v-if="baseFirmForm.status == '3'">其他</span>
                <span v-if="baseFirmForm.status == '4'">黑名单客户</span>
                <span v-if="baseFirmForm.status == '5'">灰名单</span>
                <span v-if="baseFirmForm.status == '6'">未知</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="法人代表手机号">
                <span>{{ baseFirmForm.custPhone }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="6">
              <el-form-item label="企业经营地址：">
                <span :title="baseFirmForm.custLocation" class="ccyc">{{ baseFirmForm.custLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业注册地址：">
                <span :title="baseFirmForm.registerLocation" class="ccyc">{{ baseFirmForm.registerLocation }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="统信码：">
                <span>{{ baseFirmForm.socialCreditCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行业名称：">
                <span>{{ firmIndustryStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="24">
              <el-form-item label="行业范围：">
                <span :title="baseFirmForm.businessScope" >{{ baseFirmForm.businessScope }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="走访记录" name="1">
          <el-timeline v-if="visitList.length > 0" style="margin-top: 30px">
            <el-timeline-item v-for="(item, index) in visitList" :key="index" :timestamp="item.date">
              <el-card>
                <h4>{{ }}</h4>
                <p>走访记录：{{ }}</p>
                <p>客户反馈：无反馈</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="走访上传" name="2"></el-tab-pane>
        <el-tab-pane label="走访营销办理" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="该客户尚未建档，请先进行营销建档" :visible.sync="filingVisible" width="25%" :before-close="handleClosefiling"
      class="filingDialog">
      <span slot="footer" class="person-footer">
        <el-button @click="handleClosefiling">取消</el-button>
        <el-button type="primary" @click="handlFilingCommit" class="commit_btn">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  customerDetail,
  merchantDetail,
  businessDetail
} from '@/api/system/checklist.js'
import { getIndustryTree } from '@/api/system/listByRetailKeywords.js'
import { Message } from 'element-ui'
import { getDetailRegion } from "@/api/grid/address/tree.js";
export default {
  data() {
    return {
      basePersonForm: {},
      custLocationNum: '',
      custLocationStr: '',
      perJobLocationNum: '',
      perJobLocationStr: '',
      registerLocationNum: '',
      registerLocationStr: '',
      belongBusiStr: '',
      comIndustryStr: '',
      firmIndustryStr: '',
      industryOptions: [],
      baseCommerForm: {},
      baseFirmForm: {},
      activeName: '1',
      visitList: [{ date: '2020-12-12' }, { date: '2020-12-16' }],
      detailType: '',
      id: '',
      filingVisible: false
    }
  },

  created() {
    this.detailType = this.$route.query.type
    if (this.detailType == '0') {
      this.initCustomerDetail()
      this.initPerIndustryTree()
    } else if (this.detailType == '1') {
      this.initMerchantDetail()
      this.initComIndustryTree()
    } else if (this.detailType == '2') {
      this.initBusinessDetail()
      this.initFirmIndustryTree()
    }
  },
  methods: {
    initPerIndustryTree() {
      getIndustryTree().then(res => {

        this.industryOptions = res.data.map(item => {
          return {
            value: item.code,
            label: item.name,
            children: item.industryTrees
          }
        })
        this.industryOptions.forEach(item => {
          item.children.forEach(el => {
            el.value = el.code
            el.label = el.name
          })
        })
        this.initBelongBusiStr(this.basePersonForm.belongBusi)

      })
    },
    initComIndustryTree() {
      getIndustryTree().then(res => {

        this.industryOptions = res.data.map(item => {
          return {
            value: item.code,
            label: item.name,
            children: item.industryTrees
          }
        })
        this.industryOptions.forEach(item => {
          item.children.forEach(el => {
            el.value = el.code
            el.label = el.name
          })
        })
        this.initcomIndustryStr(this.baseCommerForm.industry)

      })
    },
    initFirmIndustryTree() {
      getIndustryTree().then(res => {

        this.industryOptions = res.data.map(item => {
          return {
            value: item.code,
            label: item.name,
            children: item.industryTrees
          }
        })
        this.industryOptions.forEach(item => {
          item.children.forEach(el => {
            el.value = el.code
            el.label = el.name
          })
        })
        this.initFirmIndustryStr(this.baseFirmForm.industry)

      })
    },
    initCustomerDetail() {
      customerDetail(this.$route.query.custId).then(res => {
        console.log(res, 'ppppppppp')
        this.basePersonForm = res
        this.id = res.id
        if ((!this.basePersonForm.custIdc || this.basePersonForm.custIdc == '') && (!this.basePersonForm.custIsn || this.basePersonForm.custIsn == '')) {
          this.filingVisible = true
        } else {
          this.filingVisible = false
        }
        this.basePersonForm.belongBusi = res.belongBusi
      })
    },
    initPerCusAdress(data) {
      getDetailRegion({ code: data }).then(res => {
        if (res.code == 200) {
          this.custLocationStr = `${res.data.city}/${res.data.county}/${res.data.town}/${res.data.village}/${this.custLocationNum}`
        }
      })
    },
    initPerJobAdress(data) {
      getDetailRegion({ code: data }).then(res => {
        if (res.code == 200) {
          this.perJobLocationStr = `${res.data.city}/${res.data.county}/${res.data.town}/${res.data.village}/${this.perJobLocationNum}`
        }
      })
    },
    initPerRegAdress(data) {
      getDetailRegion({ code: data }).then(res => {
        if (res.code == 200) {
          this.registerLocationStr = `${res.data.city}/${res.data.county}/${res.data.town}/${res.data.village}/${this.registerLocationNum}`
        }
      })
    },
    initBelongBusiStr(data) {
      this.industryOptions.forEach(item => {
        if (item.value == data) {
          this.belongBusiStr = item.label
        } else {
          item.children.forEach(el => {
            if (el.value == data) {
              this.belongBusiStr = el.label
            }
          })
        }
      })
    },
    initMerchantDetail() {
      merchantDetail(this.$route.query.custId).then(res => {
        console.log(res, 'ppppppppp')
        this.baseCommerForm = res
        this.id = res.id
        if ((!this.baseCommerForm.socialCreditCode || this.baseCommerForm.socialCreditCode == '') && (!this.baseCommerForm.custIsn || this.baseCommerForm.custIsn == '')) {
          this.filingVisible = true
        } else {
          this.filingVisible = false
        }
        this.baseCommerForm.industry = res.industry
      })
    },
    initcomIndustryStr(data) {

      this.industryOptions.forEach(item => {
        if (item.value == data) {
          this.comIndustryStr = item.label
        } else {
          item.children.forEach(el => {
            if (el.value == data) {
              this.comIndustryStr = el.label
            }
          })
        }
      })
    },
    initBusinessDetail() {
      businessDetail(this.$route.query.custId).then(res => {
        console.log(res, 'ppppppppp')
        this.baseFirmForm = res
        this.id = res.id
        if ((!this.baseFirmForm.socialCreditCode || this.baseFirmForm.socialCreditCode == '') && (!this.baseFirmForm.custIsn || this.baseFirmForm.custIsn == '')) {
          this.filingVisible = true
        } else {
          this.filingVisible = false
        }
        this.baseFirmForm.industry = res.industry
      })
    },
    initFirmIndustryStr(data) {

      this.industryOptions.forEach(item => {
        if (item.value == data) {
          this.firmIndustryStr = item.label
        } else {
          item.children.forEach(el => {
            if (el.value == data) {
              this.firmIndustryStr = el.label
            }
          })
        }
      })
    },
    handleClosefiling() {
      this.filingVisible = false

    },
    handlFilingCommit() {
      this.$router.push(
        { path: '/individual' }
      )
    },
    goViewDetail() {

      if (this.detailType == '0') {
        if (!this.basePersonForm.custId || this.basePersonForm.custId == '') {
          Message.warning('当前用户未建档,无法跳转到客户详情')
        } else {
          this.$router.push({ path: '/360charts/indexcharts/', query: { id: this.id } })
        }
      } else if (this.detailType == '1') {
        if (!this.baseCommerForm.custId || this.baseCommerForm.custId == '') {
          Message.warning('当前用户未建档,无法跳转到客户详情')
        } else {
          this.$router.push({ path: '/360charts/commercial/', query: { id: this.id } })
        }

      } else if (this.detailType == '2') {
        if (!this.baseFirmForm.custId || this.baseFirmForm.custId == '') {
          Message.warning('当前用户未建档,无法跳转到客户详情')
        } else {
          this.$router.push({ path: '/360charts/firm/', query: { id: this.id } })
        }

      }
    }
  },
}
</script>
<style lang="scss" scoped>
.common-wrap-cnt {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  height: calc(100vh - 135px);
  overflow-y: auto;
  padding: 20px;
}

.header {
  display: flex;
}

.ccyc {
  display: inline-block;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header_top {
  text-align: right;
  margin: 0 20px 10px 0;
}

.header_left {
  display: flex;
  flex-direction: column;
  width: 15%;
  justify-content: center;
  align-items: center;
}

.tp {
  width: 64px;
  height: 64px;
}

.header_btn {
  margin-top: 15px;
}

.header_right {
  flex: 1;
}
</style>