<template>
  <el-dialog :close-on-click-modal="false" title="客户详情" width="80%" :visible.sync="visible">
    <div class="customerDetail">
      <div class="detailBox">
        <div class="infoTit">基本信息 <i class="el-icon-edit" @click="changeInfo" /></div>
        <div class="itemBox">
          <div class="itemInfo"><label>客户手机号：</label>{{ customerInfo.phone }}</div>
          <div class="itemInfo"><label>客户昵称：</label>{{ customerInfo.name }}</div>
          <div class="itemInfo"><label>成为客户时间：</label>{{ customerInfo.time }}</div>
        </div>
        <div class="itemBox">
          <div class="itemInfo"><label>来源方式：</label>{{ customerInfo.source }}</div>
          <div class="itemInfo"><label>性别：</label>{{ customerInfo.sex }}</div>
          <div class="itemInfo"><label>生日：</label>{{ customerInfo.birthday ? customerInfo.birthday : '—' }}</div>
        </div>
        <div class="itemBox">
          <div class="itemInfo"><label>客户标签：</label>{{ customerInfo.labelName ? customerInfo.labelName : '—' }}</div>
          <div class="itemInfo"><label>备注：</label>{{ customerInfo.remark ? customerInfo.remark : '无' }}</div>
        </div>
        <div class="tradeInfoTit">交易信息</div>
        <div class="tradeInfo">
          <div class="tradeItem">
            <div class="tradeTit">累积消费金额（元）</div>
            <div class="tradeValue">{{ customerInfo.total ? customerInfo.total : '0' }}</div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">累计消费订单数</div>
            <div class="tradeValue">{{ customerInfo.frequency ? customerInfo.frequency : '0' }}</div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">最近下单时间</div>
            <div class="tradeValue">{{ customerInfo.lastTime ? customerInfo.lastTime : '—' }}</div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">累计退款金额</div>
            <div class="tradeValue">{{ customerInfo.refundMoney ? customerInfo.refundMoney : '0' }}</div>
          </div>
          <div class="tradeItem">
            <div class="tradeTit">累计退款订单数</div>
            <div class="tradeValue">{{ customerInfo.refunds ? customerInfo.refunds : '0' }}</div>
          </div>
        </div>
      </div>
      <!-- 详情弹窗 -->
      <el-dialog
        title="修改客户基本信息"
        :visible.sync="isDataVisible"
        width="30%"
        top="50px"
        class="group-dialog"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :modal="false"
      >
        <div class="changeCustomer">
          <el-form ref="form" :model="basicInfo" label-width="100px">
            <el-form-item label="客户手机号">
              <span>{{ basicInfo.phone }}</span>
            </el-form-item>
            <el-form-item class="inputWide" label="客户昵称">
              <el-input v-model="basicInfo.name" placeholder="请输入内容" maxlength="10" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" show-word-limit />
            </el-form-item>
            <el-form-item class="inputWide" label="性别">
              <el-radio v-model="basicInfo.sex" label="男">男</el-radio>
              <el-radio v-model="basicInfo.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item class="inputWide" label="生日">
              <el-date-picker
                v-model="basicInfo.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item class="inputWide" label="标签">
              <el-select
                v-model="basicInfo.ids"
                multiple
                collapse-tags
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.labelId"
                  :label="item.labelName"
                  :value="item.labelId"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="inputWide" label="备注">
              <el-input
                v-model="basicInfo.remark"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveChangeCustomer">保 存</el-button>
          <el-button @click="closeChange">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import { updateCustomer, getCustomerDetail, getLabelData } from '@/api/customer'
function InitUserInfo() {
  this.birthday = ''
  this.buyerUserId = ''
  this.ids = []
  this.name = ''
  this.phone = ''
  this.remark = ''
  this.sex = ''
}
export default {
  name: 'CustomerDetail',
  data() {
    return {
      visible: false,
      isDataVisible: false,
      userId: 0,
      customerInfo: {}, // 客户详情
      basicInfo: new InitUserInfo(),
      tagList: [] // 标签列表
    }
  },
  methods: {
    show(id) {
      this.visible = true
      if (id) {
        this.userId = id
        this.getCustomerInfo()
        this.getTagList()
      } else {
        this.customerInfo = {}
        this.basicInfo = new InitUserInfo()
      }
    },
    // 修改基本信息
    changeInfo() {
      this.isDataVisible = true
    },
    getCustomerInfo() {
      getCustomerDetail({ buyerUserId: this.userId }).then(res => {
        if (res.code === '') {
          this.customerInfo = res.data
          this.basicInfo.birthday = this.customerInfo.birthday
          this.basicInfo.buyerUserId = this.customerInfo.buyerUserId
          this.basicInfo.ids = this.customerInfo.ids
          this.basicInfo.name = this.customerInfo.name
          this.basicInfo.phone = this.customerInfo.phone
          this.basicInfo.remark = this.customerInfo.remark
          this.basicInfo.sex = this.customerInfo.sex
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    async getTagList() {
      const res = await getLabelData()
      if (res.code === '') {
        this.tagList = res.data
        console.log(this.tagList, 'taglist')
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    },
    saveChangeCustomer() {
      updateCustomer(this.basicInfo).then(res => {
        if (res.code === '') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getCustomerInfo()
          this.isDataVisible = false
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    closeChange() {
      this.isDataVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");

.pending {
  margin: 20px;
}
.customerDetail {
  padding: 0px 0px 100px 0px;
  background: #FFFFFF;
  height: 100%;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
  }
  .detailBox {
    .infoTit {
      margin: 30px 0;
      font-size: 20px;
      color: #333333;
      height: 50px;
      line-height: 50px;
      i {
        cursor: pointer;
      }
    }
    .tradeInfoTit {
      margin: 50px 0 30px 0;
      font-size: 20px;
      color: #333333;
      height: 50px;
      line-height: 50px;
    }
    .itemBox {
      display: flex;
      margin-bottom: 30px;
      .itemInfo {
        width: 350px;
        display: flex;
        color: #666666;
        font-size: 16px;
        label {
          width: 120px;
          text-align: right;
          display: block;
          color: #333333;
        }
      }
    }
    .tradeInfo {
      display: flex;
      .tradeItem {
        width: 250px;
        text-align: center;
        .tradeTit {
          font-size: 16px;
          margin-bottom: 25px;
        }
        .tradeValue {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
<style scoped>
/* .changeCustomer .inputWide /deep/ .el-form-item__content {
  width: 280px;
}
.changeCustomer .inputWide /deep/ .el-select {
  width: 280px;
} */
.customerDetail /deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #FFFFFF;
}
/* .changeCustomer /deep/ .el-date-editor--date {
  width: 280px;
} */
</style>
