<template>
  <!-- 表单渲染 -->
  <el-dialog center append-to-body destroy-on-close :close-on-click-modal="false" :show-close="false" :visible="visible" :title="title" top="25vh" width="440px">
    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="80px">
      <el-form-item label="姓名：" class="form-cell" prop="name">
        <div class="cell-box">
          <el-input v-model="formData.name" placeholder="您怎么称呼？" class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="电话：" class="form-cell" prop="phone">
        <div class="cell-box">
          <el-input v-model="formData.phone" placeholder="请输入联系电话" class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="留言：" class="form-cell" prop="content">
        <div class="cell-box">
          <el-input v-model="formData.content" type="textarea" placeholder="请输入咨询内容（300字以内）" maxlength="300" :autosize="{ minRows: 6, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button style="width: 120px;margin: 0 10px" @click="cancelView">取消</el-button>
      <el-button type="primary" style="width: 120px;margin: 0 10px;" @click="submitForm()">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'

export default {
  data() {
    return {
      typeDict: {
        'product': '询 价',
        'project': '方案咨询',
        'software': '软件咨询',
        'course': '课程定制'
      },
      visible: false,
      title: '咨 询',
      formData: {
        name: '',
        phone: '',
        content: ''
      },
      customerId: null,
      productId: null,
      consultType: null,
      rules: {
        name: { required: true, message: '请填写姓名', trigger: 'blur' },
        phone: { required: true, message: '请填写联系电话', trigger: 'blur' },
        content: { required: true, message: '请填写咨询内容', trigger: 'blur' }
      }
    }
  },
  mounted() {
  },
  methods: {
    addDataRow() {
      this.formData.dataList.push({ id: '', index: '' })
    },
    showView() {
      this.visible = true
    },
    hideView() {
      this.$refs.formViewRef.resetFields()
      this.visible = false
    },
    cancelView() {
      this.hideView()
    },
    openTip() {
      this.$alert('我们收到了您的留言讯息，稍后将与您联系。', '完成', {
        confirmButtonText: '确定',
        type: 'success',
        showClose: false,
        center: true,
        callback: action => {
          this.cancelView()
        }
      })
    },
    submitForm() {
      this.$refs.formViewRef.validate((valid, obj) => {
        if (valid) {
          HttpReq.webClientApi.consultationInformation({
            contactPerson: this.formData.name,
            contactPersonPhone: this.formData.phone,
            consultationContent: this.formData.content,
            consultType: this.consultType,
            customerId: this.customerId,
            productId: this.productId
          }).then((res) => {
            if (res.code === 200) {
              this.openTip()
              this.cancelView()
            }
            this.$notify({
              title: res.msg,
              type: res.code === 200 ? 'success' : 'error',
              duration: 2500
            })
          })
        }
      })
    },
    initView(productId, customerId, type, cType) {
      if (this.typeDict[type]) {
        this.title = this.typeDict[type]
      } else {
        this.title = '咨 询'
      }
      if (cType) {
        this.consultType = cType
      }
      this.productId = productId
      this.customerId = customerId
      HttpReq.webClientApi.personalCenterInfo().then((res) => {
        if (res.code === 200) {
          this.showView()
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
>>>.el-dialog__title {
  font-family: Source Han Sans CN;
  font-size: 20px;
  font-weight: bolder;
}
>>>.el-dialog--center .el-dialog__body {
  padding: 10px 25px;
}
.cell-box {
  min-width: 120px;
  .cell-input {
    width: 280px;
  }
  .cell-select {
    width: 220px;
  }
  >>>.el-input__inner {
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 5px;
  }
  >>>.el-input.is-disabled .el-input__inner {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
    background: white;
    cursor: text;
  }
  >>>.el-input.is-disabled .el-input__icon {
    cursor: text;
  }
  >>>.el-icon-circle-check {
    color: #13ce66;
  }
  >>>.el-icon-arrow-up:before {
    content: '';
  }
}
</style>
