<template>
  <slide-view v-empty="!canShowDetail"
              :listenerIDs="listenerIDs"
              :noListenerIDs="noListenerIDs"
              :noListenerClass="noListenerClass"
              @side-close="hideView"
              :body-style="{padding: 0, height: '100%'}">
    <flexbox v-if="canShowDetail"
             v-loading="loading"
             xs-empty-icon="nopermission"
             xs-empty-text="暂无权限"
             direction="column"
             align="stretch"
             class="d-container">
      <c-r-m-detail-head crmType="business"
                         @handle="detailHeadHandle"
                         @close="hideView"
                         :detail="detailData"
                         :headDetails="headDetails"
                         :id="id">
        <div class="busi-line"></div>
      </c-r-m-detail-head>
      <div style="padding:10px 50px;"
           v-if="status.length > 0">
        <flexbox class="busi-state"
                 :style="{'opacity' : detailData.is_end != 0 ? 1 : 1}">
          <a v-for="(item, index) in status"
             :key="index">
            <el-popover placement="bottom"
                        :title="item.name"
                        width="150"
                        trigger="hover"
                        :content="'赢单率' + item.rate + '%'">
              <div v-if="status.length -1 !=index"
                   slot="reference"
                   class="busi-state-item"
                   @click="handleStatuChange(item, index)"
                   :class="item.class">
                {{item.name}}
                <div v-if="index==0"
                     class="state-circle circle-left"></div>
                <div v-if="index!=0"
                     class="state-arrow arrow-left"></div>
                <div class="state-arrow arrow-right"></div>
              </div>
            </el-popover>

            <el-popover v-if="status.length -1 ==index"
                        placement="bottom"
                        :title="item.type == 0 ? '' : item.title"
                        :content="item.type == 0 ? '' : item.detail"
                        width="150"
                        trigger="hover">
              <div class="state-handel-cont"
                   v-if="item.type == 0">
                <flexbox class="state-handel-item"
                         v-for="(item, index) in statuHandleItems"
                         :key="index"
                         @click.native="handleStatuResult(item, index)">
                  <img class="state-handel-item-img"
                       :src="item.img">
                  <div class="state-handel-item-name">{{item.name}}</div>
                  <div class="state-handel-item-value">{{item.value}}</div>
                </flexbox>
              </div>
              <div slot="reference"
                   class="busi-state-item"
                   :class="item.class">
                <i :class="item.overIcon"
                   style="margin-right:8px;"></i>
                {{item.name}}
                <div class="state-arrow arrow-left"></div>
                <div class="state-circle circle-right"></div>
              </div>
            </el-popover>
          </a>
        </flexbox>

      </div>
      <div class="tabs">
        <el-tabs v-model="tabCurrentName"
                 @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in tabnames"
                       :key="index"
                       :label="item.label"
                       :name="item.name"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="t-loading-content"
           id="follow-log-content">
        <keep-alive>
          <component v-bind:is="tabName"
                     crmType="business"
                     :detail="detailData"
                     :id="id"></component>
        </keep-alive>
      </div>
    </flexbox>
    <c-r-m-create-view v-if="isCreate"
                       crm-type="business"
                       :action="{type: 'update', id: this.id}"
                       @save-success="editSaveSuccess"
                       @hiden-view="isCreate=false"></c-r-m-create-view>
  </slide-view>
</template>

<script>
import {
  crmBusinessRead,
  crmBusinessAdvance
} from '@/api/customermanagement/business'

import SlideView from '@/components/SlideView'
import CRMDetailHead from '../components/CRMDetailHead'
import BusinessFollow from './components/BusinessFollow' // 跟进记录
import CRMBaseInfo from '../components/CRMBaseInfo' // 商机基本信息
import RelativeContract from '../components/RelativeContract' // 相关合同
import RelativeContacts from '../components/RelativeContacts' // 相关联系人
import RelativeHandle from '../components/RelativeHandle' //相关操作
import RelativeTeam from '../components/RelativeTeam' //相关团队
import RelativeProduct from '../components/RelativeProduct' //相关团队
import RelativeFiles from '../components/RelativeFiles' //相关附件

import CRMCreateView from '../components/CRMCreateView' // 新建页面

import moment from 'moment'
import detail from '../mixins/detail'

export default {
  /** 客户管理 的 商机详情 */
  name: 'business-detail',
  components: {
    SlideView,
    CRMDetailHead,
    BusinessFollow,
    CRMBaseInfo,
    RelativeContract,
    RelativeContacts,
    RelativeHandle,
    RelativeTeam,
    RelativeProduct,
    RelativeFiles,
    CRMCreateView
  },
  mixins: [detail],
  props: {
    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    }
  },
  data() {
    return {
      loading: false, // 展示加载loading
      crmType: 'business',
      detailData: {}, // read 详情
      headDetails: [
        { title: '客户名称', value: '' },
        { title: '商机金额（元）', value: '' },
        { title: '商机状态', value: '' },
        { title: '负责人', value: '' },
        { title: '创建时间', value: '' }
      ],
      tabCurrentName: 'followlog',
      /** 商机状态数据 */
      status: [],
      /** 完结状态 */
      statuHandleItems: [
        {
          name: '赢单',
          type: 1,
          value: '100%',
          img: require('@/assets/img/check_suc.png')
        },
        {
          name: '输单',
          type: 2,
          value: '0%',
          img: require('@/assets/img/check_fail.png')
        },
        {
          name: '无效',
          type: 3,
          value: '0%',
          img: require('@/assets/img/check_cancel.png')
        }
      ],
      isCreate: false // 编辑操作
    }
  },
  computed: {
    tabName() {
      if (this.tabCurrentName == 'followlog') {
        return 'business-follow'
      } else if (this.tabCurrentName == 'basicinfo') {
        return 'c-r-m-base-info'
      } else if (this.tabCurrentName == 'team') {
        return 'relative-team'
      } else if (this.tabCurrentName == 'contract') {
        return 'relative-contract'
      } else if (this.tabCurrentName == 'operationlog') {
        return 'relative-handle'
      } else if (this.tabCurrentName == 'product') {
        return 'relative-product'
      } else if (this.tabCurrentName == 'file') {
        return 'relative-files'
      } else if (this.tabCurrentName == 'contacts') {
        return 'relative-contacts'
      }
      return ''
    },
    tabnames() {
      var tempsTabs = []
      tempsTabs.push({ label: '跟进记录', name: 'followlog' })
      if (this.crm.business && this.crm.business.read) {
        tempsTabs.push({ label: '基本信息', name: 'basicinfo' })
      }

      if (this.crm.contacts && this.crm.contacts.index) {
        tempsTabs.push({ label: '联系人', name: 'contacts' })
      }

      if (this.crm.contract && this.crm.contract.index) {
        tempsTabs.push({ label: '合同', name: 'contract' })
      }

      if (this.crm.product && this.crm.product.index) {
        tempsTabs.push({ label: '产品', name: 'product' })
      }

      tempsTabs.push({ label: '相关团队', name: 'team' })
      tempsTabs.push({ label: '附件', name: 'file' })
      tempsTabs.push({ label: '操作记录', name: 'operationlog' })
      return tempsTabs
    }
  },
  mounted() {},
  methods: {
    getDetial() {
      this.loading = true
      crmBusinessRead({
        id: this.id
      })
        .then(res => {
          this.loading = false
          this.detailData = res.data
          this.handleBusinessStatus(res.data)

          this.headDetails[0].value = res.data.customer_id_info
            ? res.data.customer_id_info.name
            : ''

          this.headDetails[1].value = res.data.money
          this.headDetails[2].value = res.data.status_id_info
          // // 负责人
          this.headDetails[3].value = res.data.owner_user_id_info
            ? res.data.owner_user_id_info.realname
            : ''
          this.headDetails[4].value = res.data.update_time
        })
        .catch(() => {
          this.loading = false
        })
    },
    //** 点击关闭按钮隐藏视图 */
    hideView() {
      this.$emit('hide-view')
    },
    //** tab标签点击 */
    handleClick(tab, event) {},
    /** 处理商机状态数据 */
    handleBusinessStatus(data) {
      this.status = []
      var statusList = data.status_list.status
      var status_id = data.status_id
      if (statusList) {
        var isdoing = false
        var isdoingIndex = 0
        for (let index = 0; index < statusList.length; index++) {
          const item = statusList[index]
          if (status_id == 0) {
            // 没有阶段一般不会有
            if (data.is_end != 0) {
              // 状态已完成 展示灰色效果
              if (data.is_end == 1) {
                //赢单
                item['class'] = 'state-suc'
              } else {
                item['class'] = 'state-invalid'
              }
            } else {
              item['class'] = 'state-undo'
            }
          } else if (item.status_id == status_id) {
            item['class'] = 'state-suc'
            item['isdoing'] = true
            isdoing = true
            isdoingIndex = index
          } else {
            if (isdoing) {
              if (data.is_end != 0) {
                // 状态已完成 展示灰色效果
                if (data.is_end == 1) {
                  //赢单
                  item['class'] = 'state-suc'
                } else {
                  item['class'] = 'state-invalid'
                }
              } else {
                item['class'] = 'state-undo'
              }
            } else {
              item['class'] = 'state-suc'
            }
          }
          this.status.push(item)
        }

        var overItem = { type: data.is_end }
        if (data.is_end == 0) {
          overItem.name = '结束'
          overItem['overIcon'] = ['el-icon-arrow-down', 'el-icon--right']
          if (isdoingIndex == statusList.length - 1) {
            overItem['class'] = 'state-doing'
          } else {
            if (this.status.length > 0 && status_id != 0) {
              // 有推进状态 才会有下一阶段
              this.status[isdoingIndex + 1].class = 'state-doing'
            }
            overItem['class'] = 'state-undo'
          }
        } else if (data.is_end == 1) {
          overItem.name = '赢单'
          overItem.title = '赢单' // 详情标题 和 内容
          overItem.detail = '赢单率100%'
          overItem['overIcon'] = ['el-icon-check', 'el-icon--right']
          overItem['class'] = 'state-suc'
        } else if (data.is_end == 2) {
          overItem.name = '输单'
          overItem.title = '赢单率0%'
          overItem.detail = data.remark
          overItem['overIcon'] = ['el-icon-circle-close', 'el-icon--right']
          overItem['class'] = 'state-fail'
        } else if (data.is_end == 3) {
          overItem.name = '无效'
          overItem.title = '赢单率0%'
          overItem.detail = data.remark
          overItem['overIcon'] = ['el-icon-remove-outline', 'el-icon--right']
          overItem['class'] = 'state-invalid'
        }
        this.status.push(overItem)
      }
    },
    /** 操作状态改变 */
    handleStatuChange(item, index) {
      if (this.detailData.is_end != 0) {
        // 非完结状态下 可推进
        return
      }
      if (!item.isdoing) {
        var message = '确定进入' + item.name + '阶段'
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.loading = true
            crmBusinessAdvance({
              business_id: this.id,
              status_id: item.status_id
            })
              .then(res => {
                this.loading = false
                this.$message.success(res.data)
                this.getDetial()
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
    },
    /** 完结状态结果 */
    handleStatuResult(item, index) {
      if (this.detailData.is_end != 0) {
        // 非完结状态下 可推进
        return
      }
      /** 输单 和 无效 */
      if (item.type == 2 || item.type == 3) {
        var message = '请填写' + item.name + '原因：'
        var title = item.name + '原因'
        this.$prompt(message, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({ value }) => {
            this.loading = true
            crmBusinessAdvance({
              business_id: this.id,
              status_id: item.status_id,
              is_end: item.type,
              remark: value
            })
              .then(res => {
                this.loading = false
                this.$message.success(res.data)
                this.getDetial()
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            })
          })
      } else {
        var message = '确定将当前商机设为' + item.name + '吗?'
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.loading = true
            crmBusinessAdvance({
              business_id: this.id,
              status_id: item.status_id,
              is_end: item.type
            })
              .then(res => {
                this.loading = false
                this.$message.success(res.data)
                this.getDetial()
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
    },
    editSaveSuccess() {
      this.$emit('handle', { type: 'save-success' })
      this.getDetial()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/crmdetail.scss';
.busi-line {
  position: absolute;
  bottom: 0;
  left: 17px;
  right: 17px;
  height: 1px;
  background-color: #e6e6e6;
}

.busi-state {
  position: relative;
  padding-left: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  a {
    flex-shrink: 0;
  }
}

.busi-state-item {
  padding: 10px 30px;
  margin: 5px 0;
  height: 38px;
  position: relative;
  margin-right: 5px;
  border-top: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  .state-circle {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background-color: white;
    transform: rotate(45deg);
    position: absolute;
    z-index: -1;
  }
  .state-arrow {
    width: 38px;
    height: 38px;
    transform: scale(0.707) rotate(45deg);
    border-top: 2px solid #ebebeb;
    border-right: 2px solid #ebebeb;
    background-color: white;
    position: absolute;
  }
}

.state-undo {
  border-top: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  background-color: white;
  color: #666;
  .state-circle {
    border-color: #ebebeb;
    background-color: white;
  }
  .state-arrow {
    border-color: #ebebeb;
    background-color: white;
  }
}

.state-doing {
  border-top: 2px solid #34cecf;
  border-bottom: 2px solid #34cecf;
  background-color: white;
  color: #34cecf;
  .circle-left {
    border-color: #34cecf;
    background-color: white;
  }
  .circle-right {
    border-color: #34cecf;
    background-color: white;
  }
  .arrow-left {
    border-color: #34cecf;
    background-color: white;
  }
  .arrow-right {
    border-color: #34cecf;
    background-color: white;
  }
}

.state-suc {
  border-top: 2px solid #34cecf;
  border-bottom: 2px solid #34cecf;
  background-color: #34cecf;
  color: white;
  .circle-left {
    border-color: #34cecf;
    background-color: #34cecf;
  }
  .circle-right {
    border-color: #34cecf;
    background-color: #34cecf;
  }
  .arrow-left {
    border-color: #34cecf;
    background-color: white;
  }
  .arrow-right {
    border-color: #34cecf;
    background-color: #34cecf;
  }
}

.state-fail {
  border-top: 2px solid #ff6767;
  border-bottom: 2px solid #ff6767;
  background-color: #ff6767;
  color: white;
  .circle-left {
    border-color: #ff6767;
    background-color: #ff6767;
  }
  .circle-right {
    border-color: #ff6767;
    background-color: #ff6767;
  }
  .arrow-left {
    border-color: #ff6767;
    background-color: white;
  }
  .arrow-right {
    border-color: #ff6767;
    background-color: #ff6767;
  }
}

.state-invalid {
  border-top: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  background-color: #ebebeb;
  color: #666;
  .state-circle {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }
  .state-arrow {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }

  .circle-left {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }
  .circle-right {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }
  .arrow-left {
    border-color: #ebebeb;
    background-color: white;
  }
  .arrow-right {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }
}

.arrow-right {
  z-index: 1;
  top: -2px;
  right: -19px;
}
.arrow-left {
  top: -2px;
  left: -18px;
}
.circle-right {
  border-top: 2px solid #ebebeb;
  border-right: 2px solid #ebebeb;
  z-index: 1;
  top: -2px;
  right: -15.5px;
}
.circle-left {
  border-left: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  top: -2px;
  left: -17px;
}

/** 状态操作布局 */
.state-handel-cont {
  font-size: 13px;
  color: #333;
  .state-handel-item {
    padding: 10px 0;
    cursor: pointer;
    .state-handel-item-img {
      width: 16px;
      height: 16px;
      border-radius: 8px;
      margin-right: 8px;
      flex-shrink: 0;
      display: block;
    }
    .state-handel-item-name {
      flex: 1;
    }
    .state-handel-item-value {
      flex-shrink: 0;
    }
  }
  .state-handel-item:hover {
    background-color: #f7f8fa;
  }
}
</style>
