<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-26 09:30:47
 * @LastEditors: wanglj
 * @LastEditTime: 2022-12-28 16:28:54
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\customer\detail.vue
-->
<template>
  <div class="detail">
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="title">
          <p>客户</p>
          <h3>
            {{detail.custName}}
            <span>
              <template v-if="private == 1">
                <el-button size="mini"
                           @click="handleShift">转移客户</el-button>
                <el-button size="mini"
                           @click="handleToOpen">移入公海</el-button>
                <el-button size="mini">创建项目</el-button>
              </template>
              <template v-else>
                <el-button size="mini"
                           @click="handleReceive">领取客户</el-button>
                <el-button size="mini"
                           @click="$refs.allocate.visible = true">分配客户</el-button>
              </template>
            </span>
          </h3>
        </div>
        <header>
          <el-descriptions :column="6"
                           direction="vertical"
                           :colon="false">
            <el-descriptions-item label="客户编码"
                                  label-class-name="my-label"
                                  content-class-name="my-content">{{detail.custCode}}</el-descriptions-item>
            <el-descriptions-item label="助记名"
                                  label-class-name="my-label"
                                  content-class-name="my-content">{{detail.abbrName}}</el-descriptions-item>
            <el-descriptions-item label="客户级别"
                                  label-class-name="my-label"
                                  content-class-name="my-content">{{detail.custLevel}}</el-descriptions-item>
            <el-descriptions-item label="客户行业"
                                  label-class-name="my-label"
                                  content-class-name="my-content">{{detail.custIndustry}}</el-descriptions-item>
            <el-descriptions-item label="客户状态"
                                  label-class-name="my-label"
                                  content-class-name="my-content">{{detail.custStatus == 10 ? '正常' : '异常'}}</el-descriptions-item>
            <el-descriptions-item label="最后跟进时间"
                                  label-class-name="my-label"
                                  content-class-name="my-content">{{detail.followUpDate}}</el-descriptions-item>
          </el-descriptions>
        </header>
        <el-tabs v-model="activeName"
                 @tab-click="handleClick">
          <el-tab-pane label="详细信息"
                       name="first">详细信息</el-tab-pane>
          <el-tab-pane label="联系人"
                       name="second">
            <vab-query-form>
              <vab-query-form-left-panel :span="12">
                <el-input placeholder="请输入单据名称/编号"
                          prefix-icon="el-icon-search"
                          style="width:50%"></el-input>
              </vab-query-form-left-panel>
              <vab-query-form-right-panel :span="12">
                <el-button icon="el-icon-plus"
                           @click="addContact">
                  新建联系人
                </el-button>
              </vab-query-form-right-panel>
            </vab-query-form>
            <el-table v-loading="listLoading"
                      :data="contactList"
                      border
                      height="calc(100% - 42px)"
                      @selection-change="setSelectRows">
              <el-table-column type="selection"
                               align="center" />
              <el-table-column align="center"
                               label="姓名"
                               prop="cuctName"></el-table-column>
              <el-table-column align="center"
                               label="岗位"
                               prop="postion"></el-table-column>
              <el-table-column align="center"
                               label="电话"
                               prop="telephone"></el-table-column>
              <el-table-column align="center"
                               label="微信"
                               prop="wechat"></el-table-column>
              <el-table-column align="center"
                               label="邮箱"
                               prop="email"></el-table-column>
              <el-table-column align="center"
                               label="是否决策人">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.policy"
                             disabled
                             :active-value="1"
                             :inactive-value="0"></el-switch>
                </template>
              </el-table-column>
              <el-table-column align="center"
                               label="操作">
                <template slot-scope="scope">
                  <el-button type="text"
                             @click="contactEdit(scope.row)">编辑</el-button>
                  <el-button type="text"
                             @click="contactDel(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="项目记录"
                       name="third">项目记录</el-tab-pane>
          <el-tab-pane label="合同记录"
                       name="fourth">合同记录</el-tab-pane>
          <el-tab-pane label="工单记录"
                       name="fifth">工单记录</el-tab-pane>
          <el-tab-pane label="归属记录"
                       name="sixth">
            <el-table v-loading="listLoading"
                      :data="belongs"
                      border
                      height="calc(100% - 42px)">
              <el-table-column align="center"
                               label="归属销售"
                               prop="saleName"></el-table-column>
              <el-table-column align="center"
                               label="原来归属"
                               prop="origSaleName"></el-table-column>
              <el-table-column align="center"
                               label="操作方式"
                               prop="opnType">
                <template slot-scope="scope">
                  {{scope.row.opnType == 10 ? '分配' : '转移'}}
                </template>
              </el-table-column>
              <el-table-column align="center"
                               label="操作人"
                               prop="opnPeople"></el-table-column>
              <el-table-column align="center"
                               label="操作时间"
                               prop="opnDatetime"></el-table-column>
              <el-table-column align="center"
                               label="备注"
                               prop="remark">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="8">
        <div class="buttons">
          <el-button type="primary"
                     @click="handleEdit">编辑</el-button>
          <el-button @click="handleDelete">删除</el-button>
        </div>
        <ul class="records">
          <li v-for="(value, key) in records"
              :key="key">
            <div class="date">
              <h2>{{key.split('-')[2]}}</h2>
              <h3>{{key.split('-').splice(0, 2).join('.')}}</h3>
            </div>
            <ul class="content">
              <li v-for="item in records[key]">
                <!-- <el-avatar class="user-avatar"
                           :src="avatar" /> -->
                <vab-icon class="user-avatar"
                          icon="account-circle-fill" />
                <div class="text">
                  <p class="action">{{item.opnPeople}} {{item.opnType}}</p>
                  <p>{{item.opnDate}}</p>
                  <p v-if="item.opnContent.custName">客户名称：<span>{{item.opnContent.custName}}</span></p>
                  <template v-else-if="item.opnContent.cuctName">
                    <p>联系人名称：<span>{{item.opnContent.cuctName}}</span></p>
                    <p>职务：{{item.opnContent.postion}}</p>
                    <p>手机：{{item.opnContent.telephone}}</p>
                  </template>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </el-col>
    </el-row>
    <Contact ref="contact"
             @contactSave="contactSave"></Contact>
    <Edit ref="edit"
          @customerSave="customerSave"></Edit>
    <!-- 分配客户 -->
    <Allocate ref="allocate"></Allocate>
    <!-- 转移客户 -->
    <Shift ref="shift"></Shift>
    <!-- 移入公海 -->
    <ToOpen ref="toOpen"
            @refresh="back"></ToOpen>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from '@/api/customer'
import to from 'await-to-js'
import Contact from './components/Contact'
import Edit from './components/Edit'
import Allocate from './components/Allocate'
import Shift from './components/Shift'
import ToOpen from './components/ToOpen'
export default {
  data () {
    return {
      id: '',
      private: '',
      detail: {
        custCode: '',//客户编码
        abbrName: '',//助记名
        level: '', //客户级别
        indusTry: '',//客户行业
        custStatus: '',//客户状态
        followUpDate: ''//最后跟进时间
      },
      activeName: 'first',
      listLoading: false,
      contactList: [],
      selectRows: [],
      records: [],//操作记录
      belongs: []
    }
  },
  components: {
    Edit,
    Contact,
    Allocate,
    Shift,
    ToOpen
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username',
    }),
  },
  mounted () {
    this.id = this.$route.query.id
    this.private = this.$route.query.private
    this.init()
    this.getDynamics()
  },
  methods: {
    async init () {
      const [err, res] = await to(api.getDetail({ ids: [parseInt(this.id)] }))
      if (err) return
      if (res.data.list[0]) this.detail = res.data.list[0]
    },
    async getDynamics () {
      const [err, res] = await to(api.dynamicsList({ custId: parseInt(this.id) }))
      if (err) return
      if (res.data.list[0]) {
        let obj = res.data.list[0]
        for (const key in obj) {
          for (const item of obj[key]) {
            item.opnContent = JSON.parse(item.opnContent)
          }
        }
        this.records = obj
      }
    },
    setSelectRows (val) {
      this.selectRows = val
    },
    async handleClick (tab) {
      let err, res
      if (tab.name == 'second') {
        [err, res] = await to(api.getContact({ custId: parseInt(this.id) }))
        if (err) return
        this.contactList = res.data.list || []
      } else if (tab.name == 'sixth' && this.belongs.length == 0) {
        [err, res] = await to(api.getBelongs({ Id: parseInt(this.id) }))
        if (err) return
        this.belongs = res.data.list || []
      }
    },
    // 添加联系人
    addContact () {
      this.$refs.contact.contactForm.custId = this.detail.id
      this.$refs.contact.contactForm.custName = this.detail.custName
      this.$refs.contact.contactVisible = true
    },
    // 保存联系人
    contactSave () {
      this.handleClick({ name: 'second' })
      this.getDynamics()
    },
    // 编辑客户
    handleEdit () {
      this.$refs.edit.title = '编辑客户'
      this.$refs.edit.editForm = { ...this.detail }
      this.$refs.edit.editVisible = true
      this.$refs.edit.showLocation()
    },
    // 编辑联系人
    contactEdit (row) {
      this.$refs.contact.contactForm = { ...row }
      this.$refs.contact.contactVisible = true
    },
    // 删除联系人
    contactDel (row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const [err, res] = await to(api.deleteContact({ Id: row.id, custId: parseInt(this.id) }))
        if (err) return
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.contactSave()
        }
      }).catch(() => {
      })
    },
    // 转移客户
    handleShift () {
      this.$refs.shift.visible = true
    },
    // 移入公海
    handleToOpen () {
      this.$refs.toOpen.form.ids = [parseInt(this.id)]
      this.$refs.toOpen.visible = true
    },
    // 客户删除
    handleDelete () {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const [err, res] = await to(api.deleteCustomer({ Id: parseInt(this.id) }))
        if (err) return
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$router.go(-1)
        }
      }).catch(() => {
      })
    },
    back () {
      this.$router.push('/customer/openSea')
    },
    // 领取
    handleReceive () {
      this.$confirm('确认领取客户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const [err, res] = await to(api.receiveCustomer({ ids: this.id }))
        if (err) return
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '领取成功!'
          });
        }
      }).catch(() => {
      })
    },
    customerSave () {
      this.init()
      this.getDynamics()
    }
  }
}
</script>

<style lang="scss" scoped>
$base: '.detail';
#{$base} {
  height: calc(100vh - 60px - 50px - 12px * 2 - 40px);
  display: flex;
  padding: 20px 40px;
  > .el-row {
    flex: 1;
    > .el-col {
      height: 100%;
    }
  }
  .title {
    p,
    h3 {
      margin: 0;
    }
    p {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
    h3 {
      font-size: 24px;
      font-weight: 500;
      line-height: 36px;
      color: #333;
      display: flex;
      justify-content: space-between;
    }
  }
  header {
    height: 74px;
    background: rgba(196, 196, 196, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 16px;
    ::v-deep .el-descriptions__body {
      background: transparent;
    }
    ::v-deep .my-label {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
    }
    ::v-deep .my-content {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
  }
  .el-tabs {
    height: calc(100% - 148px);
    display: flex;
    flex-direction: column;
    ::v-deep .el-tabs__content {
      flex: 1;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  .buttons {
    padding-top: 26px;
    text-align: right;
    height: 58px;
  }
  .records {
    margin: 0;
    padding: 10px 20px;
    list-style: none;
    height: calc(100% - 58px);
    overflow-y: auto;
    > li {
      display: flex;
      & + li {
        margin-top: 10px;
      }
    }
    .date {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      h2,
      h3 {
        margin: 0;
      }
      h2 {
        font-size: 26px;
        line-height: 32px;
      }
    }
    .content {
      flex: 1;
      list-style: none;
      li {
        display: flex;
        & + li {
          margin-top: 20px;
        }
      }
      .user-avatar {
        font-size: 40px;
      }
      .text {
        padding-left: 20px;
        p {
          font-weight: 500;
          margin: 0;
          line-height: 20px;
          span {
            color: #1d66dc;
          }
        }
        p:nth-child(2) {
          margin-bottom: 10px;
        }
        .action {
          font-weight: bold;
          color: #333;
        }
      }
    }
  }
}
</style>