<template>
  <!-- 表单渲染 -->
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
    <img v-if="stampImgSrc" :src="stampImgSrc" class="stamp-review">
    <el-form ref="formViewRef" :model="formData" :status-icon="true" label-width="240px">
      <el-form-item label="咨询类型：" class="form-cell" prop="consultType">
        <div class="cell-box">
          <el-select v-model="formData.consultType" disabled placeholder="无" class="cell-select">
            <el-option v-for="item in dict.consult_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType==11" label="产品类型：" class="form-cell" prop="productType">
        <div class="cell-box">
          <el-input v-model="formData.productType" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType==11" label="产品价格区间（元）：" class="form-cell" style="margin: 0">
        <div class="cell-box">
          <div class="cell-textarea">{{ formData.productMinPrice }} ~ {{ formData.productMaxPrice }}</div>
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType==11" label="产品名称：" class="form-cell" prop="productName">
        <div class="cell-box">
          <el-input v-model="formData.productName" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType==11" label="产品需求说明：" class="form-cell" prop="productName">
        <div class="cell-box">
          <div class="cell-textarea">{{ formData.consultationContent }}</div>
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType<8" label="区域：" class="form-cell" prop="area">
        <div class="cell-box">
          <el-select v-model="formData.area" disabled placeholder="无" class="cell-select">
            <el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType<8" label="咨询产品名称：" class="form-cell" prop="productName">
        <div class="cell-box">
          <el-input v-model="formData.productName" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType<8" label="产品ID：" class="form-cell" prop="productId">
        <div class="cell-box">
          <el-input v-model="formData.productId" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType>7 && formData.consultType<11" label="标题：" class="form-cell" prop="title">
        <div class="cell-box">
          <el-input v-model="formData.title" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType<11" label="咨询内容：" class="form-cell" prop="consultationContent">
        <div class="cell-box">
          <div class="cell-textarea">{{ formData.consultationContent }}</div>
        </div>
      </el-form-item>
      <el-form-item v-if="formData.consultType<8" label="咨询企业名称：" class="form-cell" prop="consultEnterprise">
        <div class="cell-box">
          <el-input v-model="formData.consultEnterprise" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="咨询人：" class="form-cell" prop="contactPerson">
        <div class="cell-box">
          <el-input v-model="formData.contactPerson" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="咨询人电话：" class="form-cell" prop="contactPersonPhone">
        <div class="cell-box">
          <el-input v-model="formData.contactPersonPhone" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="电子邮箱：" class="form-cell" prop="contactPersonEmail">
        <div class="cell-box">
          <el-input v-model="formData.contactPersonEmail" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="联系地址：" class="form-cell" prop="contactPersonAddress">
        <div class="cell-box">
          <el-input v-model="formData.contactPersonAddress" disabled class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="处理状态：" class="form-cell" prop="consult_status">
        <div class="cell-box">
          <el-select v-model="formData.status" disabled class="cell-select">
            <el-option v-for="item in dict.consult_status" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="cancelView">关闭</el-button>
      <el-button v-if="formData.status==='2'" type="primary" @click="submitForm(true)">处理</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { HttpReq } from '@/api/common'

export default {
  dicts: ['consult_type', 'area_province', 'consult_status'],
  data() {
    return {
      stampImgSrc: '',
      visible: false,
      title: '咨询信息详情',
      informationId: null,
      formData: {
        area: '',
        status: '1'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    showView() {
      this.visible = true
    },
    hideView() {
      this.visible = false
    },
    cancelView() {
      this.hideView()
      this.stampImgSrc = ''
    },
    submitForm() {
      HttpReq.backstageApi.batchInformationProcessing({
        ids: [this.informationId]
      }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        if (res.code === 200) {
          this.cancelView()
          this.$parent.loadData()
        }
      })
    },
    loadData(informationId) {
      this.informationId = informationId
      HttpReq.backstageApi.queryInformationDetail({ informationId }).then((res) => {
        if (res.code === 200) {
          this.formData = res.data
          this.showView()
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.divider {
  width: 100%;
  border-bottom: 1px dashed rgba(100, 100, 100, 0.4);
}
.stamp-review {
  border-style: none;
  position: absolute;
  right: 15%;
  top: 40%;
  z-index: 99;
}
.cell-box {
  min-width: 120px;
  .cell-input {
    width: 420px;
  }
  .cell-select {
    width: 220px;
  }
  .cell-textarea {
    min-height: 50px;
    color: #777;
    font-style: oblique;
    font-size: 14px;
    text-decoration: underline; //下划线
    text-underline-offset: 5px; //下划线和文字间距
    text-decoration-color: rgba(100, 100, 100, 0.4);
  }
  >>>.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;
    color: #777;
    font-style: oblique;
    font-size: 14px;
    cursor: text;
  }
  >>>.el-input.is-disabled .el-input__icon {
    cursor: text;
  }
  >>>.el-icon-circle-check {
    color: #13ce66;
  }
  >>>.el-icon-arrow-up:before {
    content: '';
  }
}
</style>
